smoothly 1.1.1-alpha.144 → 1.1.1-alpha.145

package/dist/cjs/smoothly-app_104.cjs.entry.js

@@ -7229,10 +7229,10 @@ const SmoothlyFilterSelect = class {
         this.menuHeight = undefined;
         this.multiple = false;
         this.type = "string";
-        this.looks = "plain";
+        this.looks = undefined;
     }
     componentWillLoad() {
-        this.smoothlyInputLooks.emit(looks => (this.looks = looks));
+        this.smoothlyInputLooks.emit(looks => { var _a; return (this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks); });
     }
     async componentDidLoad() {
         this.smoothlyFilterUpdate.emit(this.update.bind(this));
@@ -7317,7 +7317,7 @@ const SmoothlyFilterSelect = class {
         return result && this.property.split(".").reduceRight((r, e) => property(e, r), result);
     }
     render() {
-        return (index.h("smoothly-input-select", { key: '8155bce7bef1180ea40265bb34d8da22933673cf', ref: e => (this.selectElement = e), name: this.property, looks: this.looks, multiple: this.multiple, menuHeight: this.menuHeight, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyItemSelect: e => e.stopPropagation(), onSmoothlyInput: e => this.selectHandler(e) }, this.label && (index.h("span", { key: '7261192cd4eeb00d4c68f7aa506e18377de6a3ab', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: '4cd5211fae5017c648a7df9e854f024257099906', name: "items" })));
+        return (index.h("smoothly-input-select", { key: '7ae9928e80c12151cf0565c25742882ab9e58b8a', ref: e => (this.selectElement = e), name: this.property, looks: this.looks, multiple: this.multiple, menuHeight: this.menuHeight, onSmoothlyInputLooks: e => e.stopPropagation(), onSmoothlyItemSelect: e => e.stopPropagation(), onSmoothlyInput: e => this.selectHandler(e) }, this.label && (index.h("span", { key: 'b312b8873cb50ad55de7ec2e7ad70d2799d08346', slot: "label" }, [this.label.slice(0, 1).toUpperCase(), this.label.slice(1, this.label.length)].join(""))), index.h("slot", { key: 'c68e541981ac0714557f981bedd4ea27b35561d1', name: "items" })));
     }
     get element() { return index.getElement(this); }
 };
@@ -8249,7 +8249,7 @@ const SmoothlyForm = class {
         this.validator = undefined;
         this.type = this.action ? "create" : undefined;
         this.readonly = false;
-        this.looks = "plain";
+        this.looks = undefined;
         this.name = undefined;
         this.prevent = true;
         this.changed = false;
@@ -8379,7 +8379,7 @@ const SmoothlyForm = class {
         await Promise.all([...this.inputs.values()].map(input => Editable.Element.type.is(input) && input.setInitialValue()));
     }
     render() {
-        return (index.h(index.Host, { key: '1125747bc1e5a848277f3d0a11ea26c0fe4158a2' }, index.h("smoothly-spinner", { key: '5666246196ac9ccacc4621a5286b7756bdebc2e5', overlay: true, hidden: !this.processing }), index.h("form", { key: '64eebd5ef18f27ab67062f24bb5249f2cc397388', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: '347cd4d3b7b0a48deb08e311ba34cc9e2beba0f9' }, index.h("slot", { key: '76a85d0e0948728f229fa0f4443767316faec857' })), index.h("div", { key: '49ab78ae0ede2c4925a519f01166acc69427aa15' }, index.h("slot", { key: '3ec602e99f4fd9ea5844f0d20fddd10700560379', name: "clear" }), index.h("slot", { key: '0010671aeb36a484b6e26a84eec6ef292524aa70', name: "edit" }), index.h("slot", { key: '8eec2f2279d68a7eab7393ba81bea1e141a356e6', name: "reset" }), index.h("slot", { key: 'df3dd9ef691b92270e552ede0f391912a2ff3114', name: "delete" }), index.h("slot", { key: '23727f0747db5817bc6415ed37ce78cdb775ed6a', name: "submit" })))));
+        return (index.h(index.Host, { key: '8db2bd988a6d36741f2db6c2e7a54bc5afa9f940' }, index.h("smoothly-spinner", { key: '0d17aa5f230cad7f94ed4adadb76091d8aef81e5', overlay: true, hidden: !this.processing }), index.h("form", { key: '09fab657f7f2d09eca3346ab65f6dbe6ad3fdf37', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: '97b089bde361133677f7848a0825e3fa6b1b5991' }, index.h("slot", { key: 'ce538fca925a608658ff6ddcb39e14b01a193fc1' })), index.h("div", { key: '2632d3fe7777acafaa402a937407e8bee9f59e0f' }, index.h("slot", { key: '9e14ffef6ead8b8859dc29da3726b348bb85a0ca', name: "clear" }), index.h("slot", { key: 'ded085da1c9059c448e136f2d92611c9ac8232af', name: "edit" }), index.h("slot", { key: '779b97b5e85d94cf9f3b055ff6bdf6ec11432181', name: "reset" }), index.h("slot", { key: '48d4b972be33e58de7bfd715f7ee9e9f1cfaaf31', name: "delete" }), index.h("slot", { key: 'ceaa9ab1727f375ac9efc533f4545321bb64e7b1', name: "submit" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -8653,7 +8653,7 @@ const SmoothlyInput = class {
         this.uneditable = this.readonly;
         this.listener = {};
         this.color = undefined;
-        this.looks = "plain";
+        this.looks = undefined;
         this.name = undefined;
         this.value = undefined;
         this.type = "text";
@@ -8726,7 +8726,7 @@ const SmoothlyInput = class {
             value,
             selection: { start, end: start, direction: "none" },
         });
-        this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
+        this.smoothlyInputLooks.emit((looks, color) => { var _a; return ((this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks), !this.color && (this.color = color)); });
         this.smoothlyInputLoad.emit(() => {
             return;
         });
@@ -8898,10 +8898,10 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (index.h(index.Host, { key: '59dd26ac853a9534c091f00a4d855ae67d7e8746', class: {
+        return (index.h(index.Host, { key: '102a79826fbd94c20706c57edf720bed5e5f5955', class: {
                 "has-value": ((_a = this.state) === null || _a === void 0 ? void 0 : _a.value) != undefined && ((_b = this.state) === null || _b === void 0 ? void 0 : _b.value) != "",
                 invalid: !!this.invalid,
-            }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '23a5bbda5dc8504acf6897fc13fafd27870c9f38', name: "start" }), index.h("div", { key: '35c5afef08166e8d1a2b5cd378c3a4674800fd92' }, index.h("input", { key: '109d8a7693b8188438de4e0c1055a5c60bdf0ec2', color: this.color, name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, inputmode: (_d = this.state) === null || _d === void 0 ? void 0 : _d.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_e = this.state) === null || _e === void 0 ? void 0 : _e.autocomplete : "off", disabled: this.disabled, readOnly: this.readonly, pattern: ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern) && ((_g = this.state) === null || _g === void 0 ? void 0 : _g.pattern.source), value: (_h = this.state) === null || _h === void 0 ? void 0 : _h.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("label", { key: 'fec88db835e34476c41d14e2e735b699f09f6fde', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'a9bb9da0f634fa432e2ea6f5b54b059454bbf8aa' })), index.h("smoothly-icon", { key: 'f5ba5b4fadfef45a3b1184e2a72d62bea9fbd77a', name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: 'ef529c86607c8dfe0f7701de15e61a0b51fa264f', name: "end" })));
+            }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '73f7a9644e1c7a21024da254aa466177b7384b68', name: "start" }), index.h("div", { key: '57794c3c882d031c8ec72352e80fb7f4f93258df' }, index.h("input", { key: 'b0b5e63efb83c48449034686bdb3fcd703bd156a', color: this.color, name: this.name, type: (_c = this.state) === null || _c === void 0 ? void 0 : _c.type, inputmode: (_d = this.state) === null || _d === void 0 ? void 0 : _d.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: this.autocomplete ? (_e = this.state) === null || _e === void 0 ? void 0 : _e.autocomplete : "off", disabled: this.disabled, readOnly: this.readonly, pattern: ((_f = this.state) === null || _f === void 0 ? void 0 : _f.pattern) && ((_g = this.state) === null || _g === void 0 ? void 0 : _g.pattern.source), value: (_h = this.state) === null || _h === void 0 ? void 0 : _h.value, onInput: (e) => this.onInput(e), onFocus: e => this.onFocus(e), onClick: e => this.onClick(e), onBlur: e => this.onBlur(e), onKeyDown: e => this.onKeyDown(e), ref: (el) => (this.inputElement = el), onPaste: e => this.onPaste(e) }), index.h("label", { key: '842f25036ac8553d496196f27dfcfb70828118c5', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'e7b53446371776783029f3f88a918902537de64f' })), index.h("smoothly-icon", { key: '08bb54f7da7870f01299970011e193f2c66921a8', name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '815adbc27facde011d4f7612634e115ecff1d5bc', name: "end" })));
     }
     static get watchers() { return {
         "currency": ["typeChange", "onCurrency"],
@@ -8932,7 +8932,7 @@ const SmoothlyInputCheckbox = class {
         this.readonly = false;
         this.checked = false;
         this.value = this.checked;
-        this.looks = "plain";
+        this.looks = undefined;
         this.color = undefined;
         this.disabled = undefined;
     }
@@ -8940,7 +8940,7 @@ const SmoothlyInputCheckbox = class {
         var _a, _b;
         this.initialValue = this.checked;
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
-        this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), (this.color = color)));
+        this.smoothlyInputLooks.emit((looks, color) => { var _a; return ((this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks), !this.color && (this.color = color)); });
         this.smoothlyInputLoad.emit(() => {
             return;
         });
@@ -8973,7 +8973,7 @@ const SmoothlyInputCheckbox = class {
         !this.disabled && !this.readonly && (this.checked = !this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: '72a575bc2b384195a9d0e6ea47dba4712ca74293', onClick: () => this.inputHandler() }, index.h("input", { key: '85d2905b106d5e200afdd9541cc2cde72f250b10', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: 'cc8c645f2dad198df809b0410d55869e81d3e2d9', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: 'f970b6121ec91c86a37317da5ef5c537027bd6b8' }, index.h("slot", { key: '653ea70bfc8aa7295493748429df8f9c003ca914' }))));
+        return (index.h(index.Host, { key: 'a4d2b1536735268498128c427701c5a43d9db83e', onClick: () => this.inputHandler() }, index.h("input", { key: '6686fe73fe7a349ed4e391f90b7c9d9b7d6aafcd', type: "checkbox", checked: this.checked }), this.checked && index.h("smoothly-icon", { key: 'b02c92c0dc37759efb99a553db9a41f522f9e76b', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: '317b14039a27eb6dc6fb3b002b61d3c1fe0cc0fd' }, index.h("slot", { key: 'adef65ba4451bfd065385a6ed1ea999e8be27b4e' }))));
     }
     static get watchers() { return {
         "checked": ["elementCheck"]
@@ -9041,7 +9041,7 @@ const SmoothlyInputColor = class {
         this.rgb = { r: undefined, g: undefined, b: undefined };
         this.hsl = { h: undefined, s: undefined, l: undefined };
         this.value = undefined;
-        this.looks = "plain";
+        this.looks = undefined;
         this.color = undefined;
         this.changed = false;
         this.readonly = false;
@@ -9054,7 +9054,7 @@ const SmoothlyInputColor = class {
     componentWillLoad() {
         this.value && this.setInitialValue();
         this.value && (this.rgb = Scrollable.Color.Hex.toRGB(this.value));
-        this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), (this.color = color)));
+        this.smoothlyInputLooks.emit((looks, color) => { var _a; return ((this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks), (this.color = color)); });
         this.smoothlyInput.emit({
             [this.name]: this.output === "rgb"
                 ? {
@@ -9172,7 +9172,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h(index.Host, { key: 'f7e63191559122426b3347189c8ab6b1366d7dda', style: {
+        return (index.h(index.Host, { key: 'f41ed020ed9b6ef9009e722b6cf1a4828f38987b', style: {
                 "--hexCode": this.value,
                 "--rgb-r": `${Math.round((_a = this.rgb.r) !== null && _a !== void 0 ? _a : 0)}`,
                 "--rgb-g": `${Math.round((_b = this.rgb.g) !== null && _b !== void 0 ? _b : 0)}`,
@@ -9181,7 +9181,7 @@ const SmoothlyInputColor = class {
                 "--hsl-s": `${Math.round((_e = this.hsl.s) !== null && _e !== void 0 ? _e : 0)}%`,
                 "--hsl-l": `${Math.round((_f = this.hsl.l) !== null && _f !== void 0 ? _f : 0)}%`,
                 "--element-height": `${this.element.clientHeight}px`,
-            } }, index.h("smoothly-input", { key: 'ff565277e21cc6b8b34df5922a53c1d140b4410d', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: '594332a012667d2746c55ed7de574b837b69789d' })), index.h("div", { key: 'f4207e8a10e4ef16ac5f12abcf31b6eb20f533fa', class: "color-sample" }), index.h("smoothly-icon", { key: '50519a3c69276c9a43b3b61bcedcdf8968dafe4a', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), this.open && !this.readonly && (index.h("div", { key: '019db612d5ab85dd9dd8d7234ddc20924c8e05a3', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '1cb7ffd4543ca6f1c09a085f7301c8427a5eda30', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
+            } }, index.h("smoothly-input", { key: '8eb1b0295940116951fcd4cd7c28d5898ea282d5', value: this.value, name: this.name, looks: undefined, color: this.color, type: "hex-color", showLabel: this.showLabel, readonly: this.readonly, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: 'abf902751a8b55b776c1609830aafb5355ba37c3' })), index.h("div", { key: '8cea7592d8e024cdf278e3cedc6db6649de91117', class: "color-sample" }), index.h("smoothly-icon", { key: '60591e7df9b318cad9a4999bb93bb8ad9b0dc411', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && this.openDropdown() }), this.open && !this.readonly && (index.h("div", { key: 'df84ce622ad29ff8ef2a0ea699b8f6de6c1b0598', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '9777e50a6d3c5001e0f69c8acda3c89e3cf7cb22', title: `${this.sliderMode === "rgb" ? "To HSL" : "To RGB"}`, onSmoothlyToggleSwitchChange: event => this.handleSwitchMode(event), size: "tiny", checkmark: false, selected: this.sliderMode === "hsl" }), Object.entries(this.rgb).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "rgb" ? { display: "none" } : {}, name: key, min: 0, max: 255, color: undefined, type: "text", value: value, step: 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() }))), Object.entries(this.hsl).map(([key, value]) => (index.h("smoothly-input-range", { style: this.sliderMode != "hsl" ? { display: "none" } : {}, name: key, min: 0, max: key === "h" ? 359 : 1, color: undefined, type: key === "s" || key === "l" ? "percent" : "text", value: (key === "s" || key === "l") && value ? value / 100 : value, step: key === "s" || key === "l" ? 0.01 : 1, outputSide: "right", onSmoothlyInput: event => this.sliderInputHandler(event), label: key.toUpperCase() })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9213,7 +9213,7 @@ const SmoothlyInputDate = class {
         this.smoothlyFormDisable = index.createEvent(this, "smoothlyFormDisable", 7);
         this.listener = {};
         this.color = undefined;
-        this.looks = "plain";
+        this.looks = undefined;
         this.name = undefined;
         this.changed = false;
         this.readonly = false;
@@ -9227,7 +9227,7 @@ const SmoothlyInputDate = class {
     componentWillLoad() {
         this.setInitialValue();
         this.smoothlyInputLoad.emit(_ => { });
-        this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
+        this.smoothlyInputLooks.emit((looks, color) => { var _a; return ((this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks), !this.color && (this.color = color)); });
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
     }
     async listen(property, listener) {
@@ -9273,16 +9273,16 @@ const SmoothlyInputDate = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '7887877017bcf97b118f43289bb288aeb5ca3827' }, index.h("smoothly-input", { key: 'be1c68c0537150e07907f0df71ef25b1efd5d129', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: '5b2e64048cdf0dd5de9e581ab7dec03c1ecaeba2' }, index.h("smoothly-input", { key: 'f8196d27fb114f3448636e2786eccde3ef8d5c81', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && (this.open = !this.open), onClick: () => !this.readonly && (this.open = !this.open), readonly: this.readonly, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.value = e.detail[this.name];
-            } }, index.h("slot", { key: 'f671b83d4351e839c4e6a2327208cf31c74d0e6e' })), index.h("span", { key: 'dda5f2992fd378823d9cd0673171d5be2885c0d6', class: "icons" }, index.h("slot", { key: 'a32b8beb5340a555e0268ce9dfba10c22c0f5442', name: "end" })), this.open &&
+            } }, index.h("slot", { key: '5dc9d28afe1d9bd0956b034de1d249f29ea42147' })), index.h("span", { key: '8a95c5c9f67ef562984bcf38ec0c2feb9d773be7', class: "icons" }, index.h("slot", { key: '6555e8de4293358303d3defbbf671c90d797fa12', name: "end" })), this.open &&
             !this.readonly && [
-            index.h("div", { key: '697a704e31bd579a2a620debb800f6f264ca32d2', onClick: () => (this.open = false) }),
-            index.h("nav", { key: '5a820701ad94808453c7a883d43de2d83c263b90' }, index.h("div", { key: '6b01a461b3619c0d7e8d254a45f1ecf6d7d05356', class: "arrow" }), index.h("smoothly-calendar", { key: 'a52ca3d95e606fc99f47ae643ff67d8e66316d1a', doubleInput: false, value: (_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), onSmoothlyValueChange: event => {
+            index.h("div", { key: '26169dafb41be0c70e5badecb81cf05b9e3c6975', onClick: () => (this.open = false) }),
+            index.h("nav", { key: '26e1b3a88b8ec7b1b88f66385b687d0ddeeaf362' }, index.h("div", { key: '12473d6b09401f03699c94abb1bceae1a53e23ea', class: "arrow" }), index.h("smoothly-calendar", { key: '079bfe2918ed52910fc1ecccd9f3155161f78854', doubleInput: false, value: (_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), onSmoothlyValueChange: event => {
                     this.value = event.detail;
                     event.stopPropagation();
-                }, max: this.max, min: this.min }, index.h("div", { key: '57c43401cb70b4a0e1a79b36b0c44e8e461b3fdb', slot: "year-label" }, index.h("slot", { key: '95848615b6895f3c470797e4751283a0fb22f2f6', name: "year-label" })), index.h("div", { key: '5addd6a016499123bf8841819fa3f5f29d678734', slot: "month-label" }, index.h("slot", { key: 'ea175e3be4da00a74b234c427624f1a19fc75bb7', name: "month-label" })))),
+                }, max: this.max, min: this.min }, index.h("div", { key: 'f8deed206e39fd524818545140af46e007152c98', slot: "year-label" }, index.h("slot", { key: 'dac08aac0c2ed1f361a36d18e593ee645ab46b39', name: "year-label" })), index.h("div", { key: 'f904f6e9f4b73f4c05f2310d6774fc8912336126', slot: "month-label" }, index.h("slot", { key: '92dfa1aa0a8de42b15f13da59ca573d86c526347', name: "month-label" })))),
         ]));
     }
     get element() { return index.getElement(this); }
@@ -9305,7 +9305,7 @@ const SmoothlyInputDateRange = class {
         this.listener = {};
         this.name = "dateRange";
         this.color = undefined;
-        this.looks = "plain";
+        this.looks = undefined;
         this.readonly = false;
         this.showLabel = true;
         this.start = undefined;
@@ -9322,7 +9322,7 @@ const SmoothlyInputDateRange = class {
         this.setInitialValue();
         this.updateValue();
         this.smoothlyInputLoad.emit(_ => { });
-        this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
+        this.smoothlyInputLooks.emit((looks, color) => { var _a; return ((this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks), !this.color && (this.color = color)); });
         this.start && this.end && this.smoothlyInput.emit({ [this.name]: { start: this.start, end: this.end } });
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
     }
@@ -9374,12 +9374,12 @@ const SmoothlyInputDateRange = class {
     }
     render() {
         const locale = navigator.language;
-        return (index.h(index.Host, { key: 'a24b8853d0336193972f10ef27e4ca06de6b0445', tabindex: 0 }, index.h("section", { key: 'b6de5b93597399607ddd453e969a43c7e64d165b', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: '391a25ed4e565938262c31b59b39f3d128209fdb', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
+        return (index.h(index.Host, { key: '0d13cfa842b849bfd9608be232d2d3a1667f0496', tabindex: 0 }, index.h("section", { key: '609e72b67c97b6f85f8e565e9fc3f96278c91cea', onClick: () => !this.readonly && (this.open = !this.open) }, index.h("smoothly-input", { key: '2beda4d2e6084b9ac9bad476940761aaafe8116d', type: "text", name: "dateRangeInput", readonly: this.readonly, value: this.start && this.end
                 ? `${format(this.start, "date", locale)} — ${format(this.end, "date", locale)}`
                 : undefined, invalid: this.invalid, placeholder: this.placeholder, showLabel: this.showLabel, onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.inputHandler(e.detail);
-            } }, index.h("slot", { key: '16adb4f2517d9971e0d0b034ddbc7835cf30004d' }))), index.h("span", { key: 'ffcd3a97548dd2cfe12fe4fc163a0cebd7c773bf', class: "icons" }, index.h("slot", { key: 'dc5a2b8ccd1435dc469054451e1fe58b883cc194', name: "end" })), this.open && index.h("div", { key: '5c1d7908e77484e2e1c14df1b3317b9827e63897', onClick: () => (this.open = false) }), this.open && (index.h("nav", { key: 'da2b085f7d3ff1179ea8df650e978566cfab59a4' }, index.h("div", { key: '55895b562b055ca5d19711c1738c97bdab05d1b8', class: "arrow" }), index.h("smoothly-calendar", { key: '4173ccfef655a2144eb04064a2d6cf7eb011ea38', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, index.h("slot", { key: '48d70cd5debd4d2124db979027647c925eb92f61' }))), index.h("span", { key: '90ec3d16861f3335e4d36d88dc1001f37c053127', class: "icons" }, index.h("slot", { key: '0fb22022aa1a8f43d4c66fd9979100164cfb82a0', name: "end" })), this.open && index.h("div", { key: 'fe5ead0dedf79e5f3d5d969ae516a076a5b2d587', onClick: () => (this.open = false) }), this.open && (index.h("nav", { key: 'ea82a81aadaa3c76168a97f7b66b6d58c476e7f0' }, index.h("div", { key: '60dbba9c87ddd59e23150adf9ae455139d3aa09d', class: "arrow" }), index.h("smoothly-calendar", { key: '62027c9060591f71c7a509fb1a7db09adfc5c90c', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {
@@ -9507,7 +9507,7 @@ const SmoothlyInputFile = class {
         this.readonly = false;
         this.accept = undefined;
         this.color = undefined;
-        this.looks = "plain";
+        this.looks = undefined;
         this.camera = undefined;
         this.name = undefined;
         this.showLabel = true;
@@ -9521,7 +9521,7 @@ const SmoothlyInputFile = class {
         return this.transfer.files;
     }
     componentWillLoad() {
-        this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
+        this.smoothlyInputLooks.emit((looks, color) => { var _a; return ((this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks), !this.color && (this.color = color)); });
         this.smoothlyInput.emit({ [this.name]: this.value });
         this.smoothlyInputLoad.emit(() => { });
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
@@ -9584,7 +9584,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '9afeffc575ea1b2daf40c3614a07f5a490db04cb', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: '30c3d3d86dbb89bfec7ed9ff58485824f6209c60' }, index.h("slot", { key: '1f6facb309c2f1d86effd784b0569374ce99a7db', name: "label" })), index.h("div", { key: '8f6d0b9b987b3d9e919230c5177e1a066014e7cb', class: "input" }, index.h("smoothly-button", { key: '282148e8c477a1dd9b55a92917ef2ef7965c84cc', color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '9dc6a19a34fb96931449f4e73f5f78e4609396f2', name: "button" })), index.h("span", { key: '4a118ab4d3ebc618b4b1c3eadbbb26aecef99d22' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: 'a5afb2a9e3d9a70d91aab9791de76e25a3d90e46', class: "mask", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }), index.h("input", { key: '09e58ee22448b0c1b42265f94e21d110303e367c', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), index.h("slot", { key: '755909f1d8df0f2c710615db2ad396a4182bcaba' })));
+        return (index.h(index.Host, { key: '3840a05fb38bbb94d9d7f922b70abd70bf68f3b9', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: '796604782bb3896880bbb1a4877fea20f5b4a714' }, index.h("slot", { key: '3ed236d6e298fbb5bf4a182d263587ce876daaa9', name: "label" })), index.h("div", { key: '8f7fdec5e503c82f3ea062aff12b74b6cb39b190', class: "input" }, index.h("smoothly-button", { key: '39fa7e965699f944ff4d8abf6aa8ea481a4d17fb', color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: 'e448ffeb5d43a243ac6be01944cec7ddf63f6542', name: "button" })), index.h("span", { key: 'a210009eda5924b32b0766504ac8de957479872e' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '78a9239678504e8f7a9af52d94c5702d95289d6e', class: "mask", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }), index.h("input", { key: 'f8e94fbd4ca9b082fee12ab5c470203011be3c85', ref: element => (this.input = element), type: "file", capture: this.camera == "back" ? "environment" : "user", accept: (_c = this.accept) !== null && _c !== void 0 ? _c : (!this.camera ? undefined : "image/jpeg"), files: this.files, onInput: e => this.inputHandler(e) })), index.h("slot", { key: 'a1b467bb31342406cac7ce6db6582624ae72b3ac' })));
     }
     static get watchers() { return {
         "value": ["valueChanged"]
@@ -9614,7 +9614,7 @@ const SmoothlyInputMonth = class {
         this.showLabel = true;
     }
     componentWillLoad() {
-        this.smoothlyInputLooks.emit(looks => (this.looks = looks));
+        this.smoothlyInputLooks.emit(looks => { var _a; return (this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks); });
         this.smoothlyInputLoad.emit(() => { });
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
         this.valueChanged();
@@ -9675,7 +9675,7 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '45702b0d974a55b21d9ada8e43bc34fc0559eebe' }, index.h("smoothly-icon", { key: '3c884bd2c300483f8f67df1fae466beb2c5bbfa9', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly }, onClick: () => this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: 'f3ff0b3f930b9a4627c66dbf7817732e1c5d57bb', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '64b70520aa2c671368d241b4a69fc4be33112d3d', slot: "label" }, index.h("slot", { key: 'e3bf0f9df5e961426292cc555919d467cc157b62', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now()).map(year => (index.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index.h("smoothly-input-select", { key: '09d4079f14894b1fbd60046b0f818e928e435038', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '2a05ddea7c9ce02f8d8643499377fbd4d083eb6c', slot: "label" }, index.h("slot", { key: 'e2c3b87bb565cb5c7e90f5eb698b767afa74c250', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : TimeZone.Date.now()).map(month => (index.h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), index.h("smoothly-icon", { key: '10711926ea090d82ec1c355c9ba807ea2e589e48', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly }, onClick: () => this.adjustMonth(1) })));
+        return (index.h(index.Host, { key: '21e587a94e9a4dd53b05520be28c83ef29a54c19' }, index.h("smoothly-icon", { key: '4740d4a8825d9834fd6cf02e3197a49c8cde66bc', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly }, onClick: () => this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: '6f783bfb05c7ce1f6bd5c5f99b03f653306d3950', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: 'a7fb003ca92e5aba1e398c2cadf939d66b7c10b0', slot: "label" }, index.h("slot", { key: 'abb1f5efeefbff753f2a1cecfa6d015970cd1888', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now()).map(year => (index.h("smoothly-item", { key: year.date, value: year.date, selected: year.selected || this.value == year.date }, year.name)))), index.h("smoothly-input-select", { key: 'fe9cd212596fd073cc16c6d37ddd932d985c52a8', ref: e => (this.month = e), name: `${this.name}-month`, readonly: this.readonly, color: this.color, looks: this.looks, changed: this.changed, menuHeight: "5.5items", required: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '9000e5459dd332c11cde2446a63ac7502ee967ad', slot: "label" }, index.h("slot", { key: '6ea59c87ac23f136bc645f3d5a2cedadec34a2f5', name: "month-label" })), months((_b = this.value) !== null && _b !== void 0 ? _b : TimeZone.Date.now()).map(month => (index.h("smoothly-item", { key: month.date, value: month.date, selected: month.selected || this.value == month.date }, month.name)))), index.h("smoothly-icon", { key: '39f22e5eb52257fb42fad7f0b3da004613046b56', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: { disabled: this.readonly }, onClick: () => this.adjustMonth(1) })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9713,7 +9713,7 @@ const SmoothlyInputRadio = class {
         this.listener = {};
         this.changed = false;
         this.value = undefined;
-        this.looks = "plain";
+        this.looks = undefined;
         this.color = undefined;
         this.clearable = undefined;
         this.readonly = false;
@@ -9722,7 +9722,7 @@ const SmoothlyInputRadio = class {
     }
     componentWillLoad() {
         var _a, _b;
-        this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), (this.color = color)));
+        this.smoothlyInputLooks.emit((looks, color) => { var _a; return ((this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks), (this.color = color)); });
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
         (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
     }
@@ -9795,7 +9795,7 @@ const SmoothlyInputRadio = class {
         (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
     }
     render() {
-        return (index.h(index.Host, { key: '0179c958b172dec2e528883d91bccc885fefea49', class: "floating-label" }, index.h("slot", { key: 'f700e38d8461c4e18dd8bf8ace95fed95237c6a7', name: "start" }), index.h("div", { key: '43f474763549a310333e941ec812542b1fda9b8f' }, index.h("slot", { key: 'f1d621352c82b8817f9065244c9e820937e9a8d1', name: "label" }), index.h("div", { key: '99d365ac00a4b7241974202aa6d1666437698551', class: "options" }, index.h("slot", { key: 'b34dd04d0f411180314dab22ae68bc3b0e97a29c' }))), index.h("slot", { key: '92c6522d45851f554de8a141d95a571c4ba80d31', name: "end" })));
+        return (index.h(index.Host, { key: '1b05355d10542a1f45e96de12d96aecb6e79d4ca', class: "floating-label" }, index.h("slot", { key: 'd7f86c98b38271b65c30ceab7fb7e4faa333184a', name: "start" }), index.h("div", { key: 'f2d1a750872ef96d0d9eeae6505da0faa2739612' }, index.h("slot", { key: '608b188a348a38aee7d97b1df1fb54651d39d696', name: "label" }), index.h("div", { key: '6ae510fcade699b433860e8ce62f56171cabb25c', class: "options" }, index.h("slot", { key: '68cf98beaf5a3ea16c5216b79a1bb4cce3a79098' }))), index.h("slot", { key: '4c964a4447f2c23e620fd712a65b47a8932794a6', name: "end" })));
     }
     static get watchers() { return {
         "value": ["valueChanged"],
@@ -9814,7 +9814,7 @@ const SmoothlyInputRadioItem = class {
         this.smoothlyRadioButtonRegister = index.createEvent(this, "smoothlyRadioButtonRegister", 7);
         this.value = undefined;
         this.selected = false;
-        this.looks = "plain";
+        this.looks = undefined;
         this.name = undefined;
     }
     componentWillLoad() {
@@ -9825,7 +9825,7 @@ const SmoothlyInputRadioItem = class {
         this.smoothlySelect.emit({ value: this.value, selected: this.selected, select: s => (this.selected = s) });
     }
     render() {
-        return (index.h(index.Host, { key: 'f628269e16f5f2dc09c7e1c894658a97d949fc0b', onClick: () => this.inputHandler() }, index.h("input", { key: '72968e34692677ec88e756edf931a08ffcb2971a', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: 'd3d52e12b05387b20d5a260f527bec3221e28397', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: '47748599409c6f2260a3996b8d6f60325d6631b3' }, index.h("slot", { key: '6745a2798f7b7819303d9e6189bc03ad79813364' }))));
+        return (index.h(index.Host, { key: 'e70574d5f3d746ff7777424f61d22258f6200adc', onClick: () => this.inputHandler() }, index.h("input", { key: 'c557567668427976b7ed8fc18b5d914283cfa663', name: this.name, type: "radio", checked: this.selected }), index.h("smoothly-icon", { key: 'f57bfccbe9131365095d85d23e2b0c16c7d9d3b9', name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "small", fill: "outline", color: this.selected ? "success" : "medium", toolTip: "Select" }), index.h("label", { key: '9caf6cf93fc8bc15f4c05797635e4e2f94819656' }, index.h("slot", { key: '90910dc708da9124a135c8e28a557475a671e7c1' }))));
     }
     get element() { return index.getElement(this); }
 };
@@ -9844,7 +9844,7 @@ const SmoothlyInputRange = class {
         this.listener = {};
         this.initialValue = undefined;
         this.value = undefined;
-        this.looks = "plain";
+        this.looks = undefined;
         this.color = undefined;
         this.changed = false;
         this.readonly = false;
@@ -9858,7 +9858,7 @@ const SmoothlyInputRange = class {
         this.showInput = false;
     }
     componentWillLoad() {
-        this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), (this.color = color)));
+        this.smoothlyInputLooks.emit((looks, color) => { var _a; return ((this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks), (this.color = color)); });
         this.smoothlyInput.emit({ [this.name]: this.value });
         this.smoothlyInputLoad.emit(() => {
             return;
@@ -9918,10 +9918,10 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '318907357362952f60773a02e3dc52c629f6fa0f', class: {
+        return (index.h(index.Host, { key: 'a99802548f02e977fd84cfae1ad676e01d6f6eea', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, index.h("slot", { key: 'f914111fa8192bfe0a1b8b5306e2b5c6424315f7', name: "start" }), index.h("div", { key: '7d10d695e163e0907602fa8ac2bb236ca1c0247f' }, index.h("label", { key: '15c5315ca5c9e0c98a09d0f80077f4f2450ba0de', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '9d5a5a0d3bda6d0de8b8b1cf7b7b0f05fb643ed9', ref: e => (this.input = e), looks: undefined, color: this.color, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: e => (e.stopPropagation(), this.inputHandler(e)), onSmoothlyBlur: e => this.inputHandler(e), onSmoothlyInput: e => e.stopPropagation(), value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly }, this.label), index.h("smoothly-display", { key: 'e794fcb0b9be770112460e442fbbe9e5445c436d', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: 'fec464e33a3fab7d613e50ac0ca3973daceda6b4', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly, onInput: event => this.inputHandler(event), value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: 'e39b933f79c8a46cd6625a683eab87730a3b6561', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'c0a25e972c02d41aaeae0e1c35c827c7708be900', name: "end" })));
+            } }, index.h("slot", { key: '317a6c29a47f9e281e76854cfc8b1f6074555cc3', name: "start" }), index.h("div", { key: 'd1643a60528e10e658fa9feda0ce07b97ff1924c' }, index.h("label", { key: '56829bd6bcf336b6432802e1cddab7f94a4a19f6', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: 'd84d5e707e583282af1d97b59c516717faf35ded', ref: e => (this.input = e), looks: undefined, color: this.color, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: e => (e.stopPropagation(), this.inputHandler(e)), onSmoothlyBlur: e => this.inputHandler(e), onSmoothlyInput: e => e.stopPropagation(), value: this.type == "percent" ? this.value : (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString(), placeholder: this.outputSide === "right" ? "-" : undefined, readonly: this.readonly }, this.label), index.h("smoothly-display", { key: '8e9d240630480623b90fe6938509b76edd5e1cfc', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: '3c99580c646adbb5fb8fd6d7b1b9d8eb2d0029a9', name: this.name, part: "range", type: "range", min: this.min, max: this.max, step: (_b = this.step) !== null && _b !== void 0 ? _b : "any", disabled: this.readonly, onInput: event => this.inputHandler(event), value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: 'c210a370cc76858a86a95d532ad17d1e4b4b9ce7', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'f30dcd70736c5df09d9b401251b6cb70c80fe1c2', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10020,7 +10020,7 @@ const SmoothlyInputSelect = class {
         this.invalid = false;
         this.name = "selected";
         this.color = undefined;
-        this.looks = "plain";
+        this.looks = undefined;
         this.showLabel = true;
         this.showSelected = true;
         this.readonly = false;
@@ -10041,7 +10041,7 @@ const SmoothlyInputSelect = class {
     }
     componentWillLoad() {
         var _a, _b;
-        this.smoothlyInputLooks.emit((looks, color) => ((this.looks = looks), !this.color && (this.color = color)));
+        this.smoothlyInputLooks.emit((looks, color) => { var _a; return ((this.looks = (_a = this.looks) !== null && _a !== void 0 ? _a : looks), !this.color && (this.color = color)); });
         this.smoothlyInputLoad.emit(() => {
             return;
         });
@@ -10263,16 +10263,16 @@ const SmoothlyInputSelect = class {
         this.addedItems = this.addedItems.concat(index.h("smoothly-item", { value: this.filter, selected: true }, this.filter));
     }
     render() {
-        return (index.h(index.Host, { key: '3d338d203d73080f448328976de280dfc19f2e3a', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '12ea781eb8881089305bf71fa7ce75b4ae26c928', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '89f8838de5e941d374e67fcce8931110359a979c', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { key: 'f43d5a95ae47cc0c907726267181614d822a75a2', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '81ef6bb48afa65fd6b774eff06939fe8e538e508', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("smoothly-icon", { key: '92d75ff10e21a46353a5e0767e50996b5bffac99', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '26b025c5c2cfc0edbd6151a297b48b67bd3efe4a', name: "label" }), index.h("div", { key: '087010ead1957973c49f3c1f631ea0fa2a4625f2', class: { hidden: !this.open, options: true }, ref: (el) => {
+        return (index.h(index.Host, { key: 'ec468e4b702ea1ef7194eb2d318c4b0da53cb04a', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '0fc0a92ae378a8a7450e1ad9a61e26ff3e186ddd', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '4abb30289ea9c2e8c3905f352b6e1a25469b1af2', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { key: '0bf4675c6d472c85a6cd708f5d71c3eef5cbaa92', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: 'a2960997d88802ee694e5e45b5c6107495883b58', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("smoothly-icon", { key: 'a39e0eb1112f1166399b6f238ad995e64b95912d', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '5d468e0ec3b82805ed98c08f07fe7a1df33f7a1e', name: "label" }), index.h("div", { key: '1edc208177418d3e4c30fb2e139b617311f05216', class: { hidden: !this.open, options: true }, ref: (el) => {
                 this.optionsDiv = el;
-            } }, this.filter.length > 0 && (index.h("smoothly-item", { key: 'b587866fa6a90aa62fbf3a8ee7844f6d69f54131', selectable: false }, index.h("smoothly-icon", { key: '4e18f6ee9465933bac28a163252bb4228182492d', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '73bccce2aca53381d3ff65a78b115c0f0226db0e', name: "backspace-outline", size: "small", onClick: e => {
+            } }, this.filter.length > 0 && (index.h("smoothly-item", { key: '1dec2882cf871c073eb8bc14623a60e41ea61ff1', selectable: false }, index.h("smoothly-icon", { key: '1db123a88644a570f4e9abfe082aeba729565803', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '196530525176e237dc3b8ada3dda485a088a2659', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (index.h("smoothly-icon", { key: '13840befb71be4230ac2cd8ecc87093d95bb51a6', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (index.h("smoothly-icon", { key: '506456232544c188319ecd741ba05bbd8fc081fc', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: '20745b94ac28db54547a9a76e91ebbaaf28f8477' }), this.addedItems)));
+            } })))), index.h("slot", { key: '0b0dd3a5d2afe9773abdc30dd3f6204399cd7ac8' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {