smoothly 1.2.1-alpha.36 → 1.2.1-alpha.37

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

@@ -10419,6 +10419,7 @@ const SmoothlyInputSelect = class {
             this.items.push(event.target);
         }
         Input.registerSubAction(this, event);
+        this.displaySelected();
     }
     onWindowClick(event) {
         !event.composedPath().includes(this.element) && this.open && this.handleShowOptions();
@@ -10459,10 +10460,10 @@ const SmoothlyInputSelect = class {
         return selected.length === initialValue.length && initialValue.every(value => selected.includes(value));
     }
     displaySelected() {
-        const displayString = "<div>" + this.selected.map(option => option.innerHTML).join("</div><div>") + "</div>";
+        var _a;
+        const displayString = this.selected.map(option => `<div>${option.innerHTML}</div>`).join("");
         this.displaySelectedElement &&
-            (this.displaySelectedElement.innerHTML =
-                this.selected.length > 0 ? displayString : this.placeholder ? this.placeholder : "");
+            (this.displaySelectedElement.innerHTML = this.selected.length > 0 ? displayString : (_a = this.placeholder) !== null && _a !== void 0 ? _a : "");
     }
     onKeyDown(event) {
         if (!this.searchDisabled) {
@@ -10564,14 +10565,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: 'fb0756c6066361bd2287aebc6d28b5f2496bc394', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: '9bfa5562754d20fb476b2e31c0ec2893c03d51cf', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: 'a16dd0637d4a14ce7c0c4087722c0290928f8d05', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { key: '1205952806dbbc15ae2f21d6c28bf38f3098c97c', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '4f8ef15bd401a71207b649bea68c1fc1f9459896', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("smoothly-icon", { key: '8e132252a0c1f1385b2abd12959d677c817c6958', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: 'fd83ad097c45d8fff14e9f2283cf98235ff8fba5', name: "label" }), index.h("div", { key: 'fb839d6052e539a55269290220ac5b6556fd384e', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("smoothly-item", { key: '675b123e1c9dda89f283bc90dd3b5cf187b3913c', selectable: false }, index.h("smoothly-icon", { key: '98bf2c68ab35af19717bbdcbb4afb70b13eb14ff', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: 'd841fbef1a3ab0cbb0106917d73236a1a06fd2aa', name: "backspace-outline", size: "small", onClick: e => {
+        return (index.h(index.Host, { key: 'd1c9b93fad2d17379884f60c0629fdbee3982b33', tabIndex: 0, class: { "has-value": this.selected.length !== 0, open: this.open, invalid: !!this.invalid }, onClick: (event) => this.handleShowOptions(event) }, index.h("div", { key: 'd1ce88ad0cb990e44f3bbafcb07cd3ccb7477532', class: "select-display", ref: element => (this.displaySelectedElement = element) }, this.placeholder), index.h("div", { key: 'ea9aaf7bdb1869f59bed2faaaae2634e40d7410b', class: "icons", ref: element => (this.iconsDiv = element) }, index.h("slot", { key: 'fb62b83e6963f00b00d342bc7402c104bc80cd66', name: "end" }), this.looks == "border" && !this.readonly && (index.h("smoothly-icon", { key: '2ca62cfc6d36dba10862225ac2fc09e44a65fffc', ref: element => (this.toggle = element), size: "tiny", name: this.open ? "caret-down-outline" : "caret-forward-outline" })), index.h("smoothly-icon", { key: '73a043a0f8ccb418a12391d3f4ab20bc1218a484', class: "invalid", name: "alert-circle", color: "danger", fill: "clear", size: "small" })), index.h("slot", { key: '01c93c6030d690fb9bd861a5b7f3c552dd426adb', name: "label" }), index.h("div", { key: '4d24b8e8614bb04edb492ce561d5ca76138936c4', class: { hidden: !this.open, options: true }, ref: (el) => (this.optionsDiv = el) }, this.filter.length > 0 && (index.h("smoothly-item", { key: 'a6e327236bbd8f883e171814f3e63da132e1f8a9', selectable: false }, index.h("smoothly-icon", { key: '8e7f7ec093b93f555344fa6e4ffa3d6c8fe1f46c', name: "search-outline", size: "small" }), this.filter, index.h("smoothly-icon", { key: 'cf74cf7b4cc2064b7f4b5f9072ac55f49abefb2a', name: "backspace-outline", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.filter = "";
                 this.element.focus();
-            } }), this.mutable && (index.h("smoothly-icon", { key: '2341fc5864c70c90f2d2629bf1168bb0bb669f95', name: "add", size: "small", onClick: e => {
+            } }), this.mutable && (index.h("smoothly-icon", { key: '54e9d15f103ffbf92b3ef7cd97d98093b733c322', name: "add", size: "small", onClick: e => {
                 e.stopPropagation();
                 this.addItem();
-            } })))), index.h("slot", { key: '9f4727478c8483f3e35ed3e24604f4bb18d9c7c4' }), this.addedItems)));
+            } })))), index.h("slot", { key: '5d7742c0f63cc8acabde6edf5ac675f5f2548b56' }), this.addedItems)));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {