@ukic/web-components 3.21.0 → 3.23.0

package/dist/esm/ic-pagination_3.entry.js

@@ -0,0 +1,1406 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-a7a720e7.js';
+import { r as removeDisabledFalse, o as onComponentRequiredPropUndefined, Q as checkSlotInChildMutations, l as removeFormResetListener, k as addFormResetListener, q as getInputDescribedByText, m as renderHiddenInput, i as isSlotUsed, R as isMobileOrTablet, S as IcInformationStatus, L as isEmptyString, K as debounceEvent, z as inheritAttributes, n as removeHiddenInput } from './helpers-66681c73.js';
+import { I as IC_INHERITED_ARIA, e as IGNORED_KEYBOARD_CHARACTERS } from './constants-ab12fdcf.js';
+
+const paginationNextPrevious = `<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.08748 0L0.912476 1.175L4.72914 5L0.912476 8.825L2.08748 10L7.08748 5L2.08748 0Z" fill="currentColor"/>
+</svg>
+`;
+
+const paginationFirstLast = `<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1709 8.825L7.34589 5L11.1709 1.175L9.99589 0L4.99589 5L9.99589 10L11.1709 8.825ZM0.829224 0H2.49589V10H0.829224V0Z" fill="currentColour"/>
+</svg>`;
+
+const icPaginationCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{box-sizing:border-box;width:100%;display:flex;justify-content:center}nav{width:100%;display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}ic-button{cursor:pointer}ic-button.next-previous{--icon-width:var(--ic-space-xs);--icon-height:calc(var(--ic-space-xs) + var(--ic-space-xxxs));padding:0 var(--ic-space-xxs) 0 var(--ic-space-xxxs)}ic-button.first-last{--icon-width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));--icon-height:calc(var(--ic-space-xs) + var(--ic-space-xxxs))}ic-button.first-last::part(button),ic-button.next-previous::part(button){color:var(--ic-pagination-chevron)}:host(.ic-pagination-monochrome) ic-button.first-last::part(button),:host(.ic-pagination-monochrome) ic-button.next-previous::part(button){color:var(--ic-pagination-chevron-monochrome)}ic-button.ic-button-disabled.first-last::part(button),ic-button.ic-button-disabled.next-previous::part(button),:host(.ic-pagination-monochrome) ic-button.ic-button-disabled.first-last::part(button),:host(.ic-pagination-monochrome) ic-button.ic-button-disabled.next-previous::part(button){color:var(--ic-pagination-chevron-disabled)}.disabled{color:var(--ic-color-text-disabled-mid);pointer-events:none;cursor:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.hide-current-page{display:none}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}";
+const IcPaginationStyle0 = icPaginationCss;
+
+const Pagination = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icPageChange = createEvent(this, "icPageChange", 7);
+        this.endEllipsis = false;
+        this.endItems = [];
+        this.midItems = [];
+        this.startEllipsis = false;
+        this.startItems = [];
+        /**
+         * The accessible label of the pagination component to provide context for screen reader users.
+         */
+        this.accessibleLabel = "Pagination Navigation";
+        /**
+         * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
+         */
+        this.adjacentPageCount = 1;
+        /**
+         * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
+         */
+        this.boundaryPageCount = 1;
+        /**
+         * The default page to display.
+         */
+        this.defaultPage = 1;
+        /**
+         * If `true`, the pagination will not allow interaction.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the current page of the simple pagination will not be displayed.
+         */
+        this.hideCurrentPage = false;
+        /**
+         * If `true`, the first and last page buttons will not be displayed.
+         */
+        this.hideFirstAndLastPageButton = false;
+        /**
+         * The label for the pagination item (applicable when simple pagination is being used).
+         */
+        this.label = "Page";
+        /**
+         * If `true`, the pagination will display as black in the light theme, and white in dark theme.
+         */
+        this.monochrome = false;
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The type of pagination to be used.
+         */
+        this.type = "simple";
+        /**
+         * The current page displayed by the pagination.
+         */
+        this.currentPage = this.defaultPage;
+        this.handleClickFirst = () => {
+            this.currentPage = 1;
+            this.icPageChange.emit({ value: this.currentPage });
+        };
+        this.handleClickPrevious = () => {
+            this.currentPage--;
+            this.icPageChange.emit({ value: this.currentPage });
+        };
+        this.handleClickNext = () => {
+            this.currentPage++;
+            this.icPageChange.emit({ value: this.currentPage });
+        };
+        this.handleClickLast = () => {
+            this.currentPage = this.pages;
+            this.icPageChange.emit({ value: this.currentPage });
+        };
+        // button rendering abstracted from component render methods for clarity
+        this.firstButton = () => {
+            return (h("ic-button", { id: "first-page-button", "aria-label": "Go to first page", theme: this.theme, onClick: this.handleClickFirst, class: "page-button first-last", disabled: this.currentPage === 1 || this.disabled, variant: "icon-tertiary", monochrome: this.theme == "light" || this.theme == "dark", innerHTML: paginationFirstLast }));
+        };
+        this.previousButton = () => {
+            return (h("ic-button", { id: "previous-page-button", "aria-label": "Go to previous page", theme: this.theme, onClick: this.handleClickPrevious, class: "page-button next-previous flip", disabled: this.currentPage === 1 || this.disabled, variant: "icon-tertiary", monochrome: this.theme == "light" || this.theme == "dark", innerHTML: paginationNextPrevious }));
+        };
+        this.nextButton = () => {
+            return (h("ic-button", { id: "next-page-button", "aria-label": "Go to next page", theme: this.theme, onClick: this.handleClickNext, class: "page-button next-previous", disabled: this.currentPage === this.pages || this.disabled, variant: "icon-tertiary", monochrome: this.theme == "light" || this.theme == "dark", innerHTML: paginationNextPrevious }));
+        };
+        this.lastButton = () => {
+            return (h("ic-button", { id: "last-page-button", "aria-label": "Go to last page", theme: this.theme, onClick: this.handleClickLast, class: "page-button first-last flip", disabled: this.currentPage === this.pages || this.disabled, variant: "icon-tertiary", monochrome: this.theme == "light" || this.theme == "dark", innerHTML: paginationFirstLast }));
+        };
+        this.renderStartEllipsis = () => {
+            return (h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, type: "ellipsis", id: "start-ellipsis", disabled: this.disabled }));
+        };
+        this.renderEndEllipsis = () => {
+            return (h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, type: "ellipsis", id: "end-ellipsis", disabled: this.disabled }));
+        };
+        this.renderStartItems = () => {
+            return this.startItems.map((page) => {
+                return (h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
+            });
+        };
+        this.renderEndItems = () => {
+            return this.endItems.map((page) => {
+                return (h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
+            });
+        };
+        this.renderMiddleItems = () => {
+            return this.midItems.map((page) => {
+                return (h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
+            });
+        };
+    }
+    watchAdjacentPageCountHandler() {
+        if (this.adjacentPageCount > 2) {
+            this.adjacentPageCount = 2;
+        }
+    }
+    watchBoundaryPageCountHandler() {
+        if (this.boundaryPageCount > 2) {
+            this.boundaryPageCount = 2;
+        }
+    }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    watchNumberPagesHandler() {
+        this.watchPageChangeHandler();
+    }
+    watchTypeHandler() {
+        this.watchPageChangeHandler();
+    }
+    watchPageChangeHandler() {
+        if (this.type === "simple") {
+            return;
+        }
+        this.startEllipsis = false;
+        this.endEllipsis = false;
+        this.startItems = [];
+        this.endItems = [];
+        this.midItems = [];
+        const startItems = [];
+        let startItemCount = 0;
+        const endItems = [];
+        let endStart = this.pages;
+        const midItems = [];
+        let midStart;
+        let midEnd;
+        let startEllipsis = false;
+        let endEllipsis = false;
+        if (this.pages <=
+            this.boundaryPageCount * 2 + this.adjacentPageCount * 2 + 3) {
+            this.startEllipsis = false;
+            this.endEllipsis = false;
+            for (let i = 1; i <= this.pages; i++) {
+                startItems.push(i);
+            }
+            this.startItems = startItems;
+            return;
+        }
+        startItemCount = this.boundaryPageCount === 0 ? 1 : this.boundaryPageCount;
+        endStart =
+            this.boundaryPageCount === 0
+                ? this.pages
+                : this.pages - this.boundaryPageCount + 1;
+        if (this.currentPage <=
+            this.adjacentPageCount + this.boundaryPageCount + 2) {
+            startEllipsis = false;
+            endEllipsis = true;
+            let numItems = 2 * this.adjacentPageCount + 1;
+            if (this.boundaryPageCount === 0) {
+                numItems--;
+            }
+            midStart = startItemCount + 1;
+            midEnd = midStart + numItems;
+        }
+        else {
+            startEllipsis = true;
+            if (this.currentPage >
+                this.pages - (this.adjacentPageCount + this.boundaryPageCount + 2)) {
+                let numItems = 2 * this.adjacentPageCount + 1;
+                if (this.boundaryPageCount === 0) {
+                    numItems--;
+                }
+                midEnd =
+                    this.boundaryPageCount === 0
+                        ? this.pages - 1
+                        : this.pages - this.boundaryPageCount;
+                midStart = midEnd - numItems;
+            }
+            else {
+                endEllipsis = true;
+                midStart = this.currentPage - this.adjacentPageCount;
+                midEnd = this.currentPage + this.adjacentPageCount;
+            }
+        }
+        //create array of start items
+        if (this.boundaryPageCount > 0 ||
+            (this.boundaryPageCount === 0 && startEllipsis === false)) {
+            for (let i = 1; i <= startItemCount; i++) {
+                startItems.push(i);
+            }
+        }
+        //create array of end items
+        if (this.boundaryPageCount > 0 ||
+            (this.boundaryPageCount === 0 && endEllipsis === false)) {
+            for (let i = endStart; i <= this.pages; i++) {
+                endItems.push(i);
+            }
+        }
+        //create array of mid items
+        for (let i = midStart; i <= midEnd; i++) {
+            midItems.push(i);
+        }
+        this.startEllipsis = startEllipsis;
+        this.endEllipsis = endEllipsis;
+        this.startItems = startItems;
+        this.endItems = endItems;
+        this.midItems = midItems;
+    }
+    componentWillLoad() {
+        this.watchPageChangeHandler();
+        this.watchBoundaryPageCountHandler();
+        this.watchAdjacentPageCountHandler();
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    componentDidLoad() {
+        onComponentRequiredPropUndefined([{ prop: this.pages, propName: "pages" }], "Pagination");
+    }
+    /**
+     * Prevents focus lingering on a disabled element. If the currently
+     * focused element is one of the back buttons (and we reach the first page),
+     * move focus to "next" button, and vice versa.
+     * @param ev
+     */
+    icPageChangeHandler(ev) {
+        var _a, _b, _c;
+        const shadow = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+        const activeEl = shadow ? shadow.activeElement : document.activeElement;
+        if (!shadow || !activeEl) {
+            return;
+        }
+        if (ev.detail.value === 1 &&
+            ["first-page-button", "previous-page-button"].some((id) => id === (activeEl === null || activeEl === void 0 ? void 0 : activeEl.id))) {
+            const btn = (_b = shadow.querySelector("#next-page-button").shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("button");
+            // When navigating from firstPage->lastPage or vice versa, the to-be-selected element will be disabled. wait a tick so that it can receive focus.
+            setTimeout(() => btn === null || btn === void 0 ? void 0 : btn.focus(), 10);
+        }
+        else if (ev.detail.value === this.pages &&
+            ["last-page-button", "next-page-button"].some((id) => id === (activeEl === null || activeEl === void 0 ? void 0 : activeEl.id))) {
+            const btn = (_c = shadow.querySelector("#previous-page-button").shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("button");
+            setTimeout(() => btn === null || btn === void 0 ? void 0 : btn.focus(), 10);
+        }
+    }
+    paginationItemClickHandler(ev) {
+        const page = ev.detail.page;
+        this.currentPage = page;
+        this.icPageChange.emit({ value: this.currentPage });
+    }
+    /**
+     * Sets the currently displayed page.
+     * @param {number} page The page number to set as the current page
+     */
+    async setCurrentPage(page) {
+        if (typeof page === "number" && page > 0 && page <= this.pages) {
+            this.currentPage = page;
+        }
+        else {
+            console.error("Current page must be a number greater than zero but less than or equal to the total number of pages");
+        }
+    }
+    render() {
+        const { type, currentPage, hideCurrentPage, disabled, hideFirstAndLastPageButton, label, theme, monochrome, } = this;
+        return (h(Host, { key: 'cefb3137892be2304c041ca32ca118268f8ccb07', class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                ["ic-pagination-monochrome"]: !!monochrome,
+            } }, type === "simple" && (h("nav", { key: '9a1d8230be41cb26b31bb8af066a32e9b64e0d89', class: {
+                ["disabled"]: !!disabled,
+            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), h("ic-pagination-item", { key: '577b9b9894ce6ddc2cf02381729600e4284e8912', theme: this.theme, monochrome: this.monochrome, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: !!hideCurrentPage }, disabled: disabled }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("nav", { key: '317d507ca76549e3c980ced7d01332504738a102', class: {
+                ["disabled"]: !!disabled,
+            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), this.renderStartItems(), this.startEllipsis && this.renderStartEllipsis(), this.renderMiddleItems(), this.endEllipsis && this.renderEndEllipsis(), this.renderEndItems(), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("span", { key: '6d3a5778f4704dd5ec1e74bf2cf236143c5f7e7c', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "adjacentPageCount": ["watchAdjacentPageCountHandler"],
+        "boundaryPageCount": ["watchBoundaryPageCountHandler"],
+        "disabled": ["watchDisabledHandler"],
+        "pages": ["watchNumberPagesHandler"],
+        "type": ["watchTypeHandler"],
+        "currentPage": ["watchPageChangeHandler"]
+    }; }
+};
+Pagination.style = IcPaginationStyle0;
+
+const Expand = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor" />
+</svg>
+`;
+
+const Clear = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6666 4.27334L11.7266 3.33334L7.99998 7.06001L4.27331 3.33334L3.33331 4.27334L7.05998 8.00001L3.33331 11.7267L4.27331 12.6667L7.99998 8.94001L11.7266 12.6667L12.6666 11.7267L8.93998 8.00001L12.6666 4.27334Z" fill="currentColor" />
+</svg>
+`;
+
+const icSelectCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;position:relative;--ic-input-label-helpertext-padding:var(--ic-space-xs);--menu-max-height:100px;--border-color:var(--ic-select-field-border);--border-color-hover:var(--ic-select-field-border-hover);--border-color-pressed:var(--ic-select-field-border-pressed);--border-color-disabled:var(--ic-select-field-border-disabled);--border-color-error:var(--ic-select-field-border-error);--border-color-error-hover:var(--ic-select-field-border-error-hover);--border-color-error-pressed:var(--ic-select-field-border-error-pressed);--border-color-success:var(--ic-select-field-border-success);--border-color-success-hover:var(--ic-select-field-border-success-hover);--border-color-success-pressed:var(--ic-select-field-border-success-pressed);--border-color-warning:var(--ic-select-field-border-warning);--border-color-warning-hover:var(--ic-select-field-border-warning-hover);--border-color-warning-pressed:var(--ic-select-field-border-warning-pressed);--ic-input-label-text-color:var(--ic-select-field-label);--ic-input-label-helper-text-color:var(\n    --ic-select-input-field-label-subtitle\n  );--ic-input-validation-status-text-color:var(--ic-select-state-text);--ic-input-validation-error:var(--ic-select-state-icon-error);--ic-input-validation-warning-icon-color:var(--ic-select-state-icon-warning);--ic-input-validation-success-icon-color:var(--ic-select-state-icon-success);--menu-item-text-color:var(--ic-select-list-option-text);--menu-bg-color:var(--ic-select-list-option-background);--menu-border-color:var(--ic-select-dropdown-list-border)}:host(.ic-select-disabled){--ic-input-label-text-color:var(--ic-select-field-label-disabled);--ic-input-label-helper-text-color:var(\n    --ic-select-input-field-label-subtitle-disabled\n  )}:host(.ic-select-full-width){width:100%}ic-input-component-container.menu-open{--border-color:var(--ic-select-field-border-pressed)}ic-input-validation .status-icon,ic-input-validation .statustext{visibility:visible}ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{visibility:hidden;transition:visibility 0s}ic-input-label{margin-bottom:var(--ic-space-xs)}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-select-field-background);color:var(--ic-select-content-text);line-height:1.5rem;letter-spacing:0.005rem;width:100%;height:100%;padding-left:0.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-repeat:no-repeat;background-position:right 0.375rem center;background-image:var(--ic-select-mobile-dropdown-icon);caret-color:var(--ic-select-input-field-text-cursor)}select option,.select-option-selected{color:var(--ic-select-list-option-text)}select:disabled{color:var(--ic-select-content-text-disabled);background-image:var(--ic-select-mobile-dropdown-icon-disabled)}select:focus{border:0;outline:0}select:not([disabled]){cursor:pointer}.select-container{width:100%;display:flex;align-items:center;position:relative}.select-input{width:100%;height:100%;padding:0 0.375rem;display:flex;cursor:pointer;align-items:center;justify-content:space-between;background:none;border:none;background-color:var(--ic-select-field-background);color:var(--ic-select-content-text)}.select-input:focus{outline:none}.select-input[disabled]{pointer-events:none}:host(.ic-select-searchable) .select-input{cursor:auto}.select-input.with-clear-button{padding-right:0}.value-text{max-width:calc(100% - (var(--ic-space-lg) + var(--ic-space-xxs)));box-sizing:border-box;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:0 !important}.value-text.with-clear-button{padding-right:calc(var(--ic-space-xl) + var(--ic-space-xs))}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xxs);color:var(--ic-select-expand-icon-color)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.ic-select-disabled) .expand-icon,:host(.ic-select-disabled) .expand-icon>svg>path{color:var(--ic-select-disabled-expand-icon-color)}:host(.ic-select-searchable) .expand-icon{padding-left:0;height:2.25rem}:host(.ic-select-searchable) .expand-icon>svg{height:2.25rem;padding:0 calc(var(--ic-space-xxxs) + var(--ic-space-xxs)) 0\n    var(--ic-space-xxs)}:host(.ic-select-searchable:not(.ic-select-disabled)) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-select-expand-icon-color)}.expand-icon-open,:host(.ic-select-searchable) .expand-icon-open{transform:rotateX(180deg)}.placeholder{color:var(--ic-select-content-placeholder-text)}:host(.ic-select-disabled.ic-select-searchable) .select-input::-moz-placeholder{color:var(--ic-select-content-text-disabled)}:host(.ic-select-disabled) .value-text,:host(.ic-select-disabled) .select-input,:host(.ic-select-disabled) .placeholder,:host(.ic-select-disabled.ic-select-searchable) .select-input::placeholder{color:var(--ic-select-content-text-disabled)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;align-items:center}.divider{width:var(--ic-space-1px);background-color:var(--ic-select-content-divider);margin:var(--ic-space-xxs) 0;border-radius:var(--ic-space-1px);height:var(--ic-space-lg)}:host(.ic-select-small) .divider{height:var(--ic-space-md)}:host(.ic-select-large) .divider{height:var(--ic-space-xl)}.clear-button{color:var(--ic-select-clear-button);position:absolute;right:calc(var(--ic-space-xl) + var(--ic-space-xxs) - var(--ic-space-1px));border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-color-focus-inner);box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer);border-radius:0.25rem}.clear-button:focus,.clear-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button.searchable{position:static}.aria-live-hidden-text{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}::slotted([slot=\"icon\"]){fill:var(--ic-select-content-placeholder-text)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-select-content-text)}.readonly ::slotted([slot=\"icon\"]){padding:0.375rem;margin-bottom:0.75rem}@media (forced-colors: active){.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}@media (prefers-reduced-motion: reduce){.clear-button,ic-input-validation.menu-open .status-icon,ic-input-validation.menu-open .statustext{transition:none}}";
+const IcSelectStyle0 = icSelectCss;
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+let inputIds$1 = 0;
+const MUTABLE_ATTRIBUTES$1 = [...IC_INHERITED_ARIA, "tabindex", "title"];
+const Select = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icBlur = createEvent(this, "icBlur", 7);
+        this.icChange = createEvent(this, "icChange", 7);
+        this.icClear = createEvent(this, "icClear", 7);
+        this.icClose = createEvent(this, "icClose", 7);
+        this.icFocus = createEvent(this, "icFocus", 7);
+        this.icInput = createEvent(this, "icInput", 7);
+        this.icOpen = createEvent(this, "icOpen", 7);
+        this.icOptionSelect = createEvent(this, "icOptionSelect", 7);
+        this.icOptionDeselect = createEvent(this, "icOptionDeselect", 7);
+        this.icRetryLoad = createEvent(this, "icRetryLoad", 7);
+        this.inputId = `ic-select-input-${inputIds$1++}`;
+        this.menuId = `${this.inputId}-menu`;
+        this.inheritedAttributes = {};
+        this.hostMutationObserver = null;
+        this.timeoutTimer = null;
+        this.hasTimedOut = false;
+        this.initialRender = true;
+        this.pressedCharacters = "";
+        this.hasError = false;
+        this.searchableSelectInputValue = "";
+        this.selectButtonAriaLiveText = "";
+        this.selectInputAriaLiveText = "";
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
+         */
+        this.disableAutoFiltering = false;
+        /**
+         * The text displayed when there are no options in the option list.
+         */
+        this.emptyOptionListText = "No results found";
+        /**
+         * If `true`, the select will fill the width of the container.
+         */
+        this.fullWidth = false;
+        /**
+         * The helper text that will be displayed for additional field guidance.
+         */
+        this.helperText = "";
+        /**
+         * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+         */
+        this.hideLabel = false;
+        /**
+         * If `true`, descriptions of options will be included when filtering options in a searchable select. Only applies to built in filtering.
+         */
+        this.includeDescriptionsInSearch = false;
+        /**
+         * If `true`, group titles of grouped options will be included when filtering options in a searchable select. Only applies to built in filtering.
+         */
+        this.includeGroupTitlesInSearch = false;
+        /**
+         * The message displayed when external loading times out.
+         */
+        this.loadingErrorLabel = "Loading Error";
+        /**
+         * The message displayed whilst the options are being loaded externally.
+         */
+        this.loadingLabel = "Loading...";
+        /**
+         * If `true`, multiple options can be selected.
+         */
+        this.multiple = false;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * The placeholder value to be displayed.
+         */
+        this.placeholder = "Select an option";
+        /**
+         * If `true`, the readonly state will be set.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the select will require a value.
+         */
+        this.required = false;
+        /**
+         * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options. This functionality is only available on the single-select variant of the select component.
+         */
+        this.searchable = false;
+        /**
+         * Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering.
+         */
+        this.searchMatchPosition = "anywhere";
+        /**
+         * If `true`, the icOptionSelect event will be fired on enter instead of ArrowUp and ArrowDown on the single select.
+         */
+        this.selectOnEnter = false;
+        /**
+         * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
+         */
+        this.showClearButton = false;
+        /**
+         * The size of the select.
+         */
+        this.size = "medium";
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * The value of the `aria-live` attribute on the validation message.
+         */
+        this.validationAriaLive = "polite";
+        /**
+         * The validation status - e.g. 'error' | 'warning' | 'success'.
+         */
+        this.validationStatus = "";
+        /**
+         * The text to display as the validation message.
+         */
+        this.validationText = "";
+        /**
+         * If `true` and on a mobile or tablet device, the native select element will be used instead of the custom select component for better usability.
+         */
+        this.useNativeSelectOnMobile = true;
+        /**
+         * If `true`, the loading state will be triggered when fetching options asynchronously.
+         */
+        this.loading = false;
+        /**
+         * The possible selection options.
+         */
+        this.options = [];
+        this.flatOptions = [];
+        /**
+         * The amount of time, in milliseconds, to wait to trigger the `icInput` event after each keystroke.
+         */
+        this.debounce = 0;
+        this.currDebounce = this.debounce;
+        /**
+         * The value of the select, reflected by the value of the currently selected option.
+         * For the searchable variant, the value is also reflected by the user input.
+         * For the multi-select variant, the value must be an array of option values.
+         */
+        this.value = null;
+        this.initialValue = this.value;
+        this.open = false;
+        this.getValidatedValue = (value) => {
+            const validValues = this.flatOptions.map((opt) => opt.value);
+            if (validValues.length === 0)
+                return value;
+            if (this.multiple) {
+                if (!value)
+                    return null;
+                const arr = Array.isArray(value) ? value : [value]; // Ensure value is an array
+                const filtered = validValues.filter((v) => arr.includes(v)); // Keep only valid values
+                return filtered.length > 0 ? filtered : null;
+            }
+            else {
+                return validValues.includes(value) ? value : null;
+            }
+        };
+        this.getFilteredOptions = (searchString, searchMatchPosition, includeDescriptionsInSearch, includeGroupTitlesInSearch) => {
+            const search = searchString.toLowerCase();
+            const match = (text, method) => method === "anywhere" ? text.includes(search) : text.startsWith(search);
+            return this.unflattenOptions(this.flatOptions.filter((option) => {
+                var _a, _b, _c, _d;
+                const label = option.label.toLowerCase();
+                const group = (_b = (_a = option.group) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "";
+                const description = (_d = (_c = option.description) === null || _c === void 0 ? void 0 : _c.toLowerCase()) !== null && _d !== void 0 ? _d : "";
+                return (match(label, searchMatchPosition) ||
+                    (includeDescriptionsInSearch &&
+                        match(description, searchMatchPosition)) ||
+                    (includeGroupTitlesInSearch && match(group, searchMatchPosition)));
+            }));
+        };
+        this.getOptions = () => {
+            const options = this.searchable &&
+                !this.disableAutoFiltering &&
+                this.searchableSelectInputValue
+                ? this.getFilteredOptions(this.searchableSelectInputValue, this.searchMatchPosition, this.includeDescriptionsInSearch, this.includeGroupTitlesInSearch)
+                : this.unflattenOptions(this.flatOptions);
+            if (this.hasTimedOut)
+                return [{ label: this.loadingErrorLabel, value: "", timedOut: true }];
+            if (this.loading)
+                return [{ label: this.loadingLabel, value: "", loading: true }];
+            if (options.length > 0)
+                return options;
+            return [{ label: this.emptyOptionListText, value: "" }];
+        };
+        this.getFlatOptions = (options) => options.flatMap((item) => ("children" in item && item.children
+            ? [...item.children.map((child) => (Object.assign({ group: item.label }, child)))]
+            : [item]));
+        this.unflattenOptions = (flatOptions) => {
+            const groupMap = new Map();
+            const result = [];
+            for (const option of flatOptions) {
+                if (option.group) {
+                    let group = groupMap.get(option.group);
+                    if (!group) {
+                        group = { label: option.group, children: [] };
+                        groupMap.set(option.group, group);
+                        result.push(group);
+                    }
+                    const rest = __rest(option, ["group"]);
+                    group.children.push(rest);
+                }
+                else {
+                    result.push(option);
+                }
+            }
+            return result;
+        };
+        this.getLabelFromValue = (value) => { var _a, _b; return (_b = (_a = this.flatOptions.find((option) => option.value === value)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : ""; };
+        // Construct the string that will be shown in the select input or button
+        this.getLabelString = () => {
+            if (Array.isArray(this.value)) {
+                return this.value.map(this.getLabelFromValue).filter(Boolean).join(", ");
+            }
+            return (this.getLabelFromValue(this.value) ||
+                (this.searchable ? "" : this.placeholder));
+        };
+        this.handleClick = (event) => {
+            var _a;
+            if (event.detail !== 0) {
+                (_a = this.menu) === null || _a === void 0 ? void 0 : _a.handleClickOpen();
+            }
+        };
+        this.handleExpandIconMouseDown = (event) => {
+            var _a;
+            if (!this.disabled) {
+                event.preventDefault();
+                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
+                this.handleClick(event);
+            }
+        };
+        this.handleBlur = ({ relatedTarget }) => {
+            var _a, _b;
+            const target = relatedTarget;
+            if (this.el.contains(target) ||
+                ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(target)) ||
+                ((_b = this.menu) === null || _b === void 0 ? void 0 : _b.contains(target)) ||
+                target === this.clearButton) {
+                return;
+            }
+            this.open = false;
+            this.handleFocusIndicatorDisplay();
+            if (this.searchable) {
+                this.searchableSelectInputValue = "";
+            }
+            this.icBlur.emit();
+        };
+        this.handleTimeoutBlur = (event) => {
+            this.handleBlur(event.detail.ev);
+        };
+        this.handleFocus = () => {
+            this.icFocus.emit();
+        };
+        this.handleClear = () => {
+            this.clearTimer();
+            this.loading = false;
+            this.value = null;
+            this.searchableSelectInputValue = "";
+            this.icClear.emit();
+            this.setFocus();
+        };
+        this.setTextColor = () => {
+            if (this.nativeSelectElement) {
+                this.nativeSelectElement.className =
+                    this.nativeSelectElement.selectedIndex === 0
+                        ? "placeholder"
+                        : "select-option-selected";
+            }
+        };
+        this.handleNativeSelectChange = () => {
+            if (this.nativeSelectElement) {
+                this.icOptionSelect.emit({ value: this.nativeSelectElement.value });
+                this.icChange.emit({ value: this.nativeSelectElement.value });
+            }
+            this.setTextColor();
+        };
+        this.handleFocusIndicatorDisplay = () => {
+            var _a;
+            const focusIndicator = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".focus-indicator");
+            if (focusIndicator) {
+                if (this.open) {
+                    focusIndicator.classList.add("focus-indicator-enabled");
+                }
+                else {
+                    focusIndicator.classList.remove("focus-indicator-enabled");
+                }
+            }
+        };
+        this.handleKeyDown = (event) => {
+            var _a, _b;
+            if (!(event.key === " " && this.pressedCharacters.length > 0)) {
+                if (this.open) {
+                    (_a = this.menu) === null || _a === void 0 ? void 0 : _a.handleMenuKeyDown(event);
+                }
+                else {
+                    (_b = this.menu) === null || _b === void 0 ? void 0 : _b.handleKeyboardOpen(event);
+                }
+            }
+            if (!this.multiple &&
+                !this.searchable &&
+                !this.selectOnEnter &&
+                /^[a-zA-Z0-9 ]$/.test(event.key)) {
+                this.handleCharacterKeyDown(event.key);
+            }
+        };
+        this.handleCharacterKeyDown = (key) => {
+            // Only close menu when space is pressed if not being used alongside character keys to quickly select options
+            if (this.open && key === " " && this.pressedCharacters.length === 0) {
+                this.open = false;
+            }
+            if (key.length !== 1 || this.searchable) {
+                this.pressedCharacters = "";
+                return;
+            }
+            window.clearTimeout(this.characterKeyPressTimer);
+            this.characterKeyPressTimer = window.setTimeout(() => (this.pressedCharacters = ""), 1000);
+            if (key !== " " || !!this.pressedCharacters) {
+                this.pressedCharacters += key;
+                const filteredOptions = this.getFilteredOptions(this.pressedCharacters, "start", false, false);
+                if (filteredOptions.length > 0) {
+                    const firstOption = filteredOptions[0];
+                    if ("children" in firstOption) {
+                        this.value = firstOption.children[0].value;
+                    }
+                    else {
+                        this.value = firstOption.value;
+                    }
+                }
+            }
+        };
+        this.handleNativeSelectKeyDown = (event) => {
+            this.handleKeyDown(event);
+        };
+        this.handleSelectChange = (event) => {
+            const { value } = event.detail;
+            if (!value || this.getLabelFromValue(value) === this.emptyOptionListText) {
+                this.value = null;
+                return;
+            }
+            if (this.multiple) {
+                let valueArray = Array.isArray(this.value) ? [...this.value] : [];
+                const index = valueArray.indexOf(value);
+                if (index > -1) {
+                    valueArray.splice(index, 1);
+                    this.icOptionDeselect.emit({ value });
+                }
+                else {
+                    this.icOptionSelect.emit({ value });
+                    valueArray.push(value);
+                    valueArray = this.getValidatedValue(valueArray);
+                }
+                this.value = valueArray.length ? valueArray : null;
+            }
+            else {
+                this.icOptionSelect.emit({ value });
+                this.value = value;
+                if (this.searchable)
+                    this.searchableSelectInputValue = "";
+            }
+        };
+        this.handleSelectAllChange = ({ detail, }) => {
+            const allSelectableValues = this.flatOptions
+                .filter((option) => !option.disabled)
+                .map((option) => option.value);
+            if (detail.select) {
+                allSelectableValues
+                    .filter((value) => { var _a; return !((_a = this.value) !== null && _a !== void 0 ? _a : []).includes(value); })
+                    .forEach((value) => {
+                    this.icOptionSelect.emit({ value });
+                });
+                this.value = allSelectableValues;
+            }
+            else {
+                this.value.forEach((value) => this.icOptionDeselect.emit({ value }));
+                this.value = null;
+            }
+        };
+        this.handleFormReset = () => {
+            this.value = this.initialValue;
+            this.searchableSelectInputValue = "";
+            if (this.searchable) {
+                this.hiddenInputValue = this.initialValue;
+            }
+        };
+        this.handleRetry = () => {
+            this.clearTimer();
+            this.hasTimedOut = false;
+            this.hasError = false;
+            this.loading = true;
+            this.icRetryLoad.emit({
+                value: this.searchable
+                    ? this.searchableSelectInputValue
+                    : this.hiddenInputValue,
+            });
+            this.setFocus();
+        };
+        this.handleSearchableSelectInput = (event) => {
+            var _a;
+            this.updateSearchableSelectResultAriaLive();
+            if (!this.multiple) {
+                this.value = null;
+            }
+            this.searchableSelectInputValue =
+                (_a = event.target.value) !== null && _a !== void 0 ? _a : "";
+            this.open = true;
+            clearTimeout(this.debounceIcInput);
+            this.debounceIcInput = window.setTimeout(() => this.icInput.emit({ value: this.searchableSelectInputValue }), this.currDebounce);
+        };
+        this.hostMutationCallback = (mutationList) => {
+            let forceComponentUpdate = false;
+            mutationList.forEach(({ attributeName, type, addedNodes, removedNodes }) => {
+                if (attributeName) {
+                    const attribute = this.el.getAttribute(attributeName);
+                    if (attribute && MUTABLE_ATTRIBUTES$1.includes(attributeName)) {
+                        this.inheritedAttributes[attributeName] = attribute;
+                        forceComponentUpdate = true;
+                    }
+                }
+                else if (type === "childList") {
+                    forceComponentUpdate = checkSlotInChildMutations(addedNodes, removedNodes, "icon");
+                }
+            });
+            if (forceComponentUpdate) {
+                forceUpdate(this);
+            }
+        };
+        this.updateSelectButtonAriaLive = () => {
+            const value_label = this.getLabelFromValue(this.value);
+            this.selectButtonAriaLiveText = this.multiple
+                ? `${this.value ? this.value.length : 0} of ${this.flatOptions.length} selected`
+                : this.value
+                    ? value_label !== null && value_label !== void 0 ? value_label : `${value_label} selected`
+                    : "";
+        };
+        this.updateSearchableSelectResultAriaLive = () => {
+            var _a, _b;
+            this.selectInputAriaLiveText =
+                ((_b = (_a = this.getOptions()) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.label) == this.emptyOptionListText
+                    ? this.emptyOptionListText
+                    : "";
+        };
+        this.updateAriaActiveDescendant = (event) => {
+            this.ariaActiveDescendant = event.detail.optionId;
+        };
+        this.handleMenuChange = (event) => {
+            this.open = event.detail.open;
+            this.pressedCharacters = "";
+        };
+        this.getDeduplicatedOptions = (flatOptions) => {
+            const seen = new Set();
+            return flatOptions.filter((option) => {
+                if (option.value && seen.has(option.value)) {
+                    console.warn(`ic-select with label ${this.label} was populated with duplicate option (value: ${option.value}) which has been removed.`);
+                    return false;
+                }
+                if (option.value)
+                    seen.add(option.value);
+                return true;
+            });
+        };
+        this.renderNativeOption = (option) => (h("option", { value: option.value, disabled: option.disabled, selected: option.value === this.value }, option.label));
+    }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    loadingHandler(newValue) {
+        this.hasTimedOut = false;
+        if (newValue) {
+            this.hasError = false;
+            if (this.timeout) {
+                if (this.timeoutTimer) {
+                    this.clearTimer();
+                }
+                this.timeoutTimer = window.setTimeout(() => {
+                    this.loading = false;
+                    this.hasTimedOut = true;
+                    forceUpdate(this);
+                }, this.timeout);
+            }
+        }
+        else {
+            if (this.timeoutTimer) {
+                this.clearTimer();
+            }
+        }
+    }
+    clearTimer() {
+        if (this.timeoutTimer) {
+            clearTimeout(this.timeoutTimer);
+            this.timeoutTimer = null;
+        }
+    }
+    optionsChangedHandler() {
+        const flat = this.getFlatOptions(this.options)
+            .filter((option) => option.value != null || option.label != null) // filter out options missing both value and label
+            .map((option) => {
+            var _a, _b;
+            return (Object.assign(Object.assign({}, option), { value: (_a = option.value) !== null && _a !== void 0 ? _a : option.label, label: (_b = option.label) !== null && _b !== void 0 ? _b : option.value }));
+        });
+        this.flatOptions = this.getDeduplicatedOptions(flat);
+        if (!this.initialRender)
+            this.loading = false;
+        this.clearTimer();
+        this.updateSelectButtonAriaLive();
+    }
+    debounceChangedHandler(newValue) {
+        if (this.currDebounce !== newValue) {
+            this.currDebounce = newValue;
+        }
+    }
+    valueChangedHandler(newValue) {
+        const validated = this.getValidatedValue(newValue);
+        const isEqual = Array.isArray(validated) && Array.isArray(this.value)
+            ? validated.length === this.value.length &&
+                validated.every((v, i) => v === this.value[i])
+            : validated === this.value;
+        if (!isEqual) {
+            this.value = validated;
+            return;
+        }
+        this.updateSelectButtonAriaLive();
+        this.icChange.emit({ value: this.value });
+    }
+    openChangedHandler() {
+        this.open ? this.icOpen.emit() : this.icClose.emit();
+        if (!this.open) {
+            this.ariaActiveDescendant = undefined;
+        }
+        this.handleFocusIndicatorDisplay();
+    }
+    /**
+     * Sets focus on the select component.
+     */
+    async setFocus() {
+        if (this.nativeSelectElement) {
+            this.nativeSelectElement.focus();
+        }
+        else if (this.selectElement) {
+            this.selectElement.focus();
+        }
+        else if (this.searchableSelectElement) {
+            this.searchableSelectElement.focus();
+        }
+    }
+    componentDidRender() {
+        if (this.nativeSelectElement && !this.disabled) {
+            this.setTextColor();
+        }
+        this.initialRender = false;
+    }
+    disconnectedCallback() {
+        var _a;
+        removeFormResetListener(this.el, this.handleFormReset);
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.clearTimer();
+    }
+    componentDidLoad() {
+        forceUpdate(this);
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            attributes: true,
+            childList: true,
+        });
+    }
+    componentWillLoad() {
+        this.optionsChangedHandler();
+        this.value = this.getValidatedValue(this.value);
+        this.initialValue = this.value;
+        if (this.loading)
+            this.loadingHandler(true);
+        addFormResetListener(this.el, this.handleFormReset);
+    }
+    render() {
+        const { disabled, searchable, size, fullWidth, theme, readonly, hideLabel, inputId, label, helperText, required, value, options, menuId, multiple, validationStatus, open, showClearButton, selectOnEnter, loading, searchableSelectInputValue, validationText, validationAriaLive, form, ariaActiveDescendant, placeholder, name, inheritedAttributes, selectInputAriaLiveText, selectButtonAriaLiveText, } = this;
+        const hasValue = !!value;
+        const hasInput = !!searchableSelectInputValue;
+        const isClearable = !disabled &&
+            ((searchable && (hasInput || hasValue)) ||
+                (!searchable && hasValue && !loading && showClearButton));
+        const showValidation = !!validationStatus && !disabled;
+        const invalid = validationStatus === IcInformationStatus.Error;
+        const describedBy = getInputDescribedByText(this.el, inputId, helperText !== "", showValidation).trim();
+        const menuOptions = this.getOptions();
+        const noOptions = disabled ||
+            (menuOptions.length === 1 &&
+                (menuOptions[0].label === this.emptyOptionListText ||
+                    "loading" in menuOptions[0] ||
+                    "timedOut" in menuOptions[0]));
+        renderHiddenInput(this.el, value, name || inputId, disabled);
+        const ClearButton = () => (h("ic-button", { key: '983b6bfae4f3a9d439f23fe022652605d91f0a1e', ref: (el) => (this.clearButton = el), id: "clear-button", "aria-label": this.searchable ? "Clear input" : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onBlur: this.handleBlur, size: size, variant: "icon-tertiary" }));
+        const NativeSelect = () => (h("select", Object.assign({ key: '2fb628398e722cff8c3759229af969600e553485', ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid ? "true" : "false", onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleNativeSelectKeyDown, form: form }, inheritedAttributes), h("option", { key: '5fb827fef7ab7c597a2361ac4d019f9e07adb55f', value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => "children" in option ? (h("optgroup", { label: option.label }, option.children.map((child) => this.renderNativeOption(child)))) : (this.renderNativeOption(option)))));
+        const SelectButton = () => (h("div", { key: '47ad04d6da391fcb88a8b6a6a841dec93f53cd74', class: "select-container" }, h("button", { key: '7ee23a4f16c4aca4b287391ac5bf5f6ee4441b07', class: "select-input", role: "combobox", ref: (el) => (this.selectElement = el), id: inputId, "aria-label": `${label}, ${(multiple && value
+                ? `${value.length} of ${this.flatOptions.length} selected, ${this.getLabelString()}`
+                : this.getLabelString()) || placeholder}`, onClick: this.handleClick, "aria-describedby": describedBy, "aria-invalid": invalid ? "true" : "false", "aria-haspopup": "listbox", "aria-expanded": `${open}`, "aria-controls": menuId, "aria-required": `${required}`, disabled: disabled, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-activedescendant": ariaActiveDescendant }, h("ic-typography", { key: '438cce7c257e37d0a0aef5247d28d31586725a1e', variant: "body", class: {
+                "value-text": true,
+                "with-clear-button": !!isClearable,
+                placeholder: !value,
+            } }, this.getLabelString()), h("div", { key: '8926d05851401339717c159651b802fb41e53096', class: "select-input-end" }, isClearable && h("div", { key: '5c94e4ba98ad972001890d639b00c82887e0fb5d', class: "divider" }), h("span", { key: '23569f5196d66f2b4a834d44006f6a05446598cd', class: {
+                "expand-icon": true,
+                "expand-icon-open": open,
+            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && h(ClearButton, { key: 'e4165cb01b0bdc1681e3d9490007182b934f40ea' }), h("div", { key: '6208229358ee8ba7a007a08f5e551d494015a347', "aria-live": "polite", "aria-atomic": "true", class: "aria-live-hidden-text" }, selectButtonAriaLiveText)));
+        const SelectInput = () => (h("div", { key: 'af39791c29e8d792c16fed1fffe08db8f621fcac', class: "searchable-select-container" }, h("input", { key: '366bd3c57ad76f130d73ab2390c557b9e8fe98c8', class: {
+                "value-text": true,
+                "select-input": true,
+                "with-clear-button": !!searchableSelectInputValue,
+            }, role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": `${open}`, "aria-invalid": invalid ? "true" : "false", "aria-required": `${required}`, "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: inputId, value: multiple
+                ? ""
+                : value
+                    ? this.getLabelString()
+                    : searchableSelectInputValue || undefined, disabled: disabled, placeholder: placeholder, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, form: form }), isClearable && (h("div", { key: 'e9260358a6c8ac3683d1de3015064665d32d907f', class: "clear-button-container" }, h(ClearButton, { key: '0c05ed1cf92ac8fde61ba55192a8a1511338239e' }), h("div", { key: 'e44933edcc7c79459f1ecd551eec43a86fd53b11', class: "divider" }))), h("span", { key: '36e7fe34e7d438caab2967fae27bfe4fb2e49041', onMouseDown: this.handleExpandIconMouseDown, class: {
+                "expand-icon": true,
+                "expand-icon-open": open,
+            }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { key: 'c3e06f04e62b273b8a7a6f9df0aa27bf71060ed4', "aria-live": "polite", role: "status", class: "aria-live-hidden-text" }, selectInputAriaLiveText)));
+        const ReadOnly = () => (h("ic-typography", { key: '979d342f453fdb2ed79a6cf231d9a40275662a44' }, h("p", { key: '221530958da8731657b5ad4d455041dc3934718f' }, this.getLabelString() === placeholder ? "" : this.getLabelString())));
+        return (h(Host, { key: 'efbdccb0f0b7e86142cd530d52a86f7ce95d6c1c', class: {
+                "ic-select-disabled": disabled,
+                "ic-select-searchable": searchable,
+                [`ic-select-${size}`]: size !== "medium",
+                "ic-select-full-width": fullWidth,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, h("ic-input-container", { key: '48fe83c1c79ec578f94a2d8af4b8b452570a421f', readonly: readonly }, !hideLabel && (h("ic-input-label", { key: '8410dabe6d0d62c7c1459991631807cfa6546735', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, h("slot", { key: '77ce0ab9ca879ecf515de633ff27ba8e2320cf2c', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '699375a82eb49f5eb351cf95b4822b4cad7bcc1a', ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, isSlotUsed(this.el, "icon") &&
+            !disabled &&
+            (!readonly || !!value) && (h("span", { key: 'fcfec6b75fdb0eb41950460af3c6d7dc5ad43657', slot: "left-icon", class: {
+                readonly,
+                "has-value": !!value,
+            } }, h("slot", { key: '08d321011ba86b6d50bf3c8c85bf16595c8df657', name: "icon" }))), isMobileOrTablet() && this.useNativeSelectOnMobile && !multiple ? (h(NativeSelect, null)) : readonly ? (h(ReadOnly, null)) : !searchable ? (h(SelectButton, null)) : (h(SelectInput, null))), !(isMobileOrTablet() &&
+            this.useNativeSelectOnMobile &&
+            !multiple) && (h("ic-menu", { key: '3fc0ee9172a93e744174e2f2b7a16c4f327a82c9', ref: (el) => (this.menu = el), class: { "no-results": noOptions }, inputEl: searchable ? this.searchableSelectElement : this.selectElement, allowMenuFocus: false, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: open, options: this.getOptions(), value: multiple ? value : value, fullWidth: fullWidth, selectOnEnter: selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onTimeoutBlur: this.handleTimeoutBlur, onMenuOptionId: this.updateAriaActiveDescendant, onClick: this.setFocus, parentEl: this.el, activationType: searchable || multiple || selectOnEnter ? "manual" : "automatic", onRetryButtonClicked: this.handleRetry, closeOnSelect: !multiple, multiSelect: multiple, searchableSelect: searchable })), h("ic-input-validation", { key: '6b8bd66f22d67776d418e0aac1b41d2f03f3c9cd', class: {
+                "menu-open": open,
+            }, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "", for: inputId }))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
+        "loading": ["loadingHandler"],
+        "options": ["optionsChangedHandler"],
+        "debounce": ["debounceChangedHandler"],
+        "value": ["valueChangedHandler"],
+        "open": ["openChangedHandler"]
+    }; }
+};
+Select.style = IcSelectStyle0;
+
+const icTextFieldCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--ic-input-label-helpertext-padding:var(--ic-space-xs);--border-color:var(--ic-text-field-border-neutral);--border-color-hover:var(--ic-text-field-border-neutral-hover);--border-color-pressed:var(--ic-text-field-border-neutral-pressed);--border-color-disabled:var(--ic-text-field-border-disabled);--border-color-error:var(--ic-text-field-border-error);--border-color-error-hover:var(--ic-text-field-border-error-hover);--border-color-error-pressed:var(--ic-text-field-border-error-pressed);--border-color-success:var(--ic-text-field-border-success);--border-color-success-hover:var(--ic-text-field-border-success-hover);--border-color-success-pressed:var(--ic-text-field-border-success-pressed);--border-color-warning:var(--ic-text-field-border-warning);--border-color-warning-hover:var(--ic-text-field-border-warning-hover);--border-color-warning-pressed:var(--ic-text-field-border-warning-pressed);--ic-input-label-text-color:var(--ic-text-field-label);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle);--ic-input-validation-status-text-color:var(--ic-text-field-state-text);--ic-input-validation-error:var(--ic-text-field-state-icon-error);--ic-input-validation-warning-icon-color:var(\n    --ic-text-field-state-icon-warning\n  );--ic-input-validation-success-icon-color:var(\n    --ic-text-field-state-icon-success\n  );--ic-input-component-container-success-icon-inline-color:var(\n    --ic-text-field-state-icon-success\n  )}:host(.ic-text-field-disabled){--ic-input-label-text-color:var(--ic-text-field-label-disabled);--ic-input-label-helper-text-color:var(--ic-text-field-subtitle-disabled);--text-field-placeholder-color:var(\n    --ic-text-field-text-area-placeholder-text-disabled\n  )}:host(.ic-text-field-full-width){width:100%}::-moz-placeholder{color:var(\n    --text-field-placeholder-color,\n    var(--ic-text-field-placeholder-text)\n  );opacity:1}::placeholder{color:var(\n    --text-field-placeholder-color,\n    var(--ic-text-field-placeholder-text)\n  );opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);color:var(--text-field-text-color, var(--ic-text-field-text));background-color:var(--input-bg-color, var(--ic-text-field-background));line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs);caret-color:var(\n    --text-field-typing-cursor,\n    var(--ic-text-field-typing-cursor)\n  )}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:0.375rem}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(\n    --text-field-disabled-text-color,\n    var(--ic-text-field-text-disabled)\n  )}input.readonly,textarea.readonly{color:var(--ic-text-field-read-only-input-text-internal);background:transparent}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=\"number\"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.char-count-text{--ic-typography-color:var(--ic-text-field-character-limit);padding-right:var(--ic-space-xxxs)}:host(.ic-text-field-disabled) .char-count-text{--ic-typography-color:var(--ic-text-field-character-limit-disabled)}.no-left-pad{padding-left:0}::slotted([slot=\"icon\"]){fill:var(--ic-text-field-text-disabled)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-text-field-input-internal-icon)}.char-count{margin-right:calc(-1 * var(--ic-space-xxxs))}.remaining-char-count-desc{position:absolute;left:-9999px}.show-validation{margin-top:var(--ic-space-xs)}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration,input[type=\"search\"]::-webkit-search-results-button,input[type=\"search\"]::-webkit-search-results-decoration{display:none}input[type=\"search\"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
+const IcTextFieldStyle0 = icTextFieldCss;
+
+let inputIds = 0;
+const MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, "title"];
+const TextField = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.getValidationText = createEvent(this, "getValidationText", 7);
+        this.icBlur = createEvent(this, "icBlur", 7);
+        this.icChange = createEvent(this, "icChange", 7);
+        this.icFocus = createEvent(this, "icFocus", 7);
+        this.icInput = createEvent(this, "icInput", 7);
+        this.icKeydown = createEvent(this, "icKeydown", 7);
+        this.icScroll = createEvent(this, "icScroll", 7);
+        this.inheritedAttributes = {};
+        this.hostMutationObserver = null;
+        this.numChars = 0;
+        this.maxCharactersReached = false;
+        this.maxCharactersWarning = false;
+        this.minCharactersUnattained = false;
+        this.maxValueExceeded = false;
+        this.minValueUnattained = false;
+        this.isFocussed = false;
+        /**
+         * The automatic capitalisation of the text value as it is entered/edited by the user.
+         * Available options: "off", "none", "on", "sentences", "words", "characters".
+         */
+        this.autocapitalize = "off";
+        /**
+         * The state of autocompletion the browser can apply on the text value.
+         */
+        this.autocomplete = "off";
+        /**
+         * The state of autocorrection the browser can apply when the user is entering/editing the text value.
+         */
+        this.autocorrect = "off";
+        /**
+         * If `true`, the form control will have input focus when the page loads.
+         */
+        this.autofocus = false;
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         * Specify whether the text field fills the full width of the container.
+         * If `true`, this overrides the --input-width CSS variable.
+         */
+        this.fullWidth = false;
+        /**
+         * The helper text that will be displayed for additional field guidance.
+         */
+        this.helperText = "";
+        /**
+         * If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden.
+         */
+        this.hideCharCount = false;
+        /**
+         * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
+         */
+        this.hideLabel = false;
+        /**
+         * @internal If `true`, the hidden form input will stop rendering for form submission.
+         */
+        this.hiddenInput = true;
+        /**
+         * The ID for the input.
+         */
+        this.inputId = `ic-text-field-input-${inputIds++}`;
+        /**
+         * A hint to the browser for which keyboard to display.
+         * Possible values: `"none"`, `"text"`, `"tel"`, `"url"`,
+         * `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
+         */
+        this.inputmode = "text";
+        /**
+         * The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)
+         */
+        this.maxCharacters = 0;
+        /**
+         * The text to display as the warning message when the maximum number of characters (the `maxCharacters` prop value) is reached.
+         */
+        // prettier-ignore
+        this.maxCharactersMessage = `Maximum input is ${this.maxCharacters} characters`;
+        /**
+         * The text to display as the error message when the maximum value (the `max` prop value) has been exceeded.
+         */
+        this.maxMessage = `Maximum value of ${this.max} exceeded`;
+        /**
+         * The minimum number of characters that can be entered in the field.
+         */
+        this.minCharacters = 0;
+        /**
+         * The text to display as the error message when the minimum number of characters (the `minCharacters` prop value) has not been met.
+         */
+        // prettier-ignore
+        this.minCharactersMessage = `Minimum input is ${this.minCharacters} characters`;
+        /**
+         * The text to display as the error message when the minimum value (the `min` prop value) has not been met.
+         */
+        this.minMessage = `Minimum value of ${this.min} not met`;
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * The placeholder value to be displayed.
+         */
+        this.placeholder = "";
+        /**
+         * If `true`, the read only state will be set.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the input will require a value.
+         */
+        this.required = false;
+        /**
+         * If `true`, the multiline text area will be resizeable.
+         */
+        this.resize = false;
+        /**
+         * The number of rows to transform the text field into a text area with a specific height.
+         */
+        this.rows = 1;
+        /**
+         * The size of the text field component.
+         */
+        this.size = "medium";
+        /**
+         * If `true`, the value of the text field will have its spelling and grammar checked.
+         */
+        this.spellcheck = false;
+        /**
+         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        this.theme = "inherit";
+        /**
+         * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.
+         */
+        this.truncateValue = false;
+        /**
+         * The type of control to display. The default type is text.
+         */
+        this.type = "text";
+        /**
+         * The value of the `aria-live` attribute on the validation message. When set to "default", the `aria-live` value will be handled automatically, e.g. "assertive" for `validation-status="error"`.
+         */
+        this.validationAriaLive = "default";
+        /**
+         * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.
+         */
+        this.validationInline = false;
+        /**
+         *  @internal If `true`, the validation will display inline.
+         */
+        this.validationInlineInternal = false;
+        /**
+         * The validation state - e.g. 'error' | 'warning' | 'success'.
+         */
+        this.validationStatus = "";
+        /**
+         * The text to display as the validation message.
+         */
+        this.validationText = "";
+        /**
+         * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+         */
+        this.debounce = 0;
+        /**
+         * The value of the text field.
+         */
+        this.value = "";
+        this.initialValue = this.value;
+        this.checkChildHydration = () => {
+            var _a, _b;
+            if (this.hideLabel ||
+                ((_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-typography")) === null || _b === void 0 ? void 0 : _b.classList.contains("hydrated"))) {
+                this.setFocus();
+                clearInterval(this.interval);
+            }
+        };
+        this.getNumberOfCharacters = (value) => value !== null && value !== undefined ? value.length : 0;
+        this.getMaxValueExceeded = (value) => {
+            this.numChars = this.getNumberOfCharacters(value);
+            if (this.type === "number") {
+                this.minValueUnattained = !!value && Number(value) < Number(this.min);
+                this.maxValueExceeded = Number(value) > Number(this.max);
+            }
+        };
+        this.getMaxCharactersReached = (value) => {
+            this.numChars = this.getNumberOfCharacters(value);
+            this.maxCharactersReached =
+                this.maxCharacters > 0 && this.numChars >= this.maxCharacters;
+            if (this.maxCharactersWarning && !this.maxCharactersReached) {
+                this.maxCharactersWarning = false;
+            }
+        };
+        this.onInput = (ev) => {
+            this.value = ev.target.value;
+            this.icInput.emit({ value: this.value });
+        };
+        this.onBlur = (ev) => {
+            const target = ev.target;
+            target.removeEventListener("wheel", this.onWheel);
+            const { value } = target;
+            this.numChars = value.length;
+            this.minCharactersUnattained =
+                this.minCharacters > 0 && this.numChars < this.minCharacters;
+            this.icBlur.emit({ value });
+            this.isFocussed = false;
+        };
+        this.onFocus = (ev) => {
+            const target = ev.target;
+            target.addEventListener("wheel", this.onWheel);
+            this.icFocus.emit({ value: target.value });
+            this.isFocussed = true;
+        };
+        this.onTextAreaScroll = () => {
+            this.icScroll.emit();
+        };
+        this.onWheel = (ev) => {
+            const target = ev.target;
+            if (target.type === "number") {
+                target.blur();
+                setTimeout(() => {
+                    target.focus();
+                }, 0);
+            }
+        };
+        this.hasStatus = (status) => status !== "" && !this.disabled;
+        this.handleFormReset = () => {
+            this.value = this.initialValue;
+        };
+        this.showValidationMargin = () => {
+            const maxNumChars = this.readonly ? 0 : this.maxCharacters;
+            const emptyString = isEmptyString(this.validationStatus) ||
+                isEmptyString(this.validationText);
+            const valueOutsideRange = this.minValueUnattained || this.maxValueExceeded;
+            const charsOutsideRange = maxNumChars > 0 || this.minCharactersUnattained;
+            return ((!emptyString || valueOutsideRange || charsOutsideRange) &&
+                !this.validationInlineInternal);
+        };
+        // triggered when attributes of host element change
+        this.hostMutationCallback = (mutationList) => {
+            let forceComponentUpdate = false;
+            mutationList.forEach(({ attributeName, type, addedNodes, removedNodes }) => {
+                if (attributeName && MUTABLE_ATTRIBUTES.includes(attributeName)) {
+                    const attribute = this.el.getAttribute(attributeName);
+                    if (attribute) {
+                        this.inheritedAttributes[attributeName] = attribute;
+                    }
+                    forceComponentUpdate = true;
+                }
+                else if (type === "childList") {
+                    forceComponentUpdate = checkSlotInChildMutations(addedNodes, removedNodes, "icon");
+                }
+            });
+            if (forceComponentUpdate) {
+                forceUpdate(this);
+            }
+        };
+    }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    debounceChanged() {
+        this.icChange = debounceEvent(this.icChange, this.debounce);
+    }
+    watchValueHandler(newValue) {
+        let value;
+        if (this.maxCharacters > 0) {
+            value = newValue.substring(0, this.maxCharacters);
+            if (value.length < newValue.length) {
+                this.maxCharactersWarning = true;
+            }
+            this.value = value;
+        }
+        else {
+            value = newValue;
+        }
+        if (this.inputEl && this.inputEl.value !== value) {
+            this.inputEl.value = value;
+        }
+        this.getMaxValueExceeded(value);
+        this.getMaxCharactersReached(value);
+        this.icChange.emit({ value });
+    }
+    connectedCallback() {
+        this.debounceChanged();
+    }
+    disconnectedCallback() {
+        var _a;
+        removeFormResetListener(this.el, this.handleFormReset);
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    componentWillLoad() {
+        if (this.value !== this.initialValue) {
+            this.watchValueHandler(this.value);
+        }
+        else if (this.maxCharacters > 0) {
+            this.value = this.value.substring(0, this.maxCharacters);
+        }
+        this.getMaxValueExceeded(this.value);
+        this.getMaxCharactersReached(this.value);
+        this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);
+        if (this.readonly) {
+            this.maxValueExceeded = false;
+            this.minValueUnattained = false;
+        }
+        addFormResetListener(this.el, this.handleFormReset);
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    componentDidLoad() {
+        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Text Field");
+        if (this.validationInlineInternal) {
+            this.getValidationText.emit({ value: this.validationText });
+        }
+        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
+        this.hostMutationObserver.observe(this.el, {
+            attributes: true,
+            childList: true,
+        });
+        if (this.autofocus && !this.disabled && !this.readonly) {
+            this.interval = setInterval(this.checkChildHydration, 50);
+        }
+    }
+    handleKeyDown(ev) {
+        var _a, _b;
+        this.icKeydown.emit({
+            event: ev,
+            cursorPosition: (_a = this.inputEl.selectionStart) !== null && _a !== void 0 ? _a : 0,
+            selectionEnd: (_b = this.inputEl.selectionEnd) !== null && _b !== void 0 ? _b : 0,
+        });
+        if (!ev.ctrlKey && !IGNORED_KEYBOARD_CHARACTERS.includes(ev.key)) {
+            this.maxCharactersWarning = this.maxCharactersReached;
+        }
+    }
+    /**
+     * Sets focus on the native `input`.
+     */
+    async setFocus() {
+        var _a;
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        const { inputId, name, label, required, size, placeholder, helperText, hideCharCount, rows, resize, disabled, value, min, max, numChars, readonly, maxCharacters, maxCharactersMessage, maxCharactersWarning, maxCharactersReached, maxMessage, minCharacters, minCharactersMessage, minCharactersUnattained, minMessage, minValueUnattained, maxValueExceeded, validationAriaLive, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, theme, hideLabel, type, autocapitalize, ariaActiveDescendant, inheritedAttributes, ariaExpanded, ariaOwns, autocomplete, role, isFocussed, } = this;
+        const el = this.el;
+        const disabledMode = readonly || disabled;
+        const currentStatus = maxValueExceeded ||
+            minValueUnattained ||
+            minCharactersUnattained ||
+            maxCharactersWarning
+            ? maxCharactersWarning
+                ? IcInformationStatus.Warning
+                : IcInformationStatus.Error
+            : validationStatus;
+        const currentValidationText = maxCharactersWarning
+            ? maxCharactersMessage
+            : maxValueExceeded
+                ? maxMessage
+                : minValueUnattained
+                    ? minMessage
+                    : minCharactersUnattained
+                        ? minCharactersMessage
+                        : validationText;
+        const maxNumChars = readonly ? 0 : maxCharacters;
+        const messageAriaLive = validationAriaLive === "default"
+            ? maxCharactersWarning ||
+                maxValueExceeded ||
+                minValueUnattained ||
+                currentStatus === IcInformationStatus.Error
+                ? "assertive"
+                : "polite"
+            : validationAriaLive;
+        const showStatusText = this.hasStatus(currentStatus) &&
+            !(currentStatus == IcInformationStatus.Success && validationInline) &&
+            !validationInlineInternal;
+        const multiline = rows > 1;
+        const hiddenCharCountDescId = maxCharacters > 0 ? `${inputId}-char-count-desc` : "";
+        const charsRemaining = maxNumChars - numChars;
+        const remainingCharCountDescId = maxCharacters > 0 ? `${inputId}-remaining-char-count-desc` : "";
+        const remainingCharCountDesc = `${charsRemaining} character${charsRemaining === 1 ? "" : "s"} remaining.`;
+        const describedBy = `${getInputDescribedByText(this.el, inputId, helperText !== "", showStatusText)} ${hiddenCharCountDescId} ${numChars > 0 ? remainingCharCountDescId : ""}`.trim();
+        const disabledText = disabledMode && !readonly;
+        const showLeftIcon = !!this.el.querySelector(`[slot="icon"]`) && !disabledText;
+        const invalid = `${currentStatus === IcInformationStatus.Error}`;
+        hiddenInput
+            ? renderHiddenInput(this.el, value, name, disabledMode)
+            : removeHiddenInput(this.el);
+        return (h(Host, { key: '6300558c65d21c3cf9fcb2af66774cbdf274cf89', class: {
+                "ic-text-field-full-width": fullWidth,
+                "ic-text-field-disabled": disabledMode,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, h("ic-input-container", { key: '6f0d1a6cf4ed01bd98c3b69d37f6ffb473e1201e', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '71cc64b0733fbe16b21f389000c8a6813ad9f07f', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: '985b82195b09acc991bbed6c0be5210cba70f59e', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '95df2f453e06c5dec6788e98db94e5e4ce129d04', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: '62a052203a6b9e35858e7103f505bdf38eda7349', class: {
+                readonly,
+                "has-value": this.getNumberOfCharacters(value) > 0,
+            }, slot: "left-icon" }, h("slot", { key: '12ee0976840d954f7f855740db4098983ccf73a5', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
+                "no-left-pad": !showLeftIcon && readonly,
+                readonly,
+                "truncate-value": truncateValue,
+            }, placeholder: placeholder ? placeholder : "", required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": ariaExpanded, "aria-owns": ariaOwns, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, role: role || undefined, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))) : (h("textarea", Object.assign({ id: inputId, class: {
+                "no-resize": resize === false || !!readonly,
+                "no-left-pad": !showLeftIcon && !!readonly,
+                readonly: !!readonly,
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '4bd5b1b44a9fded9be98c35d3e49f357b99adf26', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: 'fccd3ae4e454d661540f45b748440aa8c9c28baf', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'aca9fabb2b029547a713e75be81c179e3c1e3b52', name: "menu" }), h("ic-input-validation", { key: '1d2443ab140751bd21f247f5136254498ffc8004', class: { "show-validation": this.showValidationMargin() }, status: this.hasStatus(currentStatus) === false ||
+                (currentStatus === IcInformationStatus.Success &&
+                    validationInline) ||
+                validationInlineInternal
+                ? ""
+                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, isSlotUsed(el, "validation-text") && (h("slot", { key: 'e8f5abdc72b047998c5164ec7bef70eab2d7af81', name: "validation-text", slot: "validation-message" })), !readonly && maxNumChars > 0 && (h("div", { key: '9458320139c6c17b4db3f40ef91ed8f35667e612', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '26663bbc0dbc1e5183cfb4af5b2f9a244fa303c5', variant: "caption", class: "char-count-text" }, h("span", { key: '84a9de3338f2fee09b3712fcc56dd509bbc672e2', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: 'cb1d19f9755ea5b393e03ab19da262c67ce6e19e', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: '87cfdac09956c5e749ff4c06bb58228d2d40feb5', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
+        "debounce": ["debounceChanged"],
+        "value": ["watchValueHandler"]
+    }; }
+};
+TextField.style = IcTextFieldStyle0;
+
+export { Pagination as ic_pagination, Select as ic_select, TextField as ic_text_field };
+
+//# sourceMappingURL=ic-pagination_3.entry.js.map