@threekit-tools/treble 0.0.53 → 0.0.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/components/FlatForm/index.js +24 -3
  2. package/dist/components/TextInput/index.d.ts +11 -0
  3. package/dist/components/TextInput/index.js +27 -0
  4. package/dist/components/TextInput/textInput.styles.d.ts +1 -0
  5. package/dist/components/TextInput/textInput.styles.js +13 -0
  6. package/dist/components/Upload/index.d.ts +1 -1
  7. package/dist/components/Upload/index.js +38 -11
  8. package/dist/components/Upload/upload.styles.d.ts +4 -1
  9. package/dist/components/Upload/upload.styles.js +10 -5
  10. package/dist/components/UploadArea/index.d.ts +12 -0
  11. package/dist/components/UploadArea/index.js +137 -0
  12. package/dist/components/UploadArea/uploadArea.styles.d.ts +7 -0
  13. package/dist/components/UploadArea/uploadArea.styles.js +16 -0
  14. package/dist/components/containers/formInputContainer.d.ts +4 -2
  15. package/dist/components/formComponents.d.ts +4 -1
  16. package/dist/components/formComponents.js +14 -6
  17. package/dist/hooks/useAttribute/index.d.ts +1 -1
  18. package/dist/hooks/useAttribute/index.js +11 -7
  19. package/dist/icons/Spinner.d.ts +10 -0
  20. package/dist/icons/Spinner.js +38 -0
  21. package/dist/icons/index.d.ts +3 -2
  22. package/dist/icons/index.js +4 -1
  23. package/dist/utils.d.ts +1 -1
  24. package/package.json +1 -1
package/dist/components/FlatForm/index.js CHANGED
@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
10
10
  };
11
11
  return __assign.apply(this, arguments);
12
12
  };
13
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
14
+ if (k2 === undefined) k2 = k;
15
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
16
+ }) : (function(o, m, k, k2) {
17
+ if (k2 === undefined) k2 = k;
18
+ o[k2] = m[k];
19
+ }));
20
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
21
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
22
+ }) : function(o, v) {
23
+ o["default"] = v;
24
+ });
25
+ var __importStar = (this && this.__importStar) || function (mod) {
26
+ if (mod && mod.__esModule) return mod;
27
+ var result = {};
28
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
29
+ __setModuleDefault(result, mod);
30
+ return result;
31
+ };
13
32
  var __importDefault = (this && this.__importDefault) || function (mod) {
14
33
  return (mod && mod.__esModule) ? mod : { "default": mod };
15
34
  };
@@ -20,7 +39,7 @@ var prop_types_1 = __importDefault(require("prop-types"));
20
39
  var flatForm_styles_1 = require("./flatForm.styles");
21
40
  var ProductName_1 = __importDefault(require("../ProductName"));
22
41
  var ProductDescription_1 = __importDefault(require("../ProductDescription"));
23
- var formComponents_1 = __importDefault(require("../formComponents"));
42
+ var formComponents_1 = __importStar(require("../formComponents"));
24
43
  var utils_1 = require("../../utils");
25
44
  var useConfigurator_1 = __importDefault(require("../../hooks/useConfigurator"));
26
45
  var constants_1 = require("../../constants");
@@ -45,10 +64,12 @@ var FlatForm = function (props) {
45
64
  var Component;
46
65
  var props = ((_b = (_a = (attributes || {})) === null || _a === void 0 ? void 0 : _a[attr.name]) === null || _b === void 0 ? void 0 : _b.props) || {};
47
66
  var type = attr.type;
48
- if (type === 'Asset' &&
49
- attr.assetType === constants_1.ASSET_TYPES.upload) {
67
+ if (attr.type === 'Asset' && attr.assetType === constants_1.ASSET_TYPES.upload) {
50
68
  type = attr.assetType;
51
69
  }
70
+ else if (attr.type === 'String' && attr.values.length === 0) {
71
+ type = formComponents_1.FORM_COMPONENT_TYPES.stringInput;
72
+ }
52
73
  if ((_d = (_c = (attributes || {})) === null || _c === void 0 ? void 0 : _c[attr.name]) === null || _d === void 0 ? void 0 : _d.component) {
53
74
  Component = (_e = Object.entries(formComponents_1.default[type] || {}).find(function (_a) {
54
75
  var _b, _c;
package/dist/components/TextInput/index.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import { IFormComponentProps } from '../containers/formInputContainer';
3
+ export interface ITextInput extends IFormComponentProps<undefined> {
4
+ }
5
+ export declare const TextInput: {
6
+ (props: ITextInput): JSX.Element;
7
+ componentName: string;
8
+ compatibleAttributes: Set<string>;
9
+ };
10
+ declare const _default: (props: ITextInput) => JSX.Element | null;
11
+ export default _default;
package/dist/components/TextInput/index.js ADDED
@@ -0,0 +1,27 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.TextInput = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ // import PropTypes from 'prop-types';
9
+ var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
10
+ var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
11
+ var textInput_styles_1 = require("./textInput.styles");
12
+ var shared_styles_1 = require("../shared.styles");
13
+ var utils_1 = require("../../utils");
14
+ var constants_1 = require("../../constants");
15
+ var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
16
+ var TextInput = function (props) {
17
+ var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
18
+ var cls = (0, utils_1.generateInputClassName)('text-input', customClassName, title);
19
+ return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, { className: cls },
20
+ react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
21
+ react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
22
+ react_1.default.createElement(textInput_styles_1.Input, { type: "text", value: value, onChange: function (e) { return onChange && onChange(e.target.value); }, className: cls })));
23
+ };
24
+ exports.TextInput = TextInput;
25
+ exports.TextInput.componentName = 'text-input';
26
+ exports.TextInput.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.string]);
27
+ exports.default = (0, formInputContainer_1.default)(exports.TextInput);
package/dist/components/TextInput/textInput.styles.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
package/dist/components/TextInput/textInput.styles.js ADDED
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __importDefault = (this && this.__importDefault) || function (mod) {
7
+ return (mod && mod.__esModule) ? mod : { "default": mod };
8
+ };
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ exports.Input = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ exports.Input = styled_components_1.default.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n margin: 0;\n padding: 10px 6px;\n background: #fff;\n border: 1px solid #d9d9d9;\n color: ", ";\n outline: none;\n border-radius: 2px;\n font-size: 14px;\n transition: all 0.3s;\n font-family: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:focus {\n border-color: ", ";\n box-shadow: 0 0 0 2px ", ";\n }\n"], ["\n width: 100%;\n margin: 0;\n padding: 10px 6px;\n background: #fff;\n border: 1px solid #d9d9d9;\n color: ", ";\n outline: none;\n border-radius: 2px;\n font-size: 14px;\n transition: all 0.3s;\n font-family: ", ";\n\n &:hover {\n border-color: ", ";\n }\n\n &:focus {\n border-color: ", ";\n box-shadow: 0 0 0 2px ", ";\n }\n"])), function (props) { return props.theme.textColor; }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return "".concat(props.theme.primaryColor, "33"); });
13
+ var templateObject_1;
package/dist/components/Upload/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
3
3
  export interface IUpload extends Pick<IFormComponentProps<IOptionShared>, 'title' | 'description' | 'className' | 'value'> {
4
- onChange: (file: File) => Promise<void>;
4
+ onChange: (file: File | undefined) => Promise<void>;
5
5
  }
6
6
  export declare const Upload: {
7
7
  (props: IUpload): JSX.Element;
package/dist/components/Upload/index.js CHANGED
@@ -60,31 +60,48 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
60
60
  Object.defineProperty(exports, "__esModule", { value: true });
61
61
  exports.Upload = void 0;
62
62
  var react_1 = __importStar(require("react"));
63
- var upload_styles_1 = require("./upload.styles");
64
63
  var constants_1 = require("../../constants");
65
64
  var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
66
65
  var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
67
66
  var shared_styles_1 = require("../shared.styles");
68
67
  var utils_1 = require("../../utils");
68
+ var icons_1 = require("../../icons");
69
69
  var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
70
+ var upload_styles_1 = require("./upload.styles");
70
71
  var Upload = function (props) {
71
72
  var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
72
- var _a = (0, react_1.useState)(false), uploading = _a[0], setUploading = _a[1];
73
- var inputRef = (0, react_1.createRef)();
73
+ var _a = (0, react_1.useState)(false), isUploading = _a[0], setIsUploading = _a[1];
74
+ var inputRef = (0, react_1.useRef)(null);
75
+ var imgRef = (0, react_1.useRef)(null);
74
76
  var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
75
77
  var handleClick = function () {
76
78
  var _a;
79
+ if (isUploading)
80
+ return;
81
+ if (value === null || value === void 0 ? void 0 : value.length)
82
+ return;
77
83
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
78
84
  };
79
85
  var handleUpload = function (file) { return __awaiter(void 0, void 0, void 0, function () {
86
+ var reader;
80
87
  return __generator(this, function (_a) {
81
88
  switch (_a.label) {
82
89
  case 0:
83
- setUploading(true);
90
+ setIsUploading(true);
84
91
  return [4 /*yield*/, onChange(file)];
85
92
  case 1:
86
93
  _a.sent();
87
- setUploading(false);
94
+ setIsUploading(false);
95
+ if (!file)
96
+ return [2 /*return*/];
97
+ reader = new FileReader();
98
+ reader.onload = function () {
99
+ if (!imgRef.current)
100
+ return;
101
+ // @ts-ignore
102
+ imgRef.current.src = reader.result;
103
+ };
104
+ reader.readAsDataURL(file);
88
105
  return [2 /*return*/];
89
106
  }
90
107
  });
@@ -92,7 +109,7 @@ var Upload = function (props) {
92
109
  return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, null,
93
110
  react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
94
111
  react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
95
- react_1.default.createElement(upload_styles_1.UploadWrapper, { className: cls },
112
+ react_1.default.createElement(upload_styles_1.UploadWrapper, { className: cls, uploaded: !!(!isUploading && (value === null || value === void 0 ? void 0 : value.length)) },
96
113
  react_1.default.createElement("input", { type: "file", ref: inputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
97
114
  var _a;
98
115
  return __generator(this, function (_b) {
@@ -102,11 +119,21 @@ var Upload = function (props) {
102
119
  return [2 /*return*/];
103
120
  });
104
121
  }); } }),
105
- react_1.default.createElement("button", { type: "button", onClick: handleClick }, (value === null || value === void 0 ? void 0 : value.length)
106
- ? 'Uploaded'
107
- : uploading
108
- ? 'Uploading...'
109
- : 'Upload a file'))));
122
+ react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(react_1.default.Fragment, null,
123
+ react_1.default.createElement(upload_styles_1.IconWrapper, null,
124
+ react_1.default.createElement(icons_1.SpinnerIcon, { size: "28px" })),
125
+ react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(upload_styles_1.ImageWrapper, null,
126
+ react_1.default.createElement("div", null,
127
+ react_1.default.createElement("img", { ref: imgRef, src: "#" })),
128
+ react_1.default.createElement(upload_styles_1.ImageActionArea, null,
129
+ react_1.default.createElement("div", { onClick: function (e) {
130
+ handleUpload(undefined);
131
+ e.stopPropagation();
132
+ } },
133
+ react_1.default.createElement(icons_1.DeleteIcon, null))))) : (react_1.default.createElement(react_1.default.Fragment, null,
134
+ react_1.default.createElement(upload_styles_1.IconWrapper, null,
135
+ react_1.default.createElement(icons_1.AddIcon, null)),
136
+ react_1.default.createElement("div", null, "Upload")))))));
110
137
  };
111
138
  exports.Upload = Upload;
112
139
  exports.Upload.componentName = 'upload';
package/dist/components/Upload/upload.styles.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  interface IUploadWrapper {
2
2
  fullWidth?: boolean;
3
- iconOnly?: boolean;
3
+ uploaded: boolean;
4
4
  }
5
5
  export declare const UploadWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IUploadWrapper, never>;
6
+ export declare const ImageWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
+ export declare const ImageActionArea: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
8
+ export declare const IconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
6
9
  export {};
package/dist/components/Upload/upload.styles.js CHANGED
@@ -7,9 +7,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
7
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
8
8
  };
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
- exports.UploadWrapper = void 0;
10
+ exports.IconWrapper = exports.ImageActionArea = exports.ImageWrapper = exports.UploadWrapper = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
- exports.UploadWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n overflow: hidden;\n display: inline-block;\n\n & button {\n height: 40px;\n width: ", ";\n padding: ", ";\n overflow: hidden;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n background: white;\n cursor: pointer;\n border-radius: ", ";\n border: 1px solid ", ";\n transition: all 0.16s ease-in-out;\n }\n\n & button:hover {\n border: 1px solid ", ";\n color: ", ";\n }\n\n & input[type='file'] {\n display: none;\n }\n"], ["\n position: relative;\n overflow: hidden;\n display: inline-block;\n\n & button {\n height: 40px;\n width: ", ";\n padding: ", ";\n overflow: hidden;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n background: white;\n cursor: pointer;\n border-radius: ", ";\n border: 1px solid ", ";\n transition: all 0.16s ease-in-out;\n }\n\n & button:hover {\n border: 1px solid ", ";\n color: ", ";\n }\n\n & input[type='file'] {\n display: none;\n }\n"])), function (props) {
13
- return props.fullWidth ? '100%' : props.iconOnly ? '40px' : 'max-content';
14
- }, function (props) { return (props.iconOnly ? '0px' : '10px 16px'); }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.fontBaseSize; }, function (props) { return props.theme.textColor; }, function (props) { return props.theme.borderRadius || '2px'; }, function (props) { return props.theme.textColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; });
15
- var templateObject_1;
12
+ var SIZE = '110px';
13
+ var PADDING = '6px';
14
+ exports.UploadWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n overflow: hidden;\n display: inline-block;\n\n & button {\n height: ", ";\n width: ", ";\n /* padding: 6px; */\n overflow: hidden;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n text-align: center;\n background: white;\n cursor: ", ";\n border-radius: ", ";\n border: 1px\n ", ";\n transition: all 0.16s ease-in-out;\n\n img {\n height: 100%;\n width: 100%;\n }\n }\n\n .tk-icon {\n transition: all 0.16s ease-in-out;\n }\n\n & button:hover {\n border-color: ", ";\n color: ", ";\n\n .tk-icon {\n ", ";\n }\n }\n\n & input[type='file'] {\n display: none;\n }\n"], ["\n position: relative;\n overflow: hidden;\n display: inline-block;\n\n & button {\n height: ", ";\n width: ", ";\n /* padding: 6px; */\n overflow: hidden;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n text-align: center;\n background: white;\n cursor: ", ";\n border-radius: ", ";\n border: 1px\n ", ";\n transition: all 0.16s ease-in-out;\n\n img {\n height: 100%;\n width: 100%;\n }\n }\n\n .tk-icon {\n transition: all 0.16s ease-in-out;\n }\n\n & button:hover {\n border-color: ", ";\n color: ", ";\n\n .tk-icon {\n ", ";\n }\n }\n\n & input[type='file'] {\n display: none;\n }\n"])), SIZE, function (props) { return (props.fullWidth ? '100%' : SIZE); }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.fontBaseSize; }, function (props) { return props.theme.textColor; }, function (props) { return (props.uploaded ? 'default' : 'pointer'); }, function (props) { return props.theme.borderRadius || '2px'; }, function (props) {
15
+ return "".concat(props.uploaded ? 'solid' : 'dashed', " ").concat(props.theme.borderColorBase);
16
+ }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return (props.uploaded ? '' : "stroke: ".concat(props.theme.primaryColor)); });
17
+ exports.ImageWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n\n & > div {\n height: calc(", " - (2 * (", " + 1px)));\n width: calc(", " - (2 * (", " + 1px)));\n }\n"], ["\n position: relative;\n\n & > div {\n height: calc(", " - (2 * (", " + 1px)));\n width: calc(", " - (2 * (", " + 1px)));\n }\n"])), SIZE, PADDING, SIZE, PADDING);
18
+ exports.ImageActionArea = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 0;\n left: 0;\n height: calc(", " - (2 * (", " + 1px)));\n width: calc(", " - (2 * (", " + 1px)));\n\n transition: all 0.3s;\n\n &:hover {\n background: rgba(0, 0, 0, 0.6);\n\n & > div {\n opacity: 1;\n }\n }\n\n & > div {\n opacity: 0;\n cursor: pointer;\n }\n\n & > div:hover {\n .tk-icon {\n stroke: ", ";\n }\n }\n\n .tk-icon {\n stroke: white;\n }\n\n & > div {\n height: max-content;\n width: max-content;\n position: relative;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n"], ["\n position: absolute;\n top: 0;\n left: 0;\n height: calc(", " - (2 * (", " + 1px)));\n width: calc(", " - (2 * (", " + 1px)));\n\n transition: all 0.3s;\n\n &:hover {\n background: rgba(0, 0, 0, 0.6);\n\n & > div {\n opacity: 1;\n }\n }\n\n & > div {\n opacity: 0;\n cursor: pointer;\n }\n\n & > div:hover {\n .tk-icon {\n stroke: ", ";\n }\n }\n\n .tk-icon {\n stroke: white;\n }\n\n & > div {\n height: max-content;\n width: max-content;\n position: relative;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n"])), SIZE, PADDING, SIZE, PADDING, function (props) { return props.theme.primaryColor; });
19
+ exports.IconWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-bottom: 12px;\n"], ["\n margin-bottom: 12px;\n"])));
20
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/components/UploadArea/index.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import { IFormComponentProps, IOptionShared } from '../containers/formInputContainer';
3
+ export interface IUpload extends Pick<IFormComponentProps<IOptionShared>, 'title' | 'description' | 'className' | 'value'> {
4
+ onChange: (file: File) => Promise<void>;
5
+ }
6
+ export declare const UploadArea: {
7
+ (props: IUpload): JSX.Element;
8
+ componentName: string;
9
+ compatibleAttributes: Set<string>;
10
+ };
11
+ declare const _default: (props: IUpload) => JSX.Element | null;
12
+ export default _default;
package/dist/components/UploadArea/index.js ADDED
@@ -0,0 +1,137 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
5
+ }) : (function(o, m, k, k2) {
6
+ if (k2 === undefined) k2 = k;
7
+ o[k2] = m[k];
8
+ }));
9
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
10
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
11
+ }) : function(o, v) {
12
+ o["default"] = v;
13
+ });
14
+ var __importStar = (this && this.__importStar) || function (mod) {
15
+ if (mod && mod.__esModule) return mod;
16
+ var result = {};
17
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
18
+ __setModuleDefault(result, mod);
19
+ return result;
20
+ };
21
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
22
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
23
+ return new (P || (P = Promise))(function (resolve, reject) {
24
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
25
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
26
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
27
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
28
+ });
29
+ };
30
+ var __generator = (this && this.__generator) || function (thisArg, body) {
31
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
32
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
33
+ function verb(n) { return function (v) { return step([n, v]); }; }
34
+ function step(op) {
35
+ if (f) throw new TypeError("Generator is already executing.");
36
+ while (_) try {
37
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
38
+ if (y = 0, t) op = [op[0] & 2, t.value];
39
+ switch (op[0]) {
40
+ case 0: case 1: t = op; break;
41
+ case 4: _.label++; return { value: op[1], done: false };
42
+ case 5: _.label++; y = op[1]; op = [0]; continue;
43
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
44
+ default:
45
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
46
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
47
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
48
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
49
+ if (t[2]) _.ops.pop();
50
+ _.trys.pop(); continue;
51
+ }
52
+ op = body.call(thisArg, _);
53
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
54
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
55
+ }
56
+ };
57
+ var __importDefault = (this && this.__importDefault) || function (mod) {
58
+ return (mod && mod.__esModule) ? mod : { "default": mod };
59
+ };
60
+ Object.defineProperty(exports, "__esModule", { value: true });
61
+ exports.UploadArea = void 0;
62
+ var react_1 = __importStar(require("react"));
63
+ var constants_1 = require("../../constants");
64
+ var FormComponentTitle_1 = __importDefault(require("../FormComponentTitle"));
65
+ var FormComponentDescription_1 = __importDefault(require("../FormComponentDescription"));
66
+ var shared_styles_1 = require("../shared.styles");
67
+ var utils_1 = require("../../utils");
68
+ var icons_1 = require("../../icons");
69
+ var formInputContainer_1 = __importDefault(require("../containers/formInputContainer"));
70
+ var uploadArea_styles_1 = require("./uploadArea.styles");
71
+ var UploadArea = function (props) {
72
+ var title = props.title, description = props.description, value = props.value, onChange = props.onChange, customClassName = props.className;
73
+ var _a = (0, react_1.useState)(false), isUploading = _a[0], setIsUploading = _a[1];
74
+ var _b = (0, react_1.useState)(undefined), filename = _b[0], setFilename = _b[1];
75
+ var inputRef = (0, react_1.useRef)(null);
76
+ var imgRef = (0, react_1.useRef)(null);
77
+ var cls = (0, utils_1.generateInputClassName)('upload', customClassName, title);
78
+ var handleClick = function () {
79
+ var _a;
80
+ if (isUploading)
81
+ return;
82
+ (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
83
+ };
84
+ var handleUpload = function (file) { return __awaiter(void 0, void 0, void 0, function () {
85
+ var reader;
86
+ return __generator(this, function (_a) {
87
+ switch (_a.label) {
88
+ case 0:
89
+ setIsUploading(true);
90
+ return [4 /*yield*/, onChange(file)];
91
+ case 1:
92
+ _a.sent();
93
+ setIsUploading(false);
94
+ setFilename(file.name);
95
+ reader = new FileReader();
96
+ reader.onload = function () {
97
+ if (!imgRef.current)
98
+ return;
99
+ // @ts-ignore
100
+ imgRef.current.src = reader.result;
101
+ };
102
+ reader.readAsDataURL(file);
103
+ return [2 /*return*/];
104
+ }
105
+ });
106
+ }); };
107
+ return (react_1.default.createElement(shared_styles_1.FormComponentWrapper, null,
108
+ react_1.default.createElement(FormComponentTitle_1.default, { title: title, className: cls }),
109
+ react_1.default.createElement(FormComponentDescription_1.default, { description: description, className: cls }),
110
+ react_1.default.createElement(uploadArea_styles_1.UploadWrapper, { className: cls },
111
+ react_1.default.createElement("input", { type: "file", ref: inputRef, onChange: function (e) { return __awaiter(void 0, void 0, void 0, function () {
112
+ var _a;
113
+ return __generator(this, function (_b) {
114
+ if (!((_a = e.target.files) === null || _a === void 0 ? void 0 : _a[0]) || !onChange)
115
+ return [2 /*return*/];
116
+ handleUpload(e.target.files[0]);
117
+ return [2 /*return*/];
118
+ });
119
+ }); } }),
120
+ react_1.default.createElement("button", { type: "button", onClick: handleClick }, isUploading ? (react_1.default.createElement(uploadArea_styles_1.UploadingWrapper, null,
121
+ react_1.default.createElement("div", null,
122
+ react_1.default.createElement(icons_1.SpinnerIcon, { size: "28px" })),
123
+ react_1.default.createElement("div", null, "Uploading..."))) : (value === null || value === void 0 ? void 0 : value.length) ? (react_1.default.createElement(uploadArea_styles_1.UploadingWrapper, null,
124
+ react_1.default.createElement("div", null,
125
+ react_1.default.createElement("img", { ref: imgRef, src: "#" })),
126
+ react_1.default.createElement("div", null,
127
+ react_1.default.createElement("div", null, filename),
128
+ react_1.default.createElement("div", null, "Upload another file.")))) : (react_1.default.createElement("div", null,
129
+ react_1.default.createElement("div", null,
130
+ react_1.default.createElement(icons_1.ImageIcon, null)),
131
+ react_1.default.createElement("div", null, "Click to upload"),
132
+ react_1.default.createElement("div", null, "Supported file types: PNG, JPEG, SVG")))))));
133
+ };
134
+ exports.UploadArea = UploadArea;
135
+ exports.UploadArea.componentName = 'upload-area';
136
+ exports.UploadArea.compatibleAttributes = new Set([constants_1.ATTRIBUTE_TYPES.asset]);
137
+ exports.default = (0, formInputContainer_1.default)(exports.UploadArea);
package/dist/components/UploadArea/uploadArea.styles.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ interface IUploadWrapper {
2
+ fullWidth?: boolean;
3
+ iconOnly?: boolean;
4
+ }
5
+ export declare const UploadWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IUploadWrapper, never>;
6
+ export declare const UploadingWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
+ export {};
package/dist/components/UploadArea/uploadArea.styles.js ADDED
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __importDefault = (this && this.__importDefault) || function (mod) {
7
+ return (mod && mod.__esModule) ? mod : { "default": mod };
8
+ };
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ exports.UploadingWrapper = exports.UploadWrapper = void 0;
11
+ var styled_components_1 = __importDefault(require("styled-components"));
12
+ exports.UploadWrapper = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n overflow: hidden;\n display: inline-block;\n\n & button {\n min-height: 40px;\n height: max-content;\n width: ", ";\n padding: ", ";\n overflow: hidden;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n text-align: center;\n background: white;\n cursor: pointer;\n border-radius: ", ";\n border: 1px solid ", ";\n transition: all 0.16s ease-in-out;\n }\n\n .tk-icon {\n transition: all 0.16s ease-in-out;\n }\n\n & button:hover {\n border: 1px solid ", ";\n color: ", ";\n\n .tk-icon {\n stroke: ", ";\n }\n }\n\n & input[type='file'] {\n display: none;\n }\n"], ["\n position: relative;\n overflow: hidden;\n display: inline-block;\n\n & button {\n min-height: 40px;\n height: max-content;\n width: ", ";\n padding: ", ";\n overflow: hidden;\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n text-align: center;\n background: white;\n cursor: pointer;\n border-radius: ", ";\n border: 1px solid ", ";\n transition: all 0.16s ease-in-out;\n }\n\n .tk-icon {\n transition: all 0.16s ease-in-out;\n }\n\n & button:hover {\n border: 1px solid ", ";\n color: ", ";\n\n .tk-icon {\n stroke: ", ";\n }\n }\n\n & input[type='file'] {\n display: none;\n }\n"])), function (props) {
13
+ return props.fullWidth ? '100%' : props.iconOnly ? '40px' : 'max-content';
14
+ }, function (props) { return (props.iconOnly ? '0px' : '10px 16px'); }, function (props) { return props.theme.fontFamily; }, function (props) { return props.theme.fontBaseSize; }, function (props) { return props.theme.textColor; }, function (props) { return props.theme.borderRadius || '2px'; }, function (props) { return props.theme.borderColorBase; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.primaryColor; });
15
+ exports.UploadingWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: grid;\n grid-template-columns: max-content max-content;\n grid-gap: 8px;\n\n & > div {\n height: max-content;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n }\n\n img {\n height: 72px;\n }\n"], ["\n display: grid;\n grid-template-columns: max-content max-content;\n grid-gap: 8px;\n\n & > div {\n height: max-content;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n }\n\n img {\n height: 72px;\n }\n"])));
16
+ var templateObject_1, templateObject_2;
package/dist/components/containers/formInputContainer.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { FunctionComponent } from 'react';
2
+ import { RawAttributeValue } from '../../hooks/useAttribute';
2
3
  import { IDisplayAttributeAssetValue, IThreekitDisplayAttribute } from '../../threekit';
