smoothly 1.14.0 → 1.16.0

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

@@ -8112,8 +8112,26 @@ var Clearable;
     Clearable.is = is;
 })(Clearable || (Clearable = {}));
 
+class Observer {
+    constructor(parent) {
+        this.parent = parent;
+        this.callbacks = [];
+    }
+    async subscribe(callback) {
+        this.callbacks.push(callback);
+        await callback(this.parent);
+    }
+    async publish() {
+        Promise.all(this.callbacks.map(callback => callback(this.parent)));
+    }
+    static create(parent) {
+        return new Observer(parent);
+    }
+}
+
 var Editable;
 (function (Editable) {
+    Editable.Observer = Observer;
     let Element;
     (function (Element) {
         Element.type = TimeZone.object({
@@ -8208,7 +8226,7 @@ const SmoothlyForm = class {
         this.contentType = "json";
         this.inputs = new Map();
         this.readonlyAtLoad = this.readonly;
-        this.listeners = {};
+        this.observer = Editable.Observer.create(this);
         this.color = undefined;
         this.value = {};
         this.action = undefined;
@@ -8231,14 +8249,11 @@ const SmoothlyForm = class {
             this.smoothlyFormInput.emit(Scrollable.Data.convertArrays(this.value));
         }
     }
-    async listen(property, listener) {
-        var _a;
-        var _b;
-        ((_a = (_b = this.listeners)[property]) !== null && _a !== void 0 ? _a : (_b[property] = [])).push(listener);
-        listener(this);
+    async listen(listener) {
+        this.observer.subscribe(listener);
     }
     async watchValue() {
-        var _a, _b, _c;
+        var _a, _b;
         this.changed = [...this.inputs.values()].some(input => (Editable.type.is(input) ? input.changed : true));
         if (this.validator) {
             const flaws = (_b = (_a = this.validator) === null || _a === void 0 ? void 0 : _a.flaw(Scrollable.Data.convertArrays(this.value)).flaws) === null || _b === void 0 ? void 0 : _b.reduce((r, f) => (f.property ? Object.assign(Object.assign({}, r), { [f.property]: f }) : r), {});
@@ -8246,7 +8261,7 @@ const SmoothlyForm = class {
                 this.validate(flaws, property, input);
             }
         }
-        (_c = this.listeners.changed) === null || _c === void 0 ? void 0 : _c.forEach(l => l(this));
+        this.observer.publish();
     }
     validate(flaws, property, input) {
         var _a, _b;
@@ -8261,8 +8276,7 @@ const SmoothlyForm = class {
         }
     }
     watchReadonly() {
-        var _a;
-        (_a = this.listeners.changed) === null || _a === void 0 ? void 0 : _a.forEach(l => l(this));
+        this.observer.publish();
     }
     smoothlyInputLooksHandler(event) {
         event.stopPropagation();
@@ -8361,7 +8375,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: 'e2c17b7337acbcfe72ffb863c85e60faede5235e' }, index.h("smoothly-spinner", { key: 'd7662186f79ee0f5d4405016a35047f11ffcdc34', overlay: true, hidden: !this.processing }), index.h("form", { key: '632d61643ff5ebb0a76385ef491dc53fc1dd14d5', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: '75dda536071a876101b3f74810d234db35552ef4' }, index.h("slot", { key: '167a59eb0712168bc65779d6218b0c0cddb1233f' })), index.h("div", { key: 'be5617bf40a0f232bce860be106557b28d8356aa' }, index.h("slot", { key: '2fa4643245d138a6f2c249b38249451c9f3d077d', name: "clear" }), index.h("slot", { key: '93a446c4e11d622a7c02c27681cdcb579e1ce5db', name: "edit" }), index.h("slot", { key: '18a353c56f4dd2919f7ebd4aae3c10d8c505ceb0', name: "reset" }), index.h("slot", { key: '5a5712ab3ae35fecbad7e62750d8461cebbaaf71', name: "delete" }), index.h("slot", { key: '6f0467383249a488f44b5a276b2d6686afe18d97', name: "submit" })))));
+        return (index.h(index.Host, { key: '4f31c8f7638a9815689057e5a79e4bfdf3763662' }, index.h("smoothly-spinner", { key: 'bb97ac4b9327a589dc6ee737398f6f3563321e2a', overlay: true, hidden: !this.processing }), index.h("form", { key: '6d6dad4cdba6735e602433202facf334f7544f04', onSubmit: !this.prevent ? undefined : e => e.preventDefault(), name: this.name }, index.h("fieldset", { key: 'ad6218abf6ae8eeee32447d85f182d8c86db118b' }, index.h("slot", { key: 'd1406990d27589216e164185527f4eafb3dd668c' })), index.h("div", { key: '64db3c8aacd39335fa3cfbd2eb66d26e2185877a' }, index.h("slot", { key: '449a3d920b7e53ffd71f05213339c2fe5d59b7c3', name: "clear" }), index.h("slot", { key: '0afb67a1916ea46de43413e894ec20e043d2e06d', name: "edit" }), index.h("slot", { key: '35cb4dafe3f9b046176e28a8e080404f12634485', name: "reset" }), index.h("slot", { key: '0d9769f46aa24f4b6cccf85c5b74717c6b307b7d', name: "delete" }), index.h("slot", { key: '4a0dab8e81676c55af2ef7e43f768c31d98b02bf', name: "submit" })))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9013,7 +9027,7 @@ const SmoothlyInput = class {
         this.smoothlyChange = index.createEvent(this, "smoothlyChange", 7);
         this.smoothlyInput = index.createEvent(this, "smoothlyInput", 7);
         this.uneditable = this.readonly;
-        this.listener = {};
+        this.observer = Editable.Observer.create(this);
         this.color = undefined;
         this.looks = undefined;
         this.name = undefined;
@@ -9051,9 +9065,8 @@ const SmoothlyInput = class {
         if (this.inputElement)
             this.state = this.stateHandler.setSelection(this.inputElement, this.state, start, end < 0 ? this.inputElement.value.length + end + 1 : end);
     }
-    async listen(property, listener) {
-        this.listener[property] = listener;
-        listener(this);
+    async listen(listener) {
+        this.observer.subscribe(listener);
     }
     nameChange(_, oldName) {
         Input.formRename(this, oldName);
@@ -9104,9 +9117,8 @@ const SmoothlyInput = class {
         this.state = this.stateHandler.initialState((_a = this.value) !== null && _a !== void 0 ? _a : (_b = this.state) === null || _b === void 0 ? void 0 : _b.value);
     }
     stateChange() {
-        var _a, _b;
         this.smoothlyInput.emit({ [this.name]: this.stateHandler.getValue(this.state) });
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     valueChange(value) {
         const lastValue = this.stateHandler.getValue(this.state);
@@ -9116,17 +9128,15 @@ const SmoothlyInput = class {
         }
     }
     readonlyChange() {
-        var _a, _b;
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     componentWillLoad() {
-        var _a, _b;
         this.typeChange();
         this.initialValue = this.value;
         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(parent => (this.parent = parent));
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     componentDidLoad() {
         if (this.inputElement)
@@ -9141,7 +9151,7 @@ const SmoothlyInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return (index.h(index.Host, { key: '493b1a68fd6f98a7ae48b8b54a5e46f2db79505e', 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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '1bb0a5548a68f8a2b6f888723522eeaf05fe0b59', name: "start" }), index.h("div", { key: 'd69c2f1992ef779f82ff1044d295efb8bde93ea3', class: "smoothly-input-container" }, index.h("div", { key: 'c35fb6c29229d78a46f2e98b38699b041fed5071', class: "ghost" }, index.h("div", { key: '7efbd586603a2b345198b6e5175acef2b3cedcc3', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: 'e31b8a71353f281cc38f19b5062cdc904137f670', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: 'b046459a7ba9415ed49cfef91a300b41ad00852f', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
+        return (index.h(index.Host, { key: '5388810ea3cdbd5fdb01c74d1d3488d90793a51e', 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) != "" }, onclick: () => { var _a; return (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, index.h("slot", { key: '8df5dba4385595cc949867cee6facb006345d1cb', name: "start" }), index.h("div", { key: '1a5708c0e27af3718f8de3dfbc558d17378f951d', class: "smoothly-input-container" }, index.h("div", { key: 'e1287ccf9714a0dfb343d7b8ab28e59839504c87', class: "ghost" }, index.h("div", { key: 'e7988dcbf0dfb660ad96bb300e508a481d6b1ae3', class: "value" }, (_c = this.state) === null || _c === void 0 ? void 0 : _c.value), index.h("div", { key: '1df3368a935e641948cda423da61a40636b7e470', class: "remainder" }, (_d = this.state) === null || _d === void 0 ? void 0 : _d.remainder)), index.h("input", { key: '7fc6db36a3f19f1c436b2f41e89122e2256fe955', ref: (el) => (this.inputElement = el), color: this.color, name: this.name, type: (_e = this.state) === null || _e === void 0 ? void 0 : _e.type, inputmode: (_f = this.state) === null || _f === void 0 ? void 0 : _f.inputmode, placeholder: this.placeholder, required: this.required, autocomplete: (_g = this.autocomplete) !== null && _g !== void 0 ? _g : (_h = this.state) === null || _h === void 0 ? void 0 : _h.autocomplete, disabled: this.disabled, readOnly: this.readonly, pattern: ((_j = this.state) === null || _j === void 0 ? void 0 : _j.pattern) && ((_k = this.state) === null || _k === void 0 ? void 0 : _k.pattern.source), onKeyDown: event => {
                 this.state = this.stateHandler.onKeyDown(event, this.state);
                 if (!this.readonly && !this.disabled)
                     this.smoothlyKeydown.emit(Key.create(this.name, event));
@@ -9154,7 +9164,7 @@ const SmoothlyInput = class {
                     if (Deep.notEqual(lastValue, this.stateHandler.getValue(this.state)))
                         this.smoothlyChange.emit({ [this.name]: this.stateHandler.getValue(this.state) });
                 }
-            } }), index.h("label", { key: '66175c982df7da3551bc25fe7c7b66423a0f0fcb', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'e445ab3e84ab6b85642488facecec125d718a733' }))), index.h("smoothly-icon", { key: '01587039b50b18c22c9dc9ece6213f0bd1bff3f8', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: 'fe43f07c051b20cc92cdb973e659a463963351b3', name: "end" })));
+            } }), index.h("label", { key: 'ff40bf469c042d0aa128d6e66d7551924754713f', class: "label float-on-focus", htmlFor: this.name }, index.h("slot", { key: 'bdf8474b10e83fff9b4e92d14a90c49e37152921' }))), index.h("smoothly-icon", { key: '16c807f63ead934f26e44e48a831768b519c96c3', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: '2d9157c04aa41189c78c8a8daef0f51e739455f0', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9179,7 +9189,7 @@ const SmoothlyInputCheckbox = class {
         this.smoothlyInput = index.createEvent(this, "smoothlyInput", 7);
         this.smoothlyInputLoad = index.createEvent(this, "smoothlyInputLoad", 7);
         this.smoothlyFormDisable = index.createEvent(this, "smoothlyFormDisable", 7);
-        this.listener = {};
+        this.observer = Editable.Observer.create(this);
         this.name = undefined;
         this.changed = false;
         this.readonly = false;
@@ -9190,12 +9200,11 @@ const SmoothlyInputCheckbox = class {
         this.color = undefined;
     }
     componentWillLoad() {
-        var _a, _b;
         this.initialValue = this.checked;
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
         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(parent => (this.parent = parent));
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     async disconnectedCallback() {
         if (!this.element.isConnected)
@@ -9216,9 +9225,8 @@ const SmoothlyInputCheckbox = class {
     async clear() {
         !this.disabled && !this.readonly && (this.checked = false);
     }
-    async listen(property, listener) {
-        this.listener[property] = listener;
-        listener(this);
+    async listen(listener) {
+        this.observer.subscribe(listener);
     }
     async edit(editable) {
         this.readonly = !editable;
@@ -9230,17 +9238,19 @@ const SmoothlyInputCheckbox = class {
         this.initialValue = this.checked;
         this.changed = false;
     }
-    async elementCheck() {
-        var _a, _b;
-        this.changed = this.initialValue !== this.checked;
-        this.smoothlyInput.emit({ [this.name]: await this.getValue() });
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+    async elementCheck(checked, before) {
+        this.changed = !!this.initialValue != !!this.checked;
+        const changed = !!checked != !!before;
+        if (changed) {
+            this.smoothlyInput.emit({ [this.name]: await this.getValue() });
+            this.observer.publish();
+        }
     }
     click() {
         !this.disabled && !this.readonly && (this.checked = !this.checked);
     }
     render() {
-        return (index.h(index.Host, { key: 'bafbb239e9b13ca92eb83d46973a9605418a1608', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, index.h("input", { key: '87601b93d6547e20364f8484e1cbdb90f97b30d3', type: "checkbox", checked: this.checked, disabled: this.disabled }), this.checked && index.h("smoothly-icon", { key: 'c2426561b4cc8ecfc22dda449f9fcb959ce95007', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: 'd01cee838d38d0e4e95b8983f33b6c2be20975d1' }, index.h("slot", { key: 'e9af929781e7865a72e7f181ff13e188c638f3f3' }))));
+        return (index.h(index.Host, { key: '4a9d992e99e63476c48d2bdee9b7bacb07bc9249', onMouseDown: (e) => (this.mouseDownPosition = { x: e.clientX, y: e.clientY }), onMouseUp: (e) => { var _a; return ((_a = this.mouseDownPosition) === null || _a === void 0 ? void 0 : _a.x) == e.clientX && this.mouseDownPosition.y == e.clientY && this.click(); } }, index.h("input", { key: '5fc8f81e3ab77873a81f2027b3bf7e3d658ee286', type: "checkbox", checked: this.checked, disabled: this.disabled }), this.checked && index.h("smoothly-icon", { key: 'b04698328c4e760b7e19d90313615dd8b6ae3db0', name: "checkmark-outline", size: "tiny" }), index.h("label", { key: '2665512bd77f63792b080bd2f732ec6833ba1bd8' }, index.h("slot", { key: '22a2e250c9d305e312290d07dc0a2004b5a349ad' }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9272,7 +9282,7 @@ const SmoothlyInputClear = class {
             if (Clearable.is(parent)) {
                 this.parent = parent;
                 if (Editable.Element.is(parent)) {
-                    parent.listen("changed", async (p) => {
+                    parent.listen(async (p) => {
                         if (Input.is(p)) {
                             this.display =
                                 !p.readonly && !p.disabled && (typeof p.defined == "boolean" ? p.defined : Boolean(await p.getValue()));
@@ -9292,8 +9302,9 @@ const SmoothlyInputClear = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'fddacf80ff04af71c6e3739c6534cbd2994d8c6f', title: this.tooltip }, index.h("smoothly-button", { key: '0f06807a3c331ae2330bde31b899072aeb1321e2', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: '7cd67883bcc7edb39a815983d2f08310099f14ab' }), index.h("smoothly-icon", { key: 'fd33d61def689ce77fcf35f6bd63844753f6b3ab', name: "close", size: "tiny" }))));
+        return (index.h(index.Host, { key: 'ddbb4cb1b0b278da0ac4b8dbb3a821b46a2ab8df', title: this.tooltip }, index.h("smoothly-button", { key: 'cadd8805fd38efd9c1f3f382fa12624ea303ef03', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: 'e888976e89e666d1683e2956430ef7b93cfaf0f3' }), index.h("smoothly-icon", { key: '8b8a82692c577116515cf94d518a19d1a9a72d60', name: "close", size: "tiny" }))));
     }
+    get element() { return index.getElement(this); }
 };
 SmoothlyInputClear.style = SmoothlyInputClearStyle0;
 
@@ -9307,7 +9318,7 @@ const SmoothlyInputColor = class {
         this.smoothlyInput = index.createEvent(this, "smoothlyInput", 7);
         this.smoothlyInputLoad = index.createEvent(this, "smoothlyInputLoad", 7);
         this.smoothlyFormDisable = index.createEvent(this, "smoothlyFormDisable", 7);
-        this.listener = {};
+        this.observer = Editable.Observer.create(this);
         this.rgb = { r: undefined, g: undefined, b: undefined };
         this.hsl = { h: undefined, s: undefined, l: undefined };
         this.value = undefined;
@@ -9348,8 +9359,7 @@ const SmoothlyInputColor = class {
         Input.formRename(this, oldName);
     }
     watchingReadonly() {
-        var _a, _b;
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     async register() {
         Input.formAdd(this);
@@ -9373,9 +9383,8 @@ const SmoothlyInputColor = class {
         this.hsl = { h: undefined, s: undefined, l: undefined };
         this.value = undefined;
     }
-    async listen(property, listener) {
-        this.listener[property] = listener;
-        listener(this);
+    async listen(listener) {
+        this.observer.subscribe(listener);
     }
     async edit(editable) {
         this.readonly = !editable;
@@ -9390,10 +9399,9 @@ const SmoothlyInputColor = class {
         this.open = false;
     }
     async valueChanged() {
-        var _a, _b;
         this.changed = this.initialValue !== this.value;
         this.smoothlyInput.emit({ [this.name]: await this.getValue() });
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     handleSwitchMode(event) {
         event.stopPropagation();
@@ -9450,7 +9458,7 @@ const SmoothlyInputColor = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f;
-        return (index.h(index.Host, { key: '4c273dff61693a38675332e40c415c9348755819', style: {
+        return (index.h(index.Host, { key: 'be077545e01bc37aacf99975069cd4950327516b', 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)}`,
@@ -9459,7 +9467,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: 'de288b8ea12f9d0f19aa4d4aeeea36b53f5c1ff3', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: '610d04913976dac17c672e139a9a2b345c784d74' })), index.h("div", { key: '9f02fa758a93832da61a4e1a7b63d2b4ccd6626a', class: "color-sample" }), index.h("smoothly-icon", { key: '541eafd8e741aa5f762b17939f4baaf904fe5ed9', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), index.h("div", { key: '3075800b916ad2814166859a99aeb5afd84aa69a' }, index.h("slot", { key: 'a72fa24d843f555a4eac6fb91208ba1cc6e944a4', name: "end" })), this.open && !this.readonly && !this.disabled && (index.h("div", { key: '64e98ab8fbffffd6f7bd1cb601c096e561365fde', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '76e8dd8140e2c6368d5b8d1d2e3c989901c2e7b2', 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: '4adc0864766d8a3135b9055aec0fca5f5d923ee1', value: this.value, color: this.color, looks: undefined, name: this.name, type: "hex-color", readonly: this.readonly, disabled: this.disabled, showLabel: this.showLabel, onSmoothlyInput: event => (event === null || event === void 0 ? void 0 : event.stopPropagation(), this.hexInputHandler(event.detail[this.name])) }, index.h("slot", { key: 'f920fa0859bbdf719f492fce7330b75612a236d8' })), index.h("div", { key: '63779154010069b1574f93aa92da66ae87f99736', class: "color-sample" }), index.h("smoothly-icon", { key: '8847fa69a7e0690ebdf4565ce1fead0e6542bde5', color: this.color, name: "options-outline", size: "small", onClick: () => !this.readonly && !this.disabled && this.openDropdown() }), index.h("div", { key: '24e555bf1ee6633d88a81bbca6da07fcbda867b3' }, index.h("slot", { key: '05e9074588200641ca27bd5c5cc3c74f7a4e55c7', name: "end" })), this.open && !this.readonly && !this.disabled && (index.h("div", { key: '604fdf0afed1c4dbc68007b20d96dda0860e6c4c', class: "rgb-sliders" }, index.h("smoothly-toggle-switch", { key: '2e422ab08c16385e7a41adcea211072439ff5c38', 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 {
@@ -9492,7 +9500,7 @@ const SmoothlyInputDate = class {
         this.smoothlyInput = index.createEvent(this, "smoothlyInput", 7);
         this.smoothlyInputLooks = index.createEvent(this, "smoothlyInputLooks", 7);
         this.smoothlyFormDisable = index.createEvent(this, "smoothlyFormDisable", 7);
-        this.listener = {};
+        this.observer = Editable.Observer.create(this);
         this.color = undefined;
         this.looks = undefined;
         this.name = undefined;
@@ -9508,12 +9516,11 @@ const SmoothlyInputDate = class {
         this.showLabel = true;
     }
     componentWillLoad() {
-        var _a, _b;
         this.setInitialValue();
         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(parent => (this.parent = parent));
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     async disconnectedCallback() {
         if (!this.element.isConnected)
@@ -9531,22 +9538,19 @@ const SmoothlyInputDate = class {
     async getValue() {
         return this.value;
     }
-    async listen(property, listener) {
-        this.listener[property] = listener;
-        listener(this);
+    async listen(listener) {
+        this.observer.subscribe(listener);
     }
     async clear() {
         this.value = undefined;
     }
     onStart(next) {
-        var _a, _b;
         this.smoothlyValueChange.emit(next);
         this.smoothlyInput.emit({ [this.name]: next });
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     watchingReadonly() {
-        var _a, _b;
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     smoothlyInputHandler(event) {
         if (event.target != this.element)
@@ -9577,13 +9581,13 @@ const SmoothlyInputDate = class {
         event.stopPropagation();
     }
     render() {
-        return (index.h(index.Host, { key: 'c8d26640387979753080f68f7626afea26236924' }, index.h("smoothly-input", { key: '2224d319c896013db03cd0ef4db954a140d737d0', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, errorMessage: this.errorMessage, invalid: this.invalid, type: "date", value: this.value, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: 'd69cd6d52d5ffc7bad35c916d3fe7f0781cd81bd' }, index.h("smoothly-input", { key: 'b92e19b7d941ca7cc4d72a4928c13bd5aae58409', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: this.name, onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, errorMessage: this.errorMessage, 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: '9a7564d540c64cc0ba21907b5dd19d97058c4559' })), index.h("span", { key: '4d0362c4fdc6c71ea2483116740d17a59567734f', class: "icons" }, index.h("slot", { key: '47c38833f2cba5dfe7d2cf69f79dd19636293275', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: 'f0753e04976424706617b53c1776cbe0c2a002fb' }, index.h("smoothly-calendar", { key: '34124eaa0156a6a335605941e153562d2ac2d5a0', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
+            } }, index.h("slot", { key: 'a4051271e461486a6329fd626f086345fb740ab3' })), index.h("span", { key: '727298b844fecca5bbae6582f9149a28a1d726e8', class: "icons" }, index.h("slot", { key: '0b80ee87cb05dbb6aac50f76807c687b90bcddd6', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '91eea6e297e5ac484720d6faaf996e3b00a33c1a' }, index.h("smoothly-calendar", { key: '34c91bd47ae15a865c8518ce7cc705cfe6415d54', doubleInput: false, value: this.value, onSmoothlyValueChange: event => {
                 this.value = event.detail;
                 event.stopPropagation();
-            }, max: this.max, min: this.min }, index.h("div", { key: 'c3242845f33de7c0b09c269f080609358976eda1', slot: "year-label" }, index.h("slot", { key: '6491e9cab2833fffbcea0d2977fae1614b3a2cce', name: "year-label" })), index.h("div", { key: '041c61c8497f22f1e538325af1762375b1809a7d', slot: "month-label" }, index.h("slot", { key: '75cc78b4e2fbcb17035226653eb9348c75ef1f1a', name: "month-label" })))))));
+            }, max: this.max, min: this.min }, index.h("div", { key: 'ef4ad777432c718d372622bc74dfeffb69a18cc1', slot: "year-label" }, index.h("slot", { key: '9076bad2523c5294fb1eac2a556521c56910fc89', name: "year-label" })), index.h("div", { key: '40ecb34b8eb8fb164fb61c904f1fdc4ce97dfde5', slot: "month-label" }, index.h("slot", { key: '291c40aa6b03cbcb7a68d5d6d9e5b4692428ac02', name: "month-label" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9605,7 +9609,7 @@ const SmoothlyInputDateRange = class {
         this.smoothlyInputLoad = index.createEvent(this, "smoothlyInputLoad", 7);
         this.smoothlyInputLooks = index.createEvent(this, "smoothlyInputLooks", 7);
         this.smoothlyFormDisable = index.createEvent(this, "smoothlyFormDisable", 7);
-        this.listener = {};
+        this.observer = Editable.Observer.create(this);
         this.name = "dateRange";
         this.color = undefined;
         this.looks = undefined;
@@ -9623,14 +9627,13 @@ const SmoothlyInputDateRange = class {
         this.open = undefined;
     }
     componentWillLoad() {
-        var _a, _b;
         this.setInitialValue();
         this.updateValue();
         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(parent => (this.parent = parent));
         this.start && this.end && this.smoothlyInput.emit({ [this.name]: { start: this.start, end: this.end } });
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     inputHandler(data) {
         const split = "dateRangeInput" in data && typeof data.dateRangeInput == "string" && data.dateRangeInput.split(" - ");
@@ -9643,13 +9646,11 @@ const SmoothlyInputDateRange = class {
         this.value = this.start && this.end ? { start: this.start, end: this.end } : undefined;
     }
     valueChanged() {
-        var _a, _b;
         this.changed = this.initialStart != this.start || this.initialEnd != this.end;
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     watchingReadonly() {
-        var _a, _b;
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     smoothlyInputLoadHandler(event) {
         Input.registerSubAction(this, event);
@@ -9677,9 +9678,8 @@ const SmoothlyInputDateRange = class {
     async getValue() {
         return this.start && this.end ? { start: this.start, end: this.end } : undefined;
     }
-    async listen(property, listener) {
-        this.listener[property] = listener;
-        listener(this);
+    async listen(listener) {
+        this.observer.subscribe(listener);
     }
     async edit(editable) {
         this.readonly = !editable;
@@ -9700,12 +9700,12 @@ const SmoothlyInputDateRange = class {
     }
     render() {
         const locale = navigator.language;
-        return (index.h(index.Host, { key: '723d9fb6f77df6a6960b5710adc3dc2ae2eb9017', tabindex: this.disabled ? undefined : 0 }, index.h("section", { key: '24a521abc8edcea5d7146ee8a609e30da1fd2907', onClick: () => !this.readonly && !this.disabled && (this.open = !this.open) }, index.h("smoothly-input", { key: 'ebb02f86c423007a05ec8a52bb18e675ed455f85', type: "text", name: "dateRangeInput", readonly: this.readonly, disabled: this.disabled, value: this.start && this.end
+        return (index.h(index.Host, { key: '904c1e2d15a03af0dc32689061c8eb7cd4c04021', tabindex: this.disabled ? undefined : 0 }, index.h("section", { key: 'c55f0ee709378480d046c2ccf78609002be45fc7', onClick: () => !this.readonly && !this.disabled && (this.open = !this.open) }, index.h("smoothly-input", { key: '424a3cd79fe21242a2438d414062350ac92049ba', type: "text", name: "dateRangeInput", readonly: this.readonly, disabled: this.disabled, 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: '37ff9fac453999fd2d4f8ac001b62eef36668be4' }))), index.h("span", { key: 'cac0e59ea6618fb4f8168d3bca74e41985451bdd', class: "icons" }, index.h("slot", { key: '3857b83920202f47e8601d8c56765b5221156e92', name: "end" })), this.open && (index.h("nav", { key: 'c4ccaafdfcef85012e5d682969ec58161c47e102' }, index.h("smoothly-calendar", { key: '23a7abdf72b6f8ea3ca986d01747343380637fe5', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
+            } }, index.h("slot", { key: 'f6f54308d2b805457be35bf61ee3fd6ad599e5d8' }))), index.h("span", { key: '5f6546933ab9e60e263891c45fd0bcf0daa8295f', class: "icons" }, index.h("slot", { key: 'a5428445ada79c37ff5f650e82ab4625e1507cee', name: "end" })), this.open && (index.h("nav", { key: 'be78a3fe4e0867d24125786503672de671600bbc' }, index.h("smoothly-calendar", { key: '5a622ba63f3340347dd925179395f5022b60e8c8', doubleInput: true, onSmoothlyValueChange: e => e.stopPropagation(), onSmoothlyStartChange: e => {
                 e.stopPropagation();
                 this.start = e.detail;
             }, onSmoothlyEndChange: e => {
@@ -9740,7 +9740,7 @@ const SmoothlyInputDateTime = class {
         this.smoothlyInput = index.createEvent(this, "smoothlyInput", 7);
         this.smoothlyInputLooks = index.createEvent(this, "smoothlyInputLooks", 7);
         this.smoothlyFormDisable = index.createEvent(this, "smoothlyFormDisable", 7);
-        this.listener = {};
+        this.observer = Editable.Observer.create(this);
         this.color = undefined;
         this.looks = undefined;
         this.name = undefined;
@@ -9759,12 +9759,11 @@ const SmoothlyInputDateTime = class {
         this.minute = undefined;
     }
     componentWillLoad() {
-        var _a, _b;
         this.setInitialValue();
         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(parent => (this.parent = parent));
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     async disconnectedCallback() {
         if (!this.element.isConnected)
@@ -9785,9 +9784,8 @@ const SmoothlyInputDateTime = class {
             : undefined;
         return TimeZone.DateTime.is(value) ? value : undefined;
     }
-    async listen(property, listener) {
-        this.listener[property] = listener;
-        listener(this);
+    async listen(listener) {
+        this.observer.subscribe(listener);
     }
     async clear() {
         this.value = undefined;
@@ -9796,14 +9794,12 @@ const SmoothlyInputDateTime = class {
         this.minute = undefined;
     }
     async handleChange() {
-        var _a, _b;
         const value = await this.getValue();
         this.smoothlyValueChange.emit(value);
         this.smoothlyInput.emit({ [this.name]: value });
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     valueChange(value) {
-        var _a, _b;
         if (TimeZone.DateTime.is(value)) {
             this.date = TimeZone.DateTime.getDate(value);
             this.hour = TimeZone.DateTime.getHour(value);
@@ -9811,11 +9807,10 @@ const SmoothlyInputDateTime = class {
         }
         this.smoothlyValueChange.emit(value);
         this.smoothlyInput.emit({ [this.name]: value });
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     watchingReadonly() {
-        var _a, _b;
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     smoothlyInputHandler(event) {
         if (event.target != this.element)
@@ -9851,22 +9846,22 @@ const SmoothlyInputDateTime = class {
         this.changed = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'b6f78f639f8f13afb7cb5f14b9cfe4b4b947fd06' }, index.h("smoothly-input", { key: '53a5d042b6e68ec881059c27eb2cc1c22f48bafd', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+        return (index.h(index.Host, { key: 'b62edf4ec82241f178230b6437a0bb8310e739eb' }, index.h("smoothly-input", { key: 'a2d514c20bd8aa429571f4bc426bdd7bf6e4efb3', color: this.color, looks: this.looks == "transparent" ? this.looks : undefined, name: "date", onFocus: () => !this.readonly && !this.disabled && (this.open = !this.open), onClick: () => !this.readonly && !this.disabled && (this.open = !this.open), readonly: this.readonly, disabled: this.disabled, type: "date", value: this.date, showLabel: this.showLabel, onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.date = e.detail.date;
-            } }, index.h("slot", { key: '8a9b8607fa72337f6e15ef034c84d5a70f5ab9bb' })), index.h("smoothly-input", { key: '8130197857e910f1b3a80c86707cd62ac3b86ae1', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+            } }, index.h("slot", { key: '09155a628aa5902a8eb69dafafa52aa4e1b4b334' })), index.h("smoothly-input", { key: '2436383e1dd6d9d94899aeb50cf702656b5529de', name: "hour", type: "integer", max: 23, pad: 2, value: this.hour, readonly: this.readonly, disabled: this.disabled, placeholder: "hh", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.hour = e.detail.hour;
-            } }), index.h("span", { key: '16355666f36792627e83f2a3b0335af1a4bbe045', class: "colon" }, ":"), index.h("smoothly-input", { key: '1171cef1d1f70f86b8d27791587511a4c3a03503', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
+            } }), index.h("span", { key: '4a1d470871e94cd0346c12f409ca0d5100964b44', class: "colon" }, ":"), index.h("smoothly-input", { key: 'ca6ed49b251dab93f96080372f9e4e90c7ea57d9', name: "minute", type: "integer", max: 59, pad: 2, value: this.minute, readonly: this.readonly, disabled: this.disabled, placeholder: "mm", onSmoothlyInputLoad: e => e.stopPropagation(), onSmoothlyInput: e => {
                 e.stopPropagation();
                 this.minute = e.detail.minute;
-            } }), index.h("span", { key: 'ddb09f260db6d7b76aca6411b2e7945dbf8086cf', class: "icons" }, index.h("smoothly-icon", { key: 'c2131746e32f92bed2b2dcca7358ba4df1ae0f0b', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: '006072dd22f0e28c6d314ab781335e28dacc6ccd', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '20a24165181fa3542e3331b0c9c7289acabbd993' }, index.h("smoothly-calendar", { key: '2fc16c679a66537ab6c79fd68c2f4fdaac9d4061', doubleInput: false, value: this.value, min: this.min ? TimeZone.DateTime.getDate(this.min) : undefined, max: this.max ? TimeZone.DateTime.getDate(this.max) : undefined, onSmoothlyValueChange: e => {
+            } }), index.h("span", { key: 'deadce35d8d6921539f09f348ab42fde74f4d550', class: "icons" }, index.h("smoothly-icon", { key: '846cc166103806478ad080b89f598f15594fff92', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: 'b358f111627d79ba1fcccd55838ea62340388e46', name: "end" })), this.open && !this.readonly && (index.h("nav", { key: '17445b9cdd49cb20cd58719ffe391f03ce50b583' }, index.h("smoothly-calendar", { key: '7a590b7c7f1281ee8e95f792483399c00edebd4f', doubleInput: false, value: this.value, min: this.min ? TimeZone.DateTime.getDate(this.min) : undefined, max: this.max ? TimeZone.DateTime.getDate(this.max) : undefined, onSmoothlyValueChange: e => {
                 this.date = e.detail;
                 e.stopPropagation();
             }, onSmoothlyDateSet: e => {
                 this.open = false;
                 e.stopPropagation();
-            } }, index.h("div", { key: '07fa108dce94dcfa0902f75df0856ff0a5078860', slot: "year-label" }, index.h("slot", { key: 'd5a7ccd333e11db94334c811686daaf10b5461bc', name: "year-label" })), index.h("div", { key: 'b1b47c2e0f0245abc6934792c84cd55b92c4275e', slot: "month-label" }, index.h("slot", { key: '80f52f9a7b5a55319f66ea87e88d38c09047041f', name: "month-label" })))))));
+            } }, index.h("div", { key: 'd92438e7c0c25f00c888916ab65a02e1b380b95d', slot: "year-label" }, index.h("slot", { key: '5f26a8e7c2f00bda65a1edab27353e6aa02e6d19', name: "year-label" })), index.h("div", { key: '3a3b6ee62f17acd8c915559cdea259fbced5971b', slot: "month-label" }, index.h("slot", { key: '304c3db5d497f329bd43cd55c308f2810febab61', name: "month-label" })))))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -9954,7 +9949,7 @@ const SmoothlyInputEdit = class {
         this.smoothlyInputLoad.emit(parent => {
             if (Editable.type.is(parent)) {
                 this.parent = parent;
-                parent.listen("changed", async (p) => {
+                parent.listen(async (p) => {
                     this.display = p.readonly;
                 });
             }
@@ -9966,7 +9961,7 @@ const SmoothlyInputEdit = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '0c87c05c43e28ef94869303a3c0fb49643408cb6', title: this.toolTip }, index.h("smoothly-button", { key: '924b8ae93564b6a05f5b517cd5c202d96833edff', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: '9892e2f4933fc8de44c95db09e46e05a496c336e' }), index.h("smoothly-icon", { key: 'b7f6212f6671c833d70378ec916c661c4379a7bf', class: "default", name: "create-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: '8ebaa8909899e7a62fb654294369b40a4eee3abd', title: this.toolTip }, index.h("smoothly-button", { key: 'eea4da3ac5a525a1946cc09ca38fcd135f929231', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined) }, index.h("slot", { key: 'ac302e3629a8a24c58968a33e5da425b5a27e023' }), index.h("smoothly-icon", { key: 'af4a10eeee55d26d8c0736e9bf2b04e84684eec4', class: "default", name: "create-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputEdit.style = SmoothlyInputEditStyle0;
@@ -9981,7 +9976,7 @@ const SmoothlyInputFile = class {
         this.smoothlyInput = index.createEvent(this, "smoothlyInput", 7);
         this.smoothlyInputLoad = index.createEvent(this, "smoothlyInputLoad", 7);
         this.smoothlyFormDisable = index.createEvent(this, "smoothlyFormDisable", 7);
-        this.listener = {};
+        this.observer = Editable.Observer.create(this);
         this.transfer = new DataTransfer();
         this.changed = false;
         this.readonly = false;
@@ -10006,6 +10001,7 @@ const SmoothlyInputFile = class {
         this.smoothlyInput.emit({ [this.name]: await this.getValue() });
         this.smoothlyInputLoad.emit(parent => (this.parent = parent));
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
+        this.observer.publish();
     }
     async disconnectedCallback() {
         if (!this.element.isConnected)
@@ -10029,9 +10025,8 @@ const SmoothlyInputFile = class {
     smoothlyInputLoadHandler(event) {
         Input.registerSubAction(this, event);
     }
-    async listen(property, listener) {
-        this.listener[property] = listener;
-        listener(this);
+    async listen(listener) {
+        this.observer.subscribe(listener);
     }
     async edit(editable) {
         this.readonly = !editable;
@@ -10049,6 +10044,7 @@ const SmoothlyInputFile = class {
     async valueChanged() {
         this.changed = this.initialValue !== this.value;
         this.smoothlyInput.emit({ [this.name]: await this.getValue() });
+        this.observer.publish();
     }
     inputHandler(event) {
         var _a, _b, _c;
@@ -10084,7 +10080,7 @@ const SmoothlyInputFile = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '50061f33708a3da9ee410b257de95828356fa297', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: 'b5e6e3ac0ea6ccf6d9da8158a4fb1c3064a3f742' }, index.h("slot", { key: '574bc0abc64d05c6cc5d5767fab14d32ff518791', name: "label" })), index.h("div", { key: 'f4ec195f35a820d63a522682c1ce1d642177a4c9', class: "input" }, index.h("smoothly-button", { key: '2bc9a472062a4b70386c0855b64d7989be727042', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '76726be80cbec14de61b8212f7c3efdd5d903eed', name: "button" })), index.h("span", { key: 'a4356d04811a60592fd388f90e804f1b086182da' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: 'ecdbf2db1affabccc41950a0b983520d087a650f', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: '0cbe0d749032db48c32c01e1a177b6d1460a84d8', name: "document-attach-outline" })), index.h("input", { key: '4dcd8ace22efcf8867e63bf94d994349242446c8', onFocus: () => console.log("focus file input!"), ref: element => (this.input = element), type: "file", disabled: this.disabled, 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("div", { key: 'f9e2685bcea15ee1b7c6a6803e8e275ba06f006d', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '4bf6ef8413a33c47a851246269ede04a0ef6d4e1', name: "end" }))));
+        return (index.h(index.Host, { key: '3fcd552780f72b36aa209e1df91ed3d510881851', class: { dragging: this.dragging, "has-value": !!this.value }, tabindex: this.disabled ? undefined : 0, onClick: (e) => this.clickHandler(e), onDragOver: (e) => this.dragOverHandler(e), onDragEnter: (e) => this.dragEnterHandler(e) }, index.h("label", { key: '64cb5d49549d2a608b4a67e77db6e03211c9e7e0' }, index.h("slot", { key: 'd6bf757bce81624bf72713889ffba3bbd23ce073', name: "label" })), index.h("div", { key: '23161938d05da2a09ebf5e53b744e4f8bf11c31b', class: "input" }, index.h("smoothly-button", { key: '59993dc93f5c91621a42710b783ebd8af41f77bb', disabled: this.disabled, type: "button", color: this.color, fill: "clear", size: "flexible" }, index.h("slot", { key: '4ac7897f6fbdf2e0ef93266f569c7b4d97ed2601', name: "button" })), index.h("span", { key: '53058bea1332e8ceb1de3e73ccffbd24db9d907c' }, (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : this.placeholder), index.h("div", { key: '62f98b97f191e6d24472ec859b1d759617eb1528', class: "drag-overlay", onDrop: e => this.dropHandler(e), onDragLeave: e => this.dragLeaveHandler(e) }, index.h("smoothly-icon", { key: '20ff77f16558baec3789b09aee6fed3bba339e98', name: "document-attach-outline" })), index.h("input", { key: '65c0715fdc4707f140ab3601932b00177ae65b02', onFocus: () => console.log("focus file input!"), ref: element => (this.input = element), type: "file", disabled: this.disabled, 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("div", { key: 'c92940123c0f0899f0e2e009aa6868b1b193dc55', class: "end", onClick: (e) => e.stopPropagation() }, index.h("slot", { key: '72ea4aa539cb9e72b1875f6b75d5498f3f6fa04a', name: "end" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10104,7 +10100,7 @@ const SmoothlyInputMonth = class {
         this.smoothlyInputLoad = index.createEvent(this, "smoothlyInputLoad", 7);
         this.smoothlyFormDisable = index.createEvent(this, "smoothlyFormDisable", 7);
         this.smoothlyInputLooks = index.createEvent(this, "smoothlyInputLooks", 7);
-        this.listener = {};
+        this.observer = Editable.Observer.create(this);
         this.readonly = undefined;
         this.color = undefined;
         this.looks = undefined;
@@ -10169,9 +10165,8 @@ const SmoothlyInputMonth = class {
         (_a = this.year) === null || _a === void 0 ? void 0 : _a.clear();
         (_b = this.month) === null || _b === void 0 ? void 0 : _b.clear();
     }
-    async listen(property, listener) {
-        this.listener[property] = listener;
-        listener(this);
+    async listen(listener) {
+        this.observer.subscribe(listener);
     }
     async edit(editable) {
         this.readonly = !editable;
@@ -10209,9 +10204,9 @@ const SmoothlyInputMonth = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '7c6ac3689a9f1850f9a49fd320d240e2cb71383c' }, index.h("smoothly-icon", { key: '89474f4704b16f75a7fa0e0aebad8f795c89eb86', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
+        return (index.h(index.Host, { key: 'b0b371895f8814d99ec816202794541d23707330' }, index.h("smoothly-icon", { key: '5fc433c271b08d7a8960ef3848a83842ed1aad6d', name: "caret-back-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowPreviousMonth,
-            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: '96e42ec2ba053627355b8137eef9427f0a2a05a9', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '3a3d8c14041b7c98894aca143959d0dd76151fa4', slot: "label" }, index.h("slot", { key: '7f6b67c9ae5a419ad430cdd2fad3939d049416ff', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), this.min, this.max).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: '25c08a705303f81e14cda0dcf4f5e37f72733e17', 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, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '635939635d7f16faceff1fbd0f529de9dfcb0d5c', slot: "label" }, index.h("slot", { key: 'de425931f6167222956060e405b8d1d360fc23f4', 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: '89fc3a996a032a14df695f4745713008e5a67a5b', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
+            }, onClick: () => this.allowPreviousMonth && this.adjustMonth(-1) }), index.h("smoothly-input-select", { key: 'c0d7d15c1122d6d56e02159f140acfbdd12b6aac', ref: e => (this.year = e), name: `${this.name}-year`, readonly: this.readonly, changed: this.changed, menuHeight: "5.5items", required: true, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: 'e06d19e8abad104b04f727f92d56c224493c1948', slot: "label" }, index.h("slot", { key: '6e8cd6c34a1ba25bd2c8675bf46acb50d8403c30', name: "year-label" })), years((_a = this.value) !== null && _a !== void 0 ? _a : TimeZone.Date.now(), this.min, this.max).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: 'c8c22bbc649afb24ae9f21c8e02b659f5dec5c3a', 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, ordered: true, inCalendar: this.inCalendar, showLabel: this.showLabel, onSmoothlyInput: e => this.inputHandler(e), searchDisabled: true }, index.h("div", { key: '8ed9c884883852cfa520c8439f398d6215fc1dad', slot: "label" }, index.h("slot", { key: 'c135c4f104ad829497972f6022b8b510ecbf31d4', 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: 'c2c88b182e6886d10c6180e75b78948da0798849', name: "caret-forward-outline", size: "tiny", color: this.color, fill: "default", class: {
                 disabled: this.readonly || !this.allowNextMonth,
             }, onClick: () => this.allowNextMonth && this.adjustMonth(1) })));
     }
@@ -10251,7 +10246,7 @@ const SmoothlyInputRadio = class {
         this.smoothlyInputLoad = index.createEvent(this, "smoothlyInputLoad", 7);
         this.smoothlyFormDisable = index.createEvent(this, "smoothlyFormDisable", 7);
         this.valueReceivedOnLoad = false;
-        this.listener = {};
+        this.observer = Editable.Observer.create(this);
         this.changed = false;
         this.value = undefined;
         this.looks = undefined;
@@ -10263,10 +10258,9 @@ const SmoothlyInputRadio = class {
         this.showLabel = true;
     }
     componentWillLoad() {
-        var _a, _b;
         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);
+        this.observer.publish();
     }
     componentDidLoad() {
         !this.valueReceivedOnLoad && this.smoothlyInput.emit({ [this.name]: this.value });
@@ -10295,9 +10289,8 @@ const SmoothlyInputRadio = class {
         }
         !this.valueReceivedOnLoad && (this.valueReceivedOnLoad = !this.valueReceivedOnLoad);
     }
-    async listen(property, listener) {
-        this.listener[property] = listener;
-        listener(this);
+    async listen(listener) {
+        this.observer.subscribe(listener);
     }
     async disconnectedCallback() {
         if (!this.element.isConnected)
@@ -10338,17 +10331,16 @@ const SmoothlyInputRadio = class {
         this.valueChanged();
     }
     async valueChanged() {
-        var _a, _b, _c;
+        var _a;
         this.valueReceivedOnLoad && (this.changed = ((_a = this.initialValue) === null || _a === void 0 ? void 0 : _a.value) !== this.value);
         this.smoothlyInput.emit({ [this.name]: await this.getValue() });
-        (_c = (_b = this.listener).changed) === null || _c === void 0 ? void 0 : _c.call(_b, this);
+        this.observer.publish();
     }
     watchingReadonly() {
-        var _a, _b;
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     render() {
-        return (index.h(index.Host, { key: '1751c34065a3411acf1690d8e3dd776cfaa04866', class: "floating-label" }, index.h("slot", { key: 'a97e1bbd19f323ca1568e95a5fdb413e23733a40', name: "start" }), index.h("div", { key: '2cfa7648e97ab96e4accc52f87012f0cc6a0862a' }, index.h("slot", { key: '90c4264e3a29fac6037c16877acee57414d24df9', name: "label" }), index.h("div", { key: 'e9cbb6e3c40da7e52e9053526afabfae03624b7d', class: "options" }, index.h("slot", { key: '38e04db8fd72e8a0f1293cbe384fbcd7823af78f' }))), index.h("slot", { key: 'b496c11456d00c4dadc565e22b349c6f695e1919', name: "end" })));
+        return (index.h(index.Host, { key: 'b7c1455b07889830d666e6c0f8719f3617904dd9', class: "floating-label" }, index.h("slot", { key: '5a2c9f16b1b016d9a4962389a4c7d92431bf05f8', name: "start" }), index.h("div", { key: '04302d58a80fc76da61948ab97fad81c66579d5a' }, index.h("slot", { key: '5d2cd7ae129747a44d22da8e8f49ed336d3d358a', name: "label" }), index.h("div", { key: 'a28ba62a97a14a8a6978018bacb77f466f6edefb', class: "options" }, index.h("slot", { key: '9db948375488c32487a7eae6e28b7d8961d95882' }))), index.h("slot", { key: 'c708ce2b807d938ae94c9602a38376773f910a05', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10397,7 +10389,7 @@ const SmoothlyInputRange = class {
         this.smoothlyInput = index.createEvent(this, "smoothlyInput", 7);
         this.smoothlyInputLoad = index.createEvent(this, "smoothlyInputLoad", 7);
         this.smoothlyFormDisable = index.createEvent(this, "smoothlyFormDisable", 7);
-        this.listener = {};
+        this.observer = Editable.Observer.create(this);
         this.initialValue = undefined;
         this.value = undefined;
         this.looks = undefined;
@@ -10452,9 +10444,8 @@ const SmoothlyInputRange = class {
     async clear() {
         this.value = undefined;
     }
-    async listen(property, listener) {
-        this.listener[property] = listener;
-        listener(this);
+    async listen(listener) {
+        this.observer.subscribe(listener);
     }
     async edit(editable) {
         this.readonly = !editable;
@@ -10467,17 +10458,16 @@ const SmoothlyInputRange = class {
         this.valueChanged();
     }
     valueChanged() {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const decimals = !this.step ? undefined : (_b = (_a = this.step.toString().split(".")[1]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
         this.value = Number.isNaN(this.value) || this.value == undefined ? undefined : +this.value.toFixed(decimals);
         this.changed = this.initialValue !== this.value;
         this.defined = typeof this.value === "number";
-        (_d = (_c = this.listener).changed) === null || _d === void 0 ? void 0 : _d.call(_c, this);
+        this.observer.publish();
         this.smoothlyInput.emit({ [this.name]: this.value });
     }
     watchingReadonly() {
-        var _a, _b;
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     setValue(value) {
         var _a;
@@ -10493,17 +10483,17 @@ const SmoothlyInputRange = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '298e4ca99b3b3fc7040d0769eb6f38b21c74f4db', class: {
+        return (index.h(index.Host, { key: 'f5c73554489c4365f596dfc3acc0c3c0e126b8cf', class: {
                 "output-side-right": this.outputSide === "right",
                 "show-label": this.outputSide === "left" && !!this.label,
-            } }, index.h("slot", { key: '00f46bce4a4c536df7165a8eb4f010d3b785f81a', name: "start" }), index.h("div", { key: 'd24ffad17e54c1d39e804f033045f2805b234913' }, index.h("label", { key: 'f98c6d06e28b783b3d4a8e83b49ba10368d86339', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '0101d2fe2884a6deb6b24275335fd943e46f094c', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
+            } }, index.h("slot", { key: '871f8ade02e022cb67f6fef41aa654d54ef71746', name: "start" }), index.h("div", { key: 'c8de031ab411b24cfe347d6b920bd65b2c78f8c5' }, index.h("label", { key: '1e10e72beb32359ed38e0c232eeff7d7fb432168', htmlFor: this.name }, this.label), index.h("smoothly-input", { key: '53ee4a0653cd3eff5e4c10a57b3ef295ec61390a', ref: e => (this.input = e), looks: undefined, color: this.color, name: this.name, showLabel: this.outputSide === "left" && !!this.label, type: this.type, onSmoothlyInputLoad: async (e) => (e.stopPropagation(),
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined)), onSmoothlyBlur: e => e.stopPropagation(), onSmoothlyInput: async (e) => {
                 e.stopPropagation();
                 this.setValue(Input.Element.is(e.target) ? Number(await e.target.getValue()) : undefined);
-            }, 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, disabled: this.disabled }, this.label), index.h("smoothly-display", { key: '5bf8519541afe433d876fbb0a8435cd8111d3667', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: 'e966af545bad91b9b0e441cf0336a6772bcff969', 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 || this.disabled, onInput: event => {
+            }, 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, disabled: this.disabled }, this.label), index.h("smoothly-display", { key: '035983bbe36c0c5d2f5c6c0d1a4d2ca9162cab25', label: (this.type == "percent" ? this.min * 100 : this.min).toString() }), index.h("input", { key: 'de7e00ec27fa44624d6c5efb83edc1d9028108cf', 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 || this.disabled, onInput: event => {
                 event.stopPropagation();
                 this.setValue(event.target.valueAsNumber);
-            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: 'b32789a33e44f224ab9b27adf988ce0129ea63ec', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: '844118adb3bd8f2b058c725bfb24589584156e13', name: "end" })));
+            }, value: (_c = this.value) !== null && _c !== void 0 ? _c : this.min }), index.h("smoothly-display", { key: 'd5e9d3fa21f133737fb31c64ba4da153f81b73d7', label: (this.type == "percent" ? this.max * 100 : this.max).toString() })), index.h("slot", { key: 'de8681886a7180a275b33d84a83864ffab34e4f7', name: "end" })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10546,7 +10536,7 @@ const SmoothlyInputReset = class {
             if (Editable.Element.type.is(parent)) {
                 this.parent = parent;
                 this.readonlyAtLoad = parent.readonly;
-                parent.listen("changed", async (p) => {
+                parent.listen(async (p) => {
                     if (Input.is(p)) {
                         this.display = p.readonly || p.defined ? false : p.changed;
                     }
@@ -10566,7 +10556,7 @@ const SmoothlyInputReset = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'f19344d58510b427740e732c9ff8b7410b997bdf', title: this.tooltip }, index.h("smoothly-button", { key: '39b4ffc55fc9ef84ef6be7064b2054b2c2d9daa0', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, index.h("slot", { key: '2555be362a7f057eec629218881510f96fbca485' }), index.h("smoothly-icon", { key: '58ec4b1ab150a08ea321e7aed7edc94057e6063c', flip: "x", name: "refresh-outline", size: "tiny" }))));
+        return (index.h(index.Host, { key: 'cfcb512f27ac8aa99bb70dd5e735228ca0f833fc', title: this.tooltip }, index.h("smoothly-button", { key: '55e33bb0c597866cef32db38fc1e64d49b34d904', disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: this.color, fill: (_a = this.fill) !== null && _a !== void 0 ? _a : (this.type == "input" ? "clear" : undefined), onClick: event => this.clickHandler(event) }, index.h("slot", { key: '90b9c41bc16365cb62da1c3da70a70714215f200' }), index.h("smoothly-icon", { key: '971b9fe933fbefebc6df394e711518400d7c0b3d', flip: "x", name: "refresh-outline", size: "tiny" }))));
     }
 };
 SmoothlyInputReset.style = SmoothlyInputResetStyle0;
@@ -10600,7 +10590,7 @@ const SmoothlyInputSelect = class {
         this.smoothlyItemSelect = index.createEvent(this, "smoothlyItemSelect", 7);
         this.initialValue = [];
         this.initialValueHandled = false;
-        this.listener = {};
+        this.observer = Editable.Observer.create(this);
         this.items = [];
         this.lastOpen = false;
         this.invalid = false;
@@ -10629,11 +10619,10 @@ const SmoothlyInputSelect = class {
         this.addedItems = [];
     }
     componentWillLoad() {
-        var _a, _b;
         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(parent => (this.parent = parent));
         !this.readonly && this.smoothlyFormDisable.emit(readonly => (this.readonly = readonly));
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     componentDidLoad() {
         this.selected && !this.initialValueHandled && (this.initialValue = [...this.selected]);
@@ -10676,9 +10665,8 @@ const SmoothlyInputSelect = class {
     async getItems() {
         return this.items;
     }
-    async listen(property, listener) {
-        this.listener[property] = listener;
-        listener(this);
+    async listen(listener) {
+        this.observer.subscribe(listener);
     }
     async reset() {
         this.selected.forEach(item => (item.selected = item.hidden = false));
@@ -10706,11 +10694,10 @@ const SmoothlyInputSelect = class {
         this.initialValue = [...this.selected];
     }
     async onSelectedChange() {
-        var _a, _b;
         this.initialValueHandled && (this.changed = !this.areValuesEqual(this.selected, this.initialValue));
         this.defined = this.selected.length > 0;
         this.smoothlyInput.emit({ [this.name]: await this.getValue() });
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     onRequiredChange() {
         this.items.forEach(item => (item.deselectable = !this.required));
@@ -10720,8 +10707,7 @@ const SmoothlyInputSelect = class {
         await Promise.all(this.items.map(item => item.filter(value)));
     }
     watchingReadonly() {
-        var _a, _b;
-        (_b = (_a = this.listener).changed) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+        this.observer.publish();
     }
     async smoothlyInputLoadHandler(event) {
         if (event.target &&
@@ -10879,14 +10865,14 @@ 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: '9027b35989b69896e35a67c85db5044ae6124003', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '3919a5bf47f0ac7ad2bac9a917cbc069777301b7', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: 'e39035b4ac70da501bc2d9a3f3a4604f0ddee64d', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("smoothly-icon", { key: '7f91512f70799ba9ab4a266db8413e9554172380', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: 'd4b10e3413f16ba3225a457cb0a7c30848737bfd', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '615334532011872471af671d4b94bcdccef19898', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index.h("slot", { key: '7282ad78e6038a209695751f711a1b0fabbcfbce', name: "label" }), index.h("div", { key: '2e6de39c66b64a9db4d381032dfbe37aab217702', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: '1c4ec47adffb3ea8db7574502ecb6520a16b1668', class: "search-preview" }, index.h("smoothly-icon", { key: '99f88c6c487fdb0060964db8c5c7545823fb37aa', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '6c109e64810d36ae84266db6712daf757041b93b', name: "backspace-outline", size: "small", onClick: e => {
+        return (index.h(index.Host, { key: 'c4c39905e1c703d86dd2b716bbc085025640ed4d', tabIndex: this.disabled ? undefined : 0, class: { "has-value": this.selected.length !== 0, open: this.open }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '0f79512aff08e3b6fc2db109ee3e793432590c16', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: '1d99b6e3373ea293ba11267bde0b8ca6158ff3c5', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("smoothly-icon", { key: 'fbb39d312f55c8e02d6a180cb81cd02e6fef7de5', class: "smoothly-invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small", toolTip: this.errorMessage }), index.h("slot", { key: '934597ba325b7c2f63e6b1db65fe9423f29211b2', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '89ac02e9873174cc7ec564c60b15e62b099d2288', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" }))), index.h("slot", { key: 'aa23ef1f815c43637a5e66adf47c29774fa9f28c', name: "label" }), index.h("div", { key: '3917b3caee7654ee32553c53bdcc9d8ec1702f5e', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("div", { key: 'c3fcd083cdd8a4653ea0691b6bdb22e677b29903', class: "search-preview" }, index.h("smoothly-icon", { key: 'b60a35138ee592ecc1f1437362d684c2de2f883a', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: '39801ad4f09cdc3f52bdec75168b74fca4cb4bc2', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (index.h("smoothly-icon", { key: '88c5c2b10030b7b863104fb71b48c376d2109ad2', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (index.h("smoothly-icon", { key: '526ca5628a7b6d3e481cb963544fe016481af876', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: '7f1ce453668d4a121fdf1970b269e835671d31e2' }), this.addedItems)));
+            } })))), index.h("slot", { key: 'c5586da9bfefb3d88e5336147c1dc4105556fcd6' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -10923,7 +10909,7 @@ const SmoothlyInputSubmit = class {
         this.smoothlyInputLoad.emit(parent => {
             if (Submittable.Submittable.is(parent) && Editable.type.is(parent)) {
                 this.parent = parent;
-                parent.listen("changed", async (p) => {
+                parent.listen(async (p) => {
                     var _a;
                     this.display = !p.readonly;
                     this.disabled =
@@ -10941,7 +10927,7 @@ const SmoothlyInputSubmit = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'd3f7cdff0e698be6b02577653d00134d9122f93b', title: this.toolTip }, this.delete == true ? (index.h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, index.h("slot", null), index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index.h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, index.h("slot", null), this.icon && index.h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
+        return (index.h(index.Host, { key: 'eb9eedb06745479c999e28f157791e5ba6a72c15', title: this.toolTip }, this.delete == true ? (index.h("smoothly-button-confirm", { size: this.size, shape: this.shape, expand: this.expand, color: (_a = this.color) !== null && _a !== void 0 ? _a : "danger", fill: this.fill, onSmoothlyConfirm: () => this.clickHandler() }, index.h("slot", null), index.h("smoothly-icon", { name: "trash-outline", fill: "solid", size: "tiny" }))) : (index.h("smoothly-button", { disabled: this.disabled, size: this.size, type: "button", shape: this.shape, expand: this.expand, color: (_b = this.color) !== null && _b !== void 0 ? _b : "success", fill: this.fill, onClick: () => this.clickHandler() }, index.h("slot", null), this.icon && index.h("smoothly-icon", { name: this.icon, fill: "solid", size: "tiny" })))));
     }
 };
 SmoothlyInputSubmit.style = SmoothlyInputSubmitStyle0;