@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.5

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5e4f5b3b.js';
-import { r as removeDisabledFalse, a as onComponentRequiredPropUndefined, y as getLabelFromValue, w as getFilteredMenuOptions, e as removeFormResetListener, n as inheritAttributes, d as addFormResetListener, f as renderHiddenInput, j as getInputDescribedByText, k as hasValidationStatus, K as isMobileOrTablet, p as IC_INHERITED_ARIA, L as debounceEvent, i as isSlotUsed, A as isEmptyString } from './helpers-10f9f399.js';
-import { I as IcThemeForegroundEnum, a as IcInformationStatus } from './types-b2398b37.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-93509377.js';
+import { j as removeDisabledFalse, a as onComponentRequiredPropUndefined, E as getLabelFromValue, B as getFilteredMenuOptions, m as removeFormResetListener, w as inheritAttributes, l as addFormResetListener, n as renderHiddenInput, q as getInputDescribedByText, s as hasValidationStatus, L as isMobileOrTablet, x as IC_INHERITED_ARIA, M as debounceEvent, i as isSlotUsed, F as isEmptyString } from './helpers-229a5574.js';
+import { I as IcThemeForegroundEnum, a as IcInformationStatus } from './types-f605c21c.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"/>
@@ -14,252 +14,253 @@ const paginationFirstLast = `<svg width="12" height="10" viewBox="0 0 12 10" fil
 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))}.disabled{color:var(--ic-architectural-200);pointer-events:none;cursor:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.hide-current-page{display:none}";
 
 const Pagination = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.icPageChange = createEvent(this, "icPageChange", 7);
-    this.handleClickFirst = () => {
-      this.currentPage = 1;
-      this.icPageChange.emit({ value: this.currentPage });
-    };
-    this.handleClickPrevious = () => {
-      this.currentPage--;
-      this.icPageChange.emit({ value: this.currentPage });
-    };
-    this.handleClickNext = () => {
-      this.currentPage++;
-      this.icPageChange.emit({ value: this.currentPage });
-    };
-    this.handleClickLast = () => {
-      this.currentPage = this.pages;
-      this.icPageChange.emit({ value: this.currentPage });
-    };
-    // button rendering abstracted from component render methods for clarity
-    this.firstButton = () => {
-      return (h("ic-button", { id: "first-page-button", "aria-label": "Go to first page", disableTooltip: true, appearance: this.appearance, onClick: this.handleClickFirst, class: "page-button first-last", disabled: this.currentPage === 1 || this.disabled, variant: "icon", innerHTML: paginationFirstLast }));
-    };
-    this.previousButton = () => {
-      return (h("ic-button", { id: "previous-page-button", "aria-label": "Go to previous page", disableTooltip: true, appearance: this.appearance, onClick: this.handleClickPrevious, class: "page-button next-previous flip", disabled: this.currentPage === 1 || this.disabled, variant: "icon", innerHTML: paginationNextPrevious }));
-    };
-    this.nextButton = () => {
-      return (h("ic-button", { id: "next-page-button", "aria-label": "Go to next page", disableTooltip: true, appearance: this.appearance, onClick: this.handleClickNext, class: "page-button next-previous", disabled: this.currentPage === this.pages || this.disabled, variant: "icon", innerHTML: paginationNextPrevious }));
-    };
-    this.lastButton = () => {
-      return (h("ic-button", { id: "last-page-button", "aria-label": "Go to last page", disableTooltip: true, appearance: this.appearance, onClick: this.handleClickLast, class: "page-button first-last flip", disabled: this.currentPage === this.pages || this.disabled, variant: "icon", innerHTML: paginationFirstLast }));
-    };
-    this.renderStartEllipsis = () => {
-      return (h("ic-pagination-item", { appearance: this.appearance, type: "ellipsis", id: "start-ellipsis", disabled: this.disabled }));
-    };
-    this.renderEndEllipsis = () => {
-      return (h("ic-pagination-item", { appearance: this.appearance, type: "ellipsis", id: "end-ellipsis", disabled: this.disabled }));
-    };
-    this.renderStartItems = () => {
-      return this.startItems.map((page) => {
-        return (h("ic-pagination-item", { appearance: this.appearance, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
-      });
-    };
-    this.renderEndItems = () => {
-      return this.endItems.map((page) => {
-        return (h("ic-pagination-item", { appearance: this.appearance, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
-      });
-    };
-    this.renderMiddleItems = () => {
-      return this.midItems.map((page) => {
-        return (h("ic-pagination-item", { appearance: this.appearance, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
-      });
-    };
-    this.endEllipsis = false;
-    this.endItems = [];
-    this.midItems = [];
-    this.startEllipsis = false;
-    this.startItems = [];
-    this.adjacentCount = 1;
-    this.appearance = "default";
-    this.boundaryCount = 1;
-    this.defaultPage = 1;
-    this.disabled = false;
-    this.hideCurrentPage = false;
-    this.hideFirstAndLastPageButton = false;
-    this.label = "Page";
-    this.pages = undefined;
-    this.type = "simple";
-    this.currentPage = this.defaultPage;
-  }
-  watchNumberPagesHandler() {
-    this.watchPageChangeHandler();
-  }
-  watchPageChangeHandler() {
-    if (this.type === "simple") {
-      return;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icPageChange = createEvent(this, "icPageChange", 7);
+        this.handleClickFirst = () => {
+            this.currentPage = 1;
+            this.icPageChange.emit({ value: this.currentPage });
+        };
+        this.handleClickPrevious = () => {
+            this.currentPage--;
+            this.icPageChange.emit({ value: this.currentPage });
+        };
+        this.handleClickNext = () => {
+            this.currentPage++;
+            this.icPageChange.emit({ value: this.currentPage });
+        };
+        this.handleClickLast = () => {
+            this.currentPage = this.pages;
+            this.icPageChange.emit({ value: this.currentPage });
+        };
+        // button rendering abstracted from component render methods for clarity
+        this.firstButton = () => {
+            return (h("ic-button", { id: "first-page-button", "aria-label": "Go to first page", appearance: this.appearance, onClick: this.handleClickFirst, class: "page-button first-last", disabled: this.currentPage === 1 || this.disabled, variant: "icon", innerHTML: paginationFirstLast }));
+        };
+        this.previousButton = () => {
+            return (h("ic-button", { id: "previous-page-button", "aria-label": "Go to previous page", appearance: this.appearance, onClick: this.handleClickPrevious, class: "page-button next-previous flip", disabled: this.currentPage === 1 || this.disabled, variant: "icon", innerHTML: paginationNextPrevious }));
+        };
+        this.nextButton = () => {
+            return (h("ic-button", { id: "next-page-button", "aria-label": "Go to next page", appearance: this.appearance, onClick: this.handleClickNext, class: "page-button next-previous", disabled: this.currentPage === this.pages || this.disabled, variant: "icon", innerHTML: paginationNextPrevious }));
+        };
+        this.lastButton = () => {
+            return (h("ic-button", { id: "last-page-button", "aria-label": "Go to last page", appearance: this.appearance, onClick: this.handleClickLast, class: "page-button first-last flip", disabled: this.currentPage === this.pages || this.disabled, variant: "icon", innerHTML: paginationFirstLast }));
+        };
+        this.renderStartEllipsis = () => {
+            return (h("ic-pagination-item", { appearance: this.appearance, type: "ellipsis", id: "start-ellipsis", disabled: this.disabled }));
+        };
+        this.renderEndEllipsis = () => {
+            return (h("ic-pagination-item", { appearance: this.appearance, type: "ellipsis", id: "end-ellipsis", disabled: this.disabled }));
+        };
+        this.renderStartItems = () => {
+            return this.startItems.map((page) => {
+                return (h("ic-pagination-item", { appearance: this.appearance, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
+            });
+        };
+        this.renderEndItems = () => {
+            return this.endItems.map((page) => {
+                return (h("ic-pagination-item", { appearance: this.appearance, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
+            });
+        };
+        this.renderMiddleItems = () => {
+            return this.midItems.map((page) => {
+                return (h("ic-pagination-item", { appearance: this.appearance, selected: page === this.currentPage, id: `pagination-item-${page}`, type: "page", page: page, disabled: this.disabled }));
+            });
+        };
+        this.endEllipsis = false;
+        this.endItems = [];
+        this.midItems = [];
+        this.startEllipsis = false;
+        this.startItems = [];
+        this.adjacentCount = 1;
+        this.appearance = "default";
+        this.boundaryCount = 1;
+        this.defaultPage = 1;
+        this.disabled = false;
+        this.hideCurrentPage = false;
+        this.hideFirstAndLastPageButton = false;
+        this.label = "Page";
+        this.pages = undefined;
+        this.type = "simple";
+        this.currentPage = this.defaultPage;
     }
-    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.boundaryCount * 2 + this.adjacentCount * 2 + 3) {
-      this.startEllipsis = false;
-      this.endEllipsis = false;
-      for (let i = 1; i <= this.pages; i++) {
-        startItems.push(i);
-      }
-      this.startItems = startItems;
-      return;
+    watchNumberPagesHandler() {
+        this.watchPageChangeHandler();
     }
-    startItemCount = this.boundaryCount === 0 ? 1 : this.boundaryCount;
-    endStart =
-      this.boundaryCount === 0
-        ? this.pages
-        : this.pages - this.boundaryCount + 1;
-    if (this.currentPage <= this.adjacentCount + this.boundaryCount + 2) {
-      startEllipsis = false;
-      endEllipsis = true;
-      let numItems = 2 * this.adjacentCount + 1;
-      if (this.boundaryCount === 0) {
-        numItems--;
-      }
-      midStart = startItemCount + 1;
-      midEnd = midStart + numItems;
-    }
-    else {
-      startEllipsis = true;
-      if (this.currentPage >
-        this.pages - (this.adjacentCount + this.boundaryCount + 2)) {
-        let numItems = 2 * this.adjacentCount + 1;
-        if (this.boundaryCount === 0) {
-          numItems--;
+    watchPageChangeHandler() {
+        if (this.type === "simple") {
+            return;
         }
-        midEnd =
-          this.boundaryCount === 0
-            ? this.pages - 1
-            : this.pages - this.boundaryCount;
-        midStart = midEnd - numItems;
-      }
-      else {
-        endEllipsis = true;
-        midStart = this.currentPage - this.adjacentCount;
-        midEnd = this.currentPage + this.adjacentCount;
-      }
-    }
-    //create array of start items
-    if (this.boundaryCount > 0 ||
-      (this.boundaryCount === 0 && startEllipsis === false)) {
-      for (let i = 1; i <= startItemCount; i++) {
-        startItems.push(i);
-      }
-    }
-    //create array of end items
-    if (this.boundaryCount > 0 ||
-      (this.boundaryCount === 0 && endEllipsis === false)) {
-      for (let i = endStart; i <= this.pages; i++) {
-        endItems.push(i);
-      }
+        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.boundaryCount * 2 + this.adjacentCount * 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.boundaryCount === 0 ? 1 : this.boundaryCount;
+        endStart =
+            this.boundaryCount === 0
+                ? this.pages
+                : this.pages - this.boundaryCount + 1;
+        if (this.currentPage <= this.adjacentCount + this.boundaryCount + 2) {
+            startEllipsis = false;
+            endEllipsis = true;
+            let numItems = 2 * this.adjacentCount + 1;
+            if (this.boundaryCount === 0) {
+                numItems--;
+            }
+            midStart = startItemCount + 1;
+            midEnd = midStart + numItems;
+        }
+        else {
+            startEllipsis = true;
+            if (this.currentPage >
+                this.pages - (this.adjacentCount + this.boundaryCount + 2)) {
+                let numItems = 2 * this.adjacentCount + 1;
+                if (this.boundaryCount === 0) {
+                    numItems--;
+                }
+                midEnd =
+                    this.boundaryCount === 0
+                        ? this.pages - 1
+                        : this.pages - this.boundaryCount;
+                midStart = midEnd - numItems;
+            }
+            else {
+                endEllipsis = true;
+                midStart = this.currentPage - this.adjacentCount;
+                midEnd = this.currentPage + this.adjacentCount;
+            }
+        }
+        //create array of start items
+        if (this.boundaryCount > 0 ||
+            (this.boundaryCount === 0 && startEllipsis === false)) {
+            for (let i = 1; i <= startItemCount; i++) {
+                startItems.push(i);
+            }
+        }
+        //create array of end items
+        if (this.boundaryCount > 0 ||
+            (this.boundaryCount === 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;
     }
-    //create array of mid items
-    for (let i = midStart; i <= midEnd; i++) {
-      midItems.push(i);
+    componentWillLoad() {
+        this.watchPageChangeHandler();
+        if (this.boundaryCount > 2) {
+            this.boundaryCount = 2;
+        }
+        if (this.adjacentCount > 2) {
+            this.adjacentCount = 2;
+        }
+        removeDisabledFalse(this.disabled, this.el);
     }
-    this.startEllipsis = startEllipsis;
-    this.endEllipsis = endEllipsis;
-    this.startItems = startItems;
-    this.endItems = endItems;
-    this.midItems = midItems;
-  }
-  componentWillLoad() {
-    this.watchPageChangeHandler();
-    if (this.boundaryCount > 2) {
-      this.boundaryCount = 2;
+    componentDidLoad() {
+        onComponentRequiredPropUndefined([{ prop: this.pages, propName: "pages" }], "Pagination");
     }
-    if (this.adjacentCount > 2) {
-      this.adjacentCount = 2;
+    paginationItemClickHandler(ev) {
+        const page = ev.detail.page;
+        this.currentPage = page;
+        this.icPageChange.emit({ value: this.currentPage });
     }
-    removeDisabledFalse(this.disabled, this.el);
-  }
-  componentDidLoad() {
-    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.
-   */
-  async setCurrentPage(page) {
-    if (typeof page === "number" && page > 0 && page <= this.pages) {
-      this.currentPage = page;
+    /**
+     * 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");
+        }
     }
-    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, pages, currentPage, hideCurrentPage, disabled, hideFirstAndLastPageButton, label, } = this;
+        return (h(Host, null, type === "simple" && (h("nav", { class: {
+                ["disabled"]: disabled,
+            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), h("ic-pagination-item", { pages: pages, appearance: this.appearance, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: hideCurrentPage } }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("nav", { class: {
+                ["disabled"]: disabled,
+            }, role: "navigation", "aria-label": "Pagination Navigation" }, 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()))));
     }
-  }
-  render() {
-    const { type, pages, currentPage, hideCurrentPage, disabled, hideFirstAndLastPageButton, label, } = this;
-    return (h(Host, null, type === "simple" && (h("nav", { class: {
-        ["disabled"]: disabled,
-      }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), h("ic-pagination-item", { pages: pages, appearance: this.appearance, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: hideCurrentPage } }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("nav", { class: {
-        ["disabled"]: disabled,
-      }, role: "navigation", "aria-label": "Pagination Navigation" }, 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()))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "pages": ["watchNumberPagesHandler"],
-    "currentPage": ["watchPageChangeHandler"]
-  }; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "pages": ["watchNumberPagesHandler"],
+        "currentPage": ["watchPageChangeHandler"]
+    }; }
 };
 Pagination.style = icPaginationCss;
 
 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;color:var(--ic-color-secondary-text)}.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{color:var(--ic-action-default)}.simple-current{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-action-default-bg-hover)}.item-container.page:active:not(.selected):not(:focus){background-color:var(--ic-action-default-bg-active)}.selected{pointer-events:none;outline:none}.selected::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-default)}.page-selected{color:var(--ic-color-primary-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-active)}ic-typography.light{color:var(--ic-color-white-text)}.selected.light::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-light)}.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-active)}ic-typography.dark{color:var(--ic-color-primary-text)}.selected.dark::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-dark)}.disabled{color:var(--ic-architectural-200);pointer-events:none;cursor:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (forced-colors: active){.selected::after{background-color:Highlight}.selected.light::after{background-color:Highlight}.selected.dark::after{background-color:Highlight}}";
 
 const PaginationItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.paginationItemClick = createEvent(this, "paginationItemClick", 7);
-    this.handleClick = () => {
-      this.paginationItemClick.emit({ page: this.page });
-    };
-    this.appearance = undefined;
-    this.ariaOverride = false;
-    this.disabled = false;
-    this.label = "Page ";
-    this.page = undefined;
-    this.pages = undefined;
-    this.selected = false;
-    this.type = undefined;
-  }
-  componentWillLoad() {
-    removeDisabledFalse(this.disabled, this.el);
-  }
-  render() {
-    const { page, selected, type, disabled, appearance, label, ariaOverride, pages, } = this;
-    return (h("a", null, type === "ellipsis" ? (h("div", { class: {
-        ["item-container"]: true,
-        ["ellipsis"]: true,
-        ["disabled"]: disabled,
-      } }, h("ic-typography", { class: {
-        [`${appearance}`]: true,
-      }, variant: "label" }, "..."))) : type === "page" ? (h("button", { disabled: disabled, onClick: this.handleClick, tabindex: selected ? "-1" : "0", role: "button", "aria-current": selected && "Current page", "aria-label": selected ? `${label}: ${page}` : `Go to page ${page}`, class: {
-        ["selected"]: !disabled && selected,
-        ["disabled"]: disabled,
-        ["item-container"]: true,
-        [`${appearance}`]: true,
-        ["page"]: type === "page",
-      } }, h("ic-typography", { variant: "label", class: {
-        ["page-selected"]: selected,
-        ["disabled"]: disabled,
-        [`${appearance}`]: true,
-      } }, page))) : (h("ic-typography", { "aria-live": "polite", "aria-label": ariaOverride ? `Page ${page} of ${pages}` : `${label} ${page}`, class: `simple-current ${appearance}`, variant: "label" }, label, " ", page))));
-  }
-  get el() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.paginationItemClick = createEvent(this, "paginationItemClick", 7);
+        this.handleClick = () => {
+            this.paginationItemClick.emit({ page: this.page });
+        };
+        this.appearance = undefined;
+        this.ariaOverride = false;
+        this.disabled = false;
+        this.label = "Page ";
+        this.page = undefined;
+        this.pages = undefined;
+        this.selected = false;
+        this.type = undefined;
+    }
+    componentWillLoad() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
+    render() {
+        const { page, selected, type, disabled, appearance, label, ariaOverride, pages, } = this;
+        return (h("a", null, type === "ellipsis" ? (h("div", { class: {
+                ["item-container"]: true,
+                ["ellipsis"]: true,
+                ["disabled"]: disabled,
+            } }, h("ic-typography", { class: {
+                [`${appearance}`]: true,
+            }, variant: "label" }, "..."))) : type === "page" ? (h("button", { disabled: disabled, onClick: this.handleClick, tabindex: selected ? "-1" : "0", role: "button", "aria-current": selected && "Current page", "aria-label": selected ? `${label}: ${page}` : `Go to page ${page}`, class: {
+                ["selected"]: !disabled && selected,
+                ["disabled"]: disabled,
+                ["item-container"]: true,
+                [`${appearance}`]: true,
+                ["page"]: type === "page",
+            } }, h("ic-typography", { variant: "label", class: {
+                ["page-selected"]: selected,
+                ["disabled"]: disabled,
+                [`${appearance}`]: true,
+            } }, page))) : (h("ic-typography", { "aria-live": "polite", "aria-label": ariaOverride ? `Page ${page} of ${pages}` : `${label} ${page}`, class: `simple-current ${appearance}`, variant: "label" }, label, " ", page))));
+    }
+    get el() { return getElement(this); }
 };
 PaginationItem.style = icPaginationItemCss;
 
@@ -273,657 +274,668 @@ const Clear = `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www
 </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{position:relative}:host(.full-width){width:100%}ic-input-component-container:hover{--border-color:var(--ic-action-dark-hover)}ic-input-component-container:active{--border-color:var(--ic-action-dark-active);color:var(--ic-action-dark-active)}ic-input-component-container.menu-open{--border-color:var(--ic-architectural-400);color:var(--ic-action-dark)}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) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-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:url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select option,.select-option-selected{color:var(--ic-color-primary-text)}select:disabled{color:var(--ic-architectural-200);background-image:url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}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}.select-input:focus{outline:var(--ic-hc-focus-outline)}:host(:not(.disabled)) ic-input-component-container:hover .select-input{background-color:var(--ic-architectural-white)}.select-input[disabled]{pointer-events:none}:host(.searchable) .select-input{cursor:auto}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xs);color:var(--ic-action-dark)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.disabled) .expand-icon,:host(.disabled) .expand-icon>svg>path{color:var(--ic-architectural-200)}:host(.searchable) .expand-icon{padding-left:var(--ic-space-xxs);height:2.25rem}:host(.searchable) .expand-icon>svg{height:2.25rem;padding:0 0.375rem}:host(.searchable:not(.disabled)) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-action-dark)}.expand-icon-filled{color:var(--ic-action-dark)}.expand-icon-open,:host(.searchable) .expand-icon-open{transform:rotateX(180deg)}:host(.disabled) .value-text,.placeholder{color:var(--ic-color-tertiary-text)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;gap:var(--ic-space-xxs);padding-left:2.375rem}:host(.small) .clear-button-container{padding-left:1.875rem}.divider{width:var(--ic-space-1px);background-color:var(--ic-architectural-400);margin:var(--ic-space-xxs) 0;border-radius:var(--ic-space-1px);height:var(--ic-space-lg)}:host(.small) .divider{height:var(--ic-space-md)}.clear-button{position:absolute;right:2.75rem;border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus *{fill:white}.searchable-select-results-status{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)}";
+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}:host(.full-width){width:100%}ic-input-component-container:hover{--border-color:var(--ic-action-dark-hover)}ic-input-component-container:active{--border-color:var(--ic-action-dark-active);color:var(--ic-action-dark-active)}ic-input-component-container.menu-open{--border-color:var(--ic-architectural-400);color:var(--ic-action-dark)}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) !important}select{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);color:var(--ic-color-primary-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:url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}select option,.select-option-selected{color:var(--ic-color-primary-text)}select:disabled{color:var(--ic-architectural-200);background-image:url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\")}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}.select-input:focus{outline:var(--ic-hc-focus-outline)}:host(:not(.disabled)) ic-input-component-container:hover .select-input{background-color:var(--ic-architectural-white)}.select-input[disabled]{pointer-events:none}:host(.searchable) .select-input{cursor:auto}.searchable-select-container{align-items:center;display:flex;width:100%;position:relative}.expand-icon{height:var(--ic-space-lg);padding-left:var(--ic-space-xs);color:var(--ic-action-dark)}.expand-icon>svg{display:inline-block;width:var(--ic-space-lg);height:var(--ic-space-lg)}:host(.disabled) .expand-icon,:host(.disabled) .expand-icon>svg>path{color:var(--ic-architectural-200)}:host(.searchable) .expand-icon{padding-left:var(--ic-space-xxs);height:2.25rem}:host(.searchable) .expand-icon>svg{height:2.25rem;padding:0 0.375rem}:host(.searchable:not(.disabled)) .expand-icon>svg{cursor:pointer}.expand-icon-open{color:var(--ic-action-dark)}.expand-icon-filled{color:var(--ic-action-dark)}.expand-icon-open,:host(.searchable) .expand-icon-open{transform:rotateX(180deg)}:host(.disabled) .value-text,.placeholder{color:var(--ic-color-tertiary-text)}.select-input-end{display:flex;align-items:center}.clear-button-container{display:flex;gap:var(--ic-space-xxs);padding-left:2.375rem;align-items:center}:host(.small) .clear-button-container{padding-left:1.875rem}.divider{width:var(--ic-border-width);background-color:var(--ic-architectural-400);margin:var(--ic-space-xxs) 0;border-radius:var(--ic-space-1px);height:var(--ic-space-lg)}:host(.small) .divider{height:var(--ic-space-md)}.clear-button{position:absolute;right:2.75rem;border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus *{fill:white}.searchable-select-results-status{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)}";
 
 let inputIds$1 = 0;
 const Select = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.icBlur = createEvent(this, "icBlur", 7);
-    this.icChange = createEvent(this, "icChange", 7);
-    this.icClear = createEvent(this, "icClear", 7);
-    this.icFocus = createEvent(this, "icFocus", 7);
-    this.icInput = createEvent(this, "icInput", 7);
-    this.icOptionSelect = createEvent(this, "icOptionSelect", 7);
-    this.icRetryLoad = createEvent(this, "icRetryLoad", 7);
-    this.hasSetDefaultValue = false;
-    this.inheritedAttributes = {};
-    this.initialOptionsEmpty = false;
-    this.inputId = `ic-select-input-${inputIds$1++}`;
-    this.menuId = `${this.inputId}-menu`;
-    this.searchableMenuItemSelected = false;
-    this.ungroupedOptions = [];
-    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.hiddenInputValue });
-    };
-    this.emitIcChange = (value) => {
-      if (!this.searchable) {
-        this.value = value;
-      }
-      clearTimeout(this.debounceIcChange);
-      this.debounceIcChange = window.setTimeout(() => {
-        this.icChange.emit({ value: value });
-      }, this.currDebounce);
-    };
-    this.emitImmediateIcChange = (value) => {
-      this.value = value;
-      clearTimeout(this.debounceIcChange);
-      this.icChange.emit({ value: value });
-    };
-    /**
-     * 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 = [];
-      let dedupedChildren;
-      options.forEach((option) => {
-        if (option.children) {
-          //If an option has children, we will loop through them
-          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.`);
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.icBlur = createEvent(this, "icBlur", 7);
+        this.icChange = createEvent(this, "icChange", 7);
+        this.icClear = createEvent(this, "icClear", 7);
+        this.icFocus = createEvent(this, "icFocus", 7);
+        this.icInput = createEvent(this, "icInput", 7);
+        this.icOptionSelect = createEvent(this, "icOptionSelect", 7);
+        this.icRetryLoad = createEvent(this, "icRetryLoad", 7);
+        this.hasSetDefaultValue = false;
+        this.inheritedAttributes = {};
+        this.initialOptionsEmpty = false;
+        this.inputId = `ic-select-input-${inputIds$1++}`;
+        this.menuId = `${this.inputId}-menu`;
+        this.searchableMenuItemSelected = false;
+        this.ungroupedOptions = [];
+        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.hiddenInputValue });
+        };
+        this.emitIcChange = (value) => {
+            if (!this.searchable) {
+                this.value = value;
+            }
+            clearTimeout(this.debounceIcChange);
+            this.debounceIcChange = window.setTimeout(() => {
+                this.icChange.emit({ value: value });
+            }, this.currDebounce);
+        };
+        this.emitImmediateIcChange = (value) => {
+            this.value = value;
+            clearTimeout(this.debounceIcChange);
+            this.icChange.emit({ value: value });
+        };
+        /**
+         * 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 = [];
+            let dedupedChildren;
+            options.forEach((option) => {
+                if (option.children) {
+                    //If an option has children, we will loop through them
+                    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
+                    const modifiedParent = Object.assign(Object.assign({}, option), { children: dedupedChildren });
+                    dedupedOptions.push(modifiedParent);
+                }
+                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) {
+                this.options.map((option) => {
+                    if (!option.value) {
+                        option.value = option.label;
+                    }
+                });
+            }
+        };
+        this.setUngroupedOptions = (event) => {
+            this.ungroupedOptions = event.detail.options;
+        };
+        this.setTextColor = () => {
+            if (this.nativeSelectElement.selectedIndex === 0) {
+                this.nativeSelectElement.className = "placeholder";
             }
             else {
-              uniqueValues.push(child.value);
-              dedupedChildren.push(child);
+                this.nativeSelectElement.className = "select-option-selected";
             }
-          });
-          // construct a modified option, inserting the deduplicated children alongside the original information
-          const modifiedParent = Object.assign(Object.assign({}, option), { children: dedupedChildren });
-          dedupedOptions.push(modifiedParent);
-        }
-        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) {
-        this.options.map((option) => {
-          if (!option.value) {
-            option.value = option.label;
-          }
-        });
-      }
-    };
-    this.setUngroupedOptions = (event) => {
-      this.ungroupedOptions = event.detail.options;
-    };
-    this.setTextColor = () => {
-      if (this.nativeSelectElement.selectedIndex === 0) {
-        this.nativeSelectElement.className = "placeholder";
-      }
-      else {
-        this.nativeSelectElement.className = "select-option-selected";
-      }
-    };
-    this.setMenuChange = (open) => {
-      if (this.open !== open) {
-        this.open = open;
-      }
-    };
-    this.getLabelFromValue = (value) => {
-      return getLabelFromValue(value, this.uniqueOptions);
-    };
-    this.getFilteredChildMenuOptions = (option) => {
-      let children = option.children;
-      if (this.searchable) {
-        children = getFilteredMenuOptions(option.children, this.includeDescriptionsInSearch, this.searchableSelectInputValue, this.searchMatchPosition);
-      }
-      else {
-        children = getFilteredMenuOptions(option.children, false, this.pressedCharacters, "start");
-      }
-      const newOption = Object.assign({}, option);
-      newOption.children = children;
-      return newOption;
-    };
-    this.handleNativeSelectChange = () => {
-      this.icOptionSelect.emit({ value: this.nativeSelectElement.value });
-      this.emitImmediateIcChange(this.nativeSelectElement.value);
-      this.setTextColor();
-    };
-    this.handleCustomSelectChange = (event) => {
-      if (this.searchable && event.detail.label === this.emptyOptionListText) {
-        this.searchableSelectElement.focus();
-        return;
-      }
-      if (this.searchable) {
-        this.value = event.detail.value;
-        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);
-        }
-        this.inputValueToFilter = null;
-        this.hiddenInputValue = this.getValueFromLabel(this.searchableSelectInputValue);
-      }
-      this.ariaActiveDescendant = event.detail.optionId;
-      this.icOptionSelect.emit({ value: event.detail.value });
-      this.emitIcChange(event.detail.value);
-    };
-    this.handleMenuChange = (event) => {
-      this.open = event.detail.open;
-      this.pressedCharacters = "";
-      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;
-      this.handleCharacterKeyDown(ev.detail.key);
-    };
-    this.handleMenuValueChange = (ev) => {
-      this.value = ev.detail.value;
-    };
-    this.handleFocusIndicatorDisplay = () => {
-      const focusIndicator = this.host.shadowRoot.querySelector(".focus-indicator");
-      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.disableFilter;
-    this.handleClick = (event) => {
-      if (!this.open) {
-        if (this.isExternalFiltering()) {
-          this.menu.options = this.filteredOptions;
-        }
-        else if (!this.hasTimedOut &&
-          !this.loading &&
-          (!this.searchable || this.searchableMenuItemSelected)) {
-          this.noOptions = null;
-          this.menu.options = this.uniqueOptions;
-        }
-      }
-      if (event.detail !== 0) {
-        this.menu.handleClickOpen();
-      }
-    };
-    this.handleExpandIconMouseDown = (event) => {
-      if (!this.disabled) {
-        event.preventDefault();
-        this.searchableSelectElement.focus();
-        this.handleClick(event);
-      }
-    };
-    this.handleClear = (event) => {
-      event.stopPropagation();
-      this.hasTimedOut = false;
-      clearTimeout(this.timeoutTimer);
-      this.noOptions = null;
-      this.emitImmediateIcChange(null);
-      this.icClear.emit();
-      if (this.searchable) {
-        this.searchableSelectElement.value = null;
-        this.searchableSelectInputValue = null;
-        this.filteredOptions = this.uniqueOptions;
-        this.hiddenInputValue = null;
-        this.searchableSelectElement.focus();
-      }
-      else {
-        this.customSelectElement.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.hasTimedOut &&
-        !this.loading) {
-        this.setMenuChange(false);
-      }
-      if (key.length === 1 && !this.searchable) {
-        window.clearTimeout(this.characterKeyPressTimer);
-        this.characterKeyPressTimer = window.setTimeout(() => (this.pressedCharacters = ""), 1000);
-        this.pressedCharacters += key;
-        this.handleFilter();
-        if (!this.noOptions) {
-          this.emitImmediateIcChange(this.filteredOptions[0].value);
-        }
-      }
-      else {
-        this.pressedCharacters = "";
-      }
-    };
-    this.handleNativeSelectKeyDown = (event) => {
-      if ((event.key !== "Escape" && event.key !== "Tab") || this.open) {
-        event.cancelBubble = true;
-      }
-      this.handleCharacterKeyDown(event.key);
-    };
-    this.handleKeyDown = (event) => {
-      if ((event.key !== "Escape" && event.key !== "Tab") || this.open) {
-        event.cancelBubble = true;
-      }
-      const isArrowKey = event.key === "ArrowDown" || event.key === "ArrowUp";
-      if (!this.open) {
-        if (this.isExternalFiltering() && (event.key === "Enter" || isArrowKey)) {
-          this.menu.options = this.filteredOptions;
-        }
-        else {
-          if (!this.hasTimedOut) {
+        };
+        this.setMenuChange = (open) => {
+            if (this.open !== open) {
+                this.open = open;
+            }
+        };
+        this.getLabelFromValue = (value) => {
+            return getLabelFromValue(value, this.uniqueOptions);
+        };
+        this.getFilteredChildMenuOptions = (option) => {
+            let children = option.children;
+            if (this.searchable) {
+                children = getFilteredMenuOptions(option.children, this.includeDescriptionsInSearch, this.searchableSelectInputValue, this.searchMatchPosition);
+            }
+            else {
+                children = getFilteredMenuOptions(option.children, false, this.pressedCharacters, "start");
+            }
+            const newOption = Object.assign({}, option);
+            newOption.children = children;
+            return newOption;
+        };
+        this.handleNativeSelectChange = () => {
+            this.icOptionSelect.emit({ value: this.nativeSelectElement.value });
+            this.emitImmediateIcChange(this.nativeSelectElement.value);
+            this.setTextColor();
+        };
+        this.handleCustomSelectChange = (event) => {
+            if (this.searchable && event.detail.label === this.emptyOptionListText) {
+                this.searchableSelectElement.focus();
+                return;
+            }
+            if (this.searchable) {
+                this.value = event.detail.value;
+                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);
+                }
+                this.inputValueToFilter = null;
+                this.hiddenInputValue = this.getValueFromLabel(this.searchableSelectInputValue);
+            }
+            this.ariaActiveDescendant = event.detail.optionId;
+            this.icOptionSelect.emit({ value: event.detail.value });
+            this.emitIcChange(event.detail.value);
+        };
+        this.handleMenuChange = (event) => {
+            this.open = event.detail.open;
+            this.pressedCharacters = "";
+            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;
+            this.handleCharacterKeyDown(ev.detail.key);
+        };
+        this.handleMenuValueChange = (ev) => {
+            this.value = ev.detail.value;
+        };
+        this.handleFocusIndicatorDisplay = () => {
+            const focusIndicator = this.el.shadowRoot.querySelector(".focus-indicator");
+            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.disableFilter;
+        this.handleClick = (event) => {
+            var _a;
+            if (!this.open) {
+                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) {
+                this.menu.handleClickOpen();
+            }
+        };
+        this.handleExpandIconMouseDown = (event) => {
+            if (!this.disabled) {
+                event.preventDefault();
+                this.searchableSelectElement.focus();
+                this.handleClick(event);
+            }
+        };
+        this.handleClear = (event) => {
+            event.stopPropagation();
+            this.hasTimedOut = false;
+            clearTimeout(this.timeoutTimer);
             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
-            this.menu.handleKeyboardOpen(event);
-          }
-          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 = () => {
-      const options = this.deduplicateOptions(this.searchable ? [...this.uniqueOptions] : this.ungroupedOptions);
-      let isGrouped = false;
-      let newFilteredOptions = [];
-      options.map((option) => {
-        if (option.children)
-          isGrouped = true;
-      });
-      let menuOptionsFiltered;
-      if (this.searchable) {
-        menuOptionsFiltered = getFilteredMenuOptions(options, this.includeDescriptionsInSearch, this.inputValueToFilter, this.searchMatchPosition);
-        this.searchableMenuItemSelected = false;
-      }
-      else {
-        menuOptionsFiltered = getFilteredMenuOptions(options, false, this.pressedCharacters, "start");
-      }
-      if (!isGrouped) {
-        newFilteredOptions = menuOptionsFiltered;
-      }
-      else {
-        options.map((option) => {
-          if (this.includeGroupTitlesInSearch) {
-            if (menuOptionsFiltered.indexOf(option) !== -1) {
-              newFilteredOptions.push(option);
+            this.emitImmediateIcChange(null);
+            this.icClear.emit();
+            if (this.searchable) {
+                this.searchableSelectElement.value = null;
+                this.searchableSelectInputValue = null;
+                this.filteredOptions = this.uniqueOptions;
+                this.hiddenInputValue = null;
+                this.searchableSelectElement.focus();
+            }
+            else {
+                this.customSelectElement.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.hasTimedOut &&
+                !this.loading) {
+                this.setMenuChange(false);
+            }
+            if (key.length === 1 && !this.searchable) {
+                window.clearTimeout(this.characterKeyPressTimer);
+                this.characterKeyPressTimer = window.setTimeout(() => (this.pressedCharacters = ""), 1000);
+                this.pressedCharacters += key;
+                this.handleFilter();
+                if (!this.noOptions) {
+                    this.emitImmediateIcChange(this.filteredOptions[0].value);
+                }
+            }
+            else {
+                this.pressedCharacters = "";
+            }
+        };
+        this.handleNativeSelectKeyDown = (event) => {
+            if ((event.key !== "Escape" && event.key !== "Tab") || this.open) {
+                event.cancelBubble = true;
+            }
+            this.handleCharacterKeyDown(event.key);
+        };
+        this.handleKeyDown = (event) => {
+            if ((event.key !== "Escape" && event.key !== "Tab") || this.open) {
+                event.cancelBubble = true;
+            }
+            const isArrowKey = event.key === "ArrowDown" || event.key === "ArrowUp";
+            if (!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
+                        this.menu.handleKeyboardOpen(event);
+                    }
+                    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);
+            let isGrouped = false;
+            let newFilteredOptions = [];
+            options.map((option) => {
+                if (option.children)
+                    isGrouped = true;
+            });
+            let menuOptionsFiltered;
+            if (this.searchable) {
+                menuOptionsFiltered = getFilteredMenuOptions(options, this.includeDescriptionsInSearch, this.inputValueToFilter, this.searchMatchPosition);
+                this.searchableMenuItemSelected = false;
+            }
+            else {
+                menuOptionsFiltered = 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) {
+                options.map((option) => {
+                    if (this.includeGroupTitlesInSearch) {
+                        if (menuOptionsFiltered.indexOf(option) !== -1) {
+                            newFilteredOptions.push(option);
+                        }
+                        else {
+                            newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
+                        }
+                    }
+                    else {
+                        newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
+                    }
+                });
+            }
+            let noChildOptionsWhenFiltered = false;
+            if (isGrouped) {
+                noChildOptionsWhenFiltered = true;
+                newFilteredOptions.map((option) => {
+                    if (option.children.length > 0) {
+                        noChildOptionsWhenFiltered = false;
+                    }
+                });
+            }
+            if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {
+                this.noOptions = null;
+                this.filteredOptions = newFilteredOptions;
             }
             else {
-              newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
+                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;
             }
-          }
-          else {
-            newFilteredOptions.push(this.getFilteredChildMenuOptions(option));
-          }
-        });
-      }
-      let noChildOptionsWhenFiltered = false;
-      if (isGrouped) {
-        noChildOptionsWhenFiltered = true;
-        newFilteredOptions.map((option) => {
-          if (option.children.length > 0) {
-            noChildOptionsWhenFiltered = false;
-          }
-        });
-      }
-      const noOptions = [{ label: this.emptyOptionListText, value: "" }];
-      if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {
+            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 (_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.icInput.emit({ value: this.searchableSelectInputValue });
+            this.emitIcChange(this.searchableSelectInputValue);
+            this.hiddenInputValue = this.searchableSelectInputValue;
+            this.inputValueToFilter = this.searchableSelectInputValue;
+            this.setMenuChange(true);
+            if (!this.disableFilter) {
+                this.handleFilter();
+                this.debounceAriaLiveUpdate();
+            }
+        };
+        this.updateSearchableSelectResultAriaLive = () => {
+            const searchableSelectResultsStatusEl = this.el.shadowRoot.querySelector(".searchable-select-results-status");
+            if (searchableSelectResultsStatusEl) {
+                if (this.noOptions !== null) {
+                    searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;
+                }
+                else {
+                    searchableSelectResultsStatusEl.innerText = "";
+                }
+            }
+        };
+        this.getDefaultValue = (value) => this.getLabelFromValue(value) || value || null;
+        this.onFocus = () => {
+            this.icFocus.emit();
+        };
+        this.onBlur = (event) => {
+            var _a;
+            const target = event.relatedTarget;
+            if (target !== null &&
+                target.tagName === "UL" &&
+                target.className.includes("menu")) {
+                return;
+            }
+            const retryButton = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector("#retry-button");
+            const isSearchableAndNoFocusedInternalElements = this.searchable &&
+                event.relatedTarget !== this.menu &&
+                !Array.from(this.menu.querySelectorAll("[role='option']")).includes(event.relatedTarget) &&
+                !(this.clearButton && event.relatedTarget === this.clearButton) &&
+                !(retryButton && event.relatedTarget === retryButton);
+            if (isSearchableAndNoFocusedInternalElements) {
+                if (!this.retryButtonClick) {
+                    this.setMenuChange(false);
+                }
+                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.ariaActiveDescendant = undefined;
+        this.clearButtonFocused = false;
+        this.debounceIcChange = undefined;
+        this.hiddenInputValue = undefined;
         this.noOptions = null;
-        this.filteredOptions = newFilteredOptions;
-      }
-      else {
-        this.noOptions = noOptions;
-        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 (_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.icInput.emit({ value: this.searchableSelectInputValue });
-      this.emitIcChange(this.searchableSelectInputValue);
-      this.hiddenInputValue = this.searchableSelectInputValue;
-      this.inputValueToFilter = this.searchableSelectInputValue;
-      this.setMenuChange(true);
-      if (!this.disableFilter) {
-        this.handleFilter();
-        this.debounceAriaLiveUpdate();
-      }
-    };
-    this.updateSearchableSelectResultAriaLive = () => {
-      const searchableSelectResultsStatusEl = this.host.shadowRoot.querySelector(".searchable-select-results-status");
-      if (searchableSelectResultsStatusEl) {
-        if (this.noOptions !== null) {
-          searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;
-        }
-        else {
-          searchableSelectResultsStatusEl.innerText = "";
-        }
-      }
-    };
-    this.getDefaultValue = (value) => this.getLabelFromValue(value) || value || null;
-    this.onFocus = () => {
-      this.icFocus.emit();
-    };
-    this.onBlur = (event) => {
-      var _a;
-      const target = event.relatedTarget;
-      if (target !== null &&
-        target.tagName === "UL" &&
-        target.className.includes("menu")) {
-        return;
-      }
-      const retryButton = (_a = this.menu) === null || _a === void 0 ? void 0 : _a.querySelector("#retry-button");
-      const isSearchableAndNoFocusedInternalElements = this.searchable &&
-        event.relatedTarget !== this.menu &&
-        !Array.from(this.menu.querySelectorAll("[role='option']")).includes(event.relatedTarget) &&
-        !(this.clearButton && event.relatedTarget === this.clearButton) &&
-        !(retryButton && event.relatedTarget === retryButton);
-      if (isSearchableAndNoFocusedInternalElements) {
-        if (!this.retryButtonClick) {
-          this.setMenuChange(false);
-        }
-        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.ariaActiveDescendant = undefined;
-    this.clearButtonFocused = false;
-    this.debounceIcChange = undefined;
-    this.hiddenInputValue = undefined;
-    this.noOptions = null;
-    this.open = false;
-    this.pressedCharacters = "";
-    this.searchableSelectInputValue = null;
-    this.charactersUntilSuggestions = 0;
-    this.disabled = false;
-    this.disableFilter = false;
-    this.emptyOptionListText = "No results found";
-    this.fullWidth = false;
-    this.helperText = "";
-    this.hideLabel = false;
-    this.includeDescriptionsInSearch = false;
-    this.includeGroupTitlesInSearch = false;
-    this.label = undefined;
-    this.loadingErrorLabel = "Loading Error";
-    this.loadingLabel = "Loading...";
-    this.name = this.inputId;
-    this.placeholder = "Select an option";
-    this.readonly = false;
-    this.required = false;
-    this.searchable = false;
-    this.searchMatchPosition = "anywhere";
-    this.showClearButton = false;
-    this.small = false;
-    this.timeout = undefined;
-    this.validationStatus = "";
-    this.validationText = "";
-    this.loading = false;
-    this.options = [];
-    this.filteredOptions = this.options;
-    this.uniqueOptions = this.options;
-    this.debounce = 0;
-    this.currDebounce = this.debounce;
-    this.value = undefined;
-    this.initialValue = this.value;
-    this.inputValueToFilter = this.value;
-    this.currValue = this.value;
-  }
-  loadingHandler(newValue) {
-    newValue && this.triggerLoading();
-  }
-  watchOptionsHandler() {
-    if (!this.hasTimedOut) {
-      this.loading = false;
-      clearTimeout(this.timeoutTimer);
-      if (this.isExternalFiltering()) {
-        if (this.options.length > 0) {
-          this.setOptionsValuesFromLabels();
-          this.noOptions = null;
-          this.uniqueOptions = this.deduplicateOptions(this.options);
-          this.filteredOptions = this.uniqueOptions;
+        this.open = false;
+        this.pressedCharacters = "";
+        this.searchableSelectInputValue = null;
+        this.charactersUntilSuggestions = 0;
+        this.disabled = false;
+        this.disableFilter = false;
+        this.emptyOptionListText = "No results found";
+        this.form = undefined;
+        this.formaction = undefined;
+        this.formenctype = undefined;
+        this.formmethod = undefined;
+        this.formnovalidate = undefined;
+        this.formtarget = undefined;
+        this.fullWidth = false;
+        this.helperText = "";
+        this.hideLabel = false;
+        this.includeDescriptionsInSearch = false;
+        this.includeGroupTitlesInSearch = false;
+        this.label = undefined;
+        this.loadingErrorLabel = "Loading Error";
+        this.loadingLabel = "Loading...";
+        this.name = this.inputId;
+        this.placeholder = "Select an option";
+        this.readonly = false;
+        this.required = false;
+        this.searchable = false;
+        this.searchMatchPosition = "anywhere";
+        this.selectOnEnter = false;
+        this.showClearButton = false;
+        this.size = "default";
+        this.small = false;
+        this.timeout = undefined;
+        this.validationStatus = "";
+        this.validationText = "";
+        this.loading = false;
+        this.options = [];
+        this.filteredOptions = this.options;
+        this.uniqueOptions = this.options;
+        this.debounce = 0;
+        this.currDebounce = this.debounce;
+        this.value = undefined;
+        this.initialValue = this.value;
+        this.inputValueToFilter = this.value;
+        this.currValue = this.value;
+    }
+    loadingHandler(newValue) {
+        newValue && this.triggerLoading();
+    }
+    watchOptionsHandler() {
+        if (!this.hasTimedOut) {
+            this.loading = false;
+            clearTimeout(this.timeoutTimer);
+            if (this.isExternalFiltering()) {
+                if (this.options.length > 0) {
+                    this.setOptionsValuesFromLabels();
+                    this.noOptions = null;
+                    this.uniqueOptions = this.deduplicateOptions(this.options);
+                    this.filteredOptions = this.uniqueOptions;
+                }
+                else {
+                    this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
+                    this.uniqueOptions = this.noOptions;
+                    this.filteredOptions = this.noOptions;
+                }
+                this.updateSearchableSelectResultAriaLive();
+                this.setDefaultValue();
+            }
+            else {
+                this.setOptionsValuesFromLabels();
+                this.uniqueOptions = this.deduplicateOptions(this.options);
+                this.filteredOptions = this.uniqueOptions;
+                if (this.initialOptionsEmpty) {
+                    this.setDefaultValue();
+                    this.initialOptionsEmpty = false;
+                }
+            }
         }
         else {
-          this.noOptions = [{ label: this.emptyOptionListText, value: "" }];
-          this.uniqueOptions = this.noOptions;
-          this.filteredOptions = this.noOptions;
-        }
-        this.updateSearchableSelectResultAriaLive();
-        this.setDefaultValue();
-      }
-      else {
-        this.setOptionsValuesFromLabels();
-        this.uniqueOptions = this.deduplicateOptions(this.options);
-        this.filteredOptions = this.uniqueOptions;
-        if (this.initialOptionsEmpty) {
-          this.setDefaultValue();
-          this.initialOptionsEmpty = false;
+            if (!this.searchable)
+                this.options = this.noOptions;
         }
-      }
     }
-    else {
-      if (!this.searchable)
-        this.options = this.noOptions;
+    debounceChangedHandler(newValue) {
+        this.updateOnChangeDebounce(newValue);
     }
-  }
-  debounceChangedHandler(newValue) {
-    this.updateOnChangeDebounce(newValue);
-  }
-  valueChangedHandler() {
-    if (this.value !== this.currValue) {
-      this.currValue = this.value;
-    }
-    if (this.searchable) {
-      this.searchableSelectInputValue =
-        this.getLabelFromValue(this.currValue) || this.currValue;
+    valueChangedHandler() {
+        if (this.value !== this.currValue) {
+            this.currValue = this.value;
+        }
+        if (this.searchable) {
+            this.searchableSelectInputValue =
+                this.getLabelFromValue(this.currValue) || this.currValue;
+        }
     }
-  }
-  disconnectedCallback() {
-    removeFormResetListener(this.host, this.handleFormReset);
-  }
-  componentWillLoad() {
-    this.inheritedAttributes = inheritAttributes(this.host, [
-      ...IC_INHERITED_ARIA,
-      "tabindex",
-      "title",
-    ]);
-    removeDisabledFalse(this.disabled, this.host);
-    this.setOptionsValuesFromLabels();
-    addFormResetListener(this.host, this.handleFormReset);
-    if (!this.options.length) {
-      this.initialOptionsEmpty = true;
+    disconnectedCallback() {
+        removeFormResetListener(this.el, this.handleFormReset);
     }
-    else {
-      this.setDefaultValue();
-      this.uniqueOptions = this.deduplicateOptions(this.options);
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, [
+            ...IC_INHERITED_ARIA,
+            "tabindex",
+            "title",
+        ]);
+        removeDisabledFalse(this.disabled, this.el);
+        this.setOptionsValuesFromLabels();
+        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() {
-    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
-    if (this.loading) {
-      this.triggerLoading();
+    componentDidLoad() {
+        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
+        if (this.loading) {
+            this.triggerLoading();
+        }
+        this.hiddenInputValue = this.searchable && this.currValue;
     }
-    this.hiddenInputValue = this.searchable && this.currValue;
-  }
-  componentDidRender() {
-    if (this.nativeSelectElement && !this.disabled) {
-      this.setTextColor();
+    componentDidRender() {
+        if (this.nativeSelectElement && !this.disabled) {
+            this.setTextColor();
+        }
     }
-  }
-  /**
-   * Sets focus on the input box.
-   */
-  async setFocus() {
-    if (this.nativeSelectElement) {
-      this.nativeSelectElement.focus();
+    /**
+     * 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();
+        }
     }
-    else if (this.customSelectElement) {
-      this.customSelectElement.focus();
+    updateOnChangeDebounce(newValue) {
+        if (this.currDebounce !== newValue) {
+            this.currDebounce = newValue;
+        }
     }
-    else if (this.searchableSelectElement) {
-      this.searchableSelectElement.focus();
+    debounceAriaLiveUpdate() {
+        clearTimeout(this.debounceAria);
+        window.setTimeout(() => {
+            this.updateSearchableSelectResultAriaLive();
+        }, 800);
     }
-  }
-  updateOnChangeDebounce(newValue) {
-    if (this.currDebounce !== newValue) {
-      this.currDebounce = newValue;
+    setDefaultValue() {
+        if (!this.hasSetDefaultValue && this.currValue) {
+            this.searchableSelectInputValue = this.getDefaultValue(this.currValue);
+            this.initialValue = this.currValue;
+            this.hasSetDefaultValue = true;
+        }
     }
-  }
-  debounceAriaLiveUpdate() {
-    clearTimeout(this.debounceAria);
-    window.setTimeout(() => {
-      this.updateSearchableSelectResultAriaLive();
-    }, 800);
-  }
-  setDefaultValue() {
-    if (!this.hasSetDefaultValue && this.currValue) {
-      this.searchableSelectInputValue = this.getDefaultValue(this.currValue);
-      this.initialValue = this.currValue;
-      this.hasSetDefaultValue = true;
+    render() {
+        const { small, size, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
+        renderHiddenInput(true, this.el, name, this.searchable ? this.hiddenInputValue : currValue, disabled);
+        const invalid = validationStatus === IcInformationStatus.Error ? "true" : "false";
+        const describedBy = getInputDescribedByText(this.inputId, helperText !== "", hasValidationStatus(this.validationStatus, this.disabled)).trim();
+        return (h(Host, { class: {
+                disabled: disabled,
+                searchable: searchable,
+                small: small || size === "small",
+                "full-width": fullWidth,
+            }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, small: small || size === "small", fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, readonly ? (h("ic-typography", null, h("p", null, this.getLabelFromValue(currValue)))) : isMobileOrTablet() ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown, form: this.form }, this.inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
+            if (option.children) {
+                return (h("optgroup", { label: option.label }, option.children.map((option) => (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label)))));
+            }
+            else {
+                return (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label));
+            }
+        }))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: "select-input", role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": this.open ? "true" : "false", "aria-invalid": invalid, "aria-required": required ? "true" : "false", "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, form: this.form, formaction: this.formaction, formenctype: this.formenctype, formmethod: this.formmethod, formnovalidate: this.formnovalidate, formtarget: this.formtarget }), this.searchableSelectInputValue &&
+            (showClearButton || searchable) && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && currValue === null
+                ? "Clear input"
+                : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: size, variant: "icon", appearance: this.clearButtonFocused
+                ? IcThemeForegroundEnum.Light
+                : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
+                "expand-icon": true,
+                "expand-icon-open": this.open,
+                "expand-icon-filled": !(currValue == null || currValue === ""),
+            }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { "aria-live": "polite", role: "status", class: "searchable-select-results-status" }))) : (h("div", { class: "select-container" }, h("button", { class: "select-input", ref: (el) => (this.customSelectElement = el), id: this.inputId, "aria-label": `${label}, ${this.getLabelFromValue(currValue) || placeholder}${required ? ", required" : ""}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": this.open ? "true" : "false", "aria-owns": menuId, "aria-controls": menuId, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.handleClick, onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("ic-typography", { variant: "body", class: {
+                "value-text": true,
+                placeholder: this.getLabelFromValue(currValue) === undefined,
+            } }, h("p", null, this.getLabelFromValue(currValue) || placeholder)), h("div", { class: "select-input-end" }, currValue && showClearButton && (h("div", { class: "divider" })), h("span", { class: {
+                "expand-icon": true,
+                "expand-icon-open": this.open,
+                "expand-icon-filled": !(currValue == null || currValue === ""),
+            }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (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", appearance: this.clearButtonFocused
+                ? IcThemeForegroundEnum.Light
+                : IcThemeForegroundEnum.Dark }))))), !isMobileOrTablet() && (h("ic-menu", { class: {
+                "no-results": this.loading ||
+                    this.hasTimedOut ||
+                    (this.noOptions !== null &&
+                        this.noOptions[0] &&
+                        this.noOptions[0].label === this.emptyOptionListText),
+            }, ref: (el) => (this.menu = el), inputEl: searchable
+                ? this.searchableSelectElement
+                : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small || size === "small", menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : this.uniqueOptions, value: currValue, fullWidth: fullWidth, selectOnEnter: this.selectOnEnter, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, onMenuValueChange: this.handleMenuValueChange, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.el, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable || this.selectOnEnter ? "manual" : "automatic" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
     }
-  }
-  render() {
-    const { small, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, currValue, } = this;
-    const noOptionSelect = searchable &&
-      (this.loading ||
-        this.hasTimedOut ||
-        (this.noOptions !== null &&
-          this.noOptions[0] &&
-          this.noOptions[0].label === this.emptyOptionListText));
-    const inputValue = this.searchable ? this.hiddenInputValue : currValue;
-    renderHiddenInput(true, this.host, name, inputValue, disabled);
-    const invalid = validationStatus === IcInformationStatus.Error ? "true" : "false";
-    const describedBy = getInputDescribedByText(this.inputId, helperText !== "", hasValidationStatus(this.validationStatus, this.disabled)).trim();
-    return (h(Host, { class: {
-        disabled: disabled,
-        searchable: searchable,
-        small: small,
-        "full-width": fullWidth,
-      }, onBlur: this.onBlur }, h("ic-input-container", { readonly: readonly }, !hideLabel && (h("ic-input-label", { for: this.inputId, label: label, helperText: helperText, required: required, disabled: disabled, readonly: readonly })), h("ic-input-component-container", { ref: (el) => (this.anchorEl = el), class: { "menu-open": this.open }, small: small, fullWidth: fullWidth, disabled: disabled, readonly: readonly, validationStatus: validationStatus }, readonly ? (h("ic-typography", null, h("p", null, this.getLabelFromValue(currValue)))) : isMobileOrTablet() ? (h("select", Object.assign({ ref: (el) => (this.nativeSelectElement = el), disabled: disabled, onChange: this.handleNativeSelectChange, required: required, id: this.inputId, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.handleNativeSelectKeyDown }, this.inheritedAttributes), h("option", { value: "", selected: true, disabled: !showClearButton }, placeholder), options.map((option) => {
-      if (option.children) {
-        return (h("optgroup", { label: option.label }, option.children.map((option) => (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label)))));
-      }
-      else {
-        return (h("option", { value: option.value, disabled: option.disabled, selected: option.value === currValue }, option.label));
-      }
-    }))) : searchable ? (h("div", { class: "searchable-select-container" }, h("input", { class: "select-input", role: "combobox", autocomplete: "off", "aria-label": label, "aria-describedby": describedBy, "aria-activedescendant": this.ariaActiveDescendant, "aria-autocomplete": "list", "aria-expanded": this.open ? "true" : "false", "aria-invalid": invalid, "aria-required": required ? "true" : "false", "aria-controls": menuId, ref: (el) => (this.searchableSelectElement = el), id: this.inputId, value: this.searchableSelectInputValue, placeholder: placeholder, disabled: disabled, onInput: this.handleSearchableSelectInput, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onFocus: this.onFocus, onBlur: this.onBlur }), this.searchableSelectInputValue &&
-      (showClearButton || searchable) && (h("div", { class: "clear-button-container" }, h("ic-button", { id: "clear-button", ref: (el) => (this.clearButton = el), "aria-label": this.searchableSelectInputValue && currValue === null
-        ? "Clear input"
-        : "Clear selection", class: "clear-button", innerHTML: Clear, onClick: this.handleClear, onFocus: this.handleClearButtonFocus, onBlur: this.handleClearButtonBlur, size: small ? "small" : "default", variant: "icon", appearance: this.clearButtonFocused
-        ? IcThemeForegroundEnum.Light
-        : IcThemeForegroundEnum.Dark }), h("div", { class: "divider" }))), h("span", { onMouseDown: this.handleExpandIconMouseDown, class: {
-        "expand-icon": true,
-        "expand-icon-open": this.open,
-        "expand-icon-filled": !(currValue == null || currValue === ""),
-      }, innerHTML: Expand, "aria-hidden": "true" }), h("div", { "aria-live": "polite", role: "status", class: "searchable-select-results-status" }))) : (h("div", { class: "select-container" }, h("button", { class: "select-input", ref: (el) => (this.customSelectElement = el), id: this.inputId, "aria-label": `${label}, ${this.getLabelFromValue(currValue) || placeholder}${required ? ", required" : ""}`, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-haspopup": "listbox", "aria-expanded": this.open ? "true" : "false", "aria-owns": menuId, "aria-controls": menuId, disabled: disabled, onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.handleClick, onMouseDown: this.handleMouseDown, onKeyDown: this.handleKeyDown }, h("ic-typography", { variant: "body", class: {
-        "value-text": true,
-        placeholder: this.getLabelFromValue(currValue) === undefined,
-      } }, h("p", null, this.getLabelFromValue(currValue) || placeholder)), h("div", { class: "select-input-end" }, currValue && showClearButton && (h("div", { class: "divider" })), h("span", { class: {
-        "expand-icon": true,
-        "expand-icon-open": this.open,
-        "expand-icon-filled": !(currValue == null || currValue === ""),
-      }, innerHTML: Expand, "aria-hidden": "true" }))), currValue && showClearButton && (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: small ? "small" : "default", variant: "icon", appearance: this.clearButtonFocused
-        ? IcThemeForegroundEnum.Light
-        : IcThemeForegroundEnum.Dark }))))), !isMobileOrTablet() && (h("ic-menu", { class: {
-        "no-results": noOptionSelect,
-      }, ref: (el) => (this.menu = el), inputEl: searchable
-        ? this.searchableSelectElement
-        : this.customSelectElement, inputLabel: label, anchorEl: this.anchorEl, small: small, menuId: menuId, open: this.open, options: searchable ? this.filteredOptions : this.uniqueOptions, value: currValue, fullWidth: fullWidth, onMenuStateChange: this.handleMenuChange, onMenuOptionSelect: this.handleCustomSelectChange, onMenuKeyPress: this.handleMenuKeyPress, onMenuValueChange: this.handleMenuValueChange, onUngroupedOptionsSet: this.setUngroupedOptions, onRetryButtonClicked: this.handleRetry, parentEl: this.host, onTimeoutBlur: this.onTimeoutBlur, activationType: this.searchable ? "manual" : "automatic" })), hasValidationStatus(this.validationStatus, this.disabled) && (h("ic-input-validation", { class: { "menu-open": this.open }, ariaLiveMode: "polite", status: validationStatus, message: validationText, for: this.inputId })))));
-  }
-  static get delegatesFocus() { return true; }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "loading": ["loadingHandler"],
-    "options": ["watchOptionsHandler"],
-    "debounce": ["debounceChangedHandler"],
-    "value": ["valueChangedHandler"]
-  }; }
+    static get delegatesFocus() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "loading": ["loadingHandler"],
+        "options": ["watchOptionsHandler"],
+        "debounce": ["debounceChangedHandler"],
+        "value": ["valueChangedHandler"]
+    }; }
 };
 Select.style = icSelectCss;
 
@@ -931,229 +943,220 @@ const icTextFieldCss = "/*! normalize.css v8.0.1 | MIT License | github.com/neco
 
 let inputIds = 0;
 const TextField = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.getValidationText = createEvent(this, "getValidationText", 7);
-    this.icBlur = createEvent(this, "icBlur", 7);
-    this.icChange = createEvent(this, "icChange", 7);
-    this.icFocus = createEvent(this, "icFocus", 7);
-    this.icInput = createEvent(this, "icInput", 7);
-    this.icKeydown = createEvent(this, "icKeydown", 7);
-    this.inheritedAttributes = {};
-    this.showLeftIcon = this.hasLeftIconSlot();
-    this.onInput = (ev) => {
-      this.value = ev.target.value;
-      this.icInput.emit({ value: this.value });
-    };
-    this.onBlur = (ev) => {
-      const value = ev.target.value;
-      this.icBlur.emit({ value: value });
-    };
-    this.onFocus = (ev) => {
-      const value = ev.target.value;
-      this.icFocus.emit({ value: value });
-    };
-    this.isTextArea = () => {
-      return this.rows > 1;
-    };
-    this.getInlineValidationText = () => {
-      this.getValidationText.emit({ value: this.validationText });
-    };
-    this.hasStatus = (status) => {
-      return status !== "" && !this.disabled;
-    };
-    this.showStatusText = (status) => {
-      return (this.hasStatus(status) &&
-        !(status == IcInformationStatus.Success && this.validationInline) &&
-        !this.validationInlineInternal);
-    };
-    this.handleFormReset = () => {
-      this.value = this.initialValue;
-    };
-    this.numChars = 0;
-    this.maxLengthExceeded = false;
-    this.maxValueExceeded = false;
-    this.minValueUnattained = false;
-    this.ariaActiveDescendant = undefined;
-    this.ariaAutocomplete = undefined;
-    this.ariaExpanded = undefined;
-    this.ariaOwns = undefined;
-    this.autocapitalize = "off";
-    this.autocomplete = "off";
-    this.autocorrect = "off";
-    this.autoFocus = false;
-    this.disabled = false;
-    this.fullWidth = false;
-    this.helperText = "";
-    this.hideLabel = false;
-    this.hiddenInput = true;
-    this.inputId = `ic-text-field-input-${inputIds++}`;
-    this.inputmode = "text";
-    this.label = undefined;
-    this.max = undefined;
-    this.maxLength = 0;
-    this.min = undefined;
-    this.name = this.inputId;
-    this.placeholder = "";
-    this.readonly = false;
-    this.required = false;
-    this.resize = false;
-    this.role = undefined;
-    this.rows = 1;
-    this.small = false;
-    this.spellcheck = false;
-    this.truncateValue = undefined;
-    this.type = "text";
-    this.validationInline = false;
-    this.validationInlineInternal = false;
-    this.validationStatus = "";
-    this.validationText = "";
-    this.debounce = 0;
-    this.value = "";
-    this.initialValue = this.value;
-  }
-  debounceChanged() {
-    this.icChange = debounceEvent(this.icChange, this.debounce);
-  }
-  watchValueHandler(newValue) {
-    if (this.inputEl && this.inputEl.value !== newValue) {
-      this.inputEl.value = newValue;
-    }
-    this.numChars = newValue.length;
-    if (this.type === "number") {
-      if (newValue && Number(newValue) < Number(this.min)) {
-        this.minValueUnattained = true;
-      }
-      else {
-        this.minValueUnattained = false;
-      }
-      if (Number(newValue) > Number(this.max)) {
-        this.maxValueExceeded = true;
-      }
-      else {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.getValidationText = createEvent(this, "getValidationText", 7);
+        this.icBlur = createEvent(this, "icBlur", 7);
+        this.icChange = createEvent(this, "icChange", 7);
+        this.icFocus = createEvent(this, "icFocus", 7);
+        this.icInput = createEvent(this, "icInput", 7);
+        this.icKeydown = createEvent(this, "icKeydown", 7);
+        this.inheritedAttributes = {};
+        this.showLeftIcon = this.hasLeftIconSlot();
+        this.getMaxLengthExceeded = (value) => {
+            this.numChars = value.length;
+            if (this.type === "number") {
+                this.minValueUnattained =
+                    value && Number(value) < Number(this.min) ? true : false;
+                this.maxValueExceeded = Number(value) > Number(this.max) ? true : false;
+            }
+            if (this.maxLength > 0) {
+                this.maxLengthExceeded = value.length > this.maxLength ? true : false;
+            }
+        };
+        this.onInput = (ev) => {
+            this.value = ev.target.value;
+            this.icInput.emit({ value: this.value });
+        };
+        this.onBlur = (ev) => {
+            const value = ev.target.value;
+            this.icBlur.emit({ value: value });
+        };
+        this.onFocus = (ev) => {
+            const value = ev.target.value;
+            this.icFocus.emit({ value: value });
+        };
+        this.isTextArea = () => {
+            return this.rows > 1;
+        };
+        this.getInlineValidationText = () => {
+            this.getValidationText.emit({ value: this.validationText });
+        };
+        this.hasStatus = (status) => {
+            return status !== "" && !this.disabled;
+        };
+        this.showStatusText = (status) => {
+            return (this.hasStatus(status) &&
+                !(status == IcInformationStatus.Success && this.validationInline) &&
+                !this.validationInlineInternal);
+        };
+        this.handleFormReset = () => {
+            this.value = this.initialValue;
+        };
+        this.numChars = 0;
+        this.maxLengthExceeded = false;
         this.maxValueExceeded = false;
-      }
+        this.minValueUnattained = false;
+        this.ariaActiveDescendant = undefined;
+        this.ariaAutocomplete = undefined;
+        this.ariaExpanded = undefined;
+        this.ariaOwns = undefined;
+        this.autocapitalize = "off";
+        this.autocomplete = "off";
+        this.autocorrect = "off";
+        this.autoFocus = false;
+        this.disabled = false;
+        this.fullWidth = false;
+        this.helperText = "";
+        this.hideLabel = false;
+        this.hiddenInput = true;
+        this.inputId = `ic-text-field-input-${inputIds++}`;
+        this.inputmode = "text";
+        this.label = undefined;
+        this.max = undefined;
+        this.maxLength = 0;
+        this.min = undefined;
+        this.name = this.inputId;
+        this.placeholder = "";
+        this.readonly = false;
+        this.required = false;
+        this.resize = false;
+        this.role = undefined;
+        this.rows = 1;
+        this.size = "default";
+        this.small = false;
+        this.spellcheck = false;
+        this.truncateValue = undefined;
+        this.type = "text";
+        this.validationInline = false;
+        this.validationInlineInternal = false;
+        this.validationStatus = "";
+        this.validationText = "";
+        this.debounce = 0;
+        this.value = "";
+        this.initialValue = this.value;
     }
-    if (this.maxLength > 0) {
-      if (newValue.length > this.maxLength) {
-        this.maxLengthExceeded = true;
-      }
-      else {
-        this.maxLengthExceeded = false;
-      }
+    debounceChanged() {
+        this.icChange = debounceEvent(this.icChange, this.debounce);
+    }
+    watchValueHandler(newValue) {
+        if (this.inputEl && this.inputEl.value !== newValue) {
+            this.inputEl.value = newValue;
+        }
+        this.getMaxLengthExceeded(newValue);
+        this.icChange.emit({ value: newValue });
+    }
+    connectedCallback() {
+        this.debounceChanged();
+    }
+    disconnectedCallback() {
+        removeFormResetListener(this.el, this.handleFormReset);
     }
-    this.icChange.emit({ value: newValue });
-  }
-  connectedCallback() {
-    this.debounceChanged();
-  }
-  disconnectedCallback() {
-    removeFormResetListener(this.el, this.handleFormReset);
-  }
-  componentWillLoad() {
-    this.watchValueHandler(this.value);
-    this.inheritedAttributes = inheritAttributes(this.el, [
-      ...IC_INHERITED_ARIA,
-      "title",
-      "aria-autocomplete",
-      "aria-haspopup",
-    ]);
-    if (this.readonly) {
-      this.maxLengthExceeded = false;
-      this.maxValueExceeded = false;
-      this.minValueUnattained = false;
+    componentWillLoad() {
+        if (this.value !== this.initialValue) {
+            this.watchValueHandler(this.value);
+        }
+        this.getMaxLengthExceeded(this.value);
+        this.inheritedAttributes = inheritAttributes(this.el, [
+            ...IC_INHERITED_ARIA,
+            "title",
+        ]);
+        if (this.readonly) {
+            this.maxLengthExceeded = false;
+            this.maxValueExceeded = false;
+            this.minValueUnattained = false;
+        }
+        addFormResetListener(this.el, this.handleFormReset);
+        removeDisabledFalse(this.disabled, this.el);
     }
-    addFormResetListener(this.el, this.handleFormReset);
-    removeDisabledFalse(this.disabled, this.el);
-  }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Text Field");
-    if (this.validationInlineInternal) {
-      this.getInlineValidationText();
+    componentDidLoad() {
+        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Text Field");
+        if (this.validationInlineInternal) {
+            this.getInlineValidationText();
+        }
     }
-  }
-  handleKeyDown(ev) {
-    this.icKeydown.emit({ event: ev });
-  }
-  /**
-   * Sets focus on the native `input`.
-   */
-  async setFocus() {
-    if (this.inputEl) {
-      this.inputEl.focus();
+    handleKeyDown(ev) {
+        this.icKeydown.emit({ event: ev });
     }
-  }
-  hasLeftIconSlot() {
-    const iconEl = this.el.querySelector(`[slot="icon"]`);
-    return iconEl !== null;
-  }
-  render() {
-    const { inputId, name, label, required, small, placeholder, helperText, rows, resize, disabled, value, min, max, maxLength, numChars, readonly, maxLengthExceeded, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, } = this;
-    const disabledMode = readonly ? true : disabled;
-    const placeholderText = disabled ? "" : placeholder;
-    const currentStatus = maxLengthExceeded || maxValueExceeded || minValueUnattained
-      ? IcInformationStatus.Error
-      : validationStatus;
-    const currentValidationText = maxLengthExceeded
-      ? "Maximum length exceeded"
-      : maxValueExceeded
-        ? `Maximum value of ${max} exceeded`
-        : minValueUnattained
-          ? `Minimum value of ${min} not met`
-          : validationText;
-    const maxNumChars = readonly ? 0 : maxLength;
-    const messageAriaLive = maxLengthExceeded ||
-      maxValueExceeded ||
-      minValueUnattained ||
-      (maxLength === 0 && currentStatus === IcInformationStatus.Error)
-      ? "assertive"
-      : "polite";
-    const showStatusText = this.showStatusText(currentStatus);
-    const multiline = this.isTextArea();
-    const hiddenCharCountDescId = maxLength > 0 ? inputId + "-charcount-desc" : "";
-    const describedBy = (hiddenCharCountDescId +
-      " " +
-      getInputDescribedByText(inputId, helperText !== "", showStatusText)).trim();
-    if (this.showLeftIcon && !readonly && disabledMode) {
-      this.showLeftIcon = false;
+    /**
+     * Sets focus on the native `input`.
+     */
+    async setFocus() {
+        if (this.inputEl) {
+            this.inputEl.focus();
+        }
+    }
+    hasLeftIconSlot() {
+        const iconEl = this.el.querySelector(`[slot="icon"]`);
+        return iconEl !== null;
     }
-    const invalid = currentStatus === IcInformationStatus.Error ? "true" : "false";
-    const disabledText = disabledMode && !readonly;
-    if (hiddenInput) {
-      renderHiddenInput(true, this.el, name, value, disabledMode);
+    render() {
+        const { inputId, name, label, required, size, small, placeholder, helperText, rows, resize, disabled, value, min, max, maxLength, numChars, readonly, maxLengthExceeded, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, } = this;
+        const disabledMode = readonly ? true : disabled;
+        const placeholderText = disabled ? "" : placeholder;
+        const currentStatus = maxLengthExceeded || maxValueExceeded || minValueUnattained
+            ? IcInformationStatus.Error
+            : validationStatus;
+        const currentValidationText = maxLengthExceeded
+            ? "Maximum length exceeded"
+            : maxValueExceeded
+                ? `Maximum value of ${max} exceeded`
+                : minValueUnattained
+                    ? `Minimum value of ${min} not met`
+                    : validationText;
+        const maxNumChars = readonly ? 0 : maxLength;
+        const messageAriaLive = maxLengthExceeded ||
+            maxValueExceeded ||
+            minValueUnattained ||
+            (maxLength === 0 && currentStatus === IcInformationStatus.Error)
+            ? "assertive"
+            : "polite";
+        const showStatusText = this.showStatusText(currentStatus);
+        const multiline = this.isTextArea();
+        const hiddenCharCountDescId = maxLength > 0 ? inputId + "-charcount-desc" : "";
+        const describedBy = (hiddenCharCountDescId +
+            " " +
+            getInputDescribedByText(inputId, helperText !== "", showStatusText)).trim();
+        if (this.showLeftIcon && !readonly && disabledMode) {
+            this.showLeftIcon = false;
+        }
+        const invalid = currentStatus === IcInformationStatus.Error ? "true" : "false";
+        const disabledText = disabledMode && !readonly;
+        if (hiddenInput) {
+            renderHiddenInput(true, this.el, name, value, disabledMode);
+        }
+        return (h(Host, { class: { ["fullwidth"]: fullWidth } }, h("ic-input-container", { readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { size: small ? "small" : size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, this.showLeftIcon && (h("span", { class: {
+                ["readonly"]: readonly,
+                ["has-value"]: value.length > 0,
+            }, slot: "left-icon" }, h("slot", { name: "icon" }))), !multiline && (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: this.type, min: min, max: max, value: value, class: {
+                ["no-left-pad"]: !this.showLeftIcon && readonly,
+                ["readonly"]: readonly,
+                ["truncate-value"]: truncateValue,
+            }, placeholder: placeholderText, 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": this.ariaActiveDescendant, "aria-expanded": this.ariaExpanded, "aria-owns": this.ariaOwns, autocomplete: this.autocomplete, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, role: this.role }, this.inheritedAttributes))), multiline && (h("textarea", Object.assign({ id: inputId, class: {
+                ["no-resize"]: resize === false || readonly,
+                ["no-left-pad"]: !this.showLeftIcon && readonly,
+                ["readonly"]: readonly,
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholderText, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (h("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (h("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && h("slot", { name: "menu" }), (!isEmptyString(validationStatus) ||
+            !isEmptyString(validationText) ||
+            maxNumChars > 0 ||
+            maxValueExceeded ||
+            minValueUnattained) &&
+            !validationInlineInternal && (h("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
+                (currentStatus === IcInformationStatus.Success &&
+                    validationInline) ||
+                validationInlineInternal
+                ? ""
+                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { slot: "validation-message-adornment" }, h("ic-typography", { variant: "caption", class: {
+                ["maxlengthtext"]: true,
+                ["error"]: maxLengthExceeded,
+                ["disabled"]: disabledText,
+            } }, h("span", { "aria-live": "polite", id: `${inputId}-charcount`, class: "charcount" }, numChars, "/", maxNumChars), h("span", { hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))))));
     }
-    return (h(Host, { class: { ["fullwidth"]: fullWidth } }, h("ic-input-container", { readonly: readonly, disabled: disabledMode }, !this.hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { small: small, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, this.showLeftIcon && (h("span", { class: {
-        ["readonly"]: readonly,
-        ["has-value"]: value.length > 0,
-      }, slot: "left-icon" }, h("slot", { name: "icon" }))), !multiline && (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: this.type, min: min, max: max, value: value, class: {
-        ["no-left-pad"]: !this.showLeftIcon && readonly,
-        ["readonly"]: readonly,
-        ["truncate-value"]: truncateValue,
-      }, placeholder: placeholderText, 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": this.ariaActiveDescendant, "aria-expanded": this.ariaExpanded, "aria-owns": this.ariaOwns, autocomplete: this.autocomplete, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode, role: this.role }, this.inheritedAttributes))), multiline && (h("textarea", Object.assign({ id: inputId, class: {
-        ["no-resize"]: resize === false || readonly,
-        ["no-left-pad"]: !this.showLeftIcon && readonly,
-        ["readonly"]: readonly,
-      }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholderText, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (h("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (h("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && h("slot", { name: "menu" }), (!isEmptyString(validationStatus) ||
-      !isEmptyString(validationText) ||
-      maxNumChars > 0 ||
-      maxValueExceeded ||
-      minValueUnattained) &&
-      !validationInlineInternal && (h("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
-        (currentStatus === IcInformationStatus.Success &&
-          validationInline) ||
-        validationInlineInternal
-        ? ""
-        : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { slot: "validation-message-adornment" }, h("ic-typography", { variant: "caption", class: {
-        ["maxlengthtext"]: true,
-        ["error"]: maxLengthExceeded,
-        ["disabled"]: disabledText,
-      } }, h("span", { "aria-live": "polite", id: `${inputId}-charcount`, class: "charcount" }, numChars, "/", maxNumChars), h("span", { hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "debounce": ["debounceChanged"],
-    "value": ["watchValueHandler"]
-  }; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "debounce": ["debounceChanged"],
+        "value": ["watchValueHandler"]
+    }; }
 };
 TextField.style = icTextFieldCss;