3
4
  export interface IOptionShared {
4
5
  name: string;
@@ -23,10 +24,11 @@ export interface IFormContainerProps extends Pick<MetadataKeys, 'metadataKeyThum
23
24
  title?: string;
24
25
  description?: string;
25
26
  value?: string;
26
- onClick?: (value: string) => void;
27
+ onClick?: (value: RawAttributeValue) => Promise<void>;
28
+ onChange?: (value: RawAttributeValue) => Promise<void>;
27
29
  className?: string;
28
30
  }
29
- export interface IFormComponentProps<T extends IOptionShared | undefined> extends Pick<IFormContainerProps, 'title' | 'description' | 'value' | 'onClick' | 'className'> {
31
+ export interface IFormComponentProps<T extends IOptionShared | undefined> extends Pick<IFormContainerProps, 'title' | 'description' | 'value' | 'onClick' | 'onChange' | 'className'> {
30
32
  options: null | undefined | Array<T>;
31
33
  }
32
34
  export interface IFormComponent<P> extends FunctionComponent<P> {
package/dist/components/formComponents.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  /// <reference types="react" />
2
+ export declare const FORM_COMPONENT_TYPES: {
3
+ stringInput: string;
4
+ };
2
5
  export declare const formComponents: {
3
6
  [x: string]: {
4
- [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null);
7
+ [x: string]: ((props: import("./Cards").ICards) => JSX.Element | null) | ((props: import("./Tiles").ITiles) => JSX.Element | null) | ((props: import("./TextInput").ITextInput) => JSX.Element | null);
5
8
  } | {
6
9
  [x: string]: (props: import("./Upload").IUpload) => JSX.Element | null;
7
10
  };
package/dist/components/formComponents.js CHANGED
@@ -18,9 +18,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
18
18
  __setModuleDefault(result, mod);
19
19
  return result;
20
20
  };
21
- var _a, _b, _c, _d;
21
+ var _a, _b, _c, _d, _e;
22
22
  Object.defineProperty(exports, "__esModule", { value: true });
23
- exports.formComponents = void 0;
23
+ exports.formComponents = exports.FORM_COMPONENT_TYPES = void 0;
24
24
  var constants_1 = require("../constants");
25
25
  var Cards_1 = __importStar(require("./Cards"));
26
26
  var Dropdown_1 = __importStar(require("./Dropdown"));
@@ -29,9 +29,14 @@ var Swatch_1 = __importStar(require("./Swatch"));
29
29
  var Tiles_1 = __importStar(require("./Tiles"));
30
30
  var TilesGroup_1 = __importStar(require("./TilesGroup"));
31
31
  var Upload_1 = __importStar(require("./Upload"));
32
+ // import UploadArea, { UploadArea as UploadAreaComponent } from './UploadArea';
33
+ var TextInput_1 = __importStar(require("./TextInput"));
34
+ exports.FORM_COMPONENT_TYPES = {
35
+ stringInput: 'string-input',
36
+ };
37
+ // First option for each attribute type is the default value
32
38
  exports.formComponents = (_a = {},
33
39
  _a[constants_1.ATTRIBUTE_TYPES.asset] = (_b = {},
34
- // First option is default
35
40
  _b[Strips_1.Strips.componentName] = Strips_1.default,
36
41
  _b[Cards_1.Cards.componentName] = Cards_1.default,
37
42
  _b[Dropdown_1.Dropdown.componentName] = Dropdown_1.default,
@@ -40,16 +45,19 @@ exports.formComponents = (_a = {},
40
45
  _b[TilesGroup_1.TilesGroup.componentName] = TilesGroup_1.default,
41
46
  _b),
42
47
  _a[constants_1.ATTRIBUTE_TYPES.string] = (_c = {},
43
- // First option is default
44
48
  _c[Tiles_1.Tiles.componentName] = Tiles_1.default,
45
49
  _c[Dropdown_1.Dropdown.componentName] = Dropdown_1.default,
46
50
  _c[Cards_1.Cards.componentName] = Cards_1.default,
47
51
  _c[Strips_1.Strips.componentName] = Strips_1.default,
48
52
  _c[Swatch_1.Swatch.componentName] = Swatch_1.default,
49
53
  _c[TilesGroup_1.TilesGroup.componentName] = TilesGroup_1.default,
54
+ _c[TextInput_1.TextInput.componentName] = TextInput_1.default,
50
55
  _c),
51
- _a[constants_1.ASSET_TYPES.upload] = (_d = {},
52
- _d[Upload_1.Upload.componentName] = Upload_1.default,
56
+ _a[exports.FORM_COMPONENT_TYPES.stringInput] = (_d = {},
57
+ _d[TextInput_1.TextInput.componentName] = TextInput_1.default,
53
58
  _d),
59
+ _a[constants_1.ASSET_TYPES.upload] = (_e = {},
60
+ _e[Upload_1.Upload.componentName] = Upload_1.default,
61
+ _e),
54
62
  _a);
55
63
  exports.default = exports.formComponents;
package/dist/hooks/useAttribute/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { IThreekitDisplayAttribute, IConfigurationColor } from '../../threekit';
2
- export declare type RawAttributeValue = string | number | boolean | IConfigurationColor | File;
2
+ export declare type RawAttributeValue = string | number | boolean | IConfigurationColor | File | undefined;
3
3
  declare type UseAttributeError = [undefined, undefined];
4
4
  declare type UseAttributeSuccess = [
5
5
  IThreekitDisplayAttribute,
package/dist/hooks/useAttribute/index.js CHANGED
@@ -61,17 +61,21 @@ var useAttribute = function (attributeName) {
61
61
  switch (_b.label) {
62
62
  case 0:
63
63
  if (!(attribute.type === 'Asset' &&
64
- attribute.assetType === constants_1.ASSET_TYPES.upload)) return [3 /*break*/, 2];
65
- return [4 /*yield*/, api_1.default.catalog.uploadAsset(value)];
66
- case 1:
64
+ attribute.assetType === constants_1.ASSET_TYPES.upload)) return [3 /*break*/, 4];
65
+ if (!!value) return [3 /*break*/, 1];
66
+ preppedValue = (0, utils_1.selectionToConfiguration)('', attribute.type);
67
+ return [3 /*break*/, 3];
68
+ case 1: return [4 /*yield*/, api_1.default.catalog.uploadAsset(value)];
69
+ case 2:
67
70
  assetId = _b.sent();
68
71
  if (assetId)
69
72
  preppedValue = (0, utils_1.selectionToConfiguration)(assetId, attribute.type);
70
- return [3 /*break*/, 3];
71
- case 2:
72
- preppedValue = (0, utils_1.selectionToConfiguration)(value, attribute.type);
73
73
  _b.label = 3;
74
- case 3:
74
+ case 3: return [3 /*break*/, 5];
75
+ case 4:
76
+ preppedValue = (0, utils_1.selectionToConfiguration)(value, attribute.type);
77
+ _b.label = 5;
78
+ case 5:
75
79
  dispatch((0, attributes_1.setConfiguration)((_a = {},
76
80
  _a[attributeName] = preppedValue,
77
81
  _a)));
package/dist/icons/Spinner.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ interface ISpinnerProps {
3
+ size?: string;
4
+ thickness?: string;
5
+ }
6
+ declare function Spinner(props: ISpinnerProps): JSX.Element;
7
+ declare namespace Spinner {
8
+ var iconName: string;
9
+ }
10
+ export default Spinner;
package/dist/icons/Spinner.js ADDED
@@ -0,0 +1,38 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
7
+ if (k2 === undefined) k2 = k;
8
+ Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ var react_1 = __importDefault(require("react"));
30
+ var styled_components_1 = __importStar(require("styled-components"));
31
+ function Spinner(props) {
32
+ return react_1.default.createElement(Wrapper, { size: props.size, thickness: props.thickness });
33
+ }
34
+ var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\nto {\n transform: rotate(360deg);\n}\n"], ["\nto {\n transform: rotate(360deg);\n}\n"])));
35
+ var Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: inline-block;\n width: ", ";\n height: ", ";\n border: ", " solid rgba(0, 0, 0, 0.3);\n border-radius: 50%;\n border-top-color: #000;\n animation: ", " 1s ease-in-out infinite;\n"], ["\n display: inline-block;\n width: ", ";\n height: ", ";\n border: ", " solid rgba(0, 0, 0, 0.3);\n border-radius: 50%;\n border-top-color: #000;\n animation: ", " 1s ease-in-out infinite;\n"])), function (props) { return props.size || '40px'; }, function (props) { return props.size || '40px'; }, function (props) { return props.thickness || '5px'; }, spin);
36
+ Spinner.iconName = 'spinner';
37
+ exports.default = Spinner;
38
+ var templateObject_1, templateObject_2;
package/dist/icons/index.d.ts CHANGED
@@ -39,11 +39,12 @@ import UndoIcon from './Undo';
39
39
  import WishlistIcon from './Wishlist';
40
40
  import ZoomInIcon from './ZoomIn';
41
41
  import ZoomOutIcon from './ZoomOut';
42
+ import SpinnerIcon from './Spinner';
42
43
  export interface IIcon extends React.FC {
43
44
  iconName: string;
44
45
  }
45
- export { AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, };
46
+ export { AddIcon, ArrowLeftIcon, ArrowRightIcon, CameraIcon, CaretDownIcon, CaretUpIcon, CaretLeftIcon, CaretRightIcon, CartIcon, CheckmateIcon, ClipboardIcon, ColorPickerIcon, CopyIcon, DeleteIcon, DoubleCaretLeftIcon, DoubleCaretRightIcon, DownloadIcon, DragIcon, EditIcon, HeartIcon, ImageIcon, InfoIcon, MailIcon, MenuIcon, MoreIcon, NewWindowIcon, PauseIcon, PlayIcon, RedoIcon, RemoveIcon, RulerIcon, SearchIcon, SettingsIcon, ShareIcon, SwitchIcon, TagIcon, UndoIcon, WishlistIcon, ZoomInIcon, ZoomOutIcon, SpinnerIcon, };
46
47
  declare const _default: {
47
- [x: string]: IIcon;
48
+ [x: string]: IIcon | typeof SpinnerIcon;
48
49
  };
49
50
  export default _default;
package/dist/icons/index.js CHANGED
@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  var _a;
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = exports.AddIcon = void 0;
7
+ exports.SpinnerIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.WishlistIcon = exports.UndoIcon = exports.TagIcon = exports.SwitchIcon = exports.ShareIcon = exports.SettingsIcon = exports.SearchIcon = exports.RulerIcon = exports.RemoveIcon = exports.RedoIcon = exports.PlayIcon = exports.PauseIcon = exports.NewWindowIcon = exports.MoreIcon = exports.MenuIcon = exports.MailIcon = exports.InfoIcon = exports.ImageIcon = exports.HeartIcon = exports.EditIcon = exports.DragIcon = exports.DownloadIcon = exports.DoubleCaretRightIcon = exports.DoubleCaretLeftIcon = exports.DeleteIcon = exports.CopyIcon = exports.ColorPickerIcon = exports.ClipboardIcon = exports.CheckmateIcon = exports.CartIcon = exports.CaretRightIcon = exports.CaretLeftIcon = exports.CaretUpIcon = exports.CaretDownIcon = exports.CameraIcon = exports.ArrowRightIcon = exports.ArrowLeftIcon = exports.AddIcon = void 0;
8
8
  var Add_1 = __importDefault(require("./Add"));
9
9
  exports.AddIcon = Add_1.default;
10
10
  var ArrowLeft_1 = __importDefault(require("./ArrowLeft"));
@@ -85,6 +85,8 @@ var ZoomIn_1 = __importDefault(require("./ZoomIn"));
85
85
  exports.ZoomInIcon = ZoomIn_1.default;
86
86
  var ZoomOut_1 = __importDefault(require("./ZoomOut"));
87
87
  exports.ZoomOutIcon = ZoomOut_1.default;
88
+ var Spinner_1 = __importDefault(require("./Spinner"));
89
+ exports.SpinnerIcon = Spinner_1.default;
88
90
  exports.default = (_a = {},
89
91
  _a[Add_1.default.iconName] = Add_1.default,
90
92
  _a[ArrowLeft_1.default.iconName] = ArrowLeft_1.default,
@@ -126,4 +128,5 @@ exports.default = (_a = {},
126
128
  _a[Wishlist_1.default.iconName] = Wishlist_1.default,
127
129
  _a[ZoomIn_1.default.iconName] = ZoomIn_1.default,
128
130
  _a[ZoomOut_1.default.iconName] = ZoomOut_1.default,
131
+ _a[Spinner_1.default.iconName] = Spinner_1.default,
129
132
  _a);
package/dist/utils.d.ts CHANGED
@@ -56,7 +56,7 @@ export declare const createThreekitScriptEl: (threekitDomain: string) => Promise
56
56
  export declare const translateAttribute: (attributes: Array<IThreekitDisplayAttribute>, translations?: ITranslationMap | undefined, language?: string | undefined) => IThreekitDisplayAttribute;
57
57
  export declare const selectionToConfiguration: (value: RawAttributeValue, attributeType: IAttributeTypes) => string | number | boolean | File | IConfigurationColor | {
58
58
  assetId: RawAttributeValue;
59
- };
59
+ } | undefined;
60
60
  export declare const filterFormAttributes: (attributes: Record<string, IThreekitDisplayAttribute>, attributeComponentProps: IAttributesComponentProps, includeReservedAttributes: boolean) => IThreekitDisplayAttribute[];
61
61
  export declare const isUuid: (str?: string | undefined) => boolean;
62
62
  export declare const loadTrebleConfig: () => Partial<ITrebleConfig>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threekit-tools/treble",
3
- "version": "0.0.53",
3
+ "version": "0.0.57",
4
4
  "author": "Amaan Saeed",
5
5
  "license": "MIT",
6
6
  "files": [