@ukic/canary-web-components 3.0.0-canary.34 → 3.0.0-canary.35

package/dist/cjs/ic-pagination_4.cjs.entry.js

@@ -1,1647 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-d337cd8a.js');
-const helpers = require('./helpers-2cc5f6db.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) {
-        index.registerInstance(this, hostRef);
-        this.icPageChange = index.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 (index.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 (index.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 (index.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 (index.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 (index.h("ic-pagination-item", { theme: this.theme, monochrome: this.monochrome, type: "ellipsis", id: "start-ellipsis", disabled: this.disabled }));
-        };
-        this.renderEndEllipsis = () => {
-            return (index.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 (index.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 (index.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 (index.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() {
-        helpers.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();
-        helpers.removeDisabledFalse(this.disabled, this.el);
-    }
-    componentDidLoad() {
-        helpers.onComponentRequiredPropUndefined([{ prop: this.pages, propName: "pages" }], "Pagination");
-    }
-    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 (index.h(index.Host, { key: '206014fa2aa2c61bb9535e4de4fa5bf756bd318c', class: {
-                [`ic-theme-${theme}`]: theme !== "inherit",
-                ["ic-pagination-monochrome"]: !!monochrome,
-            } }, type === "simple" && (index.h("nav", { key: '8544b88d593c806867e0bd49cb0624a684dec271', class: {
-                ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), index.h("ic-pagination-item", { key: '5331aca30709281171cf19f17c2f05a0d0cdf168', 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" && (index.h("nav", { key: '6b7acef9da08b590b941a7ce142ce448dbf79ff2', 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" && (index.h("span", { key: 'e60f3fb36b78e7970f14836295efbd3a1f481885', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "adjacentPageCount": ["watchAdjacentPageCountHandler"],
-        "boundaryPageCount": ["watchBoundaryPageCountHandler"],
-        "disabled": ["watchDisabledHandler"],
-        "pages": ["watchNumberPagesHandler"],
-        "type": ["watchTypeHandler"],
-        "currentPage": ["watchPageChangeHandler"]
-    }; }
-};
-Pagination.style = IcPaginationStyle0;
-
-const icPaginationItemCss = "/*! 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}a{text-align:center}.item-container{display:flex;justify-content:center;align-items:center;width:calc(var(--ic-space-xl) + var(--ic-space-sm));height:var(--ic-space-xl);margin:var(--ic-space-xxs) var(--ic-space-xxxs);cursor:pointer;text-decoration:none}button{background:none;border:none;outline:inherit;position:relative}.ellipsis{pointer-events:none;--ic-typography-color:var(--ic-pagination-ellipsis)}.monochrome .ellipsis{--ic-typography-color:var(--ic-pagination-ellipsis-monochrome)}.item-container:focus{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.page{--ic-typography-color:var(--ic-pagination-page-number)}.monochrome .page{--ic-typography-color:var(--ic-pagination-page-number-monochrome)}.simple-current{min-width:calc(var(--ic-space-xxl) + var(--ic-space-md));height:var(--ic-space-lg);cursor:default}.item-container.page:hover:not(.selected):not(:focus){border-radius:var(--ic-border-radius);background-color:var(--ic-pagination-hover)}.item-container.page:active:not(.selected):not(:focus){background-color:var(--ic-pagination-pressed)}.monochrome .item-container.page:hover:not(.selected):not(:focus){background-color:var(--ic-pagination-hover-monochrome)}.monochrome .item-container.page:active:not(.selected):not(:focus){background-color:var(--ic-pagination-pressed-monochrome)}.selected{pointer-events:none;outline:none}.selected::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-pagination-selected-banner)}.monochrome .selected::after{background-color:var(--ic-pagination-selected-banner-monochrome)}.page-selected{--ic-typography-color:var(--ic-pagination-text)}.item-container.page.light:hover:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-hover)}.item-container.page.light:active:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-pressed)}ic-typography.light,ic-typography.page-selected.light{--ic-typography-color:var(--ic-architectural-white)}.selected.light::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-monochrome)}.item-container.page.dark:hover:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-hover)}.item-container.page.dark:active:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-pressed)}ic-typography.dark{--ic-typography-color:var(--ic-color-text-primary)}.selected.dark::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-monochrome-dark)}.disabled{--ic-typography-color:var(--ic-pagination-text-disabled);pointer-events:none;cursor:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.disabled.page ic-typography{--ic-typography-color:var(--ic-pagination-page-number-disabled)}.disabled.ellipsis{--ic-typography-color:var(--ic-pagination-ellipsis-disabled)}.monochrome .disabled.page{--ic-typography-color:var(--ic-pagination-page-number-monochrome-disabled)}.monochrome .disabled.ellipsis{--ic-typography-color:var(--ic-pagination-ellipsis-monochrome-disabled)}@media (forced-colors: active){.selected::after{background-color:Highlight}.selected.light::after{background-color:Highlight}.selected.dark::after{background-color:Highlight}.disabled{--ic-typography-color:GrayText}}";
-const IcPaginationItemStyle0 = icPaginationItemCss;
-
-const PaginationItem = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.paginationItemClick = index.createEvent(this, "paginationItemClick", 7);
-        /**
-         * If `true`, the pagination item will be disabled.
-         */
-        this.disabled = false;
-        /**
-         * The label for the pagination item (applicable when simple pagination is being used).
-         */
-        this.label = "Page";
-        /**
-         * If `true`, the pagination item will display as black in the light theme, and white in dark theme.
-         */
-        this.monochrome = false;
-        /**
-         * If `true`, the pagination item will be selected.
-         */
-        this.selected = 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";
-        this.handleClick = () => {
-            this.paginationItemClick.emit({ page: this.page || null });
-        };
-    }
-    watchDisabledHandler() {
-        helpers.removeDisabledFalse(this.disabled, this.el);
-    }
-    watchLabelHandler() {
-        this.capitalizedLabel = helpers.capitalize(this.label);
-    }
-    componentWillLoad() {
-        this.watchLabelHandler();
-        helpers.removeDisabledFalse(this.disabled, this.el);
-    }
-    render() {
-        const { page, selected, type, disabled, label, capitalizedLabel, monochrome, } = this;
-        return (index.h("a", { key: 'c067a0e35e2a92dff8d7f24d135a06a686d74a7d', class: { ["monochrome"]: !!monochrome } }, type === "ellipsis" ? (index.h("div", { class: {
-                ["item-container"]: true,
-                ["ellipsis"]: true,
-                ["disabled"]: !!disabled,
-            } }, index.h("ic-typography", { variant: "label" }, "..."))) : type === "page" ? (index.h("button", { disabled: disabled, onClick: this.handleClick, tabindex: selected ? "-1" : "0", role: "button", "aria-current": selected && "page", "aria-label": selected ? `${label}: ${page}` : `Go to ${label} ${page}`, class: {
-                ["selected"]: !disabled && selected,
-                ["disabled"]: !!disabled,
-                ["item-container"]: true,
-                ["page"]: type === "page",
-            } }, index.h("ic-typography", { variant: "label", class: {
-                ["page-selected"]: selected,
-                ["disabled"]: !!disabled,
-            } }, page))) : (index.h("ic-typography", { "aria-live": "polite", class: {
-                [`simple-current`]: true,
-                ["disabled"]: !!disabled,
-            }, variant: "label" }, capitalizedLabel, " ", page))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "disabled": ["watchDisabledHandler"],
-        "label": ["watchLabelHandler"]
-    }; }
-};
-PaginationItem.style = IcPaginationItemStyle0;
-
-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}.searchable-select-results-status,.multi-select-selected-count{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}}";
-const IcSelectStyle0 = icSelectCss;
-
-let inputIds$1 = 0;
-const MUTABLE_ATTRIBUTES$1 = [...helpers.IC_INHERITED_ARIA, "tabindex", "title"];
-const Select = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.icBlur = index.createEvent(this, "icBlur", 7);
-        this.icChange = index.createEvent(this, "icChange", 7);
-        this.icClear = index.createEvent(this, "icClear", 7);
-        this.icClose = index.createEvent(this, "icClose", 7);
-        this.icFocus = index.createEvent(this, "icFocus", 7);
-        this.icInput = index.createEvent(this, "icInput", 7);
-        this.icOpen = index.createEvent(this, "icOpen", 7);
-        this.icOptionSelect = index.createEvent(this, "icOptionSelect", 7);
-        this.icOptionDeselect = index.createEvent(this, "icOptionDeselect", 7);
-        this.icRetryLoad = index.createEvent(this, "icRetryLoad", 7);
-        this.blurredBecauseButtonPressed = false;
-        this.hasSetDefaultValue = false;
-        this.hasTimedOut = false;
-        this.inheritedAttributes = {};
-        this.initialOptionsEmpty = false;
-        this.inputId = `ic-select-input-${inputIds$1++}`;
-        this.menuId = `${this.inputId}-menu`;
-        this.retryButtonClick = false;
-        this.searchableMenuItemSelected = false;
-        this.ungroupedOptions = [];
-        this.hostMutationObserver = null;
-        this.clearButtonFocused = false;
-        this.noOptions = null;
-        this.open = false;
-        this.pressedCharacters = "";
-        this.searchableSelectInputValue = null;
-        /**
-         * 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`, the loading state will be triggered when fetching options asynchronously.
-         */
-        this.loading = false;
-        /**
-         * The possible selection options.
-         */
-        this.options = [];
-        this.filteredOptions = this.options;
-        this.uniqueOptions = this.options;
-        /**
-         * 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.inputValueToFilter = this.value;
-        // triggered when attributes of host element change
-        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 = helpers.checkSlotInChildMutations(addedNodes, removedNodes, "icon");
-                }
-            });
-            if (forceComponentUpdate) {
-                index.forceUpdate(this);
-            }
-        };
-        this.handleRetry = (ev) => {
-            var _a;
-            if (ev.detail.keyPressed)
-                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
-            this.blurredBecauseButtonPressed = true;
-            this.retryButtonClick = true;
-            this.hasSetDefaultValue = true;
-            this.icRetryLoad.emit({
-                value: this.searchable
-                    ? this.searchableSelectInputValue
-                    : this.hiddenInputValue,
-            });
-        };
-        this.emitIcChange = (value) => {
-            // If "Select all" button clicked, replace value with new value (array of all option values)
-            if (this.multiple && !Array.isArray(value) && value !== null) {
-                // Update selected options - adds / removes them, in order of option list
-                // Create new array if value prop is undefined
-                if (this.value) {
-                    let valueArray = this.value.slice();
-                    if (this.value.includes(value)) {
-                        valueArray.splice(valueArray.indexOf(value), 1);
-                    }
-                    else {
-                        valueArray.push(value);
-                        valueArray = this.getValueSortedByOptions(valueArray);
-                    }
-                    this.value = valueArray.length === 0 ? null : valueArray;
-                }
-                else {
-                    this.value = [value];
-                }
-            }
-            else {
-                this.value = value;
-            }
-            this.icChange.emit({ value: this.multiple ? this.value : value });
-        };
-        this.emitIcInput = (value) => {
-            clearTimeout(this.debounceIcInput);
-            this.debounceIcInput = window.setTimeout(() => this.icInput.emit({ value }), this.currDebounce);
-        };
-        this.setOptions = () => {
-            if (!this.hasTimedOut && this.options !== this.noOptions) {
-                this.loading = false;
-                clearTimeout(this.timeoutTimer);
-                if (this.options.length > 0) {
-                    this.setOptionsValuesFromLabels();
-                    this.uniqueOptions = this.deduplicateOptions(this.options);
-                }
-                else {
-                    this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
-                    this.uniqueOptions = this.noOptions;
-                }
-                this.filteredOptions = this.uniqueOptions;
-                if (this.isExternalFiltering()) {
-                    // When searchable select
-                    this.noOptions = null;
-                    this.updateSearchableSelectResultAriaLive();
-                    this.setDefaultValue();
-                }
-                else if (this.initialOptionsEmpty) {
-                    this.setDefaultValue();
-                    this.initialOptionsEmpty = false;
-                }
-            }
-            else if (!this.searchable) {
-                this.options = this.noOptions || [];
-            }
-        };
-        /**
-         * Processes the provided array of IcMenuOptions, removing duplicates and reporting them with a console.warn
-         * @param options array of IcMenuOptions
-         * @returns a new options object, with all entries possessing a duplicate 'value' field removed
-         */
-        this.deduplicateOptions = (options) => {
-            const uniqueValues = [];
-            const dedupedOptions = [];
-            options.forEach((option) => {
-                if (option.children) {
-                    //If an option has children, we will loop through them
-                    const dedupedChildren = [];
-                    option.children.forEach((child) => {
-                        if (uniqueValues.includes(child.value)) {
-                            console.warn(`ic-select with label ${this.label} was populated with duplicate option (value: ${child.value}) which has been removed.`);
-                        }
-                        else {
-                            uniqueValues.push(child.value);
-                            dedupedChildren.push(child);
-                        }
-                    });
-                    // construct a modified option, inserting the deduplicated children alongside the original information
-                    dedupedOptions.push(Object.assign(Object.assign({}, option), { children: dedupedChildren }));
-                }
-                else {
-                    // If an option does not have children, assess to see if it's value has been included already
-                    if (uniqueValues.includes(option.value)) {
-                        console.warn(`ic-select with label ${this.label} was populated with duplicate option (value: ${option.value}) which has been removed.`);
-                    }
-                    else {
-                        uniqueValues.push(option.value);
-                        dedupedOptions.push(option);
-                    }
-                }
-            });
-            return dedupedOptions;
-        };
-        /**
-         * Loop through options array and for all options with no value, infer it from the label
-         */
-        this.setOptionsValuesFromLabels = () => {
-            if (this.options.length > 0) {
-                this.options.map((option) => {
-                    if (!option.value) {
-                        option.value = option.label;
-                    }
-                });
-            }
-        };
-        this.setUngroupedOptions = (event) => {
-            this.ungroupedOptions = event.detail.options;
-        };
-        this.setTextColor = () => {
-            if (this.nativeSelectElement) {
-                this.nativeSelectElement.className =
-                    this.nativeSelectElement.selectedIndex === 0
-                        ? "placeholder"
-                        : "select-option-selected";
-            }
-        };
-        this.setMenuChange = (open) => {
-            if (this.open !== open) {
-                this.open = open;
-            }
-        };
-        this.getLabelFromValue = (value) => helpers.getLabelFromValue(value, this.uniqueOptions);
-        this.getMultipleOptionsString = (selectedValues) => selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.map((value) => this.getLabelFromValue(value)).filter((label) => !!label).join(", ");
-        this.getFilteredChildMenuOptions = (option) => (Object.assign(Object.assign({}, option), { children: option.children &&
-                helpers.getFilteredMenuOptions(option.children, this.searchable && !!this.includeDescriptionsInSearch, this.searchable
-                    ? this.searchableSelectInputValue || ""
-                    : this.pressedCharacters, this.searchable ? this.searchMatchPosition : "start") }));
-        // (For multi-select) get value array, i.e. selected option values, in order they appear in option list
-        this.getValueSortedByOptions = (value) => {
-            const valueArray = value;
-            const valuesFromAllOptions = this.ungroupedOptions.map((option) => option.value);
-            valueArray.sort((a, b) => valuesFromAllOptions.indexOf(a) - valuesFromAllOptions.indexOf(b));
-            return valueArray;
-        };
-        this.handleNativeSelectChange = () => {
-            if (this.nativeSelectElement) {
-                this.icOptionSelect.emit({ value: this.nativeSelectElement.value });
-                this.emitIcChange(this.nativeSelectElement.value);
-            }
-            this.setTextColor();
-        };
-        // Handle option select for when a custom input box and menu is rendered
-        // (rather than native <select> - rendered when viewed on a mobile / tablet screen)
-        this.handleCustomSelectChange = (event) => {
-            var _a, _b;
-            const { value, label, optionId } = event.detail;
-            if (label === this.emptyOptionListText) {
-                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
-                return;
-            }
-            if (this.searchable) {
-                this.value = value || null;
-                this.searchableMenuItemSelected = true;
-                // After editing the input, if selecting the same option as before, set the input value to label again
-                if (this.value === this.currValue) {
-                    this.searchableSelectInputValue =
-                        this.getLabelFromValue(this.value) || null;
-                }
-                this.inputValueToFilter = null;
-                this.hiddenInputValue =
-                    this.getValueFromLabel(this.searchableSelectInputValue) || null;
-            }
-            if (value) {
-                if (this.multiple && ((_b = this.value) === null || _b === void 0 ? void 0 : _b.includes(value))) {
-                    this.icOptionDeselect.emit({ value });
-                }
-                else {
-                    this.icOptionSelect.emit({ value });
-                }
-            }
-            this.ariaActiveDescendant = optionId;
-            this.emitIcChange(value || null);
-        };
-        this.handleSelectAllChange = ({ detail, }) => {
-            const allValues = this.ungroupedOptions
-                .filter((option) => !option.disabled)
-                .map((option) => option.value);
-            if (detail.select) {
-                // Only emit icOptionSelect for all values that are newly selected
-                const unselectedValues = this.value
-                    ? allValues.filter((value) => this.value && !this.value.includes(value))
-                    : allValues;
-                unselectedValues.forEach((value) => this.icOptionSelect.emit({ value }));
-            }
-            else {
-                // Only emit icOptionDeselect for values that were selected
-                this.value.forEach((value) => this.icOptionDeselect.emit({ value }));
-            }
-            this.emitIcChange(detail.select ? allValues : null);
-        };
-        this.handleMenuChange = (event) => {
-            this.open = event.detail.open;
-            this.pressedCharacters = "";
-            if (this.searchable)
-                this.handleFocusIndicatorDisplay();
-        };
-        // clears the debounce delay when navigating the menu with arrow keys etc
-        // to prevent delay in change event, which should only occur when typing in input
-        this.handleMenuKeyPress = (ev) => {
-            ev.cancelBubble = true;
-            if (!this.multiple) {
-                this.handleCharacterKeyDown(ev.detail.key);
-            }
-        };
-        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.handleMouseDown = (event) => {
-            if (!this.open) {
-                event.preventDefault();
-            }
-        };
-        this.isExternalFiltering = () => this.searchable && !!this.disableAutoFiltering;
-        this.handleClick = (event) => {
-            var _a, _b;
-            if (!this.open && this.menu) {
-                if (this.isExternalFiltering()) {
-                    this.menu.options = this.filteredOptions;
-                }
-                else if (!this.hasTimedOut &&
-                    !this.loading &&
-                    !((_a = this.noOptions) === null || _a === void 0 ? void 0 : _a.length) &&
-                    (!this.searchable || this.searchableMenuItemSelected)) {
-                    this.noOptions = null;
-                    this.menu.options = this.uniqueOptions;
-                }
-            }
-            if (event.detail !== 0) {
-                (_b = this.menu) === null || _b === void 0 ? void 0 : _b.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.handleClear = (event) => {
-            var _a, _b;
-            event.stopPropagation();
-            this.hasTimedOut = false;
-            clearTimeout(this.timeoutTimer);
-            this.clearInput();
-            this.emitIcChange(null);
-            this.icClear.emit();
-            if (this.searchable) {
-                this.hiddenInputValue = null;
-                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            else {
-                (_b = this.customSelectElement) === null || _b === void 0 ? void 0 : _b.focus();
-            }
-        };
-        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.setMenuChange(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;
-                this.handleFilter();
-                if (!this.noOptions) {
-                    this.emitIcChange(this.filteredOptions[0].value);
-                }
-            }
-        };
-        this.handleNativeSelectKeyDown = (event) => {
-            if ((event.key !== "Escape" && event.key !== "Tab") || this.open) {
-                event.cancelBubble = true;
-            }
-            this.handleCharacterKeyDown(event.key);
-        };
-        this.handleKeyDown = (event) => {
-            var _a;
-            if ((event.key !== "Escape" && event.key !== "Tab") || this.open) {
-                event.cancelBubble = true;
-            }
-            const isArrowKey = event.key === "ArrowDown" || event.key === "ArrowUp";
-            if (this.menu && !this.open) {
-                if (this.isExternalFiltering() && (event.key === "Enter" || isArrowKey)) {
-                    this.menu.options = this.filteredOptions;
-                }
-                else if (!this.hasTimedOut) {
-                    this.noOptions = null;
-                    this.menu.options = this.uniqueOptions;
-                }
-            }
-            if (this.open && event.key === "Enter") {
-                this.setMenuChange(false);
-            }
-            else {
-                if (!isArrowKey || this.noOptions === null) {
-                    if (event.key !== " " || this.pressedCharacters.length <= 0) {
-                        // Keyboard events get passed onto ic-menu except in the case of ctrl-a on a searchable select
-                        const isCtrlA = event.key === "a" &&
-                            ((helpers.isMacDevice() && event.metaKey) ||
-                                (!helpers.isMacDevice() && event.ctrlKey));
-                        if (!(this.searchable && isCtrlA)) {
-                            (_a = this.menu) === null || _a === void 0 ? void 0 : _a.handleKeyboardOpen(event);
-                        }
-                    }
-                    if (!this.multiple) {
-                        this.handleCharacterKeyDown(event.key);
-                    }
-                }
-            }
-        };
-        this.handleClearButtonFocus = () => {
-            this.clearButtonFocused = true;
-        };
-        this.handleClearButtonBlur = (ev) => {
-            var _a;
-            const retryButton = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector("#retry-button");
-            if ((!this.searchableSelectElement ||
-                ev.relatedTarget !== this.searchableSelectElement) &&
-                (!retryButton || ev.relatedTarget !== retryButton)) {
-                this.setMenuChange(false);
-                this.handleFocusIndicatorDisplay();
-            }
-            this.clearButtonFocused = false;
-        };
-        this.handleFilter = () => {
-            var _a;
-            const options = this.deduplicateOptions(this.searchable ? [...this.uniqueOptions] : this.ungroupedOptions);
-            const isGrouped = options.some((option) => !!option.children);
-            let newFilteredOptions = [];
-            let menuOptionsFiltered;
-            if (this.searchable) {
-                menuOptionsFiltered = helpers.getFilteredMenuOptions(options, !!this.includeDescriptionsInSearch, this.inputValueToFilter || "", this.searchMatchPosition);
-                this.searchableMenuItemSelected = false;
-            }
-            else {
-                menuOptionsFiltered = helpers.getFilteredMenuOptions(options, false, this.pressedCharacters, "start");
-            }
-            if (!isGrouped &&
-                ((_a = menuOptionsFiltered[0]) === null || _a === void 0 ? void 0 : _a.label) !== this.emptyOptionListText) {
-                newFilteredOptions = menuOptionsFiltered;
-            }
-            else if (isGrouped) {
-                newFilteredOptions = options.map((option) => this.includeGroupTitlesInSearch &&
-                    menuOptionsFiltered.indexOf(option) !== -1
-                    ? option
-                    : this.getFilteredChildMenuOptions(option));
-            }
-            if (newFilteredOptions.length > 0 &&
-                (!isGrouped ||
-                    newFilteredOptions.some(({ children }) => children && children.length > 0))) {
-                this.noOptions = null;
-                this.filteredOptions = newFilteredOptions;
-            }
-            else {
-                this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
-                this.filteredOptions = this.noOptions;
-            }
-        };
-        /**
-         * Put the select component into loading state.
-         * Replace options with the loading message. If timeout is enabled, set the timeout and once passed, replace options with the loading error message
-         */
-        this.triggerLoading = () => {
-            this.hasTimedOut = false;
-            this.noOptions = [{ label: this.loadingLabel, value: "", loading: true }];
-            if (this.filteredOptions !== this.noOptions && this.searchable) {
-                this.filteredOptions = this.noOptions;
-            }
-            else if (this.uniqueOptions !== this.noOptions && !this.searchable) {
-                this.uniqueOptions = this.noOptions;
-            }
-            if (this.timeout) {
-                this.timeoutTimer = window.setTimeout(() => {
-                    this.loading = false;
-                    this.hasTimedOut = true;
-                    this.noOptions = [
-                        { label: this.loadingErrorLabel, value: "", timedOut: true },
-                    ];
-                    this.filteredOptions = this.noOptions;
-                    if (!this.searchable)
-                        this.uniqueOptions = this.noOptions;
-                }, this.timeout);
-            }
-        };
-        this.getValueFromLabel = (label) => { var _a; return label && ((_a = this.uniqueOptions.find((option) => option.label === label)) === null || _a === void 0 ? void 0 : _a.value); };
-        this.handleSearchableSelectInput = (event) => {
-            this.searchableSelectInputValue = event.target.value;
-            this.emitIcInput(this.searchableSelectInputValue);
-            // De-select previous selection when input is edited
-            // Only emit icChange once when editing input
-            if (this.value != null) {
-                this.emitIcChange(null);
-            }
-            this.hiddenInputValue = null;
-            this.inputValueToFilter = this.searchableSelectInputValue;
-            this.setMenuChange(true);
-            if (!this.disableAutoFiltering) {
-                this.handleFilter();
-                clearTimeout(this.debounceAria);
-                window.setTimeout(() => {
-                    this.updateSearchableSelectResultAriaLive();
-                }, 800);
-            }
-        };
-        this.updateSearchableSelectResultAriaLive = () => {
-            var _a;
-            const searchableSelectResultsStatusEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".searchable-select-results-status");
-            if (searchableSelectResultsStatusEl) {
-                searchableSelectResultsStatusEl.innerText =
-                    this.noOptions !== null ? this.emptyOptionListText : "";
-            }
-        };
-        this.updateMultiSelectedCountAriaLive = () => {
-            var _a, _b;
-            const multiSelectSelectedCountEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".multi-select-selected-count");
-            const selectedCount = `${(_b = this.currValue) === null || _b === void 0 ? void 0 : _b.length} of ${helpers.getOptionsWithoutGroupTitlesCount(this.options)} selected`;
-            if (multiSelectSelectedCountEl &&
-                multiSelectSelectedCountEl.innerText !== selectedCount) {
-                multiSelectSelectedCountEl.innerText = selectedCount;
-            }
-        };
-        this.getDefaultValue = (value) => this.getLabelFromValue(value) || null;
-        this.setDefaultValue = () => {
-            if (!this.hasSetDefaultValue && this.currValue) {
-                this.searchableSelectInputValue = this.searchable
-                    ? this.getDefaultValue(this.currValue)
-                    : null;
-                this.initialValue = this.currValue;
-                this.hasSetDefaultValue = true;
-            }
-        };
-        this.onFocus = () => {
-            this.icFocus.emit();
-        };
-        this.onBlur = ({ relatedTarget }) => {
-            var _a;
-            const target = relatedTarget;
-            if (target !== null &&
-                ((target.tagName === "UL" && target.className.includes("menu")) ||
-                    (target.tagName === "LI" && target.className.includes("option")))) {
-                return;
-            }
-            const retryButton = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector("#retry-button");
-            if (this.searchable &&
-                !!this.menu &&
-                target !== this.menu &&
-                !Array.from(this.menu.querySelectorAll("[role='option']")).includes(target) &&
-                (!this.clearButton || target !== this.clearButton) &&
-                (!retryButton || target !== retryButton)) {
-                if (!this.retryButtonClick) {
-                    this.setMenuChange(false);
-                    // Clear input field on blur when searchable if no option is selected
-                    if (!this.value) {
-                        this.clearInput();
-                    }
-                }
-                this.handleFocusIndicatorDisplay();
-            }
-            this.retryButtonClick = false;
-            this.icBlur.emit();
-        };
-        this.onTimeoutBlur = (ev) => {
-            if (ev.detail.ev.relatedTarget !==
-                this.searchableSelectElement &&
-                !this.blurredBecauseButtonPressed) {
-                this.setMenuChange(false);
-                this.handleFocusIndicatorDisplay();
-                this.icBlur.emit();
-            }
-            this.blurredBecauseButtonPressed = false;
-        };
-        this.handleFormReset = () => {
-            this.value = this.initialValue;
-            if (this.searchable) {
-                this.searchableSelectInputValue = this.getDefaultValue(this.value);
-                this.hiddenInputValue = this.value;
-            }
-        };
-        this.clearInput = () => {
-            var _a;
-            this.noOptions = null;
-            if (this.searchable) {
-                (_a = this.searchableSelectElement) === null || _a === void 0 ? void 0 : _a.setAttribute("value", "");
-                this.searchableSelectInputValue = null;
-                this.filteredOptions = this.uniqueOptions;
-            }
-        };
-        this.renderNativeOption = (option) => (index.h("option", { value: option.value, disabled: option.disabled, selected: option.value === this.currValue }, option.label));
-    }
-    watchDisabledHandler() {
-        helpers.removeDisabledFalse(this.disabled, this.el);
-    }
-    loadingHandler(newValue) {
-        newValue ? this.triggerLoading() : this.setOptions();
-    }
-    watchOptionsHandler() {
-        this.setOptions();
-    }
-    debounceChangedHandler(newValue) {
-        if (this.currDebounce !== newValue) {
-            this.currDebounce = newValue;
-        }
-    }
-    valueChangedHandler() {
-        if (this.value !== this.currValue) {
-            if (this.value && this.multiple) {
-                this.currValue = this.getMultipleOptionsString(this.value)
-                    ? this.getValueSortedByOptions(this.value)
-                    : null;
-                this.updateMultiSelectedCountAriaLive();
-            }
-            else {
-                this.currValue = this.getLabelFromValue(this.value)
-                    ? this.value
-                    : null;
-            }
-        }
-        if (this.searchable && this.value) {
-            // Only set if value not null - prevents whole input value being cleared when edited
-            this.searchableSelectInputValue =
-                this.getLabelFromValue(String(this.currValue)) || null;
-        }
-    }
-    openChangedHandler() {
-        this.open ? this.icOpen.emit() : this.icClose.emit();
-    }
-    disconnectedCallback() {
-        var _a;
-        helpers.removeFormResetListener(this.el, this.handleFormReset);
-        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    componentWillLoad() {
-        const valueInOptions = this.multiple
-            ? this.getMultipleOptionsString(this.value)
-            : this.getLabelFromValue(this.value);
-        this.currValue = valueInOptions ? this.value : null;
-        this.inheritedAttributes = helpers.inheritAttributes(this.el, MUTABLE_ATTRIBUTES$1);
-        helpers.removeDisabledFalse(this.disabled, this.el);
-        this.setOptionsValuesFromLabels();
-        helpers.addFormResetListener(this.el, this.handleFormReset);
-        if (!this.options.length) {
-            this.initialOptionsEmpty = true;
-            this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
-            this.uniqueOptions = this.noOptions;
-            this.filteredOptions = this.noOptions;
-        }
-        else {
-            this.setDefaultValue();
-            this.uniqueOptions = this.deduplicateOptions(this.options);
-        }
-    }
-    componentDidLoad() {
-        helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
-        if (this.loading) {
-            this.triggerLoading();
-        }
-        if (this.searchable) {
-            this.hiddenInputValue = this.currValue;
-        }
-        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
-        this.hostMutationObserver.observe(this.el, {
-            attributes: true,
-            childList: true,
-        });
-    }
-    componentDidRender() {
-        if (this.nativeSelectElement && !this.disabled) {
-            this.setTextColor();
-        }
-    }
-    /**
-     * Sets focus on the input box.
-     */
-    async setFocus() {
-        if (this.nativeSelectElement) {
-            this.nativeSelectElement.focus();
-        }
-        else if (this.customSelectElement) {
-            this.customSelectElement.focus();
-        }
-        else if (this.searchableSelectElement) {
-            this.searchableSelectElement.focus();
-        }
-    }
-    render() {
-        var _a, _b, _c, _d;
-        const { size, disabled, fullWidth, helperText, hideLabel, label, menuId, multiple, name, options, placeholder, readonly, required, searchable, showClearButton, validationAriaLive, validationStatus, validationText, currValue, theme, hiddenInputValue, open, inputId, searchableSelectInputValue, loading, value, emptyOptionListText, uniqueOptions, selectOnEnter, form, inheritedAttributes, ariaActiveDescendant, hasTimedOut, filteredOptions, clearButtonFocused, } = this;
-        // HTML inputs only accept 'string' for their value
-        // Does not cause errors when it is a multi-select - sets value correctly, to a comma-separated string
-        helpers.renderHiddenInput(this.el, searchable ? hiddenInputValue : currValue, name || inputId, disabled);
-        const invalid = `${validationStatus === helpers.IcInformationStatus.Error}`;
-        const showValidation = helpers.hasValidationStatus(validationStatus, !!disabled);
-        const describedBy = helpers.getInputDescribedByText(this.el, inputId, helperText !== "", showValidation).trim();
-        const valueLabelString = multiple
-            ? this.getMultipleOptionsString(currValue)
-            : this.getLabelFromValue(currValue);
-        const isClearable = !disabled &&
-            (searchable
-                ? !!searchableSelectInputValue
-                : !!currValue && !loading && showClearButton);
-        return (index.h(index.Host, { key: 'beb04e2fdc2db5765b24622f4d31bfdf36c61ba6', class: {
-                "ic-select-disabled": disabled,
-                "ic-select-searchable": searchable,
-                [`ic-select-${size}`]: size !== "medium",
-                "ic-select-full-width": fullWidth,
-                [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onBlur: this.onBlur }, index.h("ic-input-container", { key: 'e85323a8778251dca9d78ccc76906c7523a8f02a', readonly: readonly }, !hideLabel && (index.h("ic-input-label", { key: '9bd3a6662c29157c323beee7355ec0983a0a83e9', for: inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly }, index.h("slot", { key: 'ba0fc93028a2ff25112730a950381a25bee23b54', name: "helper-text", slot: "helper-text" }))), index.h("ic-input-component-container", { key: 'c7d54f4d61bcb41cfbb3c4af1600a783e696121f', ref: (el) => (this.anchorEl = el), class: { "menu-open": open }, size: size, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, helpers.isSlotUsed(this.el, "icon") &&
-            !disabled &&
-            (!readonly || !!value) && (index.h("span", { key: '891b11b3008d52ac3db2197c372b21a12a9f431e', slot: "left-icon", class: {
-                readonly,
-                "has-value": !!value,
-            } }, index.h("slot", { key: '9fc291a9f0b756bf31331260ea3c313cdecf8fa2', name: "icon" }))), readonly ? (index.h("ic-typography", null, index.h("p", null, valueLabelString))) : helpers.isMobileOrTablet() && !multiple ? (index.h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: form }, inheritedAttributes), index.h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => option.children ? (index.h("optgroup", { label: option.label }, option.children.map((child) => this.renderNativeOption(child)))) : (this.renderNativeOption(option))))) : searchable ? (index.h("div", { class: "searchable-select-container" }, index.h("input", { 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, "aria-required": `${required}`, "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: inputId, value: searchableSelectInputValue || undefined, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: form }), isClearable && (index.h("div", { class: "clear-button-container" }, index.h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": searchableSelectInputValue &&
-                (currValue === null || loading)
-                ? "Clear input"
-                : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }), index.h("div", { class: "divider" }))), index.h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
-                "expand-icon": true,
-                "expand-icon-open": open,
-            }, innerHTML: Expand, "aria-hidden": "true" }), index.h("div", { "aria-live": "polite", role: "status", class: "searchable-select-results-status" }))) : (index.h("div", { class: "select-container" }, index.h("button", { role: "combobox", class: "select-input", ref: (el) => (this.customSelectElement = el), id: inputId, "aria-label": `${label}, ${(multiple && currValue
-                ? `${currValue.length} of ${helpers.getOptionsWithoutGroupTitlesCount(options)} selected, ${valueLabelString}`
-                : valueLabelString) || placeholder}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": `${open}`, "aria-owns": menuId, "aria-controls": menuId, "aria-required": `${required}`, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.handleClick, onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown }, index.h("ic-typography", { variant: "body", class: {
-                "value-text": true,
-                "with-clear-button": isClearable,
-                placeholder: !loading && multiple
-                    ? !value || value.length < 1
-                    : !this.getLabelFromValue(currValue),
-            } }, valueLabelString || placeholder), index.h("div", { class: "select-input-end" }, isClearable && index.h("div", { class: "divider" }), index.h("span", { class: {
-                "expand-icon": true,
-                "expand-icon-open": open,
-            }, innerHTML: Expand, "aria-hidden": "true" }))), isClearable && (index.h("ic-button", { id: "clear-button", "aria-label": "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }))))), (!helpers.isMobileOrTablet() || multiple) && (index.h("ic-menu", { key: 'b56cf5adc26838ad0f873aa16df8da7fd7b83d22', class: {
-                "no-results": loading ||
-                    hasTimedOut ||
-                    (searchable &&
-                        ((_b = (_a = this.filteredOptions) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.label) === emptyOptionListText) ||
-                    (!searchable &&
-                        ((_d = (_c = this.uniqueOptions) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.label) === emptyOptionListText),
-            }, ref: (el) => (this.menu = el), inputEl: searchable
-                ? this.searchableSelectElement
-                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, size: size, menuId: menuId, open: open, options: searchable ? filteredOptions : uniqueOptions, value: multiple ? currValue : currValue, fullWidth: fullWidth, selectOnEnter: selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuOptionSelectAll: this.handleSelectAllChange, onMenuKeyPress: this.handleMenuKeyPress, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: searchable || multiple || selectOnEnter ? "manual" : "automatic", closeOnSelect: !multiple, multiSelect: multiple ? true : false, searchableSelect: searchable ? true : false })), multiple && (index.h("div", { key: 'c4e7606e119c8658e590716ff02dcaf45f30ae89', "aria-live": "polite", role: "status", class: "multi-select-selected-count" })), index.h("ic-input-validation", { key: 'b74ff136f8b758c400d9c0262a227f2286b301d5', class: {
-                "menu-open": open,
-            }, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "", for: inputId }))));
-    }
-    static get delegatesFocus() { return true; }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "disabled": ["watchDisabledHandler"],
-        "loading": ["loadingHandler"],
-        "options": ["watchOptionsHandler"],
-        "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 = [...helpers.IC_INHERITED_ARIA, "title"];
-const TextField = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.getValidationText = index.createEvent(this, "getValidationText", 7);
-        this.icBlur = index.createEvent(this, "icBlur", 7);
-        this.icChange = index.createEvent(this, "icChange", 7);
-        this.icFocus = index.createEvent(this, "icFocus", 7);
-        this.icInput = index.createEvent(this, "icInput", 7);
-        this.icKeydown = index.createEvent(this, "icKeydown", 7);
-        this.icScroll = index.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 = helpers.isEmptyString(this.validationStatus) ||
-                helpers.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 = helpers.checkSlotInChildMutations(addedNodes, removedNodes, "icon");
-                }
-            });
-            if (forceComponentUpdate) {
-                index.forceUpdate(this);
-            }
-        };
-    }
-    watchDisabledHandler() {
-        helpers.removeDisabledFalse(this.disabled, this.el);
-    }
-    debounceChanged() {
-        this.icChange = helpers.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;
-        helpers.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 = helpers.inheritAttributes(this.el, MUTABLE_ATTRIBUTES);
-        if (this.readonly) {
-            this.maxValueExceeded = false;
-            this.minValueUnattained = false;
-        }
-        helpers.addFormResetListener(this.el, this.handleFormReset);
-        helpers.removeDisabledFalse(this.disabled, this.el);
-    }
-    componentDidLoad() {
-        helpers.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 && !helpers.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
-                ? helpers.IcInformationStatus.Warning
-                : helpers.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 === helpers.IcInformationStatus.Error
-                ? "assertive"
-                : "polite"
-            : validationAriaLive;
-        const showStatusText = this.hasStatus(currentStatus) &&
-            !(currentStatus == helpers.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 = `${helpers.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 === helpers.IcInformationStatus.Error}`;
-        hiddenInput
-            ? helpers.renderHiddenInput(this.el, value, name, disabledMode)
-            : helpers.removeHiddenInput(this.el);
-        return (index.h(index.Host, { key: '4a38a5d8bd42f37b2ab1e9f3af485695b6185a8a', class: {
-                "ic-text-field-full-width": fullWidth,
-                "ic-text-field-disabled": disabledMode,
-                [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("ic-input-container", { key: 'a7da6f94bac334322b00b223cfb3462d026fbba1', readonly: readonly, disabled: disabledMode }, !hideLabel && (index.h("ic-input-label", { key: '97a5cc41a79cfc56c3e8e309154cbcc015bbadad', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, index.h("slot", { key: 'd9994cb1bb7218712bbed976057a3ca8d9ad3c2b', name: "helper-text", slot: "helper-text" }))), index.h("ic-input-component-container", { key: '0d3a988b563b2f9f2033b52a75f4fd5e27056ba8', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (index.h("span", { key: '319fa22903ab0b2c2315377abb9f9e7bad15f221', class: {
-                readonly,
-                "has-value": this.getNumberOfCharacters(value) > 0,
-            }, slot: "left-icon" }, index.h("slot", { key: '1224a807133d300df0a6070c998260ece29e8c80', name: "icon" }))), !multiline ? (index.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))) : (index.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))), helpers.isSlotUsed(el, "clear-button") && (index.h("slot", { key: 'e50c8194546e08898e7ef0ed4dd940a881ffd5c4', name: "clear-button" })), helpers.isSlotUsed(el, "search-submit-button") && (index.h("slot", { key: 'e2ba7a0f555593f767ff1c93c4c58b71967da1a7', name: "search-submit-button" }))), helpers.isSlotUsed(el, "menu") && index.h("slot", { key: '7b22fe423951f0f38c5419ff3c35e9f32a72735d', name: "menu" }), index.h("ic-input-validation", { key: '85aec8ebd4633fa36585e3253e1cc8107c374495', class: { "show-validation": this.showValidationMargin() }, status: this.hasStatus(currentStatus) === false ||
-                (currentStatus === helpers.IcInformationStatus.Success &&
-                    validationInline) ||
-                validationInlineInternal
-                ? ""
-                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (index.h("div", { key: 'f857927758c96f735592e7af679dba91c333fbf1', slot: "validation-message-adornment" }, !hideCharCount && (index.h("ic-typography", { key: 'eed01e87433155c8311c5ef958145d484c65264a', variant: "caption", class: "char-count-text" }, index.h("span", { key: '1752a0a453ed7dd28b909029f847330ffbff406c', class: "char-count" }, numChars, "/", maxNumChars))), index.h("span", { key: 'cd708a611a6133a7cf3b892d8f83cbf592791907', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), index.h("span", { key: 'ebe5600dece8662d9966667308e79872793b098c', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "disabled": ["watchDisabledHandler"],
-        "debounce": ["debounceChanged"],
-        "value": ["watchValueHandler"]
-    }; }
-};
-TextField.style = IcTextFieldStyle0;
-
-exports.ic_pagination = Pagination;
-exports.ic_pagination_item = PaginationItem;
-exports.ic_select = Select;
-exports.ic_text_field = TextField;
-
-//# sourceMappingURL=ic-pagination_4.cjs.entry.js.map