@ukic/canary-web-components 3.0.0-canary.18 → 3.0.0-canary.19

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

@@ -185,6 +185,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
                 this.loading = false;
                 clearTimeout(this.timeoutTimer);
                 this.filteredOptions = this.options;
+                this.showMenuWithNoInput() && this.setMenuChange(true);
                 this.el.setFocus();
                 this.icClear.emit();
                 ev.preventDefault();
@@ -319,10 +320,13 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             }
         };
         this.handleHostFocus = () => {
-            if (this.options && this.value && !this.menuCloseFromMenuChangeEvent) {
+            if (this.options &&
+                (this.value || this.showMenuWithNoInput()) &&
+                !this.menuCloseFromMenuChangeEvent) {
                 this.setMenuChange(true);
             }
             this.truncateValue = false;
+            this.showMenuWithNoInput() && this.debounceAriaLiveUpdate();
             this.icSearchBarFocus.emit();
         };
         this.handleHostBlur = ({ relatedTarget }) => {
@@ -346,6 +350,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             });
             this.retryViaKeyPress = false;
             this.retryButtonClick = false;
+            this.showMenuWithNoInput() && this.updateSearchResultAriaLive();
         };
         this.handleFocusClearButton = () => {
             this.clearButtonFocused = true;
@@ -368,7 +373,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             const searchResultsStatusEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".search-results-status");
             if (searchResultsStatusEl) {
                 if (!this.open ||
-                    this.value === "" ||
+                    (this.value === "" && !this.showMenuWithNoInput()) ||
                     this.value.length < this.charactersUntilSuggestion) {
                     searchResultsStatusEl.innerText = "";
                 }
@@ -392,6 +397,12 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             this.hadNoOptions() ||
             this.hasTimedOut ||
             this.loading;
+        this.showMenuWithNoInput = () => this.charactersUntilSuggestion === 0;
+    }
+    watchCharactersUntilSuggestionHandler() {
+        if (this.showMenuWithNoInput()) {
+            this.filteredOptions = this.options;
+        }
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
@@ -409,28 +420,33 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         this.hasTimedOut = newOptions.some((opt) => opt.timedOut);
     }
     watchOptionsHandler(newOptions) {
-        if (this.disableAutoFiltering && !this.hasTimedOut) {
-            this.loading = false;
-            clearTimeout(this.timeoutTimer);
-            if (newOptions.length > 0) {
-                this.filteredOptions = newOptions;
-            }
-            else {
-                if (this.hadNoOptions()) {
-                    return;
+        if (this.disableAutoFiltering) {
+            if (!this.hasTimedOut) {
+                this.loading = false;
+                clearTimeout(this.timeoutTimer);
+                if (newOptions.length > 0) {
+                    this.filteredOptions = newOptions;
                 }
-                this.setMenuChange(true);
-                if (!this.preLoad) {
-                    this.filteredOptions = [
-                        {
-                            [this.labelField]: this.emptyOptionListText,
-                            [this.valueField]: "",
-                        },
-                    ];
+                else {
+                    if (this.hadNoOptions()) {
+                        return;
+                    }
+                    this.setMenuChange(true);
+                    if (!this.preLoad) {
+                        this.filteredOptions = [
+                            {
+                                [this.labelField]: this.emptyOptionListText,
+                                [this.valueField]: "",
+                            },
+                        ];
+                    }
+                    this.preLoad = true;
                 }
-                this.preLoad = true;
             }
         }
+        else if (this.showMenuWithNoInput()) {
+            this.filteredOptions = newOptions;
+        }
         this.debounceAriaLiveUpdate();
     }
     watchValueHandler(newValue) {
@@ -454,7 +470,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         }
         if (this.hasOptionsOrFilterDisabled()) {
             this.renderAssistiveHintEl();
-            if (this.disableAutoFiltering) {
+            if (this.disableAutoFiltering || this.showMenuWithNoInput()) {
                 this.filteredOptions = this.options;
             }
         }
@@ -521,48 +537,50 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         else if (describedBy !== "") {
             describedById = describedBy;
         }
-        const hasSuggestedSearch = !!value && this.hasOptionsOrFilterDisabled();
+        const hasSuggestedSearch = (!!value || this.showMenuWithNoInput()) &&
+            this.hasOptionsOrFilterDisabled();
         const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;
         const menuRendered = menuOpen && value.length >= charactersUntilSuggestion;
         const labelValue = getLabelFromValue(value, options, valueField, labelField);
         renderHiddenInput(this.el, value, name, disabledMode);
-        return (h(Host, { key: '5120b79da9d0840d87421287913f49cda06da4f3', class: {
+        return (h(Host, { key: 'bfb362b72aa0441cf00cb042f0dd623b6f41d5d7', 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", { key: '246484c51e7169a8f9944b66499126ea3d86921a', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '043651daee6abf565a44ad6c1c090e8d6dd85f8a', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly })), h("ic-input-component-container", { key: '880ab5440ec935340d56dd69e64e467879f3bbc5', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '37ece1e8c9f5ab12f2f3a303544c882192a07107', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
+            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: '4abc6ab7691d77e1659016957de4a7573c7b0ba8', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '7dfd27f5e3837063f115bac7ea1af05783ad52c2', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly })), h("ic-input-component-container", { key: 'bb9bd8d704ab9e9924d10b025bbd8b74310762e2', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '29c57007bfc75825bd91cdd4e24f9d9fd44e83d8', 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", { key: '4498fbe2293958c1ae6f6ddfeab15b2ff29ca2a8', class: {
+            }, 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: '2d5c5e1bc89f7dba8ef771e018534f7613c19295', class: {
                 "clear-button-container": true,
                 "clear-button-visible": !!value && !disabledMode && showClearButton,
-            } }, h("ic-button", { key: '561c5cbe830f34bc80967e0899f2dc8526c1c4f7', id: "clear-button", class: {
+            } }, h("ic-button", { key: '873de229be0ef641b2c94ccd283f5c17965fb5b9', id: "clear-button", class: {
                 "clear-button": true,
                 "clear-button-unfocused": !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: clearButtonFocused ? "light" : "dark" }), h("div", { key: '9c783d276ad0a931e538a79ce303ad060db1fa1b', class: "divider" })), h("div", { key: '5babcd978eb8263ca710b32ead6926c95f558838', class: {
+            }, "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: clearButtonFocused ? "light" : "dark" }), h("div", { key: '5f459ff9941a45c937632a1aad6f4e51de1bf56a', class: "divider" })), h("div", { key: '00bca9379e35fc62d6148258fb0d46a1a4f6a5bd', class: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            } }, h("ic-button", { key: '785dbe4deb7549662d263f74b75c759b932399fb', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
+            } }, h("ic-button", { key: '0733206601764cf6563aebfe739cd8ff10d0e779', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
                 "search-submit-button": true,
                 "search-submit-button-small": size === "small",
                 "search-submit-button-unfocused": !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: searchSubmitFocused ? "light" : "dark" }))), h("div", { key: '78297ce56515a4f1f50a8108949a20837c87828f', class: {
+            }, 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: searchSubmitFocused ? "light" : "dark" }))), h("div", { key: '30177d3af3b241db3e843cb83b5fbf3aab4bc003', class: {
                 "menu-container": true,
                 fullwidth: fullWidth,
-            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: 'd527adddfc250b1f0fe605cbaec5f08ea1e25c04', class: {
+            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: '98b2ada7a19760d30ba958c31926ae93cce74988', class: {
                 "no-results": this.hadNoOptions() ||
                     (filteredOptions.length === 1 &&
                         (filteredOptions[0][labelField] === loadingLabel ||
                             filteredOptions[0][labelField] === loadingErrorLabel)),
-            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: labelField, valueField: valueField })))), h("div", { key: '716cd74ed9726cd134772aba2b98e374face0753', "aria-live": "polite", role: "status", class: "search-results-status" })));
+            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: labelField, valueField: valueField })))), h("div", { key: '68d0f5afc16ce02c5b621b74754be51ffc55f2a6', "aria-live": "polite", role: "status", class: "search-results-status" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
     static get watchers() { return {
+        "charactersUntilSuggestion": ["watchCharactersUntilSuggestionHandler"],
         "disabled": ["watchDisabledHandler"],
         "debounce": ["debounceChanged"],
         "loading": ["loadingHandler"],
@@ -612,6 +630,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         "filteredOptions": [32],
         "setFocus": [64]
     }, [[0, "keydown", "handleKeyDown"], [0, "keyup", "handleKeyUp"]], {
+        "charactersUntilSuggestion": ["watchCharactersUntilSuggestionHandler"],
         "disabled": ["watchDisabledHandler"],
         "debounce": ["debounceChanged"],
         "loading": ["loadingHandler"],