@ukic/web-components 3.6.0 → 3.8.0

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

@@ -54,15 +54,15 @@ const InputComponentContainer = class {
     }
     render() {
         const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;
-        return (index.h(index.Host, { key: 'fc70461ae7d3922f07aa5a85209e376d42bfc451', class: {
+        return (index.h(index.Host, { key: 'c33ebfd9dd18101fb9161259538e8e0046f77a3d', 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 }, index.h("div", { key: '20934b81740e6c907bff86cc706d3aafe3a790df', class: "focus-indicator" }, helpers.slotHasContent(this.el, "left-icon") && (index.h("div", { key: '3577416fc719a575372188c43a78ac945b1b1526', class: "icon-container" }, index.h("slot", { key: '36ee3e5c85ec77c69f88c2b74d272bdb6ee42ca1', name: "left-icon" }))), index.h("slot", { key: 'e0a79f50c8ba34c0d989e2402df8b00587c5878f' }), validationInline &&
-            validationStatus === helpers.IcInformationStatus.Success && (index.h("span", { key: 'b156fb5bb6fcfec8c6dec6febdeea6d2adc7e009', class: "inline-success", innerHTML: helpers.successIcon })))));
+            }, "aria-disabled": disabled ? "true" : null }, index.h("div", { key: 'a70f27a3235ac0edb9d9c5a18983ae3c02de2a48', class: "focus-indicator" }, helpers.slotHasContent(this.el, "left-icon") && (index.h("div", { key: 'aa0b233280382bd0e95a8ff932bf60a63603b7bf', class: "icon-container" }, index.h("slot", { key: 'ceb8ec9b420073ac2ecd5d6793ad4342ab9ebbdd', name: "left-icon" }))), index.h("slot", { key: '1850c6ed04510e678600c653a36e2114f982e561' }), validationInline &&
+            validationStatus === helpers.IcInformationStatus.Success && (index.h("span", { key: '58d228c595577c1cc9a0fe2b10538cc3efff53ab', class: "inline-success", innerHTML: helpers.successIcon })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -87,11 +87,11 @@ const InputContainer = class {
         this.readonly = false;
     }
     render() {
-        return (index.h(index.Host, { key: '49cd31d8dca09cc4b2f49e0b2e7829bb1771a5d6' }, index.h("div", { key: 'bb0e3a80161a86b40e0dc424264e71cf6c95c88a', class: {
+        return (index.h(index.Host, { key: '32ae22db5e182cc2c092c8f48e61d42a318284a0' }, index.h("div", { key: 'bae9ef74f7f92004ec99c387a213822315c505ba', class: {
                 ["component-container"]: true,
                 ["disabled"]: !!this.disabled,
                 ["readonly"]: !!this.readonly,
-            } }, index.h("slot", { key: '4916ff0aebd6632d6e6f5daaa3c318e1e696ff2f' }))));
+            } }, index.h("slot", { key: 'acca571eaa0d8f19b0e3379d2592409aacf9dd95' }))));
     }
 };
 InputContainer.style = IcInputContainerStyle0;
@@ -118,9 +118,6 @@ const Menu = class {
         this.hasPreviouslyBlurred = false;
         this.hasTimedOut = false;
         this.isLoading = false;
-        this.isMultiSelect = false;
-        this.isSearchBar = false;
-        this.isSearchableSelect = false;
         this.lastOptionSelected = null; // Index of last option selected
         this.lastOptionFocused = null; // Index of last option focused
         this.multiOptionClicked = null;
@@ -153,6 +150,18 @@ const Menu = class {
          * The custom name for the label field for IcMenuOption.
          */
         this.labelField = "label";
+        /**
+         * @internal - flag to specify if menu is in a ic-select multiple.
+         */
+        this.multiSelect = false;
+        /**
+         * @internal - flag to specify if menu is in a searchable ic-select.
+         */
+        this.searchableSelect = false;
+        /**
+         * @internal - flag to specify if menu is in a ic-search-bar.
+         */
+        this.searchBar = 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.
          */
@@ -185,7 +194,7 @@ const Menu = class {
                     this.preventClickOpen = false;
                 }
                 // Reset optionHighlighted so previously highlighted option doesn't get reselected when Enter pressed
-                if (this.isMultiSelect) {
+                if (this.multiSelect) {
                     this.optionHighlighted = undefined;
                     this.multiOptionClicked = null;
                 }
@@ -219,27 +228,12 @@ const Menu = class {
                 });
             }
         };
-        this.getParentEl = (parent) => {
-            if (parent.tagName === this.SEARCH_BAR_TAG) {
-                this.isSearchBar = true;
-            }
-            else if (parent.tagName === "IC-SELECT") {
-                if (parent.getAttribute("searchable") !== null &&
-                    parent.getAttribute("searchable") !== undefined) {
-                    this.isSearchableSelect = true;
-                }
-                else if (parent.getAttribute("multiple") !== null &&
-                    parent.getAttribute("multiple") !== undefined) {
-                    this.isMultiSelect = true;
-                }
-            }
-        };
         // Open menu when up or down arrow keys are pressed
         this.arrowBehaviour = (event) => {
             event.preventDefault();
             this.handleMenuChange(true);
         };
-        this.getMenuOptions = () => this.isSearchBar ? this.options : this.ungroupedOptions;
+        this.getMenuOptions = () => this.searchBar ? this.options : this.ungroupedOptions;
         // Set option that is focused and so should show focus state
         this.setHighlightedOption = (highlightedIndex) => {
             const menuOptions = this.getMenuOptions();
@@ -277,11 +271,11 @@ const Menu = class {
             if (!this.isLoading && !this.hasTimedOut) {
                 this.keyboardNav = true;
             }
-            const isOpen = this.isSearchBar || this.isSearchableSelect || this.open;
+            const isOpen = this.searchBar || this.searchableSelect || this.open;
             if (isOpen) {
                 if (highlightedOptionIndex >= 0) {
                     if (options[highlightedOptionIndex] !== undefined) {
-                        if (this.isSearchBar &&
+                        if (this.searchBar &&
                             options[highlightedOptionIndex].disabled === true) {
                             this.disabledOptionSelected = true;
                         }
@@ -326,7 +320,7 @@ const Menu = class {
             const clickedMultiOptionIndex = menuOptions.findIndex((option) => option[this.valueField] === this.multiOptionClicked);
             const getOptionId = (index) => { var _a; return (_a = Array.from(this.host.querySelectorAll("li"))[index]) === null || _a === void 0 ? void 0 : _a.id; };
             // Space press should be equivalent to Enter when multi-select
-            if (event.key === " " && this.isMultiSelect) {
+            if (event.key === " " && this.multiSelect) {
                 this.handleOptionSelect(event, highlightedOptionIndex);
             }
             else {
@@ -357,7 +351,7 @@ const Menu = class {
                                 this.handleSingleShiftSelect(event, 0, menuOptions);
                             }
                             // Deselect currently selected options if arrow was pressed for first time after shift is held
-                            if (this.isMultiSelect && this.shiftPressed) {
+                            if (this.multiSelect && this.shiftPressed) {
                                 this.deselectSelectedOptions([
                                     highlightedOptionIndex,
                                     this.getOptionHighlightedIndex(),
@@ -396,7 +390,7 @@ const Menu = class {
                                 this.handleSingleShiftSelect(event, highlightedOptionIndex - 1, menuOptions);
                             }
                             // Deselect currently selected options if arrow was pressed for first time after shift is held
-                            if (this.isMultiSelect && this.shiftPressed) {
+                            if (this.multiSelect && this.shiftPressed) {
                                 this.deselectSelectedOptions([
                                     highlightedOptionIndex,
                                     this.getOptionHighlightedIndex(),
@@ -444,7 +438,7 @@ const Menu = class {
                         if (!isKeyboardCombination) {
                             this.keyboardNav = false;
                         }
-                        if (this.isSearchBar || this.isSearchableSelect) {
+                        if (this.searchBar || this.searchableSelect) {
                             break;
                         }
                         else {
@@ -482,10 +476,10 @@ const Menu = class {
                         if (event.key === "Shift") {
                             this.shiftPressed = true;
                         }
-                        if (this.isSearchBar) {
+                        if (this.searchBar) {
                             this.keyboardNav = true;
                         }
-                        if (this.isMultiSelect) {
+                        if (this.multiSelect) {
                             if (this.open && !event.shiftKey && this.selectAllButton) {
                                 event.preventDefault();
                                 this.selectAllButton.focus(); // Move focus to select all button instead of focused option
@@ -528,7 +522,7 @@ const Menu = class {
         };
         this.handleOptionClick = (event) => {
             const { value, label } = event.target.dataset;
-            if (this.isMultiSelect) {
+            if (this.multiSelect) {
                 const menuOptions = this.getMenuOptions();
                 const selectedOptionIndex = menuOptions.findIndex((option) => option.value === value);
                 this.handleOptionSelect(event, selectedOptionIndex, true);
@@ -570,7 +564,7 @@ const Menu = class {
                 this.lastOptionFocused = null;
                 this.lastOptionSelected = null;
             }
-            if (!this.isSearchBar)
+            if (!this.searchBar)
                 this.hasPreviouslyBlurred = !!event.relatedTarget;
         };
         this.handleMouseDown = (event) => {
@@ -580,7 +574,7 @@ const Menu = class {
             if (this.activationType === "automatic") {
                 this.autoSetValueOnMenuKeyDown(event);
             }
-            else if (this.activationType === "manual" && !this.isSearchBar) {
+            else if (this.activationType === "manual" && !this.searchBar) {
                 this.manualSetInputValueKeyboardOpen(event);
             }
         };
@@ -623,7 +617,7 @@ const Menu = class {
         // When shift key is being used to select contiguous options one by one on a multi-select
         // I.e. holding shift and pressing up and down arrow keys
         this.handleSingleShiftSelect = (event, optionToSelectIndex, options) => {
-            if (this.isMultiSelect &&
+            if (this.multiSelect &&
                 event.shiftKey &&
                 !this.isOptionSelected(optionToSelectIndex)) {
                 this.selectHighlightedOption(options, optionToSelectIndex);
@@ -873,9 +867,7 @@ const Menu = class {
         this.loadUngroupedOptions();
     }
     connectedCallback() {
-        if (this.parentEl)
-            this.getParentEl(this.parentEl);
-        if (this.isSearchBar) {
+        if (this.searchBar) {
             if (this.searchMode === "navigation")
                 this.setHighlightedOption(0);
             this.initialOptionsListRender = true;
@@ -896,7 +888,7 @@ const Menu = class {
         this.isLoading = (_d = this.options) === null || _d === void 0 ? void 0 : _d.some((opt) => opt.loading);
     }
     componentDidLoad() {
-        if (this.isSearchBar &&
+        if (this.searchBar &&
             this.parentEl.disableAutoFiltering) {
             this.focusFromSearchKeypress = true;
         }
@@ -918,7 +910,7 @@ const Menu = class {
                 this.keyboardNav &&
                 inputValueInOptions &&
                 this.autofocusOnSelected &&
-                !this.isSearchableSelect) {
+                !this.searchableSelect) {
                 this.scrollToSelected(this.menu);
             }
             else if (this.selectOnEnter) {
@@ -1012,21 +1004,21 @@ const Menu = class {
     focusOnSearchOrSelectInput(menuOptions, highlightedOptionIndex) {
         if (!menuOptions[highlightedOptionIndex])
             return;
-        if (this.isSearchBar) {
+        if (this.searchBar) {
             this.parentEl.setFocus();
             if (this.searchMode === "navigation")
                 this.setHighlightedOption(0);
         }
-        if (this.isSearchableSelect) {
+        if (this.searchableSelect) {
             this.parentEl.setFocus();
         }
         this.focusFromSearchKeypress = true;
     }
     render() {
-        const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, } = this;
+        const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, multiSelect, } = 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 (index.h(index.Host, { key: '6c3e0c39d138c8622c3748c16294f0e21e202909', class: {
+        return (index.h(index.Host, { key: '637bd569f0d987aae612c73390344c46127170ad', 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) ||
@@ -1034,8 +1026,8 @@ const Menu = class {
                     isLoading,
                 [`ic-menu-${size}`]: true,
                 "ic-menu-open": open && options.length !== 0,
-                "ic-menu-multiple": this.isMultiSelect,
-            } }, options.length !== 0 && (index.h("ul", { key: '69ea4424544b03896b65f0b30221872e131a04f6', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": this.isMultiSelect ? "true" : "false", tabindex: open &&
+                "ic-menu-multiple": multiSelect,
+            } }, options.length !== 0 && (index.h("ul", { key: '3840de0e59bd4f2d87330cf23a6afe402870c848', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "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)
@@ -1044,7 +1036,7 @@ const Menu = class {
             if (option.children) {
                 if (option.children.length > 0) {
                     return (index.h("div", null, index.h("ic-typography", { class: "option-group-title", role: "presentation", variant: "subtitle-small" }, index.h("p", null, option[this.labelField])), option.children.map((childOption) => childOption.label &&
-                        this.displayOption(childOption, this.isMultiSelect
+                        this.displayOption(childOption, multiSelect
                             ? value === null || value === void 0 ? void 0 : value.includes(childOption[this.valueField])
                             : childOption[this.valueField] === value, index$1, option))));
                 }
@@ -1055,15 +1047,15 @@ const Menu = class {
             else {
                 // Display option only if it has a label (rather than displaying an empty space)
                 return (option.label &&
-                    this.displayOption(option, this.isMultiSelect
+                    this.displayOption(option, multiSelect
                         ? value === null || value === void 0 ? void 0 : value.includes(option[this.valueField])
                         : option[this.valueField] === value, index$1));
             }
         }))), options.length !== 0 &&
-            this.isMultiSelect &&
+            multiSelect &&
             !isLoading &&
             !hasTimedOut &&
-            !hasNoResults && (index.h("div", { key: '17553f6e5ecd81b892894244b3a3a143b998c23c', class: "option-bar" }, index.h("ic-typography", { key: '7f4ce460524beb936e4d4ef2bbbcedd03cacec5c' }, index.h("p", { key: 'aae0e564a9caf83b09d4ee8daa3d9409b7d69501' }, `${value ? value.length : 0}/${helpers.getOptionsWithoutGroupTitlesCount(this.options)} selected`)), index.h("ic-button", { key: '692b840395eafd8c4c5dd0f21bab2082debb44bf', 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 && (index.h("div", { key: '7c21b91f707319eac7433c9bf84b2e07117d4a5e', class: "option-bar" }, index.h("ic-typography", { key: 'ebf470f1196440dbb9b7d827833866604df1273c' }, index.h("p", { key: '796f1746246ee7867d6244c9ab824e5e483be7d0' }, `${value ? value.length : 0}/${helpers.getOptionsWithoutGroupTitlesCount(this.options)} selected`)), index.h("ic-button", { key: 'ab28ce082f7fd653fb10c7692161ad0c00653792', 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 index.getElement(this); }
     static get watchers() { return {