@ukic/web-components 2.1.0-beta.7 → 2.1.0-beta.9

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

@@ -10,6 +10,18 @@ export class Select {
     this.inputId = `ic-select-input-${inputIds++}`;
     this.menuId = `${this.inputId}-menu`;
     this.inheritedAttributes = {};
+    this.hasSetSearchableDefaultValue = false;
+    this.initialRender = false;
+    this.emitIcChange = (value) => {
+      clearTimeout(this.debounceIcChange);
+      this.debounceIcChange = window.setTimeout(() => {
+        this.icChange.emit({ value: value });
+      }, this.currDebounce);
+    };
+    this.emitImmediateIcChange = (value) => {
+      clearTimeout(this.debounceIcChange);
+      this.icChange.emit({ value: value });
+    };
     this.isMenuEnabled = () => {
       return (((this.searchableSelectInputValue === null ||
         this.searchableSelectInputValue === "") &&
@@ -56,7 +68,8 @@ export class Select {
       return newOption;
     };
     this.handleNativeSelectChange = () => {
-      this.icChange.emit({ value: this.nativeSelectElement.value });
+      this.icOptionSelect.emit({ value: this.nativeSelectElement.value });
+      this.emitImmediateIcChange(this.nativeSelectElement.value);
       this.setTextColor();
     };
     this.handleCustomSelectChange = (event) => {
@@ -68,12 +81,19 @@ export class Select {
         this.searchableSelectInputValue = this.getLabelFromValue(event.detail.value);
       }
       this.ariaActiveDescendant = event.detail.optionId;
-      this.icChange.emit({ value: event.detail.value });
+      this.icOptionSelect.emit({ value: event.detail.value });
+      this.emitImmediateIcChange(event.detail.value);
     };
     this.handleMenuChange = (event) => {
       this.open = event.detail.open;
       this.searchable && this.handleFocusIndicatorDisplay();
     };
+    // clears the debounce delay when navigating the menu with arrow keys etc
+    // to prevent delay in change event, which should only occur when typing in input
+    this.handleMenuKeyPress = (ev) => {
+      const debounce = ev.detail.isNavKey ? 0 : this.debounce;
+      this.debounceChangedHandler(debounce);
+    };
     this.handleFocusIndicatorDisplay = () => {
       const focusIndicator = this.host.shadowRoot.querySelector(".focus-indicator");
       if (this.open) {
@@ -88,9 +108,15 @@ export class Select {
         event.preventDefault();
       }
     };
+    this.isExternalFiltering = () => this.searchable && this.disableFilter;
     this.handleClick = (event) => {
-      this.noOptions = null;
-      this.menu.options = this.options;
+      if (this.isExternalFiltering()) {
+        this.menu.options = this.filteredOptions;
+      }
+      else {
+        this.noOptions = null;
+        this.menu.options = this.options;
+      }
       if (event.detail !== 0 && this.isMenuEnabled()) {
         this.menu.handleClickOpen();
       }
@@ -105,7 +131,8 @@ export class Select {
     this.handleClear = (event) => {
       event.stopPropagation();
       this.noOptions = null;
-      this.icChange.emit({ value: null });
+      this.emitImmediateIcChange(null);
+      this.icClear.emit();
       if (this.searchable) {
         this.searchableSelectElement.value = null;
         this.searchableSelectInputValue = null;
@@ -121,17 +148,24 @@ export class Select {
     };
     this.handleKeyDown = (event) => {
       event.cancelBubble = true;
+      const isArrowKey = event.key === "ArrowDown" || event.key === "ArrowUp";
       if (!this.open) {
-        this.noOptions = null;
-        this.menu.options = this.options;
+        if (this.isExternalFiltering() && (event.key === "Enter" || isArrowKey)) {
+          this.menu.options = this.filteredOptions;
+        }
+        else {
+          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()) {
+        if (!(isArrowKey && this.noOptions !== null) && this.isMenuEnabled()) {
+          if (this.isExternalFiltering() && isArrowKey && this.debounce > 0) {
+            this.debounceChangedHandler(0);
+          }
           this.menu.handleKeyboardOpen(event);
         }
       }
@@ -144,8 +178,12 @@ export class Select {
     };
     this.handleSearchableSelectInput = (event) => {
       this.searchableSelectInputValue = event.target.value;
-      if (this.getValueFromLabel(this.searchableSelectInputValue) === undefined) {
-        this.icChange.emit({ value: null });
+      this.icInput.emit({ value: this.searchableSelectInputValue });
+      if (this.disableFilter) {
+        this.emitIcChange(this.searchableSelectInputValue);
+      }
+      else if (this.getValueFromLabel(this.searchableSelectInputValue) === undefined) {
+        this.emitIcChange(null);
       }
       if (this.isMenuEnabled()) {
         this.setMenuChange(true);
@@ -153,62 +191,70 @@ export class Select {
       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 {
+      if (!this.disableFilter) {
+        const options = [...this.options];
+        let isGrouped = false;
+        let newFilteredOptions = [];
         options.map((option) => {
-          if (this.includeGroupTitlesInSearch) {
-            if (menuOptionsFiltered.indexOf(option) !== -1) {
-              newFilteredOptions.push(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));
             }
-          }
-          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;
+          });
+        }
+        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.debounceAriaLiveUpdate();
     };
     this.updateSearchableSelectResultAriaLive = () => {
       const searchableSelectResultsStatusEl = this.host.shadowRoot.querySelector(".searchable-select-results-status");
-      if (this.noOptions !== null) {
-        searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;
-      }
-      else {
-        searchableSelectResultsStatusEl.innerText = "";
+      if (searchableSelectResultsStatusEl) {
+        if (this.noOptions !== null) {
+          searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;
+        }
+        else {
+          searchableSelectResultsStatusEl.innerText = "";
+        }
       }
     };
+    this.getDefaultValue = (value) => this.getLabelFromValue(value) || value || null;
     this.onFocus = () => {
+      if (this.isExternalFiltering() && this.debounce > 0) {
+        this.debounceChangedHandler(this.debounce);
+      }
       this.icFocus.emit();
     };
     this.onBlur = (event) => {
@@ -223,7 +269,7 @@ export class Select {
     this.handleFormReset = () => {
       this.value = this.initialValue;
       if (this.searchable) {
-        this.searchableSelectInputValue = null;
+        this.searchableSelectInputValue = this.getDefaultValue(this.value);
       }
     };
     this.label = undefined;
@@ -239,6 +285,7 @@ export class Select {
     this.validationStatus = "";
     this.validationText = "";
     this.value = undefined;
+    this.debounce = 0;
     this.name = this.inputId;
     this.showClearButton = false;
     this.searchable = false;
@@ -247,6 +294,7 @@ export class Select {
     this.searchMatchPosition = "anywhere";
     this.charactersUntilSuggestions = 0;
     this.emptyOptionListText = "No results found";
+    this.disableFilter = false;
     this.open = false;
     this.clearButtonFocused = false;
     this.searchableSelectInputValue = null;
@@ -254,10 +302,34 @@ export class Select {
     this.ariaActiveDescendant = undefined;
     this.noOptions = null;
     this.initialValue = this.value;
+    this.currDebounce = this.debounce;
+    this.debounceIcChange = undefined;
   }
   watchOptionsHandler() {
-    this.setOptionsValuesFromLabels();
-    this.filteredOptions = this.options;
+    if (this.isExternalFiltering()) {
+      if (this.options.length > 0) {
+        this.setOptionsValuesFromLabels();
+        this.noOptions = null;
+        this.filteredOptions = this.options;
+      }
+      else if (this.isMenuEnabled()) {
+        this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
+        this.filteredOptions = this.noOptions;
+        // Will prevent 'No results found' displaying on initial load and setting default value
+        if (!this.initialRender) {
+          this.setMenuChange(true);
+        }
+      }
+      this.updateSearchableSelectResultAriaLive();
+      this.setSearchableDefaultValue();
+    }
+    else {
+      this.setOptionsValuesFromLabels();
+      this.filteredOptions = this.options;
+    }
+  }
+  debounceChangedHandler(newValue) {
+    this.updateOnChangeDebounce(newValue);
   }
   /**
    * Sets focus on the input box.
@@ -273,12 +345,24 @@ export class Select {
       this.searchableSelectElement.focus();
     }
   }
+  updateOnChangeDebounce(newValue) {
+    if (this.currDebounce !== newValue) {
+      this.currDebounce = newValue;
+    }
+  }
   debounceAriaLiveUpdate() {
-    clearTimeout(this.debounce);
+    clearTimeout(this.debounceAria);
     window.setTimeout(() => {
       this.updateSearchableSelectResultAriaLive();
     }, 800);
   }
+  setSearchableDefaultValue() {
+    if (!this.hasSetSearchableDefaultValue && this.value && this.searchable) {
+      this.searchableSelectInputValue = this.getDefaultValue(this.value);
+      this.initialValue = this.value;
+      this.hasSetSearchableDefaultValue = true;
+    }
+  }
   componentWillLoad() {
     this.inheritedAttributes = inheritAttributes(this.host, [
       ...IC_INHERITED_ARIA,
@@ -287,12 +371,19 @@ export class Select {
     ]);
     this.setOptionsValuesFromLabels();
     addFormResetListener(this.host, this.handleFormReset);
+    this.initialRender = true;
+    if (!this.disableFilter) {
+      this.setSearchableDefaultValue();
+    }
   }
   componentDidRender() {
     if (this.nativeSelectElement && !this.disabled) {
       this.setTextColor();
     }
   }
+  componentWillUpdate() {
+    this.initialRender = false;
+  }
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
   }
@@ -334,10 +425,11 @@ export class Select {
         "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, onIcMenuStateChange: this.handleMenuChange, onIcOptionSelect: this.handleCustomSelectChange, parentEl: this.host })), 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, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : options, value: value, fullWidth: fullWidth, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, parentEl: this.host })), 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"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["ic-select.css"]
@@ -590,6 +682,24 @@ export class Select {
         "attribute": "value",
         "reflect": false
       },
+      "debounce": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
+        },
+        "attribute": "debounce",
+        "reflect": false,
+        "defaultValue": "0"
+      },
       "name": {
         "type": "string",
         "mutable": false,
@@ -656,7 +766,7 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, descriptions of options will be included when filtering options in a searchable select."
+          "text": "If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering."
         },
         "attribute": "include-descriptions-in-search",
         "reflect": false,
@@ -674,7 +784,7 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, group titles of grouped options will be included when filtering options in a searchable select."
+          "text": "If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering."
         },
         "attribute": "include-group-titles-in-search",
         "reflect": false,
@@ -697,7 +807,7 @@ export class Select {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Whether the search string of the searchable select should match the start of or anywhere in the options."
+          "text": "Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering."
         },
         "attribute": "search-match-position",
         "reflect": false,
@@ -738,6 +848,24 @@ export class Select {
         "attribute": "empty-option-list-text",
         "reflect": false,
         "defaultValue": "\"No results found\""
+      },
+      "disableFilter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specify whether to disable the built in filtering for a searchable variant. For example, if options will already be filtered from external source."
+        },
+        "attribute": "disable-filter",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -749,7 +877,9 @@ export class Select {
       "filteredOptions": {},
       "ariaActiveDescendant": {},
       "noOptions": {},
-      "initialValue": {}
+      "initialValue": {},
+      "currDebounce": {},
+      "debounceIcChange": {}
     };
   }
   static get events() {
@@ -761,7 +891,7 @@ export class Select {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when a value is selected."
+          "text": "Emitted when the value changes."
         },
         "complexType": {
           "original": "IcValueEventDetail",
@@ -773,6 +903,21 @@ export class Select {
             }
           }
         }
+      }, {
+        "method": "icClear",
+        "name": "icClear",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when clear button clicked."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }, {
         "method": "icFocus",
         "name": "icFocus",
@@ -781,7 +926,7 @@ export class Select {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when select has focus."
+          "text": "Emitted when select gains focus."
         },
         "complexType": {
           "original": "void",
@@ -796,13 +941,53 @@ export class Select {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Emitted when select has blur."
+          "text": "Emitted when select loses focus."
         },
         "complexType": {
           "original": "void",
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "icOptionSelect",
+        "name": "icOptionSelect",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when option is highlighted within the menu.\nHighlighting a menu item will trigger an `icChange/onIcChange` due to the value being updated."
+        },
+        "complexType": {
+          "original": "IcOptionSelectEventDetail",
+          "resolved": "IcOptionSelectEventDetail",
+          "references": {
+            "IcOptionSelectEventDetail": {
+              "location": "import",
+              "path": "../ic-menu/ic-menu.types"
+            }
+          }
+        }
+      }, {
+        "method": "icInput",
+        "name": "icInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when a keyboard input occurred."
+        },
+        "complexType": {
+          "original": "IcValueEventDetail",
+          "resolved": "IcValueEventDetail",
+          "references": {
+            "IcValueEventDetail": {
+              "location": "import",
+              "path": "../../interface"
+            }
+          }
+        }
       }];
   }
   static get methods() {
@@ -830,6 +1015,9 @@ export class Select {
     return [{
         "propName": "options",
         "methodName": "watchOptionsHandler"
+      }, {
+        "propName": "debounce",
+        "methodName": "debounceChangedHandler"
       }];
   }
 }