@ukic/web-components 2.35.2 → 3.0.0-alpha.10

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

@@ -1,6 +1,5 @@
 import { Host, h, } from "@stencil/core";
-import { IcThemeForegroundEnum, } from "../../utils/types";
-import { getInputDescribedByText, renderHiddenInput, handleHiddenFormButtonClick, getLabelFromValue, onComponentRequiredPropUndefined, getFilteredMenuOptions, removeDisabledFalse, } from "../../utils/helpers";
+import { getInputDescribedByText, renderHiddenInput, handleHiddenFormButtonClick, getLabelFromValue, onComponentRequiredPropUndefined, getFilteredMenuOptions, removeDisabledFalse, debounceEvent, } from "../../utils/helpers";
 import clearIcon from "../../assets/clear-icon.svg";
 import searchIcon from "../../assets/search-icon.svg";
 let inputIds = 0;
@@ -36,13 +35,14 @@ export class SearchBar {
         };
         this.onInput = (ev) => {
             this.value = ev.target.value;
+            this.icInput.emit({ value: this.value });
             const noOptions = [
                 { [this.labelField]: this.emptyOptionListText, [this.valueField]: "" },
             ];
             if (this.options.length > 0) {
                 this.setMenuChange(true);
                 this.preLoad = false;
-                if (this.disableFilter === false) {
+                if (this.disableAutoFiltering === false) {
                     const rawFilteredOptions = getFilteredMenuOptions(this.options, false, this.value, "anywhere", this.labelField);
                     this.filteredOptions =
                         rawFilteredOptions.length > 0 ? rawFilteredOptions : noOptions;
@@ -56,11 +56,11 @@ export class SearchBar {
         this.onInputBlur = (ev) => {
             const value = ev.target.value;
             const nextFocus = ev.relatedTarget;
-            this.icInputBlur.emit({ value: value, relatedTarget: nextFocus });
+            this.icSearchBarBlur.emit({ value: value, relatedTarget: nextFocus });
         };
         this.onInputFocus = (ev) => {
             const value = ev.target.value;
-            this.icInputFocus.emit({ value: value });
+            this.icSearchBarFocus.emit({ value: value });
             this.handleShowClearButton(true);
         };
         this.handleClearBlur = (ev) => {
@@ -144,10 +144,7 @@ export class SearchBar {
         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.menuCloseFromMenuChangeEvent = true;
             }
         };
         this.setMenuChange = (open) => {
@@ -164,6 +161,7 @@ export class SearchBar {
             this.icSearchBarFocus.emit();
         };
         this.handleHostBlur = (ev) => {
+            var _a;
             const nextFocus = ev.relatedTarget;
             if (this.open &&
                 this.options &&
@@ -173,10 +171,10 @@ export class SearchBar {
                 this.setMenuChange(false);
             }
             if (this.retryButtonClick || this.retryViaKeyPress) {
-                this.inputEl.setFocus();
+                (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
             }
             this.handleShowClearButton(false);
-            this.handleMenuCloseFromMenuChange(false);
+            this.menuCloseFromMenuChangeEvent = false;
             this.handleTruncateValue(true);
             this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });
             this.retryViaKeyPress = false;
@@ -188,21 +186,17 @@ export class SearchBar {
         this.handleFocusClearButton = () => {
             this.clearButtonFocused = true;
         };
-        this.handleMenuCloseFromMenuChange = (fromEvent) => {
-            this.menuCloseFromMenuChangeEvent = fromEvent;
-        };
         this.handleTruncateValue = (truncate) => {
             this.truncateValue = truncate;
         };
         this.renderAssistiveHintEl = () => {
-            var _a, _b;
-            const input = (_b = (_a = this.el.shadowRoot
-                .querySelector("ic-text-field")) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(`#${this.inputId}`);
+            var _a;
+            const input = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`#${this.inputId}`);
             if (input &&
                 Object.keys(input).length > 0 &&
                 this.hasOptionsOrFilterDisabled()) {
                 this.assistiveHintEl = document.createElement("span");
-                this.assistiveHintEl.innerText = this.hintText;
+                this.assistiveHintEl.innerText = this.assistiveHintText;
                 this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;
                 this.assistiveHintEl.style.display = "none";
                 if (input.after !== undefined) {
@@ -231,7 +225,7 @@ export class SearchBar {
                 }
             }
         };
-        this.hasOptionsOrFilterDisabled = () => this.options.length > 0 || this.disableFilter;
+        this.hasOptionsOrFilterDisabled = () => this.options.length > 0 || this.disableAutoFiltering;
         this.hadNoOptions = () => this.filteredOptions.length === 1 &&
             this.filteredOptions[0][this.labelField] === this.emptyOptionListText &&
             this.searchMode === "navigation";
@@ -269,14 +263,14 @@ export class SearchBar {
         this.autofocus = false;
         this.charactersUntilSuggestion = 2;
         this.disabled = false;
-        this.disableFilter = false;
+        this.disableAutoFiltering = false;
         this.debounce = 0;
         this.emptyOptionListText = "No results found";
         this.focusOnLoad = false;
         this.fullWidth = false;
         this.helperText = "";
         this.hideLabel = false;
-        this.hintText = "When autocomplete results are available use the up and down arrows to choose and press enter to select";
+        this.assistiveHintText = "When autocomplete results are available use the up and down arrows to choose and press enter to select";
         this.label = undefined;
         this.labelField = "label";
         this.loading = false;
@@ -287,9 +281,9 @@ export class SearchBar {
         this.readonly = false;
         this.required = false;
         this.searchMode = "navigation";
-        this.size = "default";
-        this.small = false;
+        this.size = "medium";
         this.spellcheck = false;
+        this.theme = "inherit";
         this.timeout = undefined;
         this.valueField = "value";
         this.filteredOptions = [];
@@ -299,6 +293,9 @@ export class SearchBar {
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
     }
+    debounceChanged() {
+        this.icChange = debounceEvent(this.icChange, this.debounce);
+    }
     loadingHandler(newValue) {
         if (newValue && !this.hasTimedOut) {
             this.preLoad = false;
@@ -309,7 +306,7 @@ export class SearchBar {
         this.hasTimedOut = newOptions.some((opt) => opt.timedOut);
     }
     watchOptionsHandler(newOptions) {
-        if (this.disableFilter && !this.hasTimedOut) {
+        if (this.disableAutoFiltering && !this.hasTimedOut) {
             this.loading = false;
             clearTimeout(this.timeoutTimer);
             if (newOptions.length > 0) {
@@ -341,6 +338,10 @@ export class SearchBar {
         else if (this.inputEl && this.inputEl.value !== newValue) {
             this.inputEl.value = newValue;
         }
+        this.icChange.emit({ value: newValue });
+    }
+    connectedCallback() {
+        this.debounceChanged();
     }
     disconnectedCallback() {
         if (this.assistiveHintEl) {
@@ -350,33 +351,26 @@ export class SearchBar {
     componentWillLoad() {
         this.watchValueHandler(this.value);
         removeDisabledFalse(this.disabled, this.el);
-        if (this.small) {
-            this.size = "small";
-        }
     }
     componentDidLoad() {
-        var _a;
         if (this.focusOnLoad) {
             this.el.setFocus();
         }
         if (this.hasOptionsOrFilterDisabled()) {
             this.renderAssistiveHintEl();
-            if (this.disableFilter) {
+            if (this.disableAutoFiltering) {
                 this.filteredOptions = this.options;
             }
         }
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Search Bar");
-        if (this.inputEl !== undefined) {
-            this.anchorEl = (_a = this.inputEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-input-component-container");
-        }
     }
     componentWillRender() {
         this.highlightFirstOptionAfterNoResults();
     }
-    handleKeyDown(ev) {
-        const keyEv = ev.detail.event;
+    handleKeyDown(event) {
+        this.icKeydown.emit({ event });
         if (this.menu && this.open) {
-            this.menu.handleKeyboardOpen(keyEv);
+            this.menu.handleKeyboardOpen(event);
         }
     }
     handleKeyUp(ev) {
@@ -398,11 +392,10 @@ export class SearchBar {
      * Sets focus on the native `input`.
      */
     async setFocus() {
+        var _a;
         this.retryViaKeyPress = false;
         this.retryButtonClick = false;
-        if (this.inputEl) {
-            this.inputEl.setFocus();
-        }
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     debounceAriaLiveUpdate() {
         clearTimeout(this.debounceAriaLive);
@@ -411,7 +404,7 @@ export class SearchBar {
         }, 500);
     }
     render() {
-        const { inputId, name, label, required, small, size, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, truncateValue, autofocus, autocapitalize, autocomplete, filteredOptions, } = this;
+        const { inputId, name, label, required, size, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, truncateValue, autofocus, autocapitalize, autocomplete, filteredOptions, theme, } = this;
         const disabledMode = readonly || disabled;
         const describedBy = getInputDescribedByText(inputId, helperText !== "", false).trim();
         let describedById;
@@ -433,34 +426,40 @@ export class SearchBar {
         const labelValue = getLabelFromValue(value, options, this.valueField, this.labelField);
         renderHiddenInput(true, this.el, name, value, disabledMode);
         return (h(Host, { class: {
-                search: true,
-                fullwidth: fullWidth,
-                disabled,
-                small: size === "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: disabledMode && !readonly, readonly: readonly, size: size, hideLabel: hideLabel, fullWidth: fullWidth, name: name, truncateValue: truncateValue, value: options && !!labelValue ? labelValue : value, placeholder: placeholder, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : "", "aria-describedby": describedById, "aria-owns": menuRendered ? menuId : undefined, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, ariaExpanded: options.length > 0 ? `${menuOpen}` : undefined, ariaActiveDescendant: ariaActiveDescendant, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search", debounce: this.debounce }, h("div", { class: {
+                ["ic-search-bar-search"]: true,
+                ["ic-search-bar-full-width"]: fullWidth,
+                ["ic-search-bar-disabled"]: disabled,
+                ["ic-search-bar-small"]: size === "small",
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
+                "no-left-pad": readonly,
+                readonly,
+                "truncate-value": truncateValue,
+            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": label, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": options.length > 0 && menuRendered ? `${menuOpen}` : undefined, "aria-owns": menuRendered ? menuId : undefined, "aria-describedby": describedById, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 && menuRendered ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }), 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, onMouseDown: this.handleMouseDown, size: size, 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: {
+            } }, h("ic-button", { id: "clear-button", class: {
+                "clear-button": true,
+                "clear-button-unfocused": !this.clearButtonFocused,
+            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "submit", variant: "icon", theme: this.clearButtonFocused ? "light" : "dark" }), h("div", { class: "divider" })), h("div", { class: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            }, slot: "search-submit-button" }, h("ic-button", { id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
+            } }, 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: size, 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: {
+                ["search-submit-button-small"]: size === "small",
+                ["search-submit-button-unfocused"]: !this.searchSubmitFocused,
+                ["search-submit-button-disabled"]: this.isSubmitDisabled(),
+            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: "submit", variant: "icon", theme: this.searchSubmitFocused ? "light" : "dark" }))), h("div", { class: {
                 "menu-container": true,
                 fullwidth: fullWidth,
-            }, slot: "menu" }, menuRendered && (h("ic-menu", { class: {
+            } }, menuRendered && (h("ic-menu", { class: {
                 "no-results": this.hadNoOptions() ||
                     (filteredOptions.length === 1 &&
                         (filteredOptions[0][this.labelField] ===
                             this.loadingLabel ||
                             filteredOptions[0][this.labelField] ===
                                 this.loadingErrorLabel)),
-            }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, searchMode: this.searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), small: size === "small", fullWidth: fullWidth, menuId: menuId, open: !!menuRendered, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: this.labelField, valueField: this.valueField })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
+            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: this.searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: !!menuRendered, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: this.labelField, valueField: this.valueField })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
     }
     static get is() { return "ic-search-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -597,7 +596,7 @@ export class SearchBar {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "disableFilter": {
+            "disableAutoFiltering": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -611,7 +610,7 @@ export class SearchBar {
                     "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."
                 },
-                "attribute": "disable-filter",
+                "attribute": "disable-auto-filtering",
                 "reflect": false,
                 "defaultValue": "false"
             },
@@ -723,7 +722,7 @@ export class SearchBar {
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "hintText": {
+            "assistiveHintText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -737,7 +736,7 @@ export class SearchBar {
                     "tags": [],
                     "text": "The hint text for the hidden assistive description element."
                 },
-                "attribute": "hint-text",
+                "attribute": "assistive-hint-text",
                 "reflect": false,
                 "defaultValue": "\"When autocomplete results are available use the up and down arrows to choose and press enter to select\""
             },
@@ -931,7 +930,7 @@ export class SearchBar {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizesNoLarge",
-                    "resolved": "\"default\" | \"small\"",
+                    "resolved": "\"medium\" | \"small\"",
                     "references": {
                         "IcSizesNoLarge": {
                             "location": "import",
@@ -948,9 +947,9 @@ export class SearchBar {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
             },
-            "small": {
+            "spellcheck": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -959,35 +958,38 @@ export class SearchBar {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "If `true`, the value of the search will have its spelling and grammar checked."
                 },
-                "attribute": "small",
+                "attribute": "spellcheck",
                 "reflect": false,
                 "defaultValue": "false"
             },
-            "spellcheck": {
-                "type": "boolean",
+            "theme": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the value of the search will have its spelling and grammar checked."
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
-                "attribute": "spellcheck",
+                "attribute": "theme",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "\"inherit\""
             },
             "timeout": {
                 "type": "number",
@@ -1135,54 +1137,6 @@ export class SearchBar {
                         }
                     }
                 }
-            }, {
-                "method": "icInputBlur",
-                "name": "icInputBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This event should not be used anymore. Use icSearchBarBlur instead."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "IcSearchBarBlurEventDetail",
-                    "resolved": "IcSearchBarBlurEventDetail",
-                    "references": {
-                        "IcSearchBarBlurEventDetail": {
-                            "location": "import",
-                            "path": "./ic-search-bar.types",
-                            "id": "src/components/ic-search-bar/ic-search-bar.types.ts::IcSearchBarBlurEventDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "icInputFocus",
-                "name": "icInputFocus",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This event should not be used anymore. Use icSearchBarFocus instead."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "IcValueEventDetail",
-                    "resolved": "IcValueEventDetail",
-                    "references": {
-                        "IcValueEventDetail": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcValueEventDetail"
-                        }
-                    }
-                }
             }, {
                 "method": "icOptionSelect",
                 "name": "icOptionSelect",
@@ -1347,9 +1301,35 @@ export class SearchBar {
                     "text": "Emitted when focus is invoked from ic-search-bar"
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
+                    "original": "IcValueEventDetail",
+                    "resolved": "IcValueEventDetail",
+                    "references": {
+                        "IcValueEventDetail": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcValueEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "icKeydown",
+                "name": "icKeydown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a keydown event occurred."
+                },
+                "complexType": {
+                    "original": "{ event: KeyboardEvent }",
+                    "resolved": "{ event: KeyboardEvent; }",
+                    "references": {
+                        "KeyboardEvent": {
+                            "location": "global",
+                            "id": "global::KeyboardEvent"
+                        }
+                    }
                 }
             }];
     }
@@ -1379,6 +1359,9 @@ export class SearchBar {
         return [{
                 "propName": "disabled",
                 "methodName": "watchDisabledHandler"
+            }, {
+                "propName": "debounce",
+                "methodName": "debounceChanged"
             }, {
                 "propName": "loading",
                 "methodName": "loadingHandler"
@@ -1395,7 +1378,7 @@ export class SearchBar {
     }
     static get listeners() {
         return [{
-                "name": "icKeydown",
+                "name": "keydown",
                 "method": "handleKeyDown",
                 "target": undefined,
                 "capture": false,