@gov-design-system-ce/components 4.0.6 → 4.0.8-rc01

package/dist/collection/components/gov-form/multiselect/gov-form-multi-select.js

@@ -7,9 +7,12 @@ import { validateWcagLabelFor, validateWcagRef } from "../../../helpers/Validate
 import { createID, removeDiacritics } from "../../../utils/string.utils";
 import { delay } from "../../../utils/utils";
 import { FormMultiSelectClass, FormMultiselectSizes, FormMultiselectVariants } from "./constants";
-import { hasOwnProperty } from "../../../utils/helpers.types";
+import { propsValueToArray } from "../../../utils/array.utils";
+import { tick } from "../../../utils/stencil.utils";
 export class GovFormMultiSelect {
   constructor() {
+    this.value = undefined;
+    this.options = undefined;
     this.identifier = undefined;
     this.placeholder = undefined;
     this.variant = undefined;
@@ -26,9 +29,9 @@ export class GovFormMultiSelect {
     this.wcagLabelledBy = undefined;
     this.wcagOwns = undefined;
     this.focused = undefined;
-    this.value = undefined;
-    this.selectedOptions = [];
-    this.options = [];
+    this.valueState = undefined;
+    this.selectedOptionsState = [];
+    this.optionsState = [];
     this.selectId = createID('GovSelect');
     this.listId = createID('GovMultiList');
     this.h = govHost(this.host);
@@ -40,6 +43,12 @@ export class GovFormMultiSelect {
   validateSize(newValue) {
     validateProp(FormMultiselectSizes, newValue, FormMultiSelectClass.root);
   }
+  watchOptions(newValue) {
+    this.optionsState = propsValueToArray(newValue);
+  }
+  watchValue(newValue) {
+    this.selectedOptionsState = propsValueToArray(newValue);
+  }
   watchDisabled() {
     this.passControlAttrs();
   }
@@ -52,65 +61,74 @@ export class GovFormMultiSelect {
     this.validateVariant(this.variant);
     this.validateSize(this.size);
     this.watchDisabled();
+    this.passControlAttrs();
+    this.f.passAttrToLabel('required', String(this.required));
+    this.optionsState = propsValueToArray(this.options);
+    this.selectedOptionsState = propsValueToArray(this.value);
   }
   getAvailableOptions(ignoreFilter = false) {
-    if (Array.isArray(this.options) && this.options.length) {
+    if (Array.isArray(this.optionsState) && this.optionsState.length) {
       if (ignoreFilter) {
-        return this.options;
+        return this.optionsState;
       }
-      return this.options.filter((option) => {
-        const isSelected = this.selectedOptions.findIndex((selected) => selected.value === option.value);
-        return (isSelected !== -1 || (option === null || option === void 0 ? void 0 : option.disabled)) ? false : true;
-      });
+      return this.optionsState.filter((option) => {
+        const selectedIndex = this.selectedValueIndex(option.value);
+        return (selectedIndex !== -1 || (option === null || option === void 0 ? void 0 : option.disabled)) ? false : true;
+      }).map((option) => { var _a; return ({ name: (_a = option.name) !== null && _a !== void 0 ? _a : option.value, value: option.value }); });
     }
     return Array.from(this.selectRef.querySelectorAll('option'))
       .filter((option) => {
       if (ignoreFilter) {
         return true;
       }
-      return !(option.disabled || option.selected);
+      const selectedIndex = this.selectedValueIndex(option.value);
+      return !(option.disabled || option.selected || selectedIndex > -1);
     })
       .map((option) => ({ name: option.textContent, value: option.value }));
   }
   initAutocomplete() {
-    this.autocompleteRef.addEventListener('gov-select', this.onSelectHandler.bind(this));
-    this.autocompleteRef.addEventListener('gov-input', this.onInputHandler.bind(this));
-    this.autocompleteRef.addEventListener('gov-focus', this.onFocusHandler.bind(this));
-    this.autocompleteRef.addEventListener('gov-blur', this.onBlurHandler.bind(this));
-    this.autocompleteRef
-      .setSearchCallback(value => {
+    var _a, _b, _c, _d, _e;
+    (_a = this.autocompleteRef) === null || _a === void 0 ? void 0 : _a.addEventListener('gov-select', this.onSelectHandler.bind(this));
+    (_b = this.autocompleteRef) === null || _b === void 0 ? void 0 : _b.addEventListener('gov-input', this.onInputHandler.bind(this));
+    (_c = this.autocompleteRef) === null || _c === void 0 ? void 0 : _c.addEventListener('gov-focus', this.onFocusHandler.bind(this));
+    (_d = this.autocompleteRef) === null || _d === void 0 ? void 0 : _d.addEventListener('gov-blur', this.onBlurHandler.bind(this));
+    (_e = this.autocompleteRef) === null || _e === void 0 ? void 0 : _e.setSearchCallback(searchString => {
       return new Promise(resolve => {
         const data = this.getAvailableOptions();
-        if (String(value).length === 0) {
+        if (String(searchString).length === 0) {
           return resolve(data);
         }
-        resolve(data.filter(({ name }) => {
+        resolve(data.filter(({ name, value }) => {
           if (!name)
-            return false;
-          return removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(value).toLowerCase()) > -1;
+            name = value;
+          return removeDiacritics(name).toLowerCase().indexOf(removeDiacritics(searchString).toLowerCase()) > -1;
         }));
       });
-    })
-      .then();
+    }).finally();
   }
-  getOptionIndex(value) {
-    return this.selectedOptions.findIndex(option => option.value === value.value && option.name === value.name);
+  selectedValueIndex(value) {
+    return this.selectedOptionsState.findIndex((selected) => selected === value);
   }
   getOptionElement(value) {
-    return this.selectRef.querySelector('option[value="' + value.value + '"]');
+    return this.selectRef.querySelector('option[value="' + value + '"]');
+  }
+  getOption(value) {
+    var _a;
+    return (_a = this.getAvailableOptions(true).find((option) => option.value === value)) !== null && _a !== void 0 ? _a : null;
   }
   selectOption(newOption, notify = true) {
-    const index = this.getOptionIndex(newOption);
+    const index = this.selectedValueIndex(newOption);
     if (index === -1) {
-      this.selectedOptions = [...this.selectedOptions, newOption];
+      this.selectedOptionsState = [...this.selectedOptionsState, newOption];
+      this.value = this.selectedOptionsState;
       if (notify) {
         this.govChange.emit({
           component: FormMultiSelectClass.root,
-          value: this.selectedOptions,
+          value: this.selectedOptionsState,
         });
         this.govSelect.emit({
           component: FormMultiSelectClass.root,
-          value: this.selectedOptions,
+          value: this.selectedOptionsState,
         });
       }
       const option = this.getOptionElement(newOption);
@@ -120,18 +138,19 @@ export class GovFormMultiSelect {
     }
   }
   removeOption(removeOption, notify = true) {
-    const index = this.getOptionIndex(removeOption);
+    const index = this.selectedValueIndex(removeOption);
     if (index !== -1) {
-      this.selectedOptions.splice(index, 1);
-      this.selectedOptions = [...this.selectedOptions];
+      this.selectedOptionsState.splice(index, 1);
+      this.selectedOptionsState = [...this.selectedOptionsState];
+      this.value = this.selectedOptionsState;
       if (notify) {
         this.govChange.emit({
           component: FormMultiSelectClass.root,
-          value: this.selectedOptions,
+          value: this.selectedOptionsState,
         });
         this.govRemove.emit({
           component: FormMultiSelectClass.root,
-          value: this.selectedOptions,
+          value: this.selectedOptionsState,
         });
       }
       const option = this.getOptionElement(removeOption);
@@ -142,13 +161,14 @@ export class GovFormMultiSelect {
   }
   async componentDidLoad() {
     this.initAutocomplete();
-    this.selectRef.querySelectorAll('option').forEach((option) => {
-      if (option.selected) {
-        this.selectOption({
-          name: option.textContent,
-          value: option.value,
-        }, false);
-      }
+  }
+  async componentDidRender() {
+    tick(() => {
+      this.selectRef.querySelectorAll('option').forEach((option) => {
+        if (option.selected) {
+          this.selectOption(option.value, false);
+        }
+      });
     });
     if (canValidateWcagOnRender()) {
       await delay(500);
@@ -156,10 +176,16 @@ export class GovFormMultiSelect {
     }
   }
   render() {
-    return (h(Host, { class: FormMultiSelectClass.root, size: this.size, variant: this.variant }, h("div", { class: FormMultiSelectClass.wrap }, h("div", { class: "element" }, h("gov-form-autocomplete", { value: this.value, disabled: this.disabled, identifier: this.identifier || this.selectId, required: false, size: this.size, variant: this.variant, placeholder: this.placeholder, "message-empty": this.messageEmpty, "message-loading": this.messageLoading, ref: el => (this.autocompleteRef = el), minlength: 0, wcagDescribedBy: this.wcagDescribedBy, wcagLabelledBy: this.wcagLabelledBy, wcagOwns: this.listId }), h("gov-icon", { slot: "right-icon", class: "icon-arrow", name: "chevron-down" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && h("slot", { name: "right-icon" }), this.success && h("gov-icon", { slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && h("gov-icon", { slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), h("select", { hidden: true, "aria-hidden": toBoolAttr(true), multiple: true, required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns }, h("slot", null), this.options.map((option) => {
-      return (h("option", { value: option.value, selected: option.value === this.value, disabled: option === null || option === void 0 ? void 0 : option.disabled }, option.name));
-    })))), this.hideSelectedList === false ? (h("ul", { role: "listbox", id: this.listId, class: FormMultiSelectClass.list }, this.selectedOptions.map(option => {
-      return (h("li", { class: FormMultiSelectClass.item, role: "option" }, option.name, h("gov-button", { wcagLabel: 'Odebrat vybranou položku ' + option.name, variant: "primary", type: "base", size: "s", "on-gov-click": () => this.onTagRemove(option) }, h("gov-icon", { name: "x-lg" }))));
+    return (h(Host, { class: FormMultiSelectClass.root, size: this.size, variant: this.variant }, h("div", { class: FormMultiSelectClass.wrap }, h("div", { class: "element" }, h("gov-form-autocomplete", { value: this.valueState, disabled: this.disabled, identifier: this.identifier || this.selectId, required: false, size: this.size, variant: this.variant, placeholder: this.placeholder, "message-empty": this.messageEmpty, "message-loading": this.messageLoading, ref: el => (this.autocompleteRef = el), minlength: 0, wcagDescribedBy: this.wcagDescribedBy, wcagLabelledBy: this.wcagLabelledBy, wcagOwns: this.listId }), h("gov-icon", { slot: "right-icon", class: "icon-arrow", name: "chevron-down" }), this.h.hasSlot('right-icon') && !(this.success || this.invalid) && h("slot", { name: "right-icon" }), this.success && h("gov-icon", { slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && h("gov-icon", { slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), h("select", { hidden: true, class: 'hidden-select-list', "aria-hidden": toBoolAttr(true), multiple: true, required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns }, h("slot", null), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
+      var _a;
+      const selectedOption = this.selectedValueIndex(option.value);
+      return (h("option", { value: option.value, selected: selectedOption > -1, disabled: option === null || option === void 0 ? void 0 : option.disabled }, (_a = option.name) !== null && _a !== void 0 ? _a : option.value));
+    })))), this.hideSelectedList === false ? (h("ul", { role: "listbox", id: this.listId, class: FormMultiSelectClass.list }, Array.isArray(this.selectedOptionsState) && this.selectedOptionsState.map(selected => {
+      var _a, _b;
+      const option = this.getOption(selected);
+      if (!option)
+        return null;
+      return (h("li", { class: FormMultiSelectClass.item, role: "option" }, (_a = option.name) !== null && _a !== void 0 ? _a : option.value, h("gov-button", { wcagLabel: (_b = 'Odebrat vybranou položku ' + option.name) !== null && _b !== void 0 ? _b : option.value, variant: "primary", type: "base", size: "s", "on-gov-click": () => this.onTagRemove(selected) }, h("gov-icon", { name: "x-lg" }))));
     }))) : null));
   }
   onFocusHandler(e) {
@@ -168,7 +194,7 @@ export class GovFormMultiSelect {
     this.govFocus.emit({
       component: FormMultiSelectClass.root,
       originalEvent: e,
-      value: this.selectedOptions,
+      value: this.selectedOptionsState,
     });
   }
   onBlurHandler(e) {
@@ -178,19 +204,19 @@ export class GovFormMultiSelect {
     this.govBlur.emit({
       component: FormMultiSelectClass.root,
       originalEvent: e,
-      value: this.selectedOptions,
+      value: this.selectedOptionsState,
     });
   }
   onInputHandler(e) {
-    this.value = e.detail.value;
+    this.valueState = e.detail.value;
     e.stopPropagation();
   }
   onSelectHandler(e) {
     e.stopPropagation();
     const value = e.detail.selected;
-    this.selectOption(value);
-    this.value = '';
-    this.autocompleteRef.clearValue();
+    this.selectOption(value.value);
+    this.valueState = '';
+    this.autocompleteRef.clearValue().finally();
     this.autocompleteRef.focus();
   }
   onTagRemove(removeOption) {
@@ -206,7 +232,7 @@ export class GovFormMultiSelect {
    * Sets the ordered value of the element
    */
   async setValue(value) {
-    this.value = value;
+    this.valueState = value;
   }
   /**
    * Returns an instance of the native html select element
@@ -214,50 +240,6 @@ export class GovFormMultiSelect {
   async getRef() {
     return this.selectRef;
   }
-  /**
-   * Returns a list of selected items
-   */
-  async getSelectedOptions() {
-    return this.selectedOptions;
-  }
-  /**
-   * Setting a list of options to choose from
-   */
-  async setOptions(options) {
-    if (Array.isArray(options)) {
-      this.options = [...options];
-    }
-  }
-  /**
-   * Returns all available options
-   */
-  async getOptions(ignoreFilter = true) {
-    return this.getAvailableOptions(ignoreFilter);
-  }
-  /**
-   * Setting the list of selected options
-   */
-  async setSelectedOptions(options) {
-    if (Array.isArray(options)) {
-      this.selectedOptions = [...options];
-    }
-  }
-  /**
-   * To remove an option from the selected list
-   */
-  async removeSelectedOption(option, notify = false) {
-    if (typeof option === 'object' && hasOwnProperty(option, 'name') && hasOwnProperty(option, 'value')) {
-      this.removeOption(option, notify);
-    }
-  }
-  /**
-   * Returns an instance of the native html select element
-   */
-  async setSelectedOption(option, notify = false) {
-    if (typeof option === 'object' && hasOwnProperty(option, 'name') && hasOwnProperty(option, 'value')) {
-      this.selectOption(option, notify);
-    }
-  }
   /**
    * Validate the WCAG attributes of the component
    */
@@ -280,6 +262,52 @@ export class GovFormMultiSelect {
   }
   static get properties() {
     return {
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | GovFormMultiSelectSelectedItem[]",
+          "resolved": "GovFormMultiSelectSelectedItem[] | string",
+          "references": {
+            "GovFormMultiSelectSelectedItem": {
+              "location": "import",
+              "path": "./gov-form-multi-select.types",
+              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::GovFormMultiSelectSelectedItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of multi-select"
+        },
+        "attribute": "value",
+        "reflect": true
+      },
+      "options": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | GovFormMultiSelectItem[]",
+          "resolved": "GovFormMultiSelectItem[] | string",
+          "references": {
+            "GovFormMultiSelectItem": {
+              "location": "import",
+              "path": "./gov-form-multi-select.types",
+              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::GovFormMultiSelectItem"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Options of multi-select"
+        },
+        "attribute": "options",
+        "reflect": true
+      },
       "identifier": {
         "type": "string",
         "mutable": false,
@@ -558,9 +586,9 @@ export class GovFormMultiSelect {
   static get states() {
     return {
       "focused": {},
-      "value": {},
-      "selectedOptions": {},
-      "options": {}
+      "valueState": {},
+      "selectedOptionsState": {},
+      "optionsState": {}
     };
   }
   static get events() {
@@ -738,159 +766,6 @@ export class GovFormMultiSelect {
           "tags": []
         }
       },
-      "getSelectedOptions": {
-        "complexType": {
-          "signature": "() => Promise<GovFormMultiSelectItem[]>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "GovFormMultiSelectItem": {
-              "location": "import",
-              "path": "./gov-form-multi-select.types",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::GovFormMultiSelectItem"
-            }
-          },
-          "return": "Promise<GovFormMultiSelectItem[]>"
-        },
-        "docs": {
-          "text": "Returns a list of selected items",
-          "tags": []
-        }
-      },
-      "setOptions": {
-        "complexType": {
-          "signature": "(options: GovFormMultiSelectItem[]) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "GovFormMultiSelectItem": {
-              "location": "import",
-              "path": "./gov-form-multi-select.types",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::GovFormMultiSelectItem"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Setting a list of options to choose from",
-          "tags": []
-        }
-      },
-      "getOptions": {
-        "complexType": {
-          "signature": "(ignoreFilter?: boolean) => Promise<GovFormMultiSelectItem[]>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "GovFormMultiSelectItem": {
-              "location": "import",
-              "path": "./gov-form-multi-select.types",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::GovFormMultiSelectItem"
-            }
-          },
-          "return": "Promise<GovFormMultiSelectItem[]>"
-        },
-        "docs": {
-          "text": "Returns all available options",
-          "tags": []
-        }
-      },
-      "setSelectedOptions": {
-        "complexType": {
-          "signature": "(options: GovFormMultiSelectItem[]) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "GovFormMultiSelectItem": {
-              "location": "import",
-              "path": "./gov-form-multi-select.types",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::GovFormMultiSelectItem"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Setting the list of selected options",
-          "tags": []
-        }
-      },
-      "removeSelectedOption": {
-        "complexType": {
-          "signature": "(option: GovFormMultiSelectItem, notify?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "GovFormMultiSelectItem": {
-              "location": "import",
-              "path": "./gov-form-multi-select.types",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::GovFormMultiSelectItem"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "To remove an option from the selected list",
-          "tags": []
-        }
-      },
-      "setSelectedOption": {
-        "complexType": {
-          "signature": "(option: GovFormMultiSelectItem, notify?: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }, {
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "GovFormMultiSelectItem": {
-              "location": "import",
-              "path": "./gov-form-multi-select.types",
-              "id": "../../../packages/core/src/components/gov-form/multiselect/gov-form-multi-select.types.ts::GovFormMultiSelectItem"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Returns an instance of the native html select element",
-          "tags": []
-        }
-      },
       "validateWcag": {
         "complexType": {
           "signature": "() => Promise<void>",
@@ -918,6 +793,12 @@ export class GovFormMultiSelect {
       }, {
         "propName": "size",
         "methodName": "validateSize"
+      }, {
+        "propName": "options",
+        "methodName": "watchOptions"
+      }, {
+        "propName": "value",
+        "methodName": "watchValue"
       }, {
         "propName": "disabled",
         "methodName": "watchDisabled"