@oiz/stzh-components 4.10.0 → 4.11.0-beta1

package/dist/collection/components/stzh-dropdown/stzh-dropdown.js

@@ -33,6 +33,16 @@ let dropdownCounter = 0;
  */
 export class StzhDropdown {
     constructor() {
+        this._options = [];
+        /**
+         * Set selected option values. Always set this in usage with stzh-components-angular (see examples in usage docs).
+         * To get the current (user) selected options, use `getItems` method.
+         */
+        this.items = "";
+        /**
+         * Default items (used by reset)
+         */
+        this.defaultItems = [];
         /**
          * An array of property names to analyze when filtering options.
          * Weights can be given to each field to improve search result:
@@ -116,8 +126,10 @@ export class StzhDropdown {
         /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
         this.a11yDescribedby = "";
         this.focusedByInput = false;
+        this.typedValueMap = new Map();
         this.handleReset = () => {
-            this.items = [...this.defaultItems];
+            var _a;
+            this.items = this.multiple ? [...this.defaultItems] : ((_a = this.defaultItems[0]) !== null && _a !== void 0 ? _a : "");
         };
         this.onRootFocus = () => {
             if (!this.focusedByInput) {
@@ -134,21 +146,29 @@ export class StzhDropdown {
         }
     }
     optionsWatcher(newValue) {
-        if (typeof newValue === "string") {
-            this._options = JSON.parse(newValue);
-        }
-        else {
-            this._options = newValue;
-        }
+        const parsedOptions = typeof newValue === "string" ? JSON.parse(newValue) : (newValue !== null && newValue !== void 0 ? newValue : []);
+        this.typedValueMap.clear();
+        this._options = parsedOptions.map(option => {
+            const typedValue = option[this.valueField];
+            const internalValue = String(typedValue);
+            this.typedValueMap.set(internalValue, typedValue);
+            return Object.assign(Object.assign({}, option), { [this.valueField]: internalValue });
+        });
     }
     itemsWatcher(newValue) {
         if (typeof newValue === "string") {
-            this._items = JSON.parse(newValue);
+            if (this.isJsonArrayString(newValue)) {
+                const parsed = JSON.parse(newValue);
+                this._items = this.toInternalValues(parsed);
+            }
+            else {
+                this._items = this.toInternalValues(newValue);
+            }
         }
         else {
-            this._items = newValue;
+            this._items = this.toInternalValues(newValue);
         }
-        this.value = this._items;
+        this.value = this.toPublicValue(this._items);
     }
     searchFieldWatcher(newValue) {
         if (typeof newValue === "string") {
@@ -193,11 +213,11 @@ export class StzhDropdown {
      * this returns an array, otherwise a string.
      */
     async getValue() {
-        return this.tomSelect.getValue();
+        return this.toPublicValue(this.tomSelect.items);
     }
     /** Set new value */
     async setValue(newValue, silent = false) {
-        this.tomSelect.setValue(newValue, silent);
+        this.tomSelect.setValue(this.toInternalValues(newValue), silent);
     }
     /** Reset loaded/cached search queries (calls from load property function) */
     async resetLoadedSearches() {
@@ -209,7 +229,7 @@ export class StzhDropdown {
     }
     /** Return current selected items */
     async getItems() {
-        return this.tomSelect.items;
+        return this.toExternalValues(this.tomSelect.items);
     }
     /** Load items by calling load property/function */
     async loadItems(query) {
@@ -223,6 +243,34 @@ export class StzhDropdown {
     async hide() {
         return this.tomSelect.close();
     }
+    // TomSelect can only handle string values, so we need to always convert numbers at component border.
+    isJsonArrayString(value) {
+        const trimmed = value.trim();
+        return trimmed.startsWith("[") && trimmed.endsWith("]");
+    }
+    toInternalValue(value) {
+        return String(value);
+    }
+    toInternalValues(value) {
+        if (value === undefined || value === null || value === "")
+            return [];
+        if (Array.isArray(value)) {
+            return value.map(v => this.toInternalValue(v));
+        }
+        return [this.toInternalValue(value)];
+    }
+    toExternalValue(value) {
+        var _a;
+        return (_a = this.typedValueMap.get(value)) !== null && _a !== void 0 ? _a : value;
+    }
+    toExternalValues(values) {
+        return values.map(v => this.toExternalValue(v));
+    }
+    toPublicValue(values) {
+        if (this.multiple)
+            return this.toExternalValues(values);
+        return values.length > 0 ? this.toExternalValue(values[0]) : "";
+    }
     updateFilled() {
         var _a;
         if (((_a = this._items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
@@ -397,43 +445,41 @@ export class StzhDropdown {
                     return `<div class="stzh-dropdown__dropdown"></div>`;
                 },
             },
-            onChange: value => {
+            onChange: _value => {
                 this._items = this.tomSelect.items;
                 this.updateFilled();
-                this.value = this.multiple ? this._items : this._items[0];
+                this.value = this.toPublicValue(this._items);
                 this.stzhChange.emit({
                     component: "stzh-dropdown",
-                    value,
+                    value: this.value,
                 });
             },
             onItemAdd: value => {
                 this._items = this.tomSelect.items;
                 this.stzhItemAdd.emit({
                     component: "stzh-dropdown",
-                    value,
+                    value: this.toExternalValue(value),
                 });
             },
             onItemRemove: value => {
                 this._items = this.tomSelect.items;
                 this.stzhItemRemove.emit({
                     component: "stzh-dropdown",
-                    value,
+                    value: this.toExternalValue(value),
                 });
             },
             onOptionAdd: value => {
-                this._options = this.tomSelect.options;
                 this.updateFilled();
                 this.stzhOptionAdd.emit({
                     component: "stzh-dropdown",
-                    value,
+                    value: this.toExternalValue(value),
                 });
             },
             onOptionRemove: value => {
-                this._options = this.tomSelect.options;
                 this.updateFilled();
                 this.stzhOptionRemove.emit({
                     component: "stzh-dropdown",
-                    value,
+                    value: this.toExternalValue(value),
                 });
             },
             onDropdownOpen: () => {
@@ -498,9 +544,7 @@ export class StzhDropdown {
                     component: "stzh-dropdown",
                 });
             },
-            onLoad: () => {
-                this._options = this.tomSelect.options;
-            },
+            onLoad: () => { },
         };
         if (this._options) {
             tomSelectOptions.options = this._options;
@@ -555,14 +599,14 @@ export class StzhDropdown {
             [`stzh-dropdown--size-${this.size}`]: !!this.size,
             [`stzh-dropdown--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: 'b80b2d3ccc4b56b7ed98086d0af68d5e48496eea', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '1f2079345e46f91407092e99e32317363f30f1b8', class: classes, ref: el => (this.rootElement = el) }, h("div", { key: '8a26d1576afefb40469fa190b573abca34b05557', class: "stzh-dropdown__wrapper" }, h("label", { key: 'a8aa4da2ca1ee43df188e89bb106af2923b41b76', id: `${this.dropdownId}-label`, class: {
+        return (h(Host, { key: '5462784be51749a495688d199853eeaf16b6f15b', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '36a0f64412ef974dac8090c5b46c087a7a1188ec', class: classes, ref: el => (this.rootElement = el) }, h("div", { key: '356cc6843b83d494625d9cfa0595994e60324a06', class: "stzh-dropdown__wrapper" }, h("label", { key: 'bc999b83b4e58e7b3f82e1af629bd17819490505', id: `${this.dropdownId}-label`, class: {
                 "stzh-dropdown__label": true,
                 "no-label-truncate": this.noLabelTruncate,
-            }, htmlFor: this.dropdownId }, this.label ? this.label : h("slot", { name: "label" }), !this.hideOptional && (h("span", { key: '4864574a2143cca90fbcd006dc1a68c7e4363c22', class: "stzh-dropdown__marker" }, h("span", { key: '37d2ab0af760d8f33177a6b282187501c7665fc4', class: "stzh-dropdown__marker-symbol", "aria-hidden": "true" }, this.required
+            }, htmlFor: this.dropdownId }, this.label ? this.label : h("slot", { name: "label" }), !this.hideOptional && (h("span", { key: '6f496a63ac24daa7006aebb89e0feaea2681bf6c', class: "stzh-dropdown__marker" }, h("span", { key: '6ca53123dda9ad21436e3888764f0ab25e017d51', class: "stzh-dropdown__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'd4816679d592bf80db2e716ae78d4d26991eb796', class: "stzh-dropdown__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '70709e9fc3a480de20fa3f506c53fd2218ea9087', class: "stzh-dropdown__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), h("div", { key: 'b8f197549c2c5946e9e1eb32eda0482e84feb6f0', class: "stzh-dropdown__field-wrapper" }, h("select", { key: '009b652fbe109f310ec66af623d669355f9b1d14', id: this.dropdownId, class: "stzh-dropdown__select", ref: el => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-labelledby": `${this.dropdownId}-label ${this.dropdownId}-not-loading ${this.dropdownId}-no-results ${this.hideOptional && this.required && `${this.dropdownId}-required`} ${this.invalid && `${this.dropdownId}-invalid`} ${this.dropdownId}-description ${this.a11yDescribedby}` }, h("slot", { key: '0469863a0fd4699a267e835cb836438b55b2a348' })), this.inline && this.label && h("div", { key: 'c8e5c0a2070699731901ffee238f1b4dbf6220d7', class: "stzh-dropdown__sizer" }, this.label), h("div", { key: '1a77bb8ad1339996fc0f186f80338dea03f1f90c', class: "stzh-dropdown__icon-angle-wrapper" }, this.iconAngle ? (h("stzh-icon", { name: this.iconAngle, class: "stzh-dropdown__icon-angle" })) : (h("slot", { name: "icon-angle" }))), h("div", { key: '2275927a9e3a454eba74d780a495b31d2788fe38', class: "stzh-dropdown__icon-wrapper" }, this.icon ? (h("stzh-icon", { class: "stzh-dropdown__icon", name: this.icon })) : (h("slot", { name: "icon" }))), this.hideOptional && this.required && (h("div", { key: 'f756e143584e0022a0e0b8067b7ca70fa801809a', id: `${this.dropdownId}-required`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.requiredFieldText)), this.invalid && (h("div", { key: 'da15797ff3de922d87186fd5529c71daa4fbf8d1', id: `${this.dropdownId}-invalid`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.invalidFieldText)))), h("div", { key: '212e39b885f2c6161d9f003eff36de9fdd4f861e', class: "stzh-dropdown__dropdown-wrapper", ref: el => (this.dropdownWrapperElement = el) }), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: '846d1bc992b8130882d7dad7b28241eb22295f15', classPrefix: "stzh-dropdown", id: `${this.dropdownId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+            : this.localization.$globals.optionalFieldText)))), h("div", { key: 'd533af64be9158c32371441306588c5e869bd45c', class: "stzh-dropdown__field-wrapper" }, h("select", { key: '9a85afa16e1b1ba9ed39b81b0c286dbe805b8e36', id: this.dropdownId, class: "stzh-dropdown__select", ref: el => (this.select = el), multiple: this.multiple, name: this.name, disabled: this.disabled, "aria-labelledby": `${this.dropdownId}-label ${this.dropdownId}-not-loading ${this.dropdownId}-no-results ${this.hideOptional && this.required && `${this.dropdownId}-required`} ${this.invalid && `${this.dropdownId}-invalid`} ${this.dropdownId}-description ${this.a11yDescribedby}` }, h("slot", { key: '2429a6330c39b98bf123877cecab2dd9afb32e23' })), this.inline && this.label && h("div", { key: '421913b6e15242f6cfd205f0781cf0b1eacec3f3', class: "stzh-dropdown__sizer" }, this.label), h("div", { key: '665b70613cd19947ecb1fac4e93abdcc33de508b', class: "stzh-dropdown__icon-angle-wrapper" }, this.iconAngle ? (h("stzh-icon", { name: this.iconAngle, class: "stzh-dropdown__icon-angle" })) : (h("slot", { name: "icon-angle" }))), h("div", { key: '763821ad58c5aef9564c4e4fb2c6eebe13e57d72', class: "stzh-dropdown__icon-wrapper" }, this.icon ? (h("stzh-icon", { class: "stzh-dropdown__icon", name: this.icon })) : (h("slot", { name: "icon" }))), this.hideOptional && this.required && (h("div", { key: 'ebe703b00e5b03419de3c264604e1256e725a96e', id: `${this.dropdownId}-required`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.requiredFieldText)), this.invalid && (h("div", { key: 'ab7357004095ddca09b982d3caf1d1c964a2a9d5', id: `${this.dropdownId}-invalid`, class: "stzh-dropdown__vhidden" }, this.localization.$globals.invalidFieldText)))), h("div", { key: '728abec79d9d8e3049e59176ed5ab3734fa01206', class: "stzh-dropdown__dropdown-wrapper", ref: el => (this.dropdownWrapperElement = el) }), (errorUsed || this.description || this.descriptionLong) && (h(StzhInputDescription, { key: '1064b6a77486d2b82bed119036b619dd4ddf3c37', classPrefix: "stzh-dropdown", id: `${this.dropdownId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
     }
     static get is() { return "stzh-dropdown"; }
     static get originalStyleUrls() {
@@ -595,7 +639,7 @@ export class StzhDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Available options"
+                    "text": "Available options. Do not mix string & number values within the same dropdown."
                 },
                 "getter": false,
                 "setter": false,
@@ -622,11 +666,11 @@ export class StzhDropdown {
                 "attribute": "optgroups"
             },
             "items": {
-                "type": "string",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "string[] | string",
-                    "resolved": "string | string[]",
+                    "original": "string | number | (string | number)[]",
+                    "resolved": "(string | number)[] | number | string",
                     "references": {}
                 },
                 "required": false,
@@ -638,14 +682,15 @@ export class StzhDropdown {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "items"
+                "attribute": "items",
+                "defaultValue": "\"\""
             },
             "defaultItems": {
                 "type": "unknown",
                 "mutable": true,
                 "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
+                    "original": "(string | number)[]",
+                    "resolved": "(string | number)[]",
                     "references": {}
                 },
                 "required": false,
@@ -655,7 +700,8 @@ export class StzhDropdown {
                     "text": "Default items (used by reset)"
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "defaultValue": "[]"
             },
             "searchField": {
                 "type": "string",
@@ -986,11 +1032,11 @@ export class StzhDropdown {
                 "defaultValue": "\"value\""
             },
             "value": {
-                "type": "string",
+                "type": "any",
                 "mutable": true,
                 "complexType": {
-                    "original": "string | string[]",
-                    "resolved": "string | string[]",
+                    "original": "string | number | (string | number)[]",
+                    "resolved": "(string | number)[] | number | string",
                     "references": {}
                 },
                 "required": false,
@@ -1684,7 +1730,7 @@ export class StzhDropdown {
                 },
                 "complexType": {
                     "original": "StzhDropdownChangeEvent",
-                    "resolved": "{ component: \"stzh-dropdown\"; value: string | string[]; }",
+                    "resolved": "{ component: \"stzh-dropdown\"; value: string | number | (string | number)[]; }",
                     "references": {
                         "StzhDropdownChangeEvent": {
                             "location": "import",
@@ -1705,7 +1751,7 @@ export class StzhDropdown {
                 },
                 "complexType": {
                     "original": "StzhDropdownItemAddEvent",
-                    "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
+                    "resolved": "{ component: \"stzh-dropdown\"; value: string | number; }",
                     "references": {
                         "StzhDropdownItemAddEvent": {
                             "location": "import",
@@ -1726,7 +1772,7 @@ export class StzhDropdown {
                 },
                 "complexType": {
                     "original": "StzhDropdownItemRemoveEvent",
-                    "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
+                    "resolved": "{ component: \"stzh-dropdown\"; value: string | number; }",
                     "references": {
                         "StzhDropdownItemRemoveEvent": {
                             "location": "import",
@@ -1747,7 +1793,7 @@ export class StzhDropdown {
                 },
                 "complexType": {
                     "original": "StzhDropdownOptionAddEvent",
-                    "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
+                    "resolved": "{ component: \"stzh-dropdown\"; value: string | number; }",
                     "references": {
                         "StzhDropdownOptionAddEvent": {
                             "location": "import",
@@ -1768,7 +1814,7 @@ export class StzhDropdown {
                 },
                 "complexType": {
                     "original": "StzhDropdownOptionRemoveEvent",
-                    "resolved": "{ component: \"stzh-dropdown\"; value: string; }",
+                    "resolved": "{ component: \"stzh-dropdown\"; value: string | number; }",
                     "references": {
                         "StzhDropdownOptionRemoveEvent": {
                             "location": "import",
@@ -1888,7 +1934,7 @@ export class StzhDropdown {
         return {
             "getValue": {
                 "complexType": {
-                    "signature": "() => Promise<string | string[]>",
+                    "signature": "() => Promise<string | number | (string | number)[]>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -1896,7 +1942,7 @@ export class StzhDropdown {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<string | string[]>"
+                    "return": "Promise<string | number | (string | number)[]>"
                 },
                 "docs": {
                     "text": "Returns the value of the control.\nIf multiple items can be selected,\nthis returns an array, otherwise a string.",
@@ -1905,10 +1951,10 @@ export class StzhDropdown {
             },
             "setValue": {
                 "complexType": {
-                    "signature": "(newValue: string | string[], silent?: boolean) => Promise<void>",
+                    "signature": "(newValue: string | number | (string | number)[], silent?: boolean) => Promise<void>",
                     "parameters": [{
                             "name": "newValue",
-                            "type": "string | string[]",
+                            "type": "string | number | (string | number)[]",
                             "docs": ""
                         }, {
                             "name": "silent",
@@ -1964,7 +2010,7 @@ export class StzhDropdown {
             },
             "getItems": {
                 "complexType": {
-                    "signature": "() => Promise<any>",
+                    "signature": "() => Promise<(string | number)[]>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -1972,7 +2018,7 @@ export class StzhDropdown {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<any>"
+                    "return": "Promise<(string | number)[]>"
                 },
                 "docs": {
                     "text": "Return current selected items",