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

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { L as getFilteredMenuOptions, K as getLabelFromValue, Y as handleHiddenFormButtonClick, r as removeDisabledFalse, N as debounceEvent, o as onComponentRequiredPropUndefined, v as getInputDescribedByText, t as renderHiddenInput } from './helpers.js';
+import { L as getFilteredMenuOptions, K as getLabelFromValue, Z as handleHiddenFormButtonClick, r as removeDisabledFalse, N as debounceEvent, 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';
@@ -136,6 +136,10 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
          * The placeholder value to display.
          */
         this.placeholder = "Search";
+        /**
+         * If `true` the parent form will not submit when the icSubmitSearch event fires.
+         */
+        this.preventFormSubmitOnSearch = false;
         /**
          * If `true`, the readonly state will be set.
          */
@@ -398,6 +402,13 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             this.hasTimedOut ||
             this.loading;
         this.showMenuWithNoInput = () => this.charactersUntilSuggestion === 0;
+        this.updateSearchButtonType = () => {
+            this.searchButtonType =
+                !!this.el.closest("FORM") &&
+                    !this.preventFormSubmitOnSearch
+                    ? "submit"
+                    : "button";
+        };
     }
     watchCharactersUntilSuggestionHandler() {
         if (this.showMenuWithNoInput()) {
@@ -416,6 +427,9 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             this.triggerLoading();
         }
     }
+    preventFormSubmitOnSearchHandler() {
+        this.updateSearchButtonType();
+    }
     filteredOptionsHandler(newOptions) {
         this.hasTimedOut = newOptions.some((opt) => opt.timedOut);
     }
@@ -463,6 +477,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
     componentWillLoad() {
         this.setInputValue(this.value);
         removeDisabledFalse(this.disabled, this.el);
+        this.updateSearchButtonType();
     }
     componentDidLoad() {
         if (this.focusOnLoad) {
@@ -524,9 +539,9 @@ 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, theme, charactersUntilSuggestion, labelField, valueField, loadingLabel, loadingErrorLabel, searchMode, showClearButton, searchSubmitFocused, clearButtonFocused, } = 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, charactersUntilSuggestion, labelField, valueField, loadingLabel, loadingErrorLabel, searchMode, showClearButton, searchSubmitFocused, clearButtonFocused, searchButtonType, } = this;
         const disabledMode = readonly || disabled;
-        const describedBy = getInputDescribedByText(inputId, helperText !== "", false).trim();
+        const describedBy = getInputDescribedByText(this.el, inputId, helperText !== "", false).trim();
         let describedById = undefined;
         if (describedBy !== "" && this.hasOptionsOrFilterDisabled()) {
             describedById = `${describedBy} ${inputId}-assistive-hint`;
@@ -543,39 +558,39 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         const menuRendered = menuOpen && value.length >= charactersUntilSuggestion;
         const labelValue = getLabelFromValue(value, options, valueField, labelField);
         renderHiddenInput(this.el, value, name, disabledMode);
-        return (h(Host, { key: 'bfb362b72aa0441cf00cb042f0dd623b6f41d5d7', class: {
+        return (h(Host, { key: '52cd7f9c675ebb5a73d43d8aba5c564a09975983', 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: '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: {
+            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: '93f1f86abb836848f4a77e8bea800402a7c3d792', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '3408fa52e67fbc9420cb7f763198ea950e356b7e', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, h("slot", { key: '24fed7a49fc79140dabb28e1f77c8321bc51729b', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: 'be1083aceb07c1235666cb3f1f9892f8e1b8538d', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '4ea2d718f3b6e4e524f534719630c618bb25a4d4', 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: '2d5c5e1bc89f7dba8ef771e018534f7613c19295', class: {
+            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : undefined, "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: '447b4da477637a70ac3f2b9c180df87aebee044b', class: {
                 "clear-button-container": true,
                 "clear-button-visible": !!value && !disabledMode && showClearButton,
-            } }, h("ic-button", { key: '873de229be0ef641b2c94ccd283f5c17965fb5b9', id: "clear-button", class: {
+            } }, h("ic-button", { key: '3a740c60761c034298c1cabf4173a4168a2cbaee', 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: '5f459ff9941a45c937632a1aad6f4e51de1bf56a', class: "divider" })), h("div", { key: '00bca9379e35fc62d6148258fb0d46a1a4f6a5bd', class: {
+            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "button", variant: "icon", theme: clearButtonFocused ? "light" : "dark" }), h("div", { key: '7fec0530f8a21476d808203bc79857a0c44538ab', class: "divider" })), h("div", { key: '376a77d494db324f5e469932009692cab51c58fe', class: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            } }, h("ic-button", { key: '0733206601764cf6563aebfe739cd8ff10d0e779', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
+            } }, h("ic-button", { key: 'c94e42dc5907d0e7dc412b8a09792090d4359783', 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: '30177d3af3b241db3e843cb83b5fbf3aab4bc003', class: {
+            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: searchButtonType, variant: "icon", theme: searchSubmitFocused ? "light" : "dark" }))), h("div", { key: 'd59837a4d8626cb434d74920c3d16ebad1aa38e8', class: {
                 "menu-container": true,
                 fullwidth: fullWidth,
-            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: '98b2ada7a19760d30ba958c31926ae93cce74988', class: {
+            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: '05921526c6a5d778689ffaaa00567c155e1d24f9', 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: '68d0f5afc16ce02c5b621b74754be51ffc55f2a6', "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: 'd7ae3fba62207c2df5ce4b02434e81777666d5c2', "aria-live": "polite", role: "status", class: "search-results-status" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }
@@ -584,6 +599,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         "disabled": ["watchDisabledHandler"],
         "debounce": ["debounceChanged"],
         "loading": ["loadingHandler"],
+        "preventFormSubmitOnSearch": ["preventFormSubmitOnSearchHandler"],
         "filteredOptions": ["filteredOptionsHandler"],
         "options": ["watchOptionsHandler"],
         "value": ["watchValueHandler"]
@@ -611,6 +627,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         "loadingLabel": [1, "loading-label"],
         "name": [1],
         "placeholder": [1],
+        "preventFormSubmitOnSearch": [4, "prevent-form-submit-on-search"],
         "readonly": [4],
         "required": [4],
         "searchMode": [1, "search-mode"],
@@ -627,6 +644,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         "open": [32],
         "searchSubmitFocused": [32],
         "showClearButton": [32],
+        "searchButtonType": [32],
         "filteredOptions": [32],
         "setFocus": [64]
     }, [[0, "keydown", "handleKeyDown"], [0, "keyup", "handleKeyUp"]], {
@@ -634,6 +652,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         "disabled": ["watchDisabledHandler"],
         "debounce": ["debounceChanged"],
         "loading": ["loadingHandler"],
+        "preventFormSubmitOnSearch": ["preventFormSubmitOnSearchHandler"],
         "filteredOptions": ["filteredOptionsHandler"],
         "options": ["watchOptionsHandler"],
         "value": ["watchValueHandler"]