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

package/dist/esm/ic-input-component-container_3.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-a7a720e7.js';
-import { r as removeDisabledFalse, a as renderDynamicChildSlots, s as slotHasContent, R as IcInformationStatus, U as successIcon, X as isMacDevice, b as onComponentRequiredPropUndefined, P as getOptionsWithoutGroupTitlesCount } from './helpers-fb59efa8.js';
+import { r as removeDisabledFalse, a as renderDynamicChildSlots, s as slotHasContent, R as IcInformationStatus, U as successIcon, X as isMacDevice, b as onComponentRequiredPropUndefined, P as getOptionsWithoutGroupTitlesCount } from './helpers-fc03923c.js';
 import { C as Check } from './check-icon-f2346e76.js';
 import { c as createPopper } from './popper-b8cc3f16.js';
 
@@ -50,15 +50,15 @@ const InputComponentContainer = class {
     }
     render() {
         const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;
-        return (h(Host, { key: 'c33ebfd9dd18101fb9161259538e8e0046f77a3d', class: {
+        return (h(Host, { key: '3349803b2fc3756e616a3e6e9f88439c3d360897', class: {
                 [`ic-input-component-container-${size}`]: true,
                 [`ic-input-component-container-${validationStatus}`]: validationStatus !== "" && !disabled && !readonly,
                 "ic-input-component-container-disabled": !!disabled,
                 "ic-input-component-container-readonly": !!readonly,
                 "ic-input-component-container-multiline": !!multiLine,
                 "ic-input-component-container-full-width": !!fullWidth,
-            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: 'a70f27a3235ac0edb9d9c5a18983ae3c02de2a48', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: 'aa0b233280382bd0e95a8ff932bf60a63603b7bf', class: "icon-container" }, h("slot", { key: 'ceb8ec9b420073ac2ecd5d6793ad4342ab9ebbdd', name: "left-icon" }))), h("slot", { key: '1850c6ed04510e678600c653a36e2114f982e561' }), validationInline &&
-            validationStatus === IcInformationStatus.Success && (h("span", { key: '58d228c595577c1cc9a0fe2b10538cc3efff53ab', class: "inline-success", innerHTML: successIcon })))));
+            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: 'bf85d48b1507e4c7d8394e067314e383e77ffb72', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: '7660d9c72526a8bf34e88488884933cc7a5a96cd', class: "icon-container" }, h("slot", { key: 'dc31f454f708ecbcf821cb94cf4d8b5b354d149f', name: "left-icon" }))), h("slot", { key: '92265e4967394e33cdf8763bd8c8b433dbe0536e' }), validationInline &&
+            validationStatus === IcInformationStatus.Success && (h("span", { key: 'ecefbb2eaf920a2300bb9a30e20c18a86754fba0', class: "inline-success", innerHTML: successIcon })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -83,11 +83,11 @@ const InputContainer = class {
         this.readonly = false;
     }
     render() {
-        return (h(Host, { key: '32ae22db5e182cc2c092c8f48e61d42a318284a0' }, h("div", { key: 'bae9ef74f7f92004ec99c387a213822315c505ba', class: {
+        return (h(Host, { key: 'b990f9f26644a727f8d0f086c88dfbb18528ca1a' }, h("div", { key: '32d9cce26c3e720e2d3343dc03fc64cc9436621a', class: {
                 ["component-container"]: true,
                 ["disabled"]: !!this.disabled,
                 ["readonly"]: !!this.readonly,
-            } }, h("slot", { key: 'acca571eaa0d8f19b0e3379d2592409aacf9dd95' }))));
+            } }, h("slot", { key: '65cfdbd533ceef8f6cfbdfa8df68789ae5f39804' }))));
     }
 };
 InputContainer.style = IcInputContainerStyle0;
