@ukic/web-components 3.0.0 → 3.2.0

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

@@ -1,14 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { I as IcThemeForegroundEnum } from './types.js';
-import { N as getFilteredMenuOptions, O as handleHiddenFormButtonClick, P as getLabelFromValue, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, v as getInputDescribedByText, t as renderHiddenInput } from './helpers.js';
-import { d as defineCustomElement$b } from './ic-button2.js';
-import { d as defineCustomElement$a } from './ic-input-component-container2.js';
-import { d as defineCustomElement$9 } from './ic-input-container2.js';
-import { d as defineCustomElement$8 } from './ic-input-label2.js';
-import { d as defineCustomElement$7 } from './ic-input-validation2.js';
-import { d as defineCustomElement$6 } from './ic-loading-indicator2.js';
-import { d as defineCustomElement$5 } from './ic-menu2.js';
-import { d as defineCustomElement$4 } from './ic-text-field2.js';
+import { Q as getFilteredMenuOptions, R as handleHiddenFormButtonClick, r as removeDisabledFalse, S as debounceEvent, T as getLabelFromValue, o as onComponentRequiredPropUndefined, v as getInputDescribedByText, t as renderHiddenInput } from './helpers.js';
+import { d as defineCustomElement$9 } from './ic-button2.js';
+import { d as defineCustomElement$8 } from './ic-input-component-container2.js';
+import { d as defineCustomElement$7 } from './ic-input-container2.js';
+import { d as defineCustomElement$6 } from './ic-input-label2.js';
+import { d as defineCustomElement$5 } from './ic-loading-indicator2.js';
+import { d as defineCustomElement$4 } from './ic-menu2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 
@@ -21,7 +18,8 @@ const searchIcon = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
     <path d="M13.1292 11.8792H12.4708L12.2375 11.6542C13.0542 10.7042 13.5458 9.47083 13.5458 8.12916C13.5458 5.13749 11.1208 2.71249 8.12916 2.71249C5.13749 2.71249 2.71249 5.13749 2.71249 8.12916C2.71249 11.1208 5.13749 13.5458 8.12916 13.5458C9.47083 13.5458 10.7042 13.0542 11.6542 12.2375L11.8792 12.4708V13.1292L16.0458 17.2875L17.2875 16.0458L13.1292 11.8792ZM8.12916 11.8792C6.05416 11.8792 4.37916 10.2042 4.37916 8.12916C4.37916 6.05416 6.05416 4.37916 8.12916 4.37916C10.2042 4.37916 11.8792 6.05416 11.8792 8.12916C11.8792 10.2042 10.2042 11.8792 8.12916 11.8792Z" fill="currentColor"/>
 </svg>`;
 
-const icSearchBarCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-search-bar-search){--divider-height:1.5rem}:host(.ic-search-bar-search.ic-search-bar-small){--divider-height:1rem}:host(.ic-search-bar-full-width){width:100%}:host(.ic-search-bar-search) .ic-button-disabled:hover{border-color:var(--ic-architectural-200)}:host(.ic-search-bar-search.ic-search-bar-disabled) .ic-button-disabled svg{color:var(--ic-architectural-200)}:host(.ic-search-bar-search) .ic-button-disabled svg{color:var(--ic-architectural-400)}.clear-button-container{align-items:center;margin-right:var(--ic-space-1px);display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus,.clear-button:active *{fill:white}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus,.search-submit-button:active{background-color:var(--ic-focus-blue) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow) !important;border-radius:var(--ic-space-xxs)}.search-submit-button:focus,.search-submit-button:active *{fill:white}.divider{width:var(--ic-border-width);background-color:var(--ic-action-dark-active);height:var(--divider-height)}:host(.dark) .divider{background-color:var(--ic-architectural-200)}.menu-container{width:var(--input-width, 20rem);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);margin-bottom:calc(-1 * var(--ic-space-1px));margin-right:calc(-1 * var(--ic-space-1px));overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}";
+const icSearchBarCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-search-bar-search){display:block;--divider-height:1.5rem;--ic-input-label-helpertext-padding:var(--ic-space-xxs);--border-color:var(--ic-search-bar-outline);--input-bg-color:var(--ic-search-bar-background);--border-color-disabled:var(--ic-search-bar-outline-disabled);--menu-item-text-color:var(--ic-search-bar-dropdown-option-text);--menu-item-desc-text-color:var(--ic-search-bar-dropdown-option-description);--menu-bg-color:var(--ic-search-bar-dropdown-background);--menu-border-color:var(--ic-search-bar-dropdown-outline)}:host(.ic-search-bar-disabled){--ic-input-label-text-color:var(--ic-search-bar-label-disabled);--ic-input-label-helper-text-color:var(--ic-search-bar-subtitle-disabled)}:host(.ic-search-bar-search:hover){--border-color:var(--ic-search-bar-outline-hover)}:host(.ic-search-bar-search:active){--border-color:var(--ic-search-bar-outline-pressed)}:host(.ic-search-bar-search.ic-search-bar-small){--divider-height:1rem}:host(.ic-search-bar-full-width){width:100%}::-moz-placeholder{color:var(--ic-search-bar-placeholder-text);opacity:1}::placeholder{color:var(--ic-search-bar-placeholder-text);opacity:1}input{border:0;border-radius:var(--ic-border-radius);color:var(--ic-search-bar-filled-text);background-color:var(--input-bg-color);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs);caret-color:var(--ic-search-bar-filled-text-cursor)}input:focus{border:0;outline:0}input:disabled::-moz-placeholder{color:var(--ic-search-bar-disabled-text)}input:disabled,input:disabled::placeholder{color:var(--ic-search-bar-disabled-text)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.no-left-pad{padding-left:0}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration,input[type=\"search\"]::-webkit-search-results-button,input[type=\"search\"]::-webkit-search-results-decoration{display:none}input[type=\"search\"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.clear-button-container{align-items:center;margin-right:var(--ic-space-1px);display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-color-focus-inner);box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer);border-radius:0.25rem}.clear-button-unfocused *{fill:var(--ic-search-bar-clear-button)}.clear-button:focus,.clear-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-unfocused *{fill:var(--ic-search-bar-filled-icon)}.search-submit-button-disabled *{fill:var(--ic-search-bar-icon-disabled)}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus,.search-submit-button:active{background-color:var(--ic-color-focus-inner) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;border-radius:var(--ic-space-xxs)}.search-submit-button:focus,.search-submit-button:active *{fill:white}.divider{width:var(--ic-border-width);background-color:var(--ic-search-bar-dropdown-divider);height:var(--divider-height)}.menu-container{width:var(--input-width, 20rem);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);margin-bottom:calc(-1 * var(--ic-space-1px));margin-right:calc(-1 * var(--ic-space-1px));overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}@media (forced-colors: active){.search-submit-button-unfocused *{fill:canvastext}.search-submit-button-disabled *{fill:GrayText}}";
+const IcSearchBarStyle0 = icSearchBarCss;
 
 let inputIds = 0;
 const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLElement {
@@ -40,6 +38,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         this.icSubmitSearchBlur = createEvent(this, "icSubmitSearchBlur", 7);
         this.icSearchBarBlur = createEvent(this, "icSearchBarBlur", 7);
         this.icSearchBarFocus = createEvent(this, "icSearchBarFocus", 7);
+        this.icKeydown = createEvent(this, "icKeydown", 7);
         this.assistiveHintEl = null;
         this.hasTimedOut = false;
         this.inputId = `ic-search-bar-input-${inputIds++}`;
@@ -50,14 +49,139 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         this.prevNoOption = false;
         this.retryButtonClick = false;
         this.truncateValue = false;
+        this.clearButtonFocused = false;
+        this.open = false;
+        this.searchSubmitFocused = false;
+        this.showClearButton = false;
+        /**
+         * The automatic capitalisation of the text value as it is entered/edited by the user.
+         * Available options: "off", "none", "on", "sentences", "words", "characters".
+         */
+        this.autocapitalize = "off";
+        /**
+         * The state of autocompletion the browser can apply on the text value.
+         */
+        this.autocomplete = "off";
+        /**
+         * The state of autocorrection the browser can apply when the user is entering/editing the text value.
+         */
+        this.autocorrect = "off";
+        /**
+         * If `true`, the form control will have input focus when the page loads.
+         */
+        this.autofocus = false;
+        /**
+         * The number of characters until suggestions appear. The submit button will be disabled until the inputted value is equal to or greater than this number.
+         */
+        this.charactersUntilSuggestion = 2;
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.
+         * If `true`, all options provided will be displayed.
+         */
+        this.disableAutoFiltering = false;
+        /**
+         * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+         */
+        this.debounce = 0;
+        /**
+         * The text displayed when there are no options in the option list.
+         */
+        this.emptyOptionListText = "No results found";
+        /**
+         * If `true`, the search bar will be focused when component loaded.
+         */
+        this.focusOnLoad = false;
+        /**
+         * Specify whether the search bar fills the full width of the container.
+         * If `true`, this overrides the --input-width CSS variable.
+         */
+        this.fullWidth = false;
+        /**
+         * The helper text that will be displayed for additional field guidance.
+         */
+        this.helperText = "";
+        /**
+         * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+         */
+        this.hideLabel = false;
+        /**
+         * The hint text for the hidden assistive description element.
+         */
+        this.assistiveHintText = "When autocomplete results are available use the up and down arrows to choose and press enter to select";
+        /**
+         * The custom name for the label field to correspond with the IcMenuOption type.
+         */
+        this.labelField = "label";
+        /**
+         * Trigger loading state when fetching options asynchronously
+         */
+        this.loading = false;
+        /**
+         * Change the message displayed when external loading times out.
+         */
+        this.loadingErrorLabel = "Loading Error";
+        /**
+         * Change the message displayed whilst the options are being loaded externally.
+         */
+        this.loadingLabel = "Loading...";
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * The placeholder value to display.
+         */
+        this.placeholder = "Search";
+        /**
+         * If `true`, the readonly state will be set.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the search bar will require a value.
+         */
+        this.required = false;
+        /**
+         * Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches.
+         */
+        this.searchMode = "navigation";
+        /**
+         * The size of the search bar component.
+         */
+        this.size = "medium";
+        /**
+         * If `true`, the value of the search will have its spelling and grammar checked.
+         */
+        this.spellcheck = false;
+        /**
+         * 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.
+         */
+        this.theme = "inherit";
+        /**
+         * The custom name for the value field to correspond with the IcMenuOption type.
+         */
+        this.valueField = "value";
+        this.filteredOptions = [];
+        /**
+         * The suggested search options.
+         */
+        this.options = [];
+        /**
+         * The value of the search input.
+         */
+        this.value = "";
         this.handleClear = (ev) => {
+            var _a;
             const keyboardEvent = ev;
             const mouseEvent = ev;
             if (mouseEvent.type === "click" ||
                 keyboardEvent.code === "Enter" ||
                 keyboardEvent.code === "Space") {
                 this.value = "";
-                this.inputEl.value = "";
+                (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute("value", "");
                 this.loading = false;
                 clearTimeout(this.timeoutTimer);
                 this.filteredOptions = this.options;
@@ -69,6 +193,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         };
         this.onInput = (ev) => {
             this.value = ev.target.value;
+            this.icInput.emit({ value: this.value });
             const noOptions = [
                 { [this.labelField]: this.emptyOptionListText, [this.valueField]: "" },
             ];
@@ -171,16 +296,13 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
                 this.ariaActiveDescendant = ev.detail.optionId;
             }
             else {
-                this.ariaActiveDescendant = undefined;
+                this.ariaActiveDescendant = "";
             }
         };
         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) => {
@@ -197,6 +319,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             this.icSearchBarFocus.emit();
         };
         this.handleHostBlur = (ev) => {
+            var _a;
             const nextFocus = ev.relatedTarget;
             if (this.open &&
                 this.options &&
@@ -206,10 +329,10 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
                 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;
@@ -221,21 +344,17 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         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.assistiveHintText;
+                this.assistiveHintEl.innerText = this.assistiveHintText || "";
                 this.assistiveHintEl.id = `${this.inputId}-assistive-hint`;
                 this.assistiveHintEl.style.display = "none";
                 if (input.after !== undefined) {
@@ -244,7 +363,8 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             }
         };
         this.updateSearchResultAriaLive = () => {
-            const searchResultsStatusEl = this.el.shadowRoot.querySelector(".search-results-status");
+            var _a;
+            const searchResultsStatusEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".search-results-status");
             if (searchResultsStatusEl) {
                 if (!this.open ||
                     this.value === "" ||
@@ -264,7 +384,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
                 }
             }
         };
-        this.hasOptionsOrFilterDisabled = () => this.options.length > 0 || this.disableAutoFiltering;
+        this.hasOptionsOrFilterDisabled = () => this.options.length > 0 || !!this.disableAutoFiltering;
         this.hadNoOptions = () => this.filteredOptions.length === 1 &&
             this.filteredOptions[0][this.labelField] === this.emptyOptionListText &&
             this.searchMode === "navigation";
@@ -276,7 +396,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
                 this.disabled ||
                 this.hadNoOptions() ||
                 this.hasTimedOut ||
-                this.loading);
+                !!this.loading);
         };
         this.highlightFirstOptionAfterNoResults = () => {
             if (this.prevNoOption && this.menu && !this.hasTimedOut) {
@@ -290,43 +410,12 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
                 this.prevNoOption = true;
             }
         };
-        this.ariaActiveDescendant = undefined;
-        this.clearButtonFocused = false;
-        this.highlightedValue = undefined;
-        this.open = false;
-        this.searchSubmitFocused = false;
-        this.showClearButton = false;
-        this.autocapitalize = "off";
-        this.autocomplete = "off";
-        this.autocorrect = "off";
-        this.autofocus = false;
-        this.charactersUntilSuggestion = 2;
-        this.disabled = false;
-        this.disableAutoFiltering = false;
-        this.debounce = 0;
-        this.emptyOptionListText = "No results found";
-        this.focusOnLoad = false;
-        this.fullWidth = false;
-        this.helperText = "";
-        this.hideLabel = false;
-        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;
-        this.loadingErrorLabel = "Loading Error";
-        this.loadingLabel = "Loading...";
-        this.name = this.inputId;
-        this.placeholder = "Search";
-        this.readonly = false;
-        this.required = false;
-        this.searchMode = "navigation";
-        this.size = "default";
-        this.spellcheck = false;
-        this.timeout = undefined;
-        this.valueField = "value";
-        this.filteredOptions = [];
-        this.options = [];
-        this.value = "";
+    }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    debounceChanged() {
+        this.icChange = debounceEvent(this.icChange, this.debounce);
     }
     loadingHandler(newValue) {
         if (newValue && !this.hasTimedOut) {
@@ -365,11 +454,16 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         if (this.inputEl &&
             this.options &&
             !!getLabelFromValue(newValue, this.options, this.valueField, this.labelField)) {
-            this.inputEl.value = getLabelFromValue(newValue, this.options, this.valueField, this.labelField);
+            this.inputEl.value =
+                getLabelFromValue(newValue, this.options, this.valueField, this.labelField) || "";
         }
         else if (this.inputEl && this.inputEl.value !== newValue) {
             this.inputEl.value = newValue;
         }
+        this.icChange.emit({ value: newValue });
+    }
+    connectedCallback() {
+        this.debounceChanged();
     }
     disconnectedCallback() {
         if (this.assistiveHintEl) {
@@ -391,17 +485,14 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             }
         }
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Search Bar");
-        if (this.inputEl !== undefined) {
-            this.anchorEl = this.inputEl.shadowRoot.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) {
@@ -423,11 +514,10 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
      * 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);
@@ -436,8 +526,8 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         }, 500);
     }
     render() {
-        const { inputId, name, label, required, size, placeholder, helperText, disabled, value, readonly, spellcheck, fullWidth, options, open, hideLabel, menuId, ariaActiveDescendant, truncateValue, autofocus, autocapitalize, autocomplete, filteredOptions, } = this;
-        const disabledMode = readonly || disabled ? true : false;
+        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;
         if (describedBy !== "" && this.hasOptionsOrFilterDisabled()) {
@@ -452,63 +542,58 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         else {
             describedById = undefined;
         }
-        const disabledText = disabledMode && !readonly;
-        const hasSuggestedSearch = value && this.hasOptionsOrFilterDisabled();
+        const hasSuggestedSearch = !!value && this.hasOptionsOrFilterDisabled();
         const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;
         const menuRendered = menuOpen && value.length >= this.charactersUntilSuggestion;
-        const isOrHasLoaded = this.filteredOptions.length === 1 &&
-            (this.filteredOptions[0][this.labelField] === this.loadingLabel ||
-                filteredOptions[0][this.labelField] === this.loadingErrorLabel);
-        let expanded;
-        if (options.length > 0) {
-            if (menuOpen) {
-                expanded = "true";
-            }
-            else {
-                expanded = "false";
-            }
-        }
-        else {
-            expanded = undefined;
-        }
+        const labelValue = getLabelFromValue(value, options, this.valueField, this.labelField);
         renderHiddenInput(true, this.el, name, value, disabledMode);
-        return (h(Host, { class: {
+        return (h(Host, { key: '00d7c200dadef58f3be6eeae1299f255da97e79a', class: {
                 ["ic-search-bar-search"]: true,
-                ["ic-search-bar-full-width"]: fullWidth,
-                ["ic-search-bar-disabled"]: disabled,
+                ["ic-search-bar-full-width"]: !!fullWidth,
+                ["ic-search-bar-disabled"]: !!disabled,
                 ["ic-search-bar-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: disabledText, readonly: readonly, size: size, hideLabel: hideLabel, fullWidth: fullWidth, name: name, truncateValue: truncateValue, value: options &&
-                !!getLabelFromValue(value, options, this.valueField, this.labelField)
-                ? getLabelFromValue(value, options, this.valueField, this.labelField)
-                : 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-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: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: 'e9620617be40182b556185417647b0ba298116d3', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '02fcdd33f0bb62ac24ca12aa09c6c5e188f20c06', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly })), h("ic-input-component-container", { key: '0649a65ad29290c2a60bd33c90552e8bbc875e66', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '80b924a66fe7f7aa5193ae0e64b6e4d143ee713a', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
+                "no-left-pad": !!readonly,
+                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", { key: '0feabdeed8caa3ac63634fdf52221c9cd8a0ea15', 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: {
+                "clear-button-visible": !!value && !disabledMode && this.showClearButton,
+            } }, h("ic-button", { key: '3e7e1f8e39c50eb45595d8eddc6cbc1dfd624e5c', 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", { key: '793bf0fd78a2bfce32b78885f0478e2eb214d337', class: "divider" })), h("div", { key: '828edde2b4c950fc0e2c1faff736ee021ab6d49c', 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", { key: 'c84ee2e7957b7a9d326598af93bb50e78a41ccd2', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
                 ["search-submit-button"]: true,
                 ["search-submit-button-small"]: size === "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-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", { key: '2d00bc902d0b81b245348735d7e258939f98e369', class: {
                 "menu-container": true,
-                fullwidth: fullWidth,
-            }, slot: "menu" }, menuRendered && (h("ic-menu", { class: {
-                "no-results": this.hadNoOptions() || isOrHasLoaded,
-            }, 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" })));
+                fullwidth: !!fullWidth,
+            } }, menuRendered && (h("ic-menu", { key: '16049726b55a6a7775343b5a74c6c8c86939ad20', 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), 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", { key: '9844297f2d4ed1dd4e168685da928b44eeeb4698', "aria-live": "polite", role: "status", class: "search-results-status" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
+        "debounce": ["debounceChanged"],
         "loading": ["loadingHandler"],
         "filteredOptions": ["filteredOptionsHandler"],
         "options": ["watchOptionsHandler"],
         "value": ["watchValueHandler"]
     }; }
-    static get style() { return icSearchBarCss; }
+    static get style() { return IcSearchBarStyle0; }
 }, [17, "ic-search-bar", {
         "autocapitalize": [1],
         "autocomplete": [1],
@@ -536,6 +621,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         "searchMode": [1, "search-mode"],
         "size": [1],
         "spellcheck": [4],
+        "theme": [1],
         "timeout": [2],
         "valueField": [1, "value-field"],
         "options": [16],
@@ -548,7 +634,9 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         "showClearButton": [32],
         "filteredOptions": [32],
         "setFocus": [64]
-    }, [[0, "icKeydown", "handleKeyDown"], [0, "keyup", "handleKeyUp"]], {
+    }, [[0, "keydown", "handleKeyDown"], [0, "keyup", "handleKeyUp"]], {
+        "disabled": ["watchDisabledHandler"],
+        "debounce": ["debounceChanged"],
         "loading": ["loadingHandler"],
         "filteredOptions": ["filteredOptionsHandler"],
         "options": ["watchOptionsHandler"],
@@ -558,7 +646,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["ic-search-bar", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-input-validation", "ic-loading-indicator", "ic-menu", "ic-text-field", "ic-tooltip", "ic-typography"];
+    const components = ["ic-search-bar", "ic-button", "ic-input-component-container", "ic-input-container", "ic-input-label", "ic-loading-indicator", "ic-menu", "ic-tooltip", "ic-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "ic-search-bar":
             if (!customElements.get(tagName)) {
@@ -566,41 +654,31 @@ function defineCustomElement$1() {
             }
             break;
         case "ic-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "ic-input-component-container":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "ic-input-container":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "ic-input-label":
+        case "ic-input-component-container":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "ic-input-validation":
+        case "ic-input-container":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "ic-loading-indicator":
+        case "ic-input-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "ic-menu":
+        case "ic-loading-indicator":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "ic-text-field":
+        case "ic-menu":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }