@ukic/canary-web-components 3.0.0-canary.2 → 3.0.0-canary.4

package/dist/{collection/components/ic-menu-with-multi/ic-menu.js → esm/ic-input-component-container_3.entry.js}

@@ -1,12 +1,93 @@
-import { h, Host, Fragment, } from "@stencil/core";
-import { createPopper } from "@popperjs/core";
-import Check from "../../assets/check-icon.svg";
-import { getOptionsWithoutGroupTitlesCount, isMacDevice, onComponentRequiredPropUndefined, } from "../../utils/helpers";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export class Menu {
-    constructor() {
-        this.activeDescendantAttr = "aria-activedescendant"; // Prevent duplicate literal string lint error
-        this.clearButtonId = "clear-button"; // Prevent duplicate literal string lint error
+import { r as registerInstance, f as forceUpdate, h, H as Host, g as getElement, c as createEvent, F as Fragment } from './index-93509377.js';
+import { c as checkSlotInChildMutations, s as slotHasContent, O as IcInformationStatus, R as successIcon, S as isMacDevice, a as onComponentRequiredPropUndefined, M as getOptionsWithoutGroupTitlesCount } from './helpers-c326255f.js';
+import { C as Check } from './check-icon-f2346e76.js';
+import { c as createPopper } from './popper-b8cc3f16.js';
+
+const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:var(--ic-border-width) solid\n    var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--input-bg-color, var(--ic-architectural-white));box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.ic-input-component-container-full-width{width:100%}ic-input-component-container.ic-input-component-container-disabled,ic-input-component-container.ic-input-component-container-disabled:hover{border:var(--ic-border-width) dashed\n    var(--border-color-disabled, var(--ic-architectural-200))}ic-input-component-container.ic-input-component-container-readonly,ic-input-component-container.ic-input-component-container-readonly:hover{border:none;padding:0}ic-input-component-container.ic-input-component-container-error{border:var(--ic-border-error);padding:0}ic-input-component-container.ic-input-component-container-error:hover{border:var(--ic-border-error-hover)}ic-input-component-container.ic-input-component-container-error:focus-within{border:var(--ic-border-error-pressed)}ic-input-component-container.ic-input-component-container-warning{border:var(--ic-border-warning);padding:0}ic-input-component-container.ic-input-component-container-warning:hover{border:var(--ic-border-warning-hover)}ic-input-component-container.ic-input-component-container-warning:focus-within{border:var(--ic-border-warning-pressed)}ic-input-component-container.ic-input-component-container-success{border:var(--ic-border-success);padding:0}ic-input-component-container.ic-input-component-container-success:hover{border:var(--ic-border-success-hover)}ic-input-component-container.ic-input-component-container-success:focus-within{border:var(--ic-success-border-pressed)}ic-input-component-container.ic-input-component-container-small{height:var(--ic-space-xl)}ic-input-component-container.ic-input-component-container-large{height:var(--ic-space-xxl)}ic-input-component-container.ic-input-component-container-multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:0.438rem;display:flex;align-items:center}ic-input-component-container.ic-input-component-container-multiline .icon-container,ic-input-component-container.ic-input-component-container-multiline.ic-input-component-container-small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.ic-input-component-container-readonly .icon-container{margin-left:-0.313rem}ic-input-component-container.ic-input-component-container-disabled ::-moz-placeholder{display:none}ic-input-component-container.ic-input-component-container-disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 0.375rem;display:flex;align-items:center}ic-input-component-container.ic-input-component-container-dark:hover{--border-color:var(--ic-architectural-400)}ic-input-component-container .inline-success>svg{fill:var(--ic-status-success-default);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border:var(--ic-border-hover);color:var(--ic-action-dark-hover)}ic-input-component-container:focus{border:var(--ic-border-pressed)}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.ic-input-component-container-dark:focus-within{box-shadow:var(--ic-border-focus)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:var(--ic-border-width) solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.ic-input-component-container-disabled,ic-input-component-container.ic-input-component-container-disabled:hover{border:var(--ic-border-width) dashed GrayText}}";
+
+const InputComponentContainer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hostMutationCallback = (mutationList) => {
+            if (mutationList.some(({ type, addedNodes, removedNodes }) => type === "childList"
+                ? checkSlotInChildMutations(addedNodes, removedNodes, "left-icon")
+                : false)) {
+                forceUpdate(this);
+            }
+        };
+        this.appearance = "default";
+        this.disabled = false;
+        this.fullWidth = false;
+        this.multiLine = false;
+        this.readonly = false;
+        this.size = "medium";
+        this.validationInline = false;
+        this.validationStatus = "";
+    }
+    componentDidLoad() {
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, { childList: true });
+    }
+    render() {
+        const { size, validationStatus, disabled, readonly, multiLine, fullWidth, appearance, validationInline, } = this;
+        const hasValidationStatus = this.validationStatus !== "" && !this.disabled && !this.readonly
+            ? true
+            : false;
+        return (h(Host, { class: {
+                [`ic-input-component-container-${size}`]: true,
+                [`ic-input-component-container-${validationStatus}`]: hasValidationStatus,
+                [`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,
+                ["ic-input-component-container-dark"]: appearance === "dark",
+            }, "aria-disabled": disabled && `${disabled}` }, h("div", { class: {
+                "focus-indicator": true,
+                dark: appearance === "dark",
+            } }, slotHasContent(this.el, "left-icon") && (h("div", { class: {
+                ["icon-container"]: true,
+            } }, h("slot", { name: "left-icon" }))), h("slot", null), validationInline &&
+            validationStatus === IcInformationStatus.Success && (h("span", { class: {
+                ["inline-success"]: true,
+            }, innerHTML: successIcon })))));
+    }
+    get el() { return getElement(this); }
+};
+InputComponentContainer.style = icInputComponentContainerCss;
+
+const icInputContainerCss = "ic-input-container .component-container{display:flex;flex-direction:column}";
+
+const InputContainer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.disabled = false;
+        this.readonly = false;
+    }
+    render() {
+        return (h(Host, null, h("div", { class: {
+                ["component-container"]: true,
+                ["disabled"]: this.disabled,
+                ["readonly"]: this.readonly,
+            } }, h("slot", null))));
+    }
+};
+InputContainer.style = icInputContainerCss;
+
+const icMenuCss = "html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type=\"button\"].sc-ic-menu,[type=\"reset\"].sc-ic-menu,[type=\"submit\"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type=\"button\"].sc-ic-menu::-moz-focus-inner,[type=\"reset\"].sc-ic-menu::-moz-focus-inner,[type=\"submit\"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type=\"button\"].sc-ic-menu:-moz-focusring,[type=\"reset\"].sc-ic-menu:-moz-focusring,[type=\"submit\"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type=\"checkbox\"].sc-ic-menu,[type=\"radio\"].sc-ic-menu{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-menu::-webkit-inner-spin-button,[type=\"number\"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.ic-menu-open.sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{max-height:0;width:var(--menu-width, var(--input-width, 20rem));color:var(--menu-item-text-color, var(--ic-color-text-primary));--ic-typography-color:var(\n    --menu-item-text-color,\n    var(--ic-color-text-primary)\n  );background-color:var(--menu-bg-color, var(--ic-architectural-white));position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);border-radius:var(--ic-border-radius)}.ic-menu-open.sc-ic-menu-h:not(.ic-menu-no-focus):focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}.ic-select-select-all-focused.sc-ic-menu-h{box-shadow:var(--ic-elevation-overlay) !important}#retry-button.sc-ic-menu::part(button){height:var(--ic-space-lg)}.small.sc-ic-menu #retry-button.sc-ic-menu::part(button){height:var(--ic-space-md)}.on-dialog.sc-ic-menu-h{inset:auto !important}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border-radius:1px;background-color:var(--menu-bg-color, var(--ic-architectural-white));visibility:hidden;max-height:0;overflow-y:hidden}.menu.sc-ic-menu:has(+.option-bar).sc-ic-menu{border-radius:0 0 1px 1px}.menu-scroll.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}.ic-menu-open.sc-ic-menu-h{max-height:none;display:flex;flex-direction:column-reverse;border:var(--ic-border-width) solid\n    var(--menu-border-color, var(--ic-architectural-400));transition:box-shadow var(--ic-easing-transition-fast)}.ic-menu-open.sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:calc(var(--ic-space-xl) * 10 + var(--ic-space-xxxs))}.ic-menu-open.sc-ic-menu-h .option-bar.sc-ic-menu{visibility:visible}.ic-menu-open.sc-ic-menu-h .select-all-button.sc-ic-menu{display:block}.ic-menu-full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:var(--ic-space-xs) calc(var(--ic-space-xs) - var(--ic-space-1px));cursor:pointer;display:flex;align-items:center}.loading-option.sc-ic-menu p.sc-ic-menu{margin-bottom:0 !important}.option.sc-ic-menu:not(.loading-option){justify-content:space-between}.ic-menu-small.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-xxs) calc(var(--ic-space-xs) - var(--ic-space-1px))}.ic-menu-large.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))}.option.sc-ic-menu:last-child{border-radius:0 0 1px 1px}.sc-ic-menu:not(.menu:has(+.option-bar)).sc-ic-menu .option.sc-ic-menu:first-child{border-radius:1px 1px 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-pressed)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{--ic-typography-color:var(--ic-color-text-secondary)}.option.sc-ic-menu .option-label.sc-ic-menu{display:flex;flex-direction:row;align-items:top}.option.sc-ic-menu .option-label.sc-ic-menu ic-typography.sc-ic-menu{max-width:100%;word-wrap:break-word}.option.sc-ic-menu .option-element.sc-ic-menu{margin-top:var(--ic-space-xxs)}.option.sc-ic-menu .option-icon.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);margin-top:var(--ic-space-xxs);margin-right:var(--ic-space-xxxs)}.option-text-container.sc-ic-menu{pointer-events:none;width:100%}.option-text-container.show-check-icon.sc-ic-menu{width:calc(var(--ic-space-lg) * 10 + var(--ic-space-xl))}.option.loading-option.sc-ic-menu .option-text-container.sc-ic-menu{margin-left:calc(var(--ic-space-xs) + var(--ic-space-xxxs));color:var(--ic-color-text-secondary);--ic-typography-color:var(--ic-color-text-secondary)}.error-icon-svg.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);fill:var(--ic-status-error-default);align-self:center;display:flex;margin-right:calc(var(--ic-space-xxs) * 1.2)}.loading-error-info.sc-ic-menu{display:flex}.check-icon.sc-ic-menu{height:var(--ic-space-lg);min-width:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-xs);pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:var(--ic-space-lg) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xs);--ic-typography-color:var(--ic-color-text-tertiary)}.ic-menu-small.sc-ic-menu-h .option-group-title.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xxs)}.last-recommended-option.sc-ic-menu{border-bottom:var(--ic-border-default)}.disabled-option.sc-ic-menu{color:var(--ic-architectural-200);--ic-typography-color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-color-focus-inner) !important;color:var(--ic-architectural-white) !important;--ic-typography-color:var(--ic-architectural-white) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}.option-bar.sc-ic-menu{padding:var(--ic-space-xxs) var(--ic-space-xs);display:flex;align-items:center;justify-content:space-between;background-color:var(--ic-architectural-40);visibility:hidden;border-bottom:var(--ic-border-width) solid var(--ic-architectural-400);border-radius:1px 1px 0 0}.option-bar.sc-ic-menu p.sc-ic-menu{margin-bottom:0 !important}.ic-menu-large.sc-ic-menu-h .option-bar.sc-ic-menu{padding:var(--ic-space-xs)}.select-all-button.sc-ic-menu{display:none}.select-all-button.sc-ic-menu:focus{z-index:calc(var(--ic-z-index-menu) + 1)}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}}";
+
+const Menu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.menuKeyPress = createEvent(this, "menuKeyPress", 7);
+        this.menuOptionId = createEvent(this, "menuOptionId", 7);
+        this.menuOptionSelect = createEvent(this, "menuOptionSelect", 7);
+        this.menuOptionSelectAll = createEvent(this, "menuOptionSelectAll", 7);
+        this.menuStateChange = createEvent(this, "menuStateChange", 7);
+        this.retryButtonClicked = createEvent(this, "retryButtonClicked", 7);
+        this.timeoutBlur = createEvent(this, "timeoutBlur", 7);
+        this.ungroupedOptionsSet = createEvent(this, "ungroupedOptionsSet", 7);
+        this.ACTIVE_DESCENDANT = "aria-activedescendant";
+        this.CLEAR_BUTTON_ID = "clear-button";
         this.disabledOptionSelected = false;
         this.hasPreviouslyBlurred = false;
         this.hasTimedOut = false;
@@ -74,8 +155,7 @@ export class Menu {
             if (parent.tagName === "IC-SEARCH-BAR") {
                 this.isSearchBar = true;
             }
-            else if (parent.tagName === "IC-SELECT" ||
-                parent.tagName === "IC-SELECT-WITH-MULTI") {
+            else if (parent.tagName === "IC-SELECT") {
                 if (parent.getAttribute("searchable") !== null &&
                     parent.getAttribute("searchable") !== undefined) {
                     this.isSearchableSelect = true;
@@ -119,13 +199,13 @@ export class Menu {
                     break;
                 case " ":
                 case "Enter":
-                    if (event.target.id !== this.clearButtonId) {
+                    if (event.target.id !== this.CLEAR_BUTTON_ID) {
                         this.handleMenuChange(true);
                     }
                     break;
             }
         };
-        this.selectHighlightedOption = (target, options, highlightedOptionIndex) => {
+        this.selectHighlightedOption = (options, highlightedOptionIndex) => {
             if (!this.isLoading && !this.hasTimedOut) {
                 this.keyboardNav = true;
             }
@@ -146,8 +226,7 @@ export class Menu {
                     this.setInputValue(highlightedOptionIndex);
                 }
             }
-            else if (target.id !== this.clearButtonId &&
-                this.isMultiSelect) {
+            else {
                 this.handleMenuChange(true);
             }
         };
@@ -172,14 +251,12 @@ export class Menu {
         // Determines keyboard behaviour when selection is manual (i.e. when you have to press Enter to select an option)
         this.manualSetInputValueKeyboardOpen = (event) => {
             const menuOptions = this.getMenuOptions();
-            // Prevent focus disappearing on currently focused option when Shift / Cmd / Ctrl pressed
+            // For preventing focus disappearing on currently focused option when Shift / Cmd / Ctrl pressed
             // (i.e. when user is likely in the middle of executing a keyboard combination to select options)
-            if (!(event.shiftKey || event.metaKey || event.ctrlKey)) {
-                this.keyboardNav = false;
-            }
+            const isKeyboardCombination = event.shiftKey || event.metaKey || event.ctrlKey;
             const highlightedOptionIndex = this.getOptionHighlightedIndex();
             const clickedMultiOptionIndex = menuOptions.findIndex((option) => option[this.valueField] === this.multiOptionClicked);
-            const getOptionId = (index) => { var _a; return (_a = Array.from(this.el.querySelectorAll("li"))[index]) === null || _a === void 0 ? void 0 : _a.id; };
+            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) {
                 this.handleOptionSelect(event, highlightedOptionIndex);
@@ -296,17 +373,23 @@ export class Menu {
                         break;
                     }
                     case " ":
+                        if (!isKeyboardCombination) {
+                            this.keyboardNav = false;
+                        }
                         if (this.isSearchBar || this.isSearchableSelect) {
                             break;
                         }
                         else {
-                            if (event.target.id !== this.clearButtonId) {
+                            if (event.target.id !== this.CLEAR_BUTTON_ID) {
                                 this.handleMenuChange(true);
                             }
                         }
                         break;
                     case "Enter":
                         event.preventDefault();
+                        if (!isKeyboardCombination) {
+                            this.keyboardNav = false;
+                        }
                         this.handleOptionSelect(event, highlightedOptionIndex);
                         break;
                     case "Escape":
@@ -347,30 +430,11 @@ export class Menu {
                             this.preventIncorrectTabOrder = true;
                         }
                         break;
-                    case "Backspace":
-                        if (this.isSearchBar) {
-                            this.parentEl.setFocus();
-                            if (this.searchMode === "navigation")
-                                this.setHighlightedOption(0);
-                        }
-                        else if (this.isSearchableSelect) {
-                            this.parentEl.setFocus();
-                        }
-                        this.focusFromSearchKeypress = true;
-                        break;
                     default:
-                        if (event.key !== "Tab") {
-                            if (this.isSearchBar) {
-                                this.parentEl.setFocus();
-                                if (this.searchMode === "navigation")
-                                    this.setHighlightedOption(0);
-                            }
-                            else if (this.isSearchableSelect) {
-                                this.parentEl.setFocus();
-                            }
-                            this.focusFromSearchKeypress = true;
-                            break;
+                        if (!isKeyboardCombination) {
+                            this.keyboardNav = false;
                         }
+                        this.focusOnSearchOrSelectInput(menuOptions, highlightedOptionIndex);
                 }
             }
         };
@@ -420,12 +484,12 @@ export class Menu {
         this.handleBlur = (event) => {
             if (event.relatedTarget !== this.inputEl) {
                 if (event.relatedTarget === this.selectAllButton) {
-                    this.menu.removeAttribute(this.activeDescendantAttr);
+                    this.menu.removeAttribute(this.ACTIVE_DESCENDANT);
                 }
                 if (!(this.menu.contains(event.relatedTarget) ||
                     event.relatedTarget === this.selectAllButton)) {
                     this.handleMenuChange(false, this.hasPreviouslyBlurred);
-                    this.menu.removeAttribute(this.activeDescendantAttr);
+                    this.menu.removeAttribute(this.ACTIVE_DESCENDANT);
                     this.lastOptionFocused = null;
                     this.lastOptionSelected = null;
                 }
@@ -433,7 +497,7 @@ export class Menu {
             else {
                 this.handleMenuChange(false);
                 this.preventClickOpen = true;
-                this.menu.removeAttribute(this.activeDescendantAttr);
+                this.menu.removeAttribute(this.ACTIVE_DESCENDANT);
                 this.lastOptionFocused = null;
                 this.lastOptionSelected = null;
             }
@@ -471,13 +535,13 @@ export class Menu {
             this.lastOptionSelected = null;
         };
         this.handleSelectAllBlur = (event) => {
-            this.el.classList.remove("select-all-focused");
+            this.host.classList.remove("ic-select-select-all-focused");
             if (!this.menu.contains(event.relatedTarget)) {
                 this.handleMenuChange(false, false);
             }
         };
         this.handleSelectAllFocus = () => {
-            this.el.classList.add("select-all-focused");
+            this.host.classList.add("ic-select-select-all-focused");
             this.lastOptionFocused = null;
             this.lastOptionSelected = null;
         };
@@ -491,7 +555,7 @@ export class Menu {
             if (this.isMultiSelect &&
                 event.shiftKey &&
                 !this.isOptionSelected(optionToSelectIndex)) {
-                this.selectHighlightedOption(event.target, options, optionToSelectIndex);
+                this.selectHighlightedOption(options, optionToSelectIndex);
                 this.lastOptionSelected = optionToSelectIndex;
             }
         };
@@ -525,7 +589,7 @@ export class Menu {
                 this.handleMultipleShiftSelect(optionIndex, useFocusForSelection, firstOptionInSelection);
             }
             else {
-                this.selectHighlightedOption(event.target, menuOptions, optionIndex);
+                this.selectHighlightedOption(menuOptions, optionIndex);
             }
             this.lastOptionFocused = optionIndex;
             this.lastOptionSelected = optionIndex;
@@ -642,7 +706,7 @@ export class Menu {
         this.isManualMode = this.activationType === "manual";
         this.scrollToSelected = (menu) => {
             const selectedOption = this.selectOnEnter
-                ? this.el.querySelector(`li[data-value="${this.optionHighlighted}"]`)
+                ? this.host.querySelector(`li[data-value="${this.optionHighlighted}"]`)
                 : menu.querySelector(".option[aria-selected='true']");
             if (selectedOption) {
                 const elTop = selectedOption.offsetTop + selectedOption.offsetHeight;
@@ -652,7 +716,7 @@ export class Menu {
                 }
                 // 'aria-activedescendant' affects screen reader focus
                 // https://www.w3.org/TR/2017/WD-wai-aria-practices-1.1-20170628/#kbd_focus_activedescendant
-                this.menu.setAttribute(this.activeDescendantAttr, selectedOption.id);
+                this.menu.setAttribute(this.ACTIVE_DESCENDANT, selectedOption.id);
                 selectedOption.focus();
             }
         };
@@ -674,7 +738,7 @@ export class Menu {
         };
         this.setMenuScrollbar = () => {
             let optionsHeight = 0;
-            this.el
+            this.host
                 .querySelectorAll(".option")
                 .forEach((option) => (optionsHeight += option.clientHeight));
             if (optionsHeight >= 320) {
@@ -685,10 +749,14 @@ export class Menu {
             this.timeoutBlur.emit({ ev });
         };
         this.optionContent = (option, selected) => {
-            return (h(Fragment, null, option.loading && h("ic-loading-indicator", { size: "icon" }), h("div", { class: "option-text-container" }, h("div", { class: "option-label" }, option.icon && (h("div", { class: "option-icon", innerHTML: option.icon, "aria-hidden": "true" })), h("ic-typography", { variant: "body", "aria-hidden": "true" }, h("p", null, option[this.labelField]))), option.description && (h("ic-typography", { id: `${this.getOptionId(option[this.valueField])}-description`, class: "option-description", variant: "caption", "aria-hidden": "true" }, h("p", null, option.description))), option.element && (h("div", { class: "option-element", innerHTML: option.element.component, "aria-hidden": "true" }))), !!option[this.valueField] &&
+            const showCheckIcon = !!option[this.valueField] &&
                 !!this.value &&
                 selected &&
-                this.parentEl.tagName !== "IC-SEARCH-BAR" && (h("span", { class: "check-icon", innerHTML: Check }))));
+                this.parentEl.tagName !== "IC-SEARCH-BAR";
+            return (h(Fragment, null, option.loading && h("ic-loading-indicator", { size: "icon" }), h("div", { class: {
+                    "option-text-container": true,
+                    "show-check-icon": showCheckIcon,
+                } }, h("div", { class: "option-label" }, option.icon && (h("div", { class: "option-icon", innerHTML: option.icon, "aria-hidden": "true" })), h("ic-typography", { variant: "body", "aria-hidden": "true" }, option[this.labelField])), option.description && (h("ic-typography", { id: `${this.getOptionId(option[this.valueField])}-description`, class: "option-description", variant: "caption", "aria-hidden": "true" }, h("p", null, option.description))), option.element && (h("div", { class: "option-element", innerHTML: option.element.component, "aria-hidden": "true" }))), showCheckIcon && h("span", { class: "check-icon", innerHTML: Check })));
         };
         this.displayOption = (option, selected, index, parentOption) => {
             const { open, keyboardNav, isManualMode, initialOptionsListRender, optionHighlighted, options, } = this;
@@ -755,11 +823,12 @@ export class Menu {
         }
     }
     disconnectedCallback() {
+        var _a, _b;
         if (this.popperInstance) {
             this.popperInstance.destroy();
         }
-        this.parentEl.removeEventListener("icClear", this.handleClearListener);
-        this.parentEl.removeEventListener("icSubmitSearch", this.handleSubmitSearch);
+        (_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);
     }
     componentWillLoad() {
         var _a, _b;
@@ -784,9 +853,6 @@ export class Menu {
     }
     componentDidUpdate() {
         const inputValueInOptions = this.options.some((option) => option[this.valueField] === this.value);
-        const optionHighlightedIsSet = this.optionHighlighted !== null &&
-            this.optionHighlighted !== undefined &&
-            this.optionHighlighted !== "";
         if (this.open && this.options.length !== 0 && !this.preventMenuFocus) {
             if (this.value &&
                 this.keyboardNav &&
@@ -795,12 +861,15 @@ export class Menu {
                 !this.isSearchableSelect) {
                 this.scrollToSelected(this.menu);
             }
-            else if (optionHighlightedIsSet &&
+            else if (this.selectOnEnter) {
+                this.menu.focus();
+            }
+            else if (!!this.optionHighlighted &&
                 !this.focusFromSearchKeypress &&
                 !this.preventIncorrectTabOrder) {
-                const highlightedEl = this.el.querySelector(`li[data-value="${this.optionHighlighted}"]`);
+                const highlightedEl = this.host.querySelector(`li[data-value="${this.optionHighlighted}"]`);
                 if (highlightedEl) {
-                    this.menu.setAttribute(this.activeDescendantAttr, highlightedEl.id);
+                    this.menu.setAttribute(this.ACTIVE_DESCENDANT, highlightedEl.id);
                     highlightedEl.focus();
                 }
             }
@@ -835,10 +904,9 @@ export class Menu {
     /**
      * Used alongside activationType
      * If menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.
-     * @param {KeyboardEvent} event - keyboard event
+     * @param {KeyboardEvent} event The keyboard event which is available when handleKeyboardOpen is invoked.
      */
     async handleKeyboardOpen(event) {
-        this.keyboardNav = false;
         if (this.activationType === "automatic") {
             this.autoSetInputValueKeyboardOpen(event);
         }
@@ -859,7 +927,7 @@ export class Menu {
      */
     async initPopperJs(anchor) {
         // Placements set to "-start" to accommodate for custom menu width - menu should always be aligned to the left
-        this.popperInstance = createPopper(anchor, this.el, {
+        this.popperInstance = createPopper(anchor, this.host, {
             placement: "bottom-start",
             modifiers: [
                 {
@@ -878,16 +946,26 @@ export class Menu {
             ],
         });
     }
+    focusOnSearchOrSelectInput(menuOptions, highlightedOptionIndex) {
+        if (!menuOptions[highlightedOptionIndex])
+            return;
+        if (this.isSearchBar) {
+            this.parentEl.setFocus();
+            if (this.searchMode === "navigation")
+                this.setHighlightedOption(0);
+        }
+        if (this.isSearchableSelect) {
+            this.parentEl.setFocus();
+        }
+        this.focusFromSearchKeypress = true;
+    }
     render() {
         const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, } = this;
         const selectAllButtonText = `${(value === null || value === void 0 ? void 0 : value.length) === this.ungroupedOptions.length ? "Clear" : "Select"} all`;
-        const hasNoResults = this.el.classList.contains("no-results");
+        const hasNoResults = this.host.classList.contains("no-results");
         return (h(Host, { class: {
                 "ic-menu-full-width": fullWidth,
-                "ic-menu-no-focus": (inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" ||
-                    hasTimedOut ||
-                    isLoading ||
-                    hasNoResults,
+                "ic-menu-no-focus": (inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" || hasTimedOut || isLoading,
                 [`ic-menu-${size}`]: true,
                 "ic-menu-open": open && options.length !== 0,
                 "ic-menu-multiple": this.isMultiSelect,
@@ -916,661 +994,14 @@ export class Menu {
             !hasTimedOut &&
             !hasNoResults && (h("div", { class: "option-bar" }, h("ic-typography", null, h("p", null, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { 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)))));
     }
-    static get is() { return "ic-menu-with-multi"; }
-    static get encapsulation() { return "scoped"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ic-menu.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ic-menu.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "activationType": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcActivationTypes",
-                    "resolved": "\"automatic\" | \"manual\"",
-                    "references": {
-                        "IcActivationTypes": {
-                            "location": "import",
-                            "path": "@ukic/web-components/dist/types/utils/types",
-                            "id": "../web-components/dist/types/utils/types.d.ts::IcActivationTypes"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Determines whether options manually set as values (by pressing 'Enter') when they receive focus using keyboard navigation."
-                },
-                "attribute": "activation-type",
-                "reflect": false,
-                "defaultValue": "\"automatic\""
-            },
-            "anchorEl": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The reference to an anchor element the menu will position itself from when rendered."
-                }
-            },
-            "autoFocusOnSelected": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "If `true`, autofocus will be applied on selected item when menu is open."
-                        }],
-                    "text": ""
-                },
-                "attribute": "auto-focus-on-selected",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "closeOnSelect": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the menu will close when an option is selected."
-                },
-                "attribute": "close-on-select",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "fullWidth": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the menu will fill the width of the container."
-                },
-                "attribute": "full-width",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "inputEl": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The reference to the input element."
-                }
-            },
-            "inputLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The label for the input element."
-                },
-                "attribute": "input-label",
-                "reflect": false
-            },
-            "labelField": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The custom name for the label field for IcMenuOption."
-                },
-                "attribute": "label-field",
-                "reflect": false,
-                "defaultValue": "\"label\""
-            },
-            "menuId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The ID of the menu."
-                },
-                "attribute": "menu-id",
-                "reflect": false
-            },
-            "open": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the menu will be displayed open."
-                },
-                "attribute": "open",
-                "reflect": true
-            },
-            "parentEl": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "HTMLElement",
-                    "resolved": "HTMLElement",
-                    "references": {
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "- The parent element if ic-menu is nested inside another component."
-                        }],
-                    "text": ""
-                }
-            },
-            "searchMode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcSearchBarSearchModes",
-                    "resolved": "\"navigation\" | \"query\"",
-                    "references": {
-                        "IcSearchBarSearchModes": {
-                            "location": "import",
-                            "path": "@ukic/web-components/dist/types/components",
-                            "id": "../web-components/dist/types/components.d.ts::IcSearchBarSearchModes"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Specify the mode search bar uses to search. `navigation` allows for quick lookups of a set of values, `query` allows for more general searches."
-                },
-                "attribute": "search-mode",
-                "reflect": false,
-                "defaultValue": "\"navigation\""
-            },
-            "selectOnEnter": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown."
-                        }],
-                    "text": ""
-                },
-                "attribute": "select-on-enter",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "size": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcSizes",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
-                    "references": {
-                        "IcSizes": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcSizes"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The size of the menu."
-                },
-                "attribute": "size",
-                "reflect": false,
-                "defaultValue": "\"medium\""
-            },
-            "options": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "IcMenuOption[]",
-                    "resolved": "IcMenuOption[]",
-                    "references": {
-                        "IcMenuOption": {
-                            "location": "import",
-                            "path": "@ukic/web-components/dist/types/utils/types",
-                            "id": "../web-components/dist/types/utils/types.d.ts::IcMenuOption"
-                        }
-                    }
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The possible menu selection options."
-                }
-            },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | string[]",
-                    "resolved": "string | string[]",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The value of the currently selected option - or array of values (if multiple options allowed)."
-                },
-                "attribute": "value",
-                "reflect": false
-            },
-            "valueField": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The custom name for the value field for IcMenuOption."
-                },
-                "attribute": "value-field",
-                "reflect": false,
-                "defaultValue": "\"value\""
-            }
-        };
-    }
-    static get states() {
-        return {
-            "focusFromSearchKeypress": {},
-            "initialOptionsListRender": {},
-            "keyboardNav": {},
-            "optionHighlighted": {},
-            "preventIncorrectTabOrder": {},
-            "menuOptions": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "menuKeyPress",
-                "name": "menuKeyPress",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Emitted when key is pressed while menu is open."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ isNavKey: boolean; key: string }",
-                    "resolved": "{ isNavKey: boolean; key: string; }",
-                    "references": {}
-                }
-            }, {
-                "method": "menuOptionId",
-                "name": "menuOptionId",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Emitted when an option has been highlighted."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "IcMenuOptionIdEventDetail",
-                    "resolved": "IcMenuOptionIdEventDetail",
-                    "references": {
-                        "IcMenuOptionIdEventDetail": {
-                            "location": "import",
-                            "path": "@ukic/web-components/dist/types/components",
-                            "id": "../web-components/dist/types/components.d.ts::IcMenuOptionIdEventDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "menuOptionSelect",
-                "name": "menuOptionSelect",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Emitted when an option is selected."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "IcOptionSelectEventDetail",
-                    "resolved": "IcOptionSelectEventDetail",
-                    "references": {
-                        "IcOptionSelectEventDetail": {
-                            "location": "import",
-                            "path": "@ukic/web-components/dist/types/components",
-                            "id": "../web-components/dist/types/components.d.ts::IcOptionSelectEventDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "menuOptionSelectAll",
-                "name": "menuOptionSelectAll",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Emitted when all options are selected or deselected."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ select: boolean }",
-                    "resolved": "{ select: boolean; }",
-                    "references": {}
-                }
-            }, {
-                "method": "menuStateChange",
-                "name": "menuStateChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Emitted when state of menu changes (i.e. open or close)."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "IcMenuChangeEventDetail",
-                    "resolved": "IcMenuChangeEventDetail",
-                    "references": {
-                        "IcMenuChangeEventDetail": {
-                            "location": "import",
-                            "path": "@ukic/web-components/dist/types/components",
-                            "id": "../web-components/dist/types/components.d.ts::IcMenuChangeEventDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "retryButtonClicked",
-                "name": "retryButtonClicked",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Emitted when the retry button is clicked."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "IcValueEventDetail",
-                    "resolved": "IcValueEventDetail",
-                    "references": {
-                        "IcValueEventDetail": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcValueEventDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "timeoutBlur",
-                "name": "timeoutBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Emitted when the timeout menu loses focus."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ ev: FocusEvent }",
-                    "resolved": "{ ev: FocusEvent; }",
-                    "references": {
-                        "FocusEvent": {
-                            "location": "global",
-                            "id": "global::FocusEvent"
-                        }
-                    }
-                }
-            }, {
-                "method": "ungroupedOptionsSet",
-                "name": "ungroupedOptionsSet",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Emitted when the ungrouped options have been set."
-                        }],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ options: IcMenuOption[] }",
-                    "resolved": "{ options: IcMenuOption[]; }",
-                    "references": {
-                        "IcMenuOption": {
-                            "location": "import",
-                            "path": "@ukic/web-components/dist/types/utils/types",
-                            "id": "../web-components/dist/types/utils/types.d.ts::IcMenuOption"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "handleClickOpen": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "If menu is opened with the mouse, emit menuStateChange custom event."
-                        }]
-                }
-            },
-            "handleKeyboardOpen": {
-                "complexType": {
-                    "signature": "(event: KeyboardEvent) => Promise<void>",
-                    "parameters": [{
-                            "name": "event",
-                            "type": "KeyboardEvent",
-                            "docs": "- keyboard event"
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "KeyboardEvent": {
-                            "location": "global",
-                            "id": "global::KeyboardEvent"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Used alongside activationType\nIf menu is opened via keyboard navigation (i.e. Enter, ArrowUp or ArrowDown), emit optionSelect custom event.",
-                    "tags": [{
-                            "name": "param",
-                            "text": "event - keyboard event"
-                        }]
-                }
-            },
-            "handleSetFirstOption": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Used to highlight the first option in the menu."
-                        }]
-                }
-            },
-            "initPopperJs": {
-                "complexType": {
-                    "signature": "(anchor: HTMLElement) => Promise<void>",
-                    "parameters": [{
-                            "name": "anchor",
-                            "type": "HTMLElement",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLElement": {
-                            "location": "global",
-                            "id": "global::HTMLElement"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "Used to initialize popperJS with an anchor element.\n5/12/2023: Tested with Floating UI, however, discovered inconsistent\nboundary behaviour so sticking with PopperJS."
-                        }]
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "open",
-                "methodName": "watchOpenHandler"
-            }, {
-                "propName": "options",
-                "methodName": "watchOptionsHandler"
-            }];
-    }
-}
-//# sourceMappingURL=ic-menu.js.map
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "open": ["watchOpenHandler"],
+        "options": ["watchOptionsHandler"]
+    }; }
+};
+Menu.style = icMenuCss;
+
+export { InputComponentContainer as ic_input_component_container, InputContainer as ic_input_container, Menu as ic_menu };
+
+//# sourceMappingURL=ic-input-component-container_3.entry.js.map