@ukic/web-components 2.0.0-alpha.124 → 2.0.0

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

@@ -1,5 +1,5 @@
 import { Host, h, } from "@stencil/core";
-import { getInputDescribedByText, getLabelFromValue, hasValidationStatus, inheritAttributes, onComponentRequiredPropUndefined, renderHiddenInput, isMobileOrTablet, } from "../../utils/helpers";
+import { getInputDescribedByText, getLabelFromValue, hasValidationStatus, inheritAttributes, onComponentRequiredPropUndefined, renderHiddenInput, isMobileOrTablet, getFilteredMenuOptions, } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 import { IcInformationStatus, IcThemeForegroundEnum, } from "../../utils/types";
 import Expand from "./assets/Expand.svg";
@@ -10,6 +10,23 @@ export class Select {
     this.inputId = `ic-select-input-${inputIds++}`;
     this.menuId = `${this.inputId}-menu`;
     this.inheritedAttributes = {};
+    this.isMenuEnabled = () => {
+      return (((this.searchableSelectInputValue === null ||
+        this.searchableSelectInputValue === "") &&
+        this.charactersUntilSuggestions === 0) ||
+        (this.searchableSelectInputValue &&
+          this.searchableSelectInputValue.length >=
+            this.charactersUntilSuggestions));
+    };
+    this.setOptionsValuesFromLabels = () => {
+      if (this.options.length > 0) {
+        this.options.map((option) => {
+          if (!option.value) {
+            option.value = option.label;
+          }
+        });
+      }
+    };
     this.setTextColor = () => {
       if (this.nativeSelectElement.selectedIndex === 0) {
         this.nativeSelectElement.className = "placeholder";
@@ -18,18 +35,53 @@ export class Select {
         this.nativeSelectElement.className = "select-option-selected";
       }
     };
+    this.setMenuChange = (open) => {
+      if (this.open !== open) {
+        this.open = open;
+      }
+    };
     this.getLabelFromValue = (value) => {
       return getLabelFromValue(value, this.options);
     };
+    this.getValueFromLabel = (label) => {
+      var _a;
+      const value = (_a = this.options.find((option) => option.label === label)) === null || _a === void 0 ? void 0 : _a.value;
+      return value;
+    };
+    this.getFilteredChildMenuOptions = (option) => {
+      let children = option.children;
+      children = getFilteredMenuOptions(option.children, this.includeDescriptionsInSearch, this.searchableSelectInputValue, this.searchMatchPosition);
+      const newOption = Object.assign({}, option);
+      newOption.children = children;
+      return newOption;
+    };
     this.handleNativeSelectChange = () => {
       this.icChange.emit({ value: this.nativeSelectElement.value });
       this.setTextColor();
     };
     this.handleCustomSelectChange = (event) => {
+      if (this.searchable && event.detail.label === this.emptyOptionListText) {
+        this.searchableSelectElement.focus();
+        return;
+      }
+      if (this.searchable) {
+        this.searchableSelectInputValue = this.getLabelFromValue(event.detail.value);
+      }
+      this.ariaActiveDescendant = event.detail.optionId;
       this.icChange.emit({ value: event.detail.value });
     };
     this.handleMenuChange = (event) => {
       this.open = event.detail.open;
+      this.searchable && this.handleFocusIndicatorDisplay();
+    };
+    this.handleFocusIndicatorDisplay = () => {
+      const focusIndicator = this.host.shadowRoot.querySelector(".focus-indicator");
+      if (this.open) {
+        focusIndicator.classList.add("focus-indicator-enabled");
+      }
+      else {
+        focusIndicator.classList.remove("focus-indicator-enabled");
+      }
     };
     this.handleMouseDown = (event) => {
       if (!this.open) {
@@ -37,17 +89,52 @@ export class Select {
       }
     };
     this.handleClick = (event) => {
-      if (event.detail !== 0) {
+      this.noOptions = null;
+      this.menu.options = this.options;
+      if (event.detail !== 0 && this.isMenuEnabled()) {
         this.menu.handleClickOpen();
       }
     };
+    this.handleExpandIconMouseDown = (event) => {
+      if (!this.disabled) {
+        event.preventDefault();
+        this.searchableSelectElement.focus();
+        this.handleClick(event);
+      }
+    };
     this.handleClear = (event) => {
       event.stopPropagation();
+      this.noOptions = null;
       this.icChange.emit({ value: null });
-      this.customSelectElement.focus();
+      if (this.searchable) {
+        this.searchableSelectElement.value = null;
+        this.searchableSelectInputValue = null;
+        this.menu.options = this.options;
+        this.searchableSelectElement.focus();
+        if (!this.isMenuEnabled()) {
+          this.setMenuChange(false);
+        }
+      }
+      else {
+        this.customSelectElement.focus();
+      }
     };
     this.handleKeyDown = (event) => {
-      this.menu.handleKeyboardOpen(event);
+      event.cancelBubble = true;
+      if (!this.open) {
+        this.noOptions = null;
+        this.menu.options = this.options;
+      }
+      if (this.open && event.key === "Enter") {
+        this.setMenuChange(false);
+      }
+      else {
+        if (!((event.key === "ArrowDown" || event.key === "ArrowUp") &&
+          this.noOptions !== null) &&
+          this.isMenuEnabled()) {
+          this.menu.handleKeyboardOpen(event);
+        }
+      }
     };
     this.handleClearButtonFocus = () => {
       this.clearButtonFocused = true;
@@ -55,10 +142,82 @@ export class Select {
     this.handleClearButtonBlur = () => {
       this.clearButtonFocused = false;
     };
+    this.handleSearchableSelectInput = (event) => {
+      this.searchableSelectInputValue = event.target.value;
+      if (this.getValueFromLabel(this.searchableSelectInputValue) === undefined) {
+        this.icChange.emit({ value: null });
+      }
+      if (this.isMenuEnabled()) {
+        this.setMenuChange(true);
+      }
+      else {
+        this.setMenuChange(false);
+      }
+      const options = [...this.options];
+      let isGrouped = false;
+      let newFilteredOptions = [];
+      options.map((option) => {
+        if (option.children)
+          isGrouped = true;
+      });
+      const menuOptionsFiltered = getFilteredMenuOptions(options, this.includeDescriptionsInSearch, this.searchableSelectInputValue, this.searchMatchPosition);
+      if (!isGrouped) {
+        newFilteredOptions = menuOptionsFiltered;
+      }
+      else {
+        options.map((option) => {
+          if (this.includeGroupTitlesInSearch) {
+            if (menuOptionsFiltered.indexOf(option) !== -1) {
+              newFilteredOptions.push(option);
+            }
+            else {
+              newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
+            }
+          }
+          else {
+            newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
+          }
+        });
+      }
+      let noChildOptionsWhenFiltered = false;
+      if (isGrouped) {
+        noChildOptionsWhenFiltered = true;
+        newFilteredOptions.map((option) => {
+          if (option.children.length > 0) {
+            noChildOptionsWhenFiltered = false;
+          }
+        });
+      }
+      const noOptions = [{ label: this.emptyOptionListText, value: "" }];
+      if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {
+        this.noOptions = null;
+        this.filteredOptions = newFilteredOptions;
+      }
+      else {
+        this.noOptions = noOptions;
+        this.filteredOptions = this.noOptions;
+      }
+      this.debounceAriaLiveUpdate();
+    };
+    this.updateSearchableSelectResultAriaLive = () => {
+      const searchableSelectResultsStatusEl = this.host.shadowRoot.querySelector(".searchable-select-results-status");
+      if (this.noOptions !== null) {
+        searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;
+      }
+      else {
+        searchableSelectResultsStatusEl.innerText = "";
+      }
+    };
     this.onFocus = () => {
       this.icFocus.emit();
     };
-    this.onBlur = () => {
+    this.onBlur = (event) => {
+      if (this.searchable &&
+        event.relatedTarget !== this.menu &&
+        !(this.clearButton && event.relatedTarget === this.clearButton)) {
+        this.setMenuChange(false);
+        this.handleFocusIndicatorDisplay();
+      }
       this.icBlur.emit();
     };
     this.label = undefined;
@@ -69,15 +228,29 @@ export class Select {
     this.readonly = false;
     this.placeholder = "Select an option";
     this.helperText = "";
-    this.dense = false;
+    this.small = false;
     this.fullWidth = false;
     this.validationStatus = "";
     this.validationText = "";
     this.value = undefined;
     this.name = this.inputId;
     this.showClearButton = false;
+    this.searchable = false;
+    this.includeDescriptionsInSearch = false;
+    this.includeGroupTitlesInSearch = false;
+    this.searchMatchPosition = "anywhere";
+    this.charactersUntilSuggestions = 0;
+    this.emptyOptionListText = "No results found";
     this.open = false;
     this.clearButtonFocused = false;
+    this.searchableSelectInputValue = null;
+    this.filteredOptions = this.options;
+    this.ariaActiveDescendant = undefined;
+    this.noOptions = null;
+  }
+  watchOptionsHandler() {
+    this.setOptionsValuesFromLabels();
+    this.filteredOptions = this.options;
   }
   /**
    * Sets focus on the input box.
@@ -89,6 +262,15 @@ export class Select {
     else if (this.customSelectElement) {
       this.customSelectElement.focus();
     }
+    else if (this.searchableSelectElement) {
+      this.searchableSelectElement.focus();
+    }
+  }
+  debounceAriaLiveUpdate() {
+    clearTimeout(this.debounce);
+    window.setTimeout(() => {
+      this.updateSearchableSelectResultAriaLive();
+    }, 800);
   }
   componentWillLoad() {
     this.inheritedAttributes = inheritAttributes(this.host, [
@@ -96,13 +278,7 @@ export class Select {
       "tabindex",
       "title",
     ]);
-    if (this.options.length > 0) {
-      this.options.map((option) => {
-        if (!option.value) {
-          option.value = option.label;
-        }
-      });
-    }
+    this.setOptionsValuesFromLabels();
   }
   componentDidRender() {
     if (this.nativeSelectElement && !this.disabled) {
@@ -113,32 +289,46 @@ export class Select {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
   }
   render() {
-    const { dense, disabled, fullWidth, helperText, hideLabel, host, inputId, label, name, open, options, menuId, placeholder, readonly, required, showClearButton, validationStatus, validationText, value, } = this;
+    const { small, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, value, } = this;
     renderHiddenInput(true, this.host, name, value, disabled);
     const invalid = validationStatus === IcInformationStatus.Error ? "true" : "false";
-    const describedBy = getInputDescribedByText(inputId, helperText !== "", hasValidationStatus(this.validationStatus, this.disabled)).trim();
-    return (h(Host, null, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, dense: dense, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, readonly ? (h("ic-typography", null, h("p", null, this.getLabelFromValue(value)))) : isMobileOrTablet() ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus }, this.inheritedAttributes), h("option", { value: "", selected: true, disabled: !this.showClearButton }, placeholder), options.map((option) => {
+    const describedBy = getInputDescribedByText(this.inputId, helperText !== "", hasValidationStatus(this.validationStatus, this.disabled)).trim();
+    return (h(Host, null, 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(value)))) : 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 }, 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 === value }, option.label)))));
       }
       else {
         return (h("option", { value: option.value, disabled: option.disabled, selected: option.value === value }, option.label));
       }
-    }))) : (h("button", { class: "select-input", ref: (el) => (this.customSelectElement = el), id: inputId, "aria-label": `${label}, ${this.getLabelFromValue(value) || placeholder}${required ? ", required" : ""}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": open ? "true" : "false", "aria-owns": menuId, "aria-controls": menuId, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.handleClick, onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("ic-typography", { variant: "body", class: {
+    }))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: "select-input", role: "combobox", "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 &&
+      (showClearButton || searchable) && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && value === 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
+        ? IcThemeForegroundEnum.Light
+        : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
+        "expand-icon": true,
+        "expand-icon-open": this.open,
+        "expand-icon-filled": !(value == null || value === ""),
+        "expand-icon-disabled": !this.isMenuEnabled(),
+      }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { "aria-live": "polite", role: "status", class: "searchable-select-results-status" }))) : (h("div", { class: "select-container" }, h("button", { class: "select-input", ref: (el) => (this.customSelectElement = el), id: this.inputId, "aria-label": `${label}, ${this.getLabelFromValue(value) || placeholder}${required ? ", required" : ""}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": this.open ? "true" : "false", "aria-owns": menuId, "aria-controls": menuId, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.handleClick, onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("ic-typography", { variant: "body", class: {
         "value-text": true,
         placeholder: this.getLabelFromValue(value) === undefined,
-      } }, h("p", null, this.getLabelFromValue(value) || placeholder)), h("div", { class: "select-input-end" }, value && showClearButton && (h("div", { class: "clear-button-container" }, 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: dense ? "dense" : "default", variant: "icon", buttonStyle: this.clearButtonFocused
-        ? IcThemeForegroundEnum.Light
-        : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" }))), h("span", { class: {
+      } }, h("p", null, this.getLabelFromValue(value) || placeholder)), h("div", { class: "select-input-end" }, value && showClearButton && h("div", { class: "divider" }), h("span", { class: {
         "expand-icon": true,
         "expand-icon-open": this.open,
-        "expand-icon-filled": !(this.value == null || this.value === ""),
-      }, innerHTML: Expand, "aria-hidden": "true" }))))), !isMobileOrTablet() && (h("ic-menu", { ref: (el) => (this.menu = el), inputEl: this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, dense: dense, menuId: menuId, open: open, options: options, value: value, fullWidth: fullWidth, onMenuChange: this.handleMenuChange, onOptionSelect: this.handleCustomSelectChange, parentEl: host })), h("ic-input-validation", { class: { "menu-open": open }, ariaLiveMode: "polite", status: hasValidationStatus(this.validationStatus, this.disabled) ===
+        "expand-icon-filled": !(value == null || value === ""),
+      }, innerHTML: Expand, "aria-hidden": "true" }))), value && 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
+        ? IcThemeForegroundEnum.Light
+        : IcThemeForegroundEnum.Dark }))))), !isMobileOrTablet() && (h("ic-menu", { class: {
+        "no-results": this.noOptions !== null,
+      }, 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 : options, value: value, fullWidth: fullWidth, onMenuChange: this.handleMenuChange, onOptionSelect: this.handleCustomSelectChange, parentEl: this.host })), h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: hasValidationStatus(this.validationStatus, this.disabled) ===
         false
         ? ""
         : validationStatus, message: hasValidationStatus(this.validationStatus, this.disabled)
         ? validationText
-        : "", for: inputId }))));
+        : "", for: this.inputId }))));
   }
   static get is() { return "ic-select"; }
   static get encapsulation() { return "shadow"; }
@@ -300,7 +490,7 @@ export class Select {
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "dense": {
+      "small": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -312,9 +502,9 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Specify whether dense styling is to be applied to the element."
+          "text": "Specify whether small styling is to be applied to the element."
         },
-        "attribute": "dense",
+        "attribute": "small",
         "reflect": false,
         "defaultValue": "false"
       },
@@ -424,18 +614,135 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Display a button which clears the input when clicked."
+          "text": "Display a button which clears the input when clicked. The button will always appear on the searchable select."
         },
         "attribute": "show-clear-button",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "searchable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If true, the select can be typed in to filter options."
+        },
+        "attribute": "searchable",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "includeDescriptionsInSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If true, descriptions of options are included when filtering options in a searchable select."
+        },
+        "attribute": "include-descriptions-in-search",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "includeGroupTitlesInSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If true, group titles of grouped options are included when filtering options in a searchable select."
+        },
+        "attribute": "include-group-titles-in-search",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "searchMatchPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IcSearchMatchPositions",
+          "resolved": "\"anywhere\" | \"start\"",
+          "references": {
+            "IcSearchMatchPositions": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Whether the search string of the searchable select should match the start of or anywhere in the options."
+        },
+        "attribute": "search-match-position",
+        "reflect": false,
+        "defaultValue": "\"anywhere\""
+      },
+      "charactersUntilSuggestions": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Number of characters until suggestions appear for a searchable select."
+        },
+        "attribute": "characters-until-suggestions",
+        "reflect": false,
+        "defaultValue": "0"
+      },
+      "emptyOptionListText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Provide text for empty results list"
+        },
+        "attribute": "empty-option-list-text",
+        "reflect": false,
+        "defaultValue": "\"No results found\""
       }
     };
   }
   static get states() {
     return {
       "open": {},
-      "clearButtonFocused": {}
+      "clearButtonFocused": {},
+      "searchableSelectInputValue": {},
+      "filteredOptions": {},
+      "ariaActiveDescendant": {},
+      "noOptions": {}
     };
   }
   static get events() {
@@ -512,5 +819,11 @@ export class Select {
     };
   }
   static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "options",
+        "methodName": "watchOptionsHandler"
+      }];
+  }
 }
 //# sourceMappingURL=ic-select.js.map