@ukic/canary-web-components 2.0.0-canary.21 → 2.0.0-canary.23

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { I as IcThemeForegroundEnum } from './types.js';
-import { F as getFilteredMenuOptions, R as handleHiddenFormButtonClick, E as getLabelFromValue, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, u as getInputDescribedByText, s as renderHiddenInput } from './helpers.js';
+import { G as getFilteredMenuOptions, S as handleHiddenFormButtonClick, F 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';
@@ -21,7 +21,7 @@ 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(.search){--divider-height:1.5rem}:host(.search.small){--divider-height:1rem}:host(.fullwidth){width:100%}:host(.search) .disabled:hover{border-color:var(--ic-architectural-200)}:host(.search.disabled) .disabled svg{color:var(--ic-architectural-200)}:host(.search) .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){--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)}";
 
 let inputIds = 0;
 const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLElement {
@@ -32,8 +32,6 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         this.icChange = createEvent(this, "icChange", 7);
         this.icClear = createEvent(this, "icClear", 7);
         this.icInput = createEvent(this, "icInput", 7);
-        this.icInputBlur = createEvent(this, "icInputBlur", 7);
-        this.icInputFocus = createEvent(this, "icInputFocus", 7);
         this.icOptionSelect = createEvent(this, "icOptionSelect", 7);
         this.icMenuChange = createEvent(this, "icMenuChange", 7);
         this.icClearBlur = createEvent(this, "icClearBlur", 7);
@@ -77,7 +75,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
             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;
@@ -91,11 +89,11 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         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) => {
@@ -237,7 +235,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
                 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) {
@@ -266,7 +264,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
                 }
             }
         };
-        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";
@@ -304,14 +302,14 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         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;
@@ -323,7 +321,6 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         this.required = false;
         this.searchMode = "navigation";
         this.size = "default";
-        this.small = false;
         this.spellcheck = false;
         this.timeout = undefined;
         this.valueField = "value";
@@ -341,7 +338,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         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) {
@@ -382,9 +379,6 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
     componentWillLoad() {
         this.watchValueHandler(this.value);
         removeDisabledFalse(this.disabled, this.el);
-        if (this.small) {
-            this.size = "small";
-        }
     }
     componentDidLoad() {
         if (this.focusOnLoad) {
@@ -392,7 +386,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         }
         if (this.hasOptionsOrFilterDisabled()) {
             this.renderAssistiveHintEl();
-            if (this.disableFilter) {
+            if (this.disableAutoFiltering) {
                 this.filteredOptions = this.options;
             }
         }
@@ -442,7 +436,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         }, 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, } = this;
         const disabledMode = readonly || disabled ? true : false;
         const describedBy = getInputDescribedByText(inputId, helperText !== "", false).trim();
         let describedById;
@@ -479,10 +473,10 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         }
         renderHiddenInput(true, this.el, name, value, disabledMode);
         return (h(Host, { class: {
-                ["search"]: true,
-                ["fullwidth"]: fullWidth,
-                ["disabled"]: disabled,
-                ["small"]: size === "small",
+                ["ic-search-bar-search"]: true,
+                ["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)
@@ -496,7 +490,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
                 "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: {
                 ["search-submit-button"]: true,
-                ["search-submit-button-small"]: !!small,
+                ["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: {
@@ -504,7 +498,7 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
                 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), 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 delegatesFocus() { return true; }
     get el() { return this; }
@@ -522,14 +516,14 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         "autofocus": [4],
         "charactersUntilSuggestion": [2, "characters-until-suggestion"],
         "disabled": [4],
-        "disableFilter": [4, "disable-filter"],
+        "disableAutoFiltering": [4, "disable-auto-filtering"],
         "debounce": [2],
         "emptyOptionListText": [1, "empty-option-list-text"],
         "focusOnLoad": [4, "focus-on-load"],
         "fullWidth": [4, "full-width"],
         "helperText": [1, "helper-text"],
         "hideLabel": [4, "hide-label"],
-        "hintText": [1, "hint-text"],
+        "assistiveHintText": [1, "assistive-hint-text"],
         "label": [1],
         "labelField": [1, "label-field"],
         "loading": [1028],
@@ -541,7 +535,6 @@ const SearchBar = /*@__PURE__*/ proxyCustomElement(class SearchBar extends HTMLE
         "required": [4],
         "searchMode": [1, "search-mode"],
         "size": [1],
-        "small": [4],
         "spellcheck": [4],
         "timeout": [2],
         "valueField": [1, "value-field"],