@ukic/web-components 2.1.0-beta.1 → 2.1.0-beta.10

package/dist/collection/components/ic-search-bar/ic-search-bar.js

@@ -1,6 +1,6 @@
 import { Host, h, } from "@stencil/core";
 import { IcThemeForegroundEnum, } from "../../utils/types";
-import { debounceEvent, getInputDescribedByText, renderHiddenInput, handleHiddenFormButtonClick, getLabelFromValue, onComponentRequiredPropUndefined, getFilteredMenuOptions, } from "../../utils/helpers";
+import { getInputDescribedByText, renderHiddenInput, handleHiddenFormButtonClick, getLabelFromValue, onComponentRequiredPropUndefined, getFilteredMenuOptions, } from "../../utils/helpers";
 import clearIcon from "../../assets/clear-icon.svg";
 import searchIcon from "../../assets/search-icon.svg";
 let inputIds = 0;
@@ -13,12 +13,20 @@ export class SearchBar {
     this.assistiveHintEl = null;
     this.preventSubmit = false;
     this.handleSubmitSearch = () => {
+      this.highlightedValue && (this.value = this.highlightedValue);
+      this.highlightedValue = undefined;
       this.icSubmitSearch.emit({ value: this.value });
       const form = this.el.closest("FORM");
       if (this.searchSubmitButton && !!form && !this.preventSubmit) {
         handleHiddenFormButtonClick(form, this.searchSubmitButton);
       }
     };
+    this.handleSubmitSearchKeyDown = (ev) => {
+      if (ev.key === " ") {
+        ev.preventDefault();
+        this.handleSubmitSearch();
+      }
+    };
     this.onInput = (ev) => {
       this.value = ev.target.value;
       const noOptions = [{ label: this.emptyOptionListText, value: "" }];
@@ -30,15 +38,10 @@ export class SearchBar {
             rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;
         }
       }
-      else if (this.disableFilter) {
-        this.setMenuChange(true);
-        this.filteredOptions = noOptions;
-      }
       if (!this.showClearButton) {
         this.handleShowClearButton(true);
       }
       this.debounceAriaLiveUpdate();
-      this.icInput.emit({ value: this.value });
     };
     this.onInputBlur = (ev) => {
       const value = ev.target.value;
@@ -64,6 +67,9 @@ export class SearchBar {
         this.preventSubmit = true;
       }
     };
+    this.handleMouseDown = (ev) => {
+      ev.preventDefault();
+    };
     this.handleClearBlur = (ev) => {
       const nextFocus = ev.relatedTarget;
       this.icClearBlur.emit({ relatedTarget: nextFocus });
@@ -86,8 +92,25 @@ export class SearchBar {
       this.value = ev.detail.value;
       this.icOptionSelect.emit({ value: this.value });
     };
+    this.handleMenuOptionHighlight = (ev) => {
+      var _a;
+      const optionValue = (_a = ev.detail.optionId) === null || _a === void 0 ? void 0 : _a.replace(`${this.menuId}-`, "");
+      optionValue && (this.highlightedValue = optionValue);
+      if (ev.detail.optionId) {
+        this.ariaActiveDescendant = ev.detail.optionId;
+      }
+      else {
+        this.ariaActiveDescendant = undefined;
+      }
+    };
     this.handleMenuChange = (ev) => {
       this.setMenuChange(ev.detail.open);
+      if (!ev.detail.open) {
+        this.handleMenuCloseFromMenuChange(true);
+        if (ev.detail.focusInput === undefined || ev.detail.focusInput) {
+          this.el.setFocus();
+        }
+      }
     };
     this.setMenuChange = (open) => {
       if (this.open !== open) {
@@ -164,7 +187,8 @@ export class SearchBar {
       this.filteredOptions[0].label === this.emptyOptionListText;
     this.isSubmitDisabled = () => {
       const valueNotSet = this.value === undefined || this.value === null || this.value === "";
-      return valueNotSet || this.disabled || this.hadNoOptions();
+      const valueLengthLess = this.value.length < this.charactersUntilSuggestion;
+      return (valueNotSet || valueLengthLess || this.disabled || this.hadNoOptions());
     };
     this.highlightFirstOptionAfterNoResults = () => {
       if (this.prevNoOption && this.menu) {
@@ -206,14 +230,22 @@ export class SearchBar {
     this.clearButtonFocused = false;
     this.searchSubmitFocused = false;
     this.prevNoOption = false;
-  }
-  debounceChanged() {
-    this.icChange = debounceEvent(this.icChange, this.debounce);
+    this.highlightedValue = undefined;
   }
   watchOptionsHandler(newOptions) {
     if (this.disableFilter) {
-      this.filteredOptions = newOptions;
+      if (newOptions.length > 0) {
+        this.filteredOptions = newOptions;
+      }
+      else {
+        if (this.hadNoOptions()) {
+          return;
+        }
+        this.setMenuChange(true);
+        this.filteredOptions = [{ label: this.emptyOptionListText, value: "" }];
+      }
     }
+    this.debounceAriaLiveUpdate();
   }
   watchValueHandler(newValue) {
     if (this.inputEl &&
@@ -224,10 +256,9 @@ export class SearchBar {
     else if (this.inputEl && this.inputEl.value !== newValue) {
       this.inputEl.value = newValue;
     }
-    this.icChange.emit({ value: newValue });
   }
   /**
-   * Sets focus on the native `input`
+   * Sets focus on the native `input`.
    */
   async setFocus() {
     if (this.inputEl) {
@@ -256,30 +287,11 @@ export class SearchBar {
     }
   }
   debounceAriaLiveUpdate() {
-    clearTimeout(this.debounce);
-    this.debounce = window.setTimeout(() => {
+    clearTimeout(this.debounceAriaLive);
+    this.debounceAriaLive = window.setTimeout(() => {
       this.updateSearchResultAriaLive();
     }, 500);
   }
-  onMenuClose(ev) {
-    if (!ev.detail.open) {
-      this.handleMenuCloseFromMenuChange(true);
-      if (ev.detail.focusInput === undefined || ev.detail.focusInput) {
-        this.el.setFocus();
-      }
-    }
-  }
-  onMenuOptionHighlighted(ev) {
-    if (ev.detail.optionId) {
-      this.ariaActiveDescendant = ev.detail.optionId;
-    }
-    else {
-      this.ariaActiveDescendant = undefined;
-    }
-  }
-  connectedCallback() {
-    this.debounceChanged();
-  }
   componentWillRender() {
     this.highlightFirstOptionAfterNoResults();
   }
@@ -344,10 +356,10 @@ export class SearchBar {
         ["small"]: small,
       }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-text-field", { ref: (el) => (this.inputEl = el), inputId: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly, small: small, hideLabel: hideLabel, fullWidth: fullWidth, name: name, truncateValue: truncateValue, value: options && !!getLabelFromValue(value, options)
         ? getLabelFromValue(value, options)
-        : value, placeholder: placeholder, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : "", "aria-describedby": describedById, "aria-owns": hasSuggestedSearch ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, ariaExpanded: expanded, ariaActiveDescendant: ariaActiveDescendant, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: hasSuggestedSearch ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }, h("div", { class: {
+        : value, placeholder: placeholder, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : "", "aria-describedby": describedById, "aria-owns": hasSuggestedSearch ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, ariaExpanded: expanded, ariaActiveDescendant: ariaActiveDescendant, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: hasSuggestedSearch ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search", debounce: this.debounce }, h("div", { class: {
         "clear-button-container": true,
         "clear-button-visible": value && !disabledMode && this.showClearButton,
-      }, slot: "clear-button" }, h("ic-button", { id: "clear-button", class: "clear-button", "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, size: small ? "small" : "default", onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", appearance: this.clearButtonFocused
+      }, slot: "clear-button" }, h("ic-button", { id: "clear-button", class: "clear-button", "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: small ? "small" : "default", onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", appearance: this.clearButtonFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" })), h("div", { class: {
         "search-submit-button-container": true,
@@ -355,17 +367,18 @@ export class SearchBar {
       }, slot: "search-submit-button" }, h("ic-button", { id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
         ["search-submit-button"]: true,
         ["search-submit-button-small"]: !!small,
-      }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: small ? "small" : "default", onClick: this.handleSubmitSearch, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, type: "submit", variant: "icon", appearance: this.searchSubmitFocused
+      }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: small ? "small" : "default", onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: "submit", variant: "icon", appearance: this.searchSubmitFocused
         ? IcThemeForegroundEnum.Light
         : IcThemeForegroundEnum.Default })), h("div", { class: {
         "menu-container": true,
         fullwidth: fullWidth,
       }, slot: "menu" }, menuOpen && value.length >= this.charactersUntilSuggestion && (h("ic-menu", { class: {
         "no-results": this.hadNoOptions(),
-      }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), small: small, fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onOptionSelect: this.handleOptionSelect, onMenuChange: this.handleMenuChange, parentEl: this.el, value: value })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
+      }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), small: small, fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, parentEl: this.el, value: value })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
   }
   static get is() { return "ic-search-bar"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["ic-search-bar.css"]
@@ -390,7 +403,7 @@ export class SearchBar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide a label for the input."
+          "text": "The label for the search bar."
         },
         "attribute": "label",
         "reflect": false
@@ -407,7 +420,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Specify if the input requires a value."
+          "text": "If `true`, the search bar will require a value."
         },
         "attribute": "required",
         "reflect": false,
@@ -425,7 +438,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Specify whether the input is disabled."
+          "text": "If `true`, the disabled state will be set."
         },
         "attribute": "disabled",
         "reflect": false,
@@ -443,7 +456,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Specify whether the input is read only."
+          "text": "If `true`, the readonly state will be set."
         },
         "attribute": "readonly",
         "reflect": false,
@@ -461,7 +474,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide a placeholder value to display."
+          "text": "The placeholder value to display."
         },
         "attribute": "placeholder",
         "reflect": false,
@@ -479,7 +492,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Specify whether the component fills the full width of the container.\nIf true, this overrides the --input-width css prop."
+          "text": "Specify whether the search bar fills the full width of the container.\nIf `true`, this overrides the --input-width CSS variable."
         },
         "attribute": "full-width",
         "reflect": false,
@@ -497,7 +510,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\nIf true, all options provided will be displayed."
+          "text": "Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.\nIf `true`, all options provided will be displayed."
         },
         "attribute": "disable-filter",
         "reflect": false,
@@ -515,7 +528,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Hides the label and applies the required label value as an aria-label."
+          "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
         },
         "attribute": "hide-label",
         "reflect": false,
@@ -533,7 +546,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide helper text to display additional field guidance."
+          "text": "The helper text that will be displayed for additional field guidance."
         },
         "attribute": "helper-text",
         "reflect": false,
@@ -551,7 +564,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Specify whether small styling is to be applied to the element."
+          "text": "If `true`, the small styling will be applied to the search bar."
         },
         "attribute": "small",
         "reflect": false,
@@ -569,7 +582,7 @@ export class SearchBar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Value of Search input."
+          "text": "The value of the search input."
         },
         "attribute": "value",
         "reflect": true,
@@ -587,7 +600,7 @@ export class SearchBar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\"."
+          "text": "The automatic capitalisation of the text value as it is entered/edited by the user.\nAvailable options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\"."
         },
         "attribute": "autocapitalize",
         "reflect": false,
@@ -610,7 +623,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Indicates whether the value of the control can be automatically completed by the browser."
+          "text": "The state of autocompletion the browser can apply on the text value."
         },
         "attribute": "autocomplete",
         "reflect": false,
@@ -633,7 +646,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Whether auto correction should be enabled when the user is entering/editing the text value."
+          "text": "The state of autocorrection the browser can apply when the user is entering/editing the text value."
         },
         "attribute": "autocorrect",
         "reflect": false,
@@ -651,7 +664,7 @@ export class SearchBar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "This Boolean attribute lets you specify that a form control should have input focus when the page loads."
+          "text": "If `true`, the form control will have input focus when the page loads."
         },
         "attribute": "autofocus",
         "reflect": false,
@@ -659,7 +672,7 @@ export class SearchBar {
       },
       "debounce": {
         "type": "number",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "number",
           "resolved": "number",
@@ -669,7 +682,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
+          "text": "The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke."
         },
         "attribute": "debounce",
         "reflect": false,
@@ -705,7 +718,7 @@ export class SearchBar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "If `true`, the element will have its spelling and grammar checked."
+          "text": "If `true`, the value of the search will have its spelling and grammar checked."
         },
         "attribute": "spellcheck",
         "reflect": false,
@@ -728,7 +741,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide the suggested search options"
+          "text": "The suggested search options."
         },
         "defaultValue": "[]"
       },
@@ -744,7 +757,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Specify whether the input should be focussed when component loaded."
+          "text": "If `true`, the search bar will be focused when component loaded."
         },
         "attribute": "focus-on-load",
         "reflect": false,
@@ -762,7 +775,7 @@ export class SearchBar {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide hint text for hidden assistive description element."
+          "text": "The hint text for the hidden assistive description element."
         },
         "attribute": "hint-text",
         "reflect": false,
@@ -780,7 +793,7 @@ export class SearchBar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide text for empty results list"
+          "text": "The text displayed when there are no options in the option list."
         },
         "attribute": "empty-option-list-text",
         "reflect": false,
@@ -798,7 +811,7 @@ export class SearchBar {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Number of characters until suggestions appear"
+          "text": "The number of characters until suggestions appear."
         },
         "attribute": "characters-until-suggestion",
         "reflect": false,
@@ -814,7 +827,8 @@ export class SearchBar {
       "showClearButton": {},
       "clearButtonFocused": {},
       "searchSubmitFocused": {},
-      "prevNoOption": {}
+      "prevNoOption": {},
+      "highlightedValue": {}
     };
   }
   static get events() {
@@ -845,8 +859,11 @@ export class SearchBar {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Emitted when input loses focus."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This event should not be used anymore. Use icSearchBarBlur instead."
+            }],
+          "text": ""
         },
         "complexType": {
           "original": "IcSearchBarBlurEventDetail",
@@ -865,8 +882,11 @@ export class SearchBar {
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Emitted when input gains focus."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This event should not be used anymore. Use icSearchBarFocus instead."
+            }],
+          "text": ""
         },
         "complexType": {
           "original": "IcValueEventDetail",
@@ -1070,7 +1090,7 @@ export class SearchBar {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Sets focus on the native `input`",
+          "text": "Sets focus on the native `input`.",
           "tags": []
         }
       }
@@ -1079,9 +1099,6 @@ export class SearchBar {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "debounce",
-        "methodName": "debounceChanged"
-      }, {
         "propName": "options",
         "methodName": "watchOptionsHandler"
       }, {
@@ -1102,18 +1119,6 @@ export class SearchBar {
         "target": undefined,
         "capture": false,
         "passive": false
-      }, {
-        "name": "menuChange",
-        "method": "onMenuClose",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "menuOptionId",
-        "method": "onMenuOptionHighlighted",
-        "target": undefined,
-        "capture": false,
-        "passive": false
       }];
   }
 }