@ukic/web-components 2.5.0 → 2.7.0

package/dist/collection/components/ic-select/ic-select.js

@@ -159,7 +159,7 @@ export class Select {
       this.value = ev.detail.value;
     };
     this.handleFocusIndicatorDisplay = () => {
-      const focusIndicator = this.host.shadowRoot.querySelector(".focus-indicator");
+      const focusIndicator = this.el.shadowRoot.querySelector(".focus-indicator");
       if (this.open) {
         focusIndicator.classList.add("focus-indicator-enabled");
       }
@@ -174,12 +174,14 @@ export class Select {
     };
     this.isExternalFiltering = () => this.searchable && this.disableFilter;
     this.handleClick = (event) => {
+      var _a;
       if (!this.open) {
         if (this.isExternalFiltering()) {
           this.menu.options = this.filteredOptions;
         }
         else if (!this.hasTimedOut &&
           !this.loading &&
+          !((_a = this.noOptions) === null || _a === void 0 ? void 0 : _a.length) &&
           (!this.searchable || this.searchableMenuItemSelected)) {
           this.noOptions = null;
           this.menu.options = this.uniqueOptions;
@@ -286,6 +288,7 @@ export class Select {
       this.clearButtonFocused = false;
     };
     this.handleFilter = () => {
+      var _a;
       const options = this.deduplicateOptions(this.searchable ? [...this.uniqueOptions] : this.ungroupedOptions);
       let isGrouped = false;
       let newFilteredOptions = [];
@@ -301,10 +304,11 @@ export class Select {
       else {
         menuOptionsFiltered = getFilteredMenuOptions(options, false, this.pressedCharacters, "start");
       }
-      if (!isGrouped) {
+      if (!isGrouped &&
+        ((_a = menuOptionsFiltered[0]) === null || _a === void 0 ? void 0 : _a.label) !== this.emptyOptionListText) {
         newFilteredOptions = menuOptionsFiltered;
       }
-      else {
+      else if (isGrouped) {
         options.map((option) => {
           if (this.includeGroupTitlesInSearch) {
             if (menuOptionsFiltered.indexOf(option) !== -1) {
@@ -328,13 +332,12 @@ export class Select {
           }
         });
       }
-      const noOptions = [{ label: this.emptyOptionListText, value: "" }];
       if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {
         this.noOptions = null;
         this.filteredOptions = newFilteredOptions;
       }
       else {
-        this.noOptions = noOptions;
+        this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
         this.filteredOptions = this.noOptions;
       }
     };
@@ -381,7 +384,7 @@ export class Select {
       }
     };
     this.updateSearchableSelectResultAriaLive = () => {
-      const searchableSelectResultsStatusEl = this.host.shadowRoot.querySelector(".searchable-select-results-status");
+      const searchableSelectResultsStatusEl = this.el.shadowRoot.querySelector(".searchable-select-results-status");
       if (searchableSelectResultsStatusEl) {
         if (this.noOptions !== null) {
           searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;
@@ -447,6 +450,12 @@ export class Select {
     this.disabled = false;
     this.disableFilter = false;
     this.emptyOptionListText = "No results found";
+    this.form = undefined;
+    this.formaction = undefined;
+    this.formenctype = undefined;
+    this.formmethod = undefined;
+    this.formnovalidate = undefined;
+    this.formtarget = undefined;
     this.fullWidth = false;
     this.helperText = "";
     this.hideLabel = false;
@@ -462,6 +471,7 @@ export class Select {
     this.searchable = false;
     this.searchMatchPosition = "anywhere";
     this.showClearButton = false;
+    this.size = "default";
     this.small = false;
     this.timeout = undefined;
     this.validationStatus = "";
@@ -527,19 +537,22 @@ export class Select {
     }
   }
   disconnectedCallback() {
-    removeFormResetListener(this.host, this.handleFormReset);
+    removeFormResetListener(this.el, this.handleFormReset);
   }
   componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.host, [
+    this.inheritedAttributes = inheritAttributes(this.el, [
       ...IC_INHERITED_ARIA,
       "tabindex",
       "title",
     ]);
-    removeDisabledFalse(this.disabled, this.host);
+    removeDisabledFalse(this.disabled, this.el);
     this.setOptionsValuesFromLabels();
-    addFormResetListener(this.host, this.handleFormReset);
+    addFormResetListener(this.el, this.handleFormReset);
     if (!this.options.length) {
       this.initialOptionsEmpty = true;
+      this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
+      this.uniqueOptions = this.noOptions;
+      this.filteredOptions = this.noOptions;
     }
     else {
       this.setDefaultValue();
@@ -591,33 +604,26 @@ export class Select {
     }
   }
   render() {
-    const { small, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
-    const noOptionSelect = searchable &&
-      (this.loading ||
-        this.hasTimedOut ||
-        (this.noOptions !== null &&
-          this.noOptions[0] &&
-          this.noOptions[0].label === this.emptyOptionListText));
-    const inputValue = this.searchable ? this.hiddenInputValue : currValue;
-    renderHiddenInput(true, this.host, name, inputValue, disabled);
+    const { small, size, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
+    renderHiddenInput(true, this.el, name, this.searchable ? this.hiddenInputValue : currValue, disabled);
     const invalid = validationStatus === IcInformationStatus.Error ? "true" : "false";
     const describedBy = getInputDescribedByText(this.inputId, helperText !== "", hasValidationStatus(this.validationStatus, this.disabled)).trim();
     return (h(Host, { class: {
         disabled: disabled,
         searchable: searchable,
-        small: small,
+        small: small || size === "small",
         "full-width": fullWidth,
-      }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, small: small, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, readonly ? (h("ic-typography", null, h("p", null, this.getLabelFromValue(currValue)))) : isMobileOrTablet() ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown }, this.inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
+      }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, small: small || size === "small", fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, readonly ? (h("ic-typography", null, h("p", null, this.getLabelFromValue(currValue)))) : isMobileOrTablet() ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: this.form }, this.inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
       if (option.children) {
         return (h("optgroup", { label: option.label }, option.children.map((option) => (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label)))));
       }
       else {
         return (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label));
       }
-    }))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: "select-input", role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": this.open ? "true" : "false", "aria-invalid": invalid, "aria-required": required ? "true" : "false", "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur }), this.searchableSelectInputValue &&
+    }))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: "select-input", role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": this.open ? "true" : "false", "aria-invalid": invalid, "aria-required": required ? "true" : "false", "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form, formaction: this.formaction, formenctype: this.formenctype, formmethod: this.formmethod, formnovalidate: this.formnovalidate, formtarget: this.formtarget }), this.searchableSelectInputValue &&
       (showClearButton || searchable) && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && currValue === null
         ? "Clear input"
-        : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: small ? "small" : "default", variant: "icon", appearance: this.clearButtonFocused
+        : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", appearance: this.clearButtonFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
         "expand-icon": true,
@@ -630,13 +636,17 @@ export class Select {
         "expand-icon": true,
         "expand-icon-open": this.open,
         "expand-icon-filled": !(currValue == null || currValue === ""),
-      }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: small ? "small" : "default", variant: "icon", appearance: this.clearButtonFocused
+      }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", appearance: this.clearButtonFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Dark }))))), !isMobileOrTablet() && (h("ic-menu", { class: {
-        "no-results": noOptionSelect,
+        "no-results": this.loading ||
+          this.hasTimedOut ||
+          (this.noOptions !== null &&
+            this.noOptions[0] &&
+            this.noOptions[0].label === this.emptyOptionListText),
       }, ref: (el) => (this.menu = el), inputEl: searchable
         ? this.searchableSelectElement
-        : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : this.uniqueOptions, value: currValue, fullWidth: fullWidth, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, onMenuValueChange: this.handleMenuValueChange, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.host, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable ? "manual" : "automatic" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
+        : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small || size === "small", menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : this.uniqueOptions, value: currValue, fullWidth: fullWidth, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, onMenuValueChange: this.handleMenuValueChange, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable ? "manual" : "automatic" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
   }
   static get is() { return "ic-select"; }
   static get encapsulation() { return "shadow"; }
@@ -728,6 +738,108 @@ export class Select {
         "reflect": false,
         "defaultValue": "\"No results found\""
       },
+      "form": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The <form> element to associate the select with."
+        },
+        "attribute": "form",
+        "reflect": false
+      },
+      "formaction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner.\nThis prop should only be used with searchable select and will only be applied if searchable is true."
+        },
+        "attribute": "formaction",
+        "reflect": false
+      },
+      "formenctype": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true."
+        },
+        "attribute": "formenctype",
+        "reflect": false
+      },
+      "formmethod": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true."
+        },
+        "attribute": "formmethod",
+        "reflect": false
+      },
+      "formnovalidate": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true."
+        },
+        "attribute": "formnovalidate",
+        "reflect": false
+      },
+      "formtarget": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The place to display the response from submitting the form. It overrides the target attribute of the select's form owner.\nThis prop should only be used with searchable select and will only be applied if searchable is true."
+        },
+        "attribute": "formtarget",
+        "reflect": false
+      },
       "fullWidth": {
         "type": "boolean",
         "mutable": false,
@@ -740,7 +852,7 @@ export class Select {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the select element will fill the width of the container."
+          "text": "If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true."
         },
         "attribute": "full-width",
         "reflect": false,
@@ -1003,6 +1115,30 @@ export class Select {
         "reflect": false,
         "defaultValue": "false"
       },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcSizesNoLarge",
+          "resolved": "\"default\" | \"small\"",
+          "references": {
+            "IcSizesNoLarge": {
+              "location": "import",
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcSizesNoLarge"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The size of the select component."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      },
       "small": {
         "type": "boolean",
         "mutable": false,
@@ -1014,8 +1150,11 @@ export class Select {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "If `true`, the small styling will be applied to the select."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
+            }],
+          "text": ""
         },
         "attribute": "small",
         "reflect": false,
@@ -1328,7 +1467,7 @@ export class Select {
       }
     };
   }
-  static get elementRef() { return "host"; }
+  static get elementRef() { return "el"; }
   static get watchers() {
     return [{
         "propName": "loading",