@@ -172,10 +172,11 @@ const Menu = class {
             this.setInputValue(highlightedOptionIndex);
         };
         this.handleMenuChange = (open, focusInput) => {
+            var _a;
             this.menuStateChange.emit({ open, focusInput });
             if (!open) {
                 if (focusInput !== false) {
-                    this.inputEl.focus();
+                    (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
                     this.preventClickOpen = false;
                 }
                 // Reset optionHighlighted so previously highlighted option doesn't get reselected when Enter pressed
@@ -685,9 +686,10 @@ const Menu = class {
         // (i.e. you don't have to press Enter select an option - just focus on it)
         // and menu is focused
         this.autoSetValueOnMenuKeyDown = (event) => {
+            var _a, _b;
             event.cancelBubble = true;
             const selectedOptionIndex = this.ungroupedOptions.findIndex((option) => option[this.valueField] === this.value);
-            const isSearchableSelect = this.inputEl.tagName === "INPUT";
+            const isSearchableSelect = !!this.inputEl && this.inputEl.tagName === "INPUT";
             this.keyboardNav = false;
             switch (event.key) {
                 case " ":
@@ -727,14 +729,14 @@ const Menu = class {
                     break;
                 case "Backspace":
                     if (isSearchableSelect) {
-                        this.inputEl.focus();
+                        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
                     }
                     break;
                 case "Shift":
                     break;
                 default:
                     if (isSearchableSelect && event.key !== "Tab" && !this.hasTimedOut) {
-                        this.inputEl.focus();
+                        (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.focus();
                     }
                     if (event.key.length === 1) {
                         this.keyboardNav = true;
@@ -810,7 +812,7 @@ const Menu = class {
             var _a;
             let optionsHeight = 0;
             this.host
-                .querySelectorAll(".option")
+                .querySelectorAll(".option, .option-group-title")
                 .forEach((option) => (optionsHeight += option.clientHeight));
             if (optionsHeight >= 320) {
                 (_a = this.menu) === null || _a === void 0 ? void 0 : _a.classList.add("menu-scroll");
@@ -866,7 +868,8 @@ const Menu = class {
         this.loadUngroupedOptions();
     }
     connectedCallback() {
-        this.parentEl && this.getParentEl(this.parentEl);
+        if (this.parentEl)
+            this.getParentEl(this.parentEl);
         if (this.isSearchBar) {
             if (this.searchMode === "navigation")
                 this.setHighlightedOption(0);
@@ -874,12 +877,10 @@ const Menu = class {
         }
     }
     disconnectedCallback() {
-        var _a, _b;
-        if (this.popperInstance) {
-            this.popperInstance.destroy();
-        }
-        (_a = this.parentEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("icClear", this.handleClearListener);
-        (_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.removeEventListener("icSubmitSearch", this.handleSubmitSearch);
+        var _a, _b, _c;
+        (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.parentEl) === null || _b === void 0 ? void 0 : _b.removeEventListener("icClear", this.handleClearListener);
+        (_c = this.parentEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("icSubmitSearch", this.handleSubmitSearch);
     }
     componentWillLoad() {
         var _a, _b, _c, _d;
@@ -927,7 +928,7 @@ const Menu = class {
                     highlightedEl.focus();
                 }
             }
-            else if (this.inputEl.tagName !== "INPUT") {
+            else if (this.inputEl && this.inputEl.tagName !== "INPUT") {
                 this.menu.focus();
             }
         }
@@ -1016,7 +1017,7 @@ const Menu = class {
         const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, } = this;
         const selectAllButtonText = `${(value === null || value === void 0 ? void 0 : value.length) === this.ungroupedOptions.length ? "Clear" : "Select"} all`;
         const hasNoResults = this.host.classList.contains("no-results");
-        return (h(Host, { key: 'dc85eafc855ecd8906c29fe8ca9fbd906ab00b50', class: {
+        return (h(Host, { key: '2468ababde479fb9a3c03b6148f7115589d4f8e3', class: {
                 "ic-menu-full-width": !!fullWidth,
                 "ic-menu-no-focus": ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" &&
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) !== SEARCH_BAR_TAG) ||
@@ -1025,7 +1026,7 @@ const Menu = class {
                 [`ic-menu-${size}`]: true,
                 "ic-menu-open": open && options.length !== 0,
                 "ic-menu-multiple": this.isMultiSelect,
-            } }, options.length !== 0 && (h("ul", { key: '7e7f5a2bf93d4488f2b214a7ecc45b869462b7ad', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": this.isMultiSelect ? "true" : "false", tabindex: open &&
+            } }, options.length !== 0 && (h("ul", { key: '961b191dcffc99d79159937780d31ae783c6a9a0', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": this.isMultiSelect ? "true" : "false", tabindex: open &&
                 !keyboardNav &&
                 ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) !== "INPUT" ||
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) === SEARCH_BAR_TAG)
@@ -1053,7 +1054,7 @@ const Menu = class {
             this.isMultiSelect &&
             !isLoading &&
             !hasTimedOut &&
-            !hasNoResults && (h("div", { key: 'aa9c61ef301dd6815a0bfab6a9491bb869622a8d', class: "option-bar" }, h("ic-typography", { key: '4e69203a740c6b7e49cd0014134ff218d95d48c5' }, h("p", { key: 'e2dcbd610a86e262b1b1adcad1365c122aa75bd4' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: 'c7c7a27339eb30e444e85e1bcb1662bc4aa82c8e', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
+            !hasNoResults && (h("div", { key: 'f396dbf8842b3f1cdd208f8da5e98ab473266127', class: "option-bar" }, h("ic-typography", { key: 'ebccbbde58196d1c89c698cdc1af37bcc911f5fd' }, h("p", { key: '2a88b61887611ad5ebfae51066e5e1160d6241e9' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: 'a56ebb07da92424910cf20ce14483ed2ddb2504a', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {