@ukic/web-components 2.1.0-beta.10 → 2.1.0-beta.12

package/dist/collection/components/ic-tab-context/ic-tab-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-tab-context.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcActivationTypes,\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nimport {\n  IcTabClickEventDetail,\n  IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\n@Component({\n  tag: \"ic-tab-context\",\n})\nexport class TabContext {\n  @Element() host: HTMLIcTabContextElement;\n\n  /**\n   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.\n   */\n  @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n  /**\n   * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.\n   */\n  @Prop() selectedTabIndex?: number;\n\n  /**\n   * The appearance of the tab context, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  @State() selectedTab: number | null;\n\n  @Watch(\"selectedTabIndex\")\n  updateSelectedTab(newValue: number): void {\n    this.selectedTab = newValue;\n  }\n\n  /**\n   * @deprecated This event should not be used anymore. Use icTabSelect instead.\n   */\n  @Event() tabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n  /**\n   * Emitted when a user selects a tab.\n   */\n  @Event() icTabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n  @Listen(\"tabClick\")\n  tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n    if (\n      this.selectedTabIndex === undefined &&\n      event.detail.contextId === this.contextId\n    ) {\n      this.selectedTab = event.detail.position;\n    }\n    this.icTabSelect.emit({\n      tabIndex: event.detail.position,\n    });\n    this.tabSelect.emit({\n      tabIndex: event.detail.position,\n    });\n  }\n\n  private controlledMode: boolean;\n  private tabs: HTMLIcTabElement[];\n  private enabledTabs: HTMLIcTabElement[];\n  private tabPanels: HTMLIcTabPanelElement[];\n  private tabGroup: HTMLIcTabGroupElement;\n  private focusedTabIndex: number;\n\n  // Sets attributes to link tabs and tabpanels\n  private linkTabs = () => {\n    this.tabs.forEach((tab, index) => {\n      const tabId = `ic-tab-${index}-context-${this.contextId}`;\n      const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;\n      const shared = `ic-tab--${index}-context-${this.contextId}`;\n      tab.setAttribute(\"id\", tabId);\n      tab.tabId = shared;\n      tab.tabPosition = index;\n      tab.setAttribute(\"aria-controls\", tabPanelId);\n      tab.setAttribute(\"context-id\", this.contextId);\n      this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n      this.tabPanels[index].panelId = shared;\n      this.tabPanels[index].tabPosition = index;\n      this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n\n      if (this.appearance === IcThemeForegroundEnum.Light) {\n        tab.appearance = this.appearance;\n        this.tabPanels[index].appearance = this.appearance;\n      }\n    });\n\n    if (this.appearance === IcThemeForegroundEnum.Light) {\n      this.tabGroup.appearance = this.appearance;\n    }\n  };\n\n  // Gets tabs and tabpanels with the same context ID\n  private getChildren = (): void => {\n    this.tabGroup = Array.from(this.host.querySelectorAll(\"ic-tab-group\")).find(\n      (tabGroup) => tabGroup.contextId === this.contextId\n    );\n    this.tabs = Array.from(this.tabGroup.querySelectorAll(\"ic-tab\")).filter(\n      (tab) => tab.contextId === this.contextId\n    );\n    this.enabledTabs = this.getEnabledTabs();\n    this.tabPanels = Array.from(this.host.querySelectorAll(\"ic-tab-panel\"));\n  };\n\n  // Determines how keyboard navigation is to be handled based on the activation type\n  private attatchEventListeners = (): void => {\n    if (this.activationType === \"automatic\") {\n      this.tabGroup.addEventListener(\"keydown\", (event) => {\n        this.handleKeyBoardNavAutomatic(event);\n      });\n    } else {\n      this.tabGroup.addEventListener(\"keydown\", (event) => {\n        this.handleKeyBoardNavManual(event);\n      });\n    }\n  };\n\n  // Determines whether the selected tab is being controlled within the component\n  // or by the user (via selectedTabIndex and onIcTabSelect)\n  private setControlledMode = (): void => {\n    if (this.selectedTabIndex !== undefined) {\n      this.controlledMode = true;\n      this.selectedTab = this.selectedTabIndex;\n    }\n  };\n\n  // Sets the tab that is selected on initial render\n  private setInitialTab = (): void => {\n    if (this.controlledMode) {\n      this.selectedTab = this.selectedTabIndex;\n      this.focusedTabIndex = this.selectedTabIndex;\n    } else {\n      const firstEnabledTabIndex = this.tabs.findIndex(\n        (tab) => tab.tabId === this.enabledTabs[0].tabId\n      );\n      this.selectedTab = firstEnabledTabIndex;\n      this.focusedTabIndex = firstEnabledTabIndex;\n    }\n  };\n\n  // Passes the selected tab to the tab and tab panel components\n  private configureTabs = () => {\n    this.enabledTabs.forEach((tab) => {\n      tab.selected = tab.tabPosition === this.selectedTab;\n    });\n    this.tabPanels.forEach((tabPanel) => {\n      tabPanel.selectedTab = this.tabs[this.selectedTab].tabId;\n    });\n  };\n\n  private getEnabledTabs = () => {\n    return Array.from(this.tabs).filter((child) => !child.disabled);\n  };\n\n  private getIndexOfEnabledTab = (allTabsIndex: number) => {\n    return this.enabledTabs.findIndex(\n      (tab) => tab.tabId === this.tabs[allTabsIndex].tabId\n    );\n  };\n\n  // Sets focus on tab and selects it\n  private keyboardSelectTab = (enabledTabIndex: number) => {\n    const newIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n    );\n    this.enabledTabs[enabledTabIndex].focus();\n    if (!this.controlledMode) {\n      this.selectedTab = newIndex;\n    } else {\n      this.icTabSelect.emit({ tabIndex: newIndex });\n      this.tabSelect.emit({ tabIndex: newIndex });\n    }\n  };\n\n  // Sets focus on tab without selecting it (for manual activation)\n  private keyboardFocusTab = (enabledTabIndex: number) => {\n    const newIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n    );\n    this.enabledTabs[enabledTabIndex].focus();\n    this.focusedTabIndex = newIndex;\n  };\n\n  private handleKeyBoardNavAutomatic = (event: KeyboardEvent) => {\n    const key = event.key;\n    const enabledTabIndex = this.getIndexOfEnabledTab(this.selectedTab);\n    let preventDefault = true;\n    switch (key) {\n      case \"Home\":\n        this.keyboardSelectTab(0);\n        break;\n      case \"End\":\n        this.keyboardSelectTab(this.enabledTabs.length - 1);\n        break;\n      case \"ArrowRight\":\n        if (enabledTabIndex < this.enabledTabs.length - 1) {\n          this.keyboardSelectTab(enabledTabIndex + 1);\n        } else {\n          this.keyboardSelectTab(0);\n        }\n        break;\n      case \"ArrowLeft\":\n        if (enabledTabIndex > 0) {\n          this.keyboardSelectTab(enabledTabIndex - 1);\n        } else {\n          this.keyboardSelectTab(this.enabledTabs.length - 1);\n        }\n        break;\n      default:\n        preventDefault = false;\n    }\n    if (preventDefault) event.preventDefault();\n  };\n\n  private handleKeyBoardNavManual = (event: KeyboardEvent) => {\n    const key = event.key;\n    const enabledTabIndex = this.getIndexOfEnabledTab(this.focusedTabIndex);\n    let preventDefault = true;\n    switch (key) {\n      case \"Home\":\n        this.keyboardFocusTab(0);\n        break;\n      case \"End\":\n        this.keyboardFocusTab(this.enabledTabs.length - 1);\n        break;\n      case \"ArrowRight\":\n        if (enabledTabIndex < this.enabledTabs.length - 1) {\n          this.keyboardFocusTab(enabledTabIndex + 1);\n        } else {\n          this.keyboardFocusTab(0);\n        }\n        break;\n      case \"ArrowLeft\":\n        if (enabledTabIndex > 0) {\n          this.keyboardFocusTab(enabledTabIndex - 1);\n        } else {\n          this.keyboardFocusTab(this.enabledTabs.length - 1);\n        }\n        break;\n      case \"Enter\":\n        this.keyboardSelectTab(this.focusedTabIndex);\n        break;\n      case \" \":\n        this.keyboardSelectTab(this.focusedTabIndex);\n        break;\n      default:\n        preventDefault = false;\n    }\n    if (preventDefault) event.preventDefault();\n  };\n\n  componentDidLoad(): void {\n    this.setControlledMode();\n    this.getChildren();\n    this.linkTabs();\n    this.attatchEventListeners();\n    this.setInitialTab();\n    this.configureTabs();\n  }\n\n  componentWillUpdate(): void {\n    this.configureTabs();\n  }\n\n  disconnectedCallback(): void {\n    if (this.activationType === \"manual\") {\n      this.tabGroup.removeEventListener(\"keydown\", (event) =>\n        this.handleKeyBoardNavManual(event)\n      );\n    } else {\n      this.tabGroup.removeEventListener(\"keydown\", (event) =>\n        this.handleKeyBoardNavAutomatic(event)\n      );\n    }\n  }\n\n  render() {\n    return <slot></slot>;\n  }\n}\n"]}
+{"version":3,"file":"ic-tab-context.js","sourceRoot":"","sources":["../../../src/components/ic-tab-context/ic-tab-context.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Prop,\n  State,\n  h,\n  Watch,\n  Method,\n} from \"@stencil/core\";\nimport {\n  IcActivationTypes,\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nimport {\n  IcTabClickEventDetail,\n  IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\n@Component({\n  tag: \"ic-tab-context\",\n})\nexport class TabContext {\n  private controlledMode: boolean;\n  private tabs: HTMLIcTabElement[];\n  private enabledTabs: HTMLIcTabElement[];\n  private tabPanels: HTMLIcTabPanelElement[];\n  private tabGroup: HTMLIcTabGroupElement;\n  private focusedTabIndex: number;\n  private newTabs: HTMLIcTabElement[] = [];\n  private newTabPanels: HTMLIcTabPanelElement[] = [];\n\n  @Element() host: HTMLIcTabContextElement;\n\n  /**\n   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * Determines whether tabs have to be manually activated (by pressing 'Enter' or 'Space') when they receive focus using keyboard navigation.\n   */\n  @Prop() activationType?: IcActivationTypes = \"automatic\";\n\n  /**\n   * The selected tab to be controlled by the user. Must be used alongside the icTabSelect event to manage tab selection.\n   */\n  @Prop() selectedTabIndex?: number;\n\n  /**\n   * The appearance of the tab context, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  @State() selectedTab: number | null;\n\n  @Watch(\"selectedTabIndex\")\n  updateSelectedTab(newValue: number): void {\n    this.selectedTab = newValue;\n  }\n\n  /**\n   * @deprecated This event should not be used anymore. Use icTabSelect instead.\n   */\n  @Event() tabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n  /**\n   * Emitted when a user selects a tab.\n   */\n  @Event() icTabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n  @Listen(\"tabClick\")\n  tabClickHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n    if (\n      this.selectedTabIndex === undefined &&\n      event.detail.contextId === this.contextId\n    ) {\n      this.selectedTab = event.detail.position;\n    }\n    this.icTabSelect.emit({\n      tabIndex: event.detail.position,\n    });\n    this.tabSelect.emit({\n      tabIndex: event.detail.position,\n    });\n  }\n\n  @Listen(\"tabCreated\")\n  @Listen(\"tabPanelCreated\")\n  tabCreatedHandler(ev: CustomEvent) {\n    if (this.tabs && this.tabPanels) {\n      (ev.detail.setFocus ? this.newTabs : this.newTabPanels).push(ev.detail);\n      if (this.newTabs.length === this.newTabPanels.length) {\n        this.tabs.push(...this.newTabs);\n        this.tabPanels.push(...this.newTabPanels);\n        this.enabledTabs = this.getEnabledTabs();\n        this.linkTabs();\n        this.newTabs = [];\n        this.newTabPanels = [];\n      }\n    }\n  }\n\n  /**\n   * @internal Used to set tab/tab panel IDs when a tab/tab panel has been removed\n   */\n  @Method()\n  async tabRemovedHandler(hadFocus?: boolean) {\n    this.getChildren();\n    this.enabledTabs = this.getEnabledTabs();\n    this.linkTabs();\n    if (this.tabs[this.selectedTab] && this.tabPanels[this.selectedTab]) {\n      this.tabs[this.selectedTab].selected = true;\n      this.tabPanels[this.selectedTab].selectedTab =\n        this.tabs[this.selectedTab].tabId;\n    } else {\n      this.setInitialTab();\n    }\n\n    if (hadFocus) {\n      this.tabs[this.selectedTab].setFocus();\n    }\n  }\n\n  // Sets attributes to link tab-group, tabs and tab-panels\n  private linkTabs = () => {\n    this.tabs.forEach((tab, index) => {\n      const tabId = `ic-tab-${index}-context-${this.contextId}`;\n      const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;\n      const shared = `ic-tab--${index}-context-${this.contextId}`;\n      tab.setAttribute(\"id\", tabId);\n      tab.tabId = shared;\n      tab.tabPosition = index;\n      tab.setAttribute(\"aria-controls\", tabPanelId);\n      tab.setAttribute(\"context-id\", this.contextId);\n      this.tabGroup.setAttribute(\"context-id\", this.contextId);\n      this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n      this.tabPanels[index].panelId = shared;\n      this.tabPanels[index].tabPosition = index;\n      this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n      this.tabPanels[index].setAttribute(\"context-id\", this.contextId);\n\n      if (this.appearance === IcThemeForegroundEnum.Light) {\n        tab.appearance = this.appearance;\n        this.tabPanels[index].appearance = this.appearance;\n      }\n    });\n\n    if (this.appearance === IcThemeForegroundEnum.Light) {\n      this.tabGroup.appearance = this.appearance;\n    }\n  };\n\n  // Gets tabs and tabpanels with the same context ID\n  // Using querySelector to selector the children in relation to the host\n  private getChildren = (): void => {\n    this.tabGroup = this.host.querySelector(\"ic-tab-group\");\n    this.tabs = Array.from(this.tabGroup.querySelectorAll(\"ic-tab\"));\n    this.tabPanels = Array.from(this.host.children).filter(\n      (child) => child.tagName === \"IC-TAB-PANEL\"\n    ) as HTMLIcTabPanelElement[];\n    this.enabledTabs = this.getEnabledTabs();\n  };\n\n  // Determines how keyboard navigation is to be handled based on the activation type\n  private attatchEventListeners = (): void => {\n    if (this.activationType === \"automatic\") {\n      this.tabGroup.addEventListener(\"keydown\", (event) => {\n        this.handleKeyBoardNavAutomatic(event);\n      });\n    } else {\n      this.tabGroup.addEventListener(\"keydown\", (event) => {\n        this.handleKeyBoardNavManual(event);\n      });\n    }\n  };\n\n  // Determines whether the selected tab is being controlled within the component\n  // or by the user (via selectedTabIndex and onIcTabSelect)\n  private setControlledMode = (): void => {\n    if (this.selectedTabIndex !== undefined) {\n      this.controlledMode = true;\n      this.selectedTab = this.selectedTabIndex;\n    }\n  };\n\n  // Sets the tab that is selected on initial render\n  private setInitialTab = (): void => {\n    if (this.controlledMode) {\n      this.selectedTab = this.selectedTabIndex;\n      this.focusedTabIndex = this.selectedTabIndex;\n    } else {\n      const firstEnabledTabIndex = this.tabs.findIndex(\n        (tab) => tab.tabId === this.enabledTabs[0].tabId\n      );\n      this.selectedTab = firstEnabledTabIndex;\n      this.focusedTabIndex = firstEnabledTabIndex;\n    }\n  };\n\n  // Passes the selected tab to the tab and tab panel components\n  private configureTabs = () => {\n    this.enabledTabs.forEach((tab) => {\n      tab.selected = tab.tabPosition === this.selectedTab;\n    });\n    this.tabPanels.forEach((tabPanel) => {\n      tabPanel.selectedTab = this.tabs[this.selectedTab].tabId;\n    });\n  };\n\n  private getEnabledTabs = () => {\n    return Array.from(this.tabs).filter((child) => !child.disabled);\n  };\n\n  private getIndexOfEnabledTab = (allTabsIndex: number) => {\n    return this.enabledTabs.findIndex(\n      (tab) => tab.tabId === this.tabs[allTabsIndex].tabId\n    );\n  };\n\n  // Sets focus on tab and selects it\n  private keyboardSelectTab = (enabledTabIndex: number) => {\n    const newIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n    );\n    this.enabledTabs[enabledTabIndex].focus();\n    if (!this.controlledMode) {\n      this.selectedTab = newIndex;\n    } else {\n      this.icTabSelect.emit({ tabIndex: newIndex });\n      this.tabSelect.emit({ tabIndex: newIndex });\n    }\n  };\n\n  // Sets focus on tab without selecting it (for manual activation)\n  private keyboardFocusTab = (enabledTabIndex: number) => {\n    const newIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n    );\n    this.enabledTabs[enabledTabIndex].focus();\n    this.focusedTabIndex = newIndex;\n  };\n\n  private handleKeyBoardNavAutomatic = (event: KeyboardEvent) => {\n    const key = event.key;\n    const enabledTabIndex = this.getIndexOfEnabledTab(this.selectedTab);\n    let preventDefault = true;\n    switch (key) {\n      case \"Home\":\n        this.keyboardSelectTab(0);\n        break;\n      case \"End\":\n        this.keyboardSelectTab(this.enabledTabs.length - 1);\n        break;\n      case \"ArrowRight\":\n        if (enabledTabIndex < this.enabledTabs.length - 1) {\n          this.keyboardSelectTab(enabledTabIndex + 1);\n        } else {\n          this.keyboardSelectTab(0);\n        }\n        break;\n      case \"ArrowLeft\":\n        if (enabledTabIndex > 0) {\n          this.keyboardSelectTab(enabledTabIndex - 1);\n        } else {\n          this.keyboardSelectTab(this.enabledTabs.length - 1);\n        }\n        break;\n      default:\n        preventDefault = false;\n    }\n    if (preventDefault) event.preventDefault();\n  };\n\n  private handleKeyBoardNavManual = (event: KeyboardEvent) => {\n    const key = event.key;\n    const enabledTabIndex = this.getIndexOfEnabledTab(this.focusedTabIndex);\n    let preventDefault = true;\n    switch (key) {\n      case \"Home\":\n        this.keyboardFocusTab(0);\n        break;\n      case \"End\":\n        this.keyboardFocusTab(this.enabledTabs.length - 1);\n        break;\n      case \"ArrowRight\":\n        if (enabledTabIndex < this.enabledTabs.length - 1) {\n          this.keyboardFocusTab(enabledTabIndex + 1);\n        } else {\n          this.keyboardFocusTab(0);\n        }\n        break;\n      case \"ArrowLeft\":\n        if (enabledTabIndex > 0) {\n          this.keyboardFocusTab(enabledTabIndex - 1);\n        } else {\n          this.keyboardFocusTab(this.enabledTabs.length - 1);\n        }\n        break;\n      case \"Enter\":\n        this.keyboardSelectTab(this.focusedTabIndex);\n        break;\n      case \" \":\n        this.keyboardSelectTab(this.focusedTabIndex);\n        break;\n      default:\n        preventDefault = false;\n    }\n    if (preventDefault) event.preventDefault();\n  };\n\n  componentDidLoad(): void {\n    this.setControlledMode();\n    this.getChildren();\n    this.linkTabs();\n    this.attatchEventListeners();\n    this.setInitialTab();\n    this.configureTabs();\n  }\n\n  componentWillUpdate(): void {\n    this.configureTabs();\n  }\n\n  disconnectedCallback(): void {\n    if (this.activationType === \"manual\") {\n      this.tabGroup.removeEventListener(\"keydown\", (event) =>\n        this.handleKeyBoardNavManual(event)\n      );\n    } else {\n      this.tabGroup.removeEventListener(\"keydown\", (event) =>\n        this.handleKeyBoardNavAutomatic(event)\n      );\n    }\n  }\n\n  render() {\n    return <slot></slot>;\n  }\n}\n"]}

package/dist/collection/components/ic-tab-group/ic-tab-group.css

@@ -6,7 +6,7 @@
   border-bottom: 1px solid var(--border-bottom-color);
 }
 
-:host([inline]) {
+:host(.inline) {
   margin-bottom: 0;
   border-bottom: none;
 }

package/dist/collection/components/ic-tab-group/ic-tab-group.js

@@ -15,6 +15,7 @@ export class TabGroup {
     const { appearance, label } = this;
     return (h(Host, { role: "tablist", "aria-label": label, class: {
         ["light"]: appearance === IcThemeForegroundEnum.Light,
+        ["inline"]: this.inline,
       } }, h("ic-horizontal-scroll", { appearance: appearance === IcThemeForegroundEnum.Dark
         ? IcThemeForegroundEnum.Default
         : appearance }, h("div", { class: "tabs-container" }, h("slot", null)))));
@@ -45,8 +46,11 @@ export class TabGroup {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This is no longer required.\nThe context id is passed down from `ic-tab-context`"
+            }],
+          "text": ""
         },
         "attribute": "context-id",
         "reflect": true,

package/dist/collection/components/ic-tab-group/ic-tab-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-tab-group.js","sourceRoot":"","sources":["../../../src/components/ic-tab-group/ic-tab-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAS3B,MAAM,OAAO,QAAQ;;qBAM2B,SAAS;kBAKX,KAAK;;sBAUC,MAAM;;EAExD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,WAAW,CACZ,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEnC,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;OACtD;MAED,4BACE,UAAU,EACR,UAAU,KAAK,qBAAqB,CAAC,IAAI;UACvC,CAAC,CAAC,qBAAqB,CAAC,OAAO;UAC/B,CAAC,CAAC,UAAU;QAGhB,WAAK,KAAK,EAAC,gBAAgB;UACzB,eAAa,CACT,CACe,CAClB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tab-group\",\n  styleUrl: \"ic-tab-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class TabGroup {\n  @Element() host: HTMLIcTabGroupElement;\n\n  /**\n   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * If `true`, the tabs and tab panels will be positioned separately.\n   */\n  @Prop({ reflect: true }) inline?: boolean = false;\n\n  /**\n   * The label to describe the purpose of the set of tabs to screen reader users.\n   */\n  @Prop() label!: string;\n\n  /**\n   * @internal The appearance of the tab group, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tab Group\"\n    );\n  }\n\n  render() {\n    const { appearance, label } = this;\n\n    return (\n      <Host\n        role=\"tablist\"\n        aria-label={label}\n        class={{\n          [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <ic-horizontal-scroll\n          appearance={\n            appearance === IcThemeForegroundEnum.Dark\n              ? IcThemeForegroundEnum.Default\n              : appearance\n          }\n        >\n          <div class=\"tabs-container\">\n            <slot></slot>\n          </div>\n        </ic-horizontal-scroll>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-tab-group.js","sourceRoot":"","sources":["../../../src/components/ic-tab-group/ic-tab-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,gCAAgC,EAAE,MAAM,qBAAqB,CAAC;AACvE,OAAO,EAEL,qBAAqB,GACtB,MAAM,mBAAmB,CAAC;AAS3B,MAAM,OAAO,QAAQ;;qBAO2B,SAAS;kBAKX,KAAK;;sBAUC,MAAM;;EAExD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,WAAW,CACZ,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEnC,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,KAAK,EAAE;QACL,CAAC,OAAO,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;QACrD,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,MAAM;OACxB;MAED,4BACE,UAAU,EACR,UAAU,KAAK,qBAAqB,CAAC,IAAI;UACvC,CAAC,CAAC,qBAAqB,CAAC,OAAO;UAC/B,CAAC,CAAC,UAAU;QAGhB,WAAK,KAAK,EAAC,gBAAgB;UACzB,eAAa,CACT,CACe,CAClB,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n  IcThemeForegroundNoDefault,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tab-group\",\n  styleUrl: \"ic-tab-group.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class TabGroup {\n  @Element() host: HTMLIcTabGroupElement;\n\n  /**\n   * @deprecated This is no longer required.\n   * The context id is passed down from `ic-tab-context`\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * If `true`, the tabs and tab panels will be positioned separately.\n   */\n  @Prop({ reflect: true }) inline?: boolean = false;\n\n  /**\n   * The label to describe the purpose of the set of tabs to screen reader users.\n   */\n  @Prop() label!: string;\n\n  /**\n   * @internal The appearance of the tab group, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Tab Group\"\n    );\n  }\n\n  render() {\n    const { appearance, label } = this;\n\n    return (\n      <Host\n        role=\"tablist\"\n        aria-label={label}\n        class={{\n          [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n          [\"inline\"]: this.inline,\n        }}\n      >\n        <ic-horizontal-scroll\n          appearance={\n            appearance === IcThemeForegroundEnum.Dark\n              ? IcThemeForegroundEnum.Default\n              : appearance\n          }\n        >\n          <div class=\"tabs-container\">\n            <slot></slot>\n          </div>\n        </ic-horizontal-scroll>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-tab-panel/ic-tab-panel.css

@@ -5,7 +5,3 @@
 :host(.ic-tab-panel-light) {
   color: white;
 }
-
-:host([hidden]) {
-  display: none;
-}

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 export class TabPanel {
   constructor() {
@@ -8,6 +8,13 @@ export class TabPanel {
     this.selectedTab = undefined;
     this.appearance = "dark";
   }
+  connectedCallback() {
+    this.tabPanelCreated.emit(this.host);
+  }
+  disconnectedCallback() {
+    const tabContext = document.querySelector(`ic-tab-context[context-id=${this.contextId}]`);
+    tabContext.tabRemovedHandler();
+  }
   render() {
     const { panelId, selectedTab, appearance } = this;
     return (h(Host, { class: {
@@ -41,8 +48,11 @@ export class TabPanel {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel."
+          "tags": [{
+              "name": "deprecated",
+              "text": "This is no longer required.\nThe context id is passed down from `ic-tab-context`"
+            }],
+          "text": ""
         },
         "attribute": "context-id",
         "reflect": true,
@@ -136,6 +146,49 @@ export class TabPanel {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "tabPanelCreated",
+        "name": "tabPanelCreated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Emitted when a tab panel is dynamically created."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "HTMLIcTabPanelElement",
+          "resolved": "HTMLIcTabPanelElement",
+          "references": {
+            "HTMLIcTabPanelElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "tabPanelRemoved",
+        "name": "tabPanelRemoved",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Emitted when a tab panel is unmounted."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=ic-tab-panel.js.map

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-tab-panel.js","sourceRoot":"","sources":["../../../src/components/ic-tab-panel/ic-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,QAAQ;;qBAM2B,SAAS;;;;sBAYL,MAAM;;EAExD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAClD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,oBAAoB,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;OACnE,EACD,IAAI,EAAC,UAAU,EACf,MAAM,EACJ,OAAO,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS;QAChD,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,WAAW,CAAC;QAC5B,CAAC,CAAC,IAAI;MAGV;QACE,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport {\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tab-panel\",\n  styleUrl: \"ic-tab-panel.css\",\n  shadow: true,\n})\nexport class TabPanel {\n  @Element() host: HTMLIcTabPanelElement;\n\n  /**\n   * The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /** @internal The position of the tab panel inside the tabs array in context. */\n  @Prop({ reflect: true }) tabPosition?: number;\n\n  /** @internal The shared ID that links the panel and tab. */\n  @Prop({ reflect: true }) panelId?: string;\n\n  /** @internal The shared ID of the currently selected tab. */\n  @Prop() selectedTab?: string;\n\n  /** @internal The appearance of the tabs, e.g dark, or light. */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  render() {\n    const { panelId, selectedTab, appearance } = this;\n    return (\n      <Host\n        class={{\n          [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\n        }}\n        role=\"tabpanel\"\n        hidden={\n          panelId !== undefined && selectedTab !== undefined\n            ? !(panelId === selectedTab)\n            : true\n        }\n      >\n        <div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-tab-panel.js","sourceRoot":"","sources":["../../../src/components/ic-tab-panel/ic-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,QAAQ;;qBAO2B,SAAS;;;;sBAoBL,MAAM;;EAYxD,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACvC,CAAC;EAED,oBAAoB;IAClB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CACvC,6BAA6B,IAAI,CAAC,SAAS,GAAG,CACpB,CAAC;IAC7B,UAAU,CAAC,iBAAiB,EAAE,CAAC;EACjC,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAClD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,oBAAoB,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;OACnE,EACD,IAAI,EAAC,UAAU,EACf,MAAM,EACJ,OAAO,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS;QAChD,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,WAAW,CAAC;QAC5B,CAAC,CAAC,IAAI;MAGV;QACE,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport {\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tab-panel\",\n  styleUrl: \"ic-tab-panel.css\",\n  shadow: true,\n})\nexport class TabPanel {\n  @Element() host: HTMLIcTabPanelElement;\n\n  /**\n   * @deprecated This is no longer required.\n   * The context id is passed down from `ic-tab-context`\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * @internal The position of the tab panel inside the tabs array in context.\n   */\n  @Prop({ reflect: true }) tabPosition?: number;\n\n  /**\n   * @internal The shared ID that links the panel and tab.\n   */\n  @Prop({ reflect: true }) panelId?: string;\n\n  /**\n   * @internal The shared ID of the currently selected tab.\n   */\n  @Prop() selectedTab?: string;\n\n  /**\n   * @internal The appearance of the tabs, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  /**\n   * @internal Emitted when a tab panel is dynamically created.\n   */\n  @Event() tabPanelCreated: EventEmitter<HTMLIcTabPanelElement>;\n\n  /**\n   * @internal Emitted when a tab panel is unmounted.\n   */\n  @Event() tabPanelRemoved: EventEmitter<void>;\n\n  connectedCallback(): void {\n    this.tabPanelCreated.emit(this.host);\n  }\n\n  disconnectedCallback(): void {\n    const tabContext = document.querySelector(\n      `ic-tab-context[context-id=${this.contextId}]`\n    ) as HTMLIcTabContextElement;\n    tabContext.tabRemovedHandler();\n  }\n\n  render() {\n    const { panelId, selectedTab, appearance } = this;\n    return (\n      <Host\n        class={{\n          [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\n        }}\n        role=\"tabpanel\"\n        hidden={\n          panelId !== undefined && selectedTab !== undefined\n            ? !(panelId === selectedTab)\n            : true\n        }\n      >\n        <div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-text-field/ic-text-field.css

@@ -448,8 +448,7 @@ video {
   display: block;
 }
 
-:host([full-width]),
-.fullwidth {
+:host(.fullwidth) {
   width: 100%;
 }
 
@@ -517,7 +516,7 @@ textarea.no-resize {
   color: var(--ic-color-secondary-text);
 }
 
-.exceeded {
+.error {
   color: var(--ic-status-error);
 }
 

package/dist/collection/components/ic-text-field/ic-text-field.js

@@ -51,6 +51,8 @@ export class TextField {
     this.resize = false;
     this.small = false;
     this.value = "";
+    this.min = undefined;
+    this.max = undefined;
     this.maxLength = 0;
     this.validationStatus = "";
     this.validationText = "";
@@ -73,6 +75,8 @@ export class TextField {
     this.hiddenInput = true;
     this.numChars = 0;
     this.maxLengthExceeded = false;
+    this.minValueUnattained = false;
+    this.maxValueExceeded = false;
     this.initialValue = this.value;
   }
   debounceChanged() {
@@ -82,8 +86,22 @@ export class TextField {
     if (this.inputEl && this.inputEl.value !== newValue) {
       this.inputEl.value = newValue;
     }
+    this.numChars = newValue.length;
+    if (this.type === "number") {
+      if (newValue && Number(newValue) < this.min) {
+        this.minValueUnattained = true;
+      }
+      else {
+        this.minValueUnattained = false;
+      }
+      if (Number(newValue) > this.max) {
+        this.maxValueExceeded = true;
+      }
+      else {
+        this.maxValueExceeded = false;
+      }
+    }
     if (this.maxLength > 0) {
-      this.numChars = newValue.length;
       if (newValue.length > this.maxLength) {
         this.maxLengthExceeded = true;
       }
@@ -126,6 +144,8 @@ export class TextField {
     ]);
     if (this.readonly) {
       this.maxLengthExceeded = false;
+      this.maxValueExceeded = false;
+      this.minValueUnattained = false;
     }
     addFormResetListener(this.el, this.handleFormReset);
   }
@@ -136,17 +156,23 @@ export class TextField {
     removeFormResetListener(this.el, this.handleFormReset);
   }
   render() {
-    const { inputId, name, label, required, small, placeholder, helperText, rows, resize, disabled, value, maxLength, numChars, readonly, maxLengthExceeded, validationStatus, validationText, validationInline, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, } = this;
+    const { inputId, name, label, required, small, placeholder, helperText, rows, resize, disabled, value, min, max, maxLength, numChars, readonly, maxLengthExceeded, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, } = this;
     const disabledMode = readonly ? true : disabled;
     const placeholderText = disabled ? "" : placeholder;
-    const currentStatus = maxLengthExceeded
+    const currentStatus = maxLengthExceeded || maxValueExceeded || minValueUnattained
       ? IcInformationStatus.Error
       : validationStatus;
     const currentValidationText = maxLengthExceeded
       ? "Maximum length exceeded"
-      : validationText;
+      : 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";
@@ -169,7 +195,7 @@ export class TextField {
     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, value: value, class: {
+      }, 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,
@@ -179,13 +205,15 @@ export class TextField {
         ["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) && (h("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
+      maxNumChars > 0 ||
+      maxValueExceeded ||
+      minValueUnattained) && (h("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
         (currentStatus === IcInformationStatus.Success &&
           validationInline)
         ? ""
         : 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,
-        ["exceeded"]: maxLengthExceeded,
+        ["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.")))))))));
   }
@@ -436,6 +464,42 @@ export class TextField {
         "reflect": true,
         "defaultValue": "\"\""
       },
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)"
+        },
+        "attribute": "min",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)"
+        },
+        "attribute": "max",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
       "maxLength": {
         "type": "number",
         "mutable": false,
@@ -848,6 +912,8 @@ export class TextField {
     return {
       "numChars": {},
       "maxLengthExceeded": {},
+      "minValueUnattained": {},
+      "maxValueExceeded": {},
       "initialValue": {}
     };
   }

package/dist/collection/components/ic-text-field/ic-text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-text-field.js","sourceRoot":"","sources":["../../../src/components/ic-text-field/ic-text-field.tsx"],"names":[],"mappings":"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  Method,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  IcAutocompleteTypes,\n  IcAutocorrectStates,\n  IcInformationStatusOrEmpty,\n  IcValueEventDetail,\n} from \"../../interface\";\nimport { IcInformationStatus } from \"../../utils/types\";\nimport {\n  inheritAttributes,\n  debounceEvent,\n  getInputDescribedByText,\n  renderHiddenInput,\n  isEmptyString,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcAriaAutocompleteTypes,\n  IcTextFieldInputModes,\n  IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n  tag: \"ic-text-field\",\n  styleUrl: \"ic-text-field.css\",\n  shadow: true,\n})\nexport class TextField {\n  @Element() el: HTMLIcTextFieldElement;\n\n  private inputEl: HTMLInputElement | HTMLTextAreaElement;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  /**\n   * @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n   * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n   * @slot menu - an ic-menu component will appear below the input.\n   */\n\n  /**\n   * The ID for the input.\n   */\n  @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the input will require a value.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * If `true`, the read only state will be set.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * The placeholder value to be displayed.\n   */\n  @Prop() placeholder: string = \"\";\n\n  /**\n   * Specify whether the text field fills the full width of the container.\n   * If `true`, this overrides the --input-width CSS variable.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The number of rows to transform the text field into a text area with a specific height.\n   */\n  @Prop() rows: number = 1;\n\n  /**\n   * If `true`, the multiline text area will be resizeable.\n   */\n  @Prop() resize: boolean = false;\n\n  /**\n   * If `true`, the small styling will be applied to the text field.\n   */\n  @Prop({ reflect: true }) small: boolean = false;\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n  /**\n   * The maximum number of characters that can be entered in the field.\n   */\n  @Prop() maxLength: number = 0;\n\n  /**\n   * The validation state - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The validation state - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   * The automatic capitalisation of the text value as it is entered/edited by the user.\n   * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n   */\n  @Prop() autocapitalize = \"off\";\n\n  /**\n   * The state of autocompletion the browser can apply on the text value.\n   */\n  @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n  /**\n   * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n  /**\n   * If `true`, the form control will have input focus when the page loads.\n   */\n  @Prop() autoFocus = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n   */\n  @Prop() debounce: number = 0;\n\n  private showLeftIcon: boolean = this.hasLeftIconSlot();\n\n  @Watch(\"debounce\")\n  private debounceChanged() {\n    this.icChange = debounceEvent(this.icChange, this.debounce);\n  }\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop() type: IcTextFieldTypes = \"text\";\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n   * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n   */\n  @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the value of the text field will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n  /**\n   * @internal The active element when focus is on the ic-menu items.\n   */\n  @Prop() ariaActiveDescendant?: string;\n  /**\n   * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n   */\n  @Prop() truncateValue?: boolean;\n\n  /**\n   * @internal Used to identify if the slotted menu is rendered\n   */\n  @Prop() ariaExpanded: string;\n\n  /**\n   * @internal Used to identify any related child component\n   */\n  @Prop() ariaOwns: string;\n\n  /**\n   * @internal Used to identify whether inputting any text triggers more predictions\n   */\n  @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n  /**\n   * @internal Used to set the role if not default textbox;\n   */\n  @Prop() role: string;\n\n  /**\n   * @internal If `true`, the hidden form input will stop rendering for form submission.\n   */\n  @Prop() hiddenInput: boolean = true;\n\n  @State() numChars: number = 0;\n  @State() maxLengthExceeded: boolean = false;\n  @State() initialValue = this.value;\n\n  @Watch(\"value\")\n  watchValueHandler(newValue: string): void {\n    if (this.inputEl && this.inputEl.value !== newValue) {\n      this.inputEl.value = newValue;\n    }\n\n    if (this.maxLength > 0) {\n      this.numChars = newValue.length;\n      if (newValue.length > this.maxLength) {\n        this.maxLengthExceeded = true;\n      } else {\n        this.maxLengthExceeded = false;\n      }\n    }\n    this.icChange.emit({ value: newValue });\n  }\n\n  /**\n   * Sets focus on the native `input`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.inputEl) {\n      this.inputEl.focus();\n    }\n  }\n\n  //stop keydown event bubbling up to storybook\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    this.icKeydown.emit({ event: ev });\n    ev.cancelBubble = true;\n  }\n\n  /**\n   * Emitted when a keydown event occurred.\n   */\n  @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() icInput: EventEmitter<IcValueEventDetail>;\n  private onInput = (ev: Event) => {\n    this.value = (ev.target as HTMLInputElement).value;\n    this.icInput.emit({ value: this.value });\n  };\n\n  /**\n   * Emitted when input loses focus.\n   */\n  @Event() icBlur: EventEmitter<IcValueEventDetail>;\n  private onBlur = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icBlur.emit({ value: value });\n  };\n\n  /**\n   * Emitted when input gains focus.\n   */\n  @Event() icFocus: EventEmitter<IcValueEventDetail>;\n  private onFocus = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icFocus.emit({ value: value });\n  };\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n  private isTextArea = (): boolean => {\n    return this.rows > 1;\n  };\n\n  private hasLeftIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    if (iconEl != null) {\n      return true;\n    }\n    return false;\n  }\n\n  private hasStatus = (status: IcInformationStatusOrEmpty): boolean => {\n    return status !== \"\" && !this.disabled;\n  };\n\n  private showStatusText = (status: IcInformationStatusOrEmpty): boolean => {\n    if (\n      this.hasStatus(status) &&\n      !(status == IcInformationStatus.Success && this.validationInline)\n    ) {\n      return true;\n    }\n    return false;\n  };\n\n  private handleFormReset = (): void => {\n    this.value = this.initialValue;\n  };\n\n  connectedCallback(): void {\n    this.debounceChanged();\n  }\n\n  componentWillLoad(): void {\n    this.watchValueHandler(this.value);\n\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"title\",\n      \"aria-autocomplete\",\n      \"aria-haspopup\",\n    ]);\n\n    if (this.readonly) {\n      this.maxLengthExceeded = false;\n    }\n\n    addFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Text Field\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  render() {\n    const {\n      inputId,\n      name,\n      label,\n      required,\n      small,\n      placeholder,\n      helperText,\n      rows,\n      resize,\n      disabled,\n      value,\n      maxLength,\n      numChars,\n      readonly,\n      maxLengthExceeded,\n      validationStatus,\n      validationText,\n      validationInline,\n      spellcheck,\n      inputmode,\n      fullWidth,\n      truncateValue,\n      hiddenInput,\n    } = this;\n\n    const disabledMode = readonly ? true : disabled;\n\n    const placeholderText = disabled ? \"\" : placeholder;\n\n    const currentStatus = maxLengthExceeded\n      ? IcInformationStatus.Error\n      : validationStatus;\n\n    const currentValidationText = maxLengthExceeded\n      ? \"Maximum length exceeded\"\n      : validationText;\n\n    const maxNumChars = readonly ? 0 : maxLength;\n\n    const messageAriaLive =\n      maxLengthExceeded ||\n      (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n        ? \"assertive\"\n        : \"polite\";\n\n    const showStatusText = this.showStatusText(currentStatus);\n    const multiline = this.isTextArea();\n    const hiddenCharCountDescId =\n      maxLength > 0 ? inputId + \"-charcount-desc\" : \"\";\n    const describedBy = (\n      hiddenCharCountDescId +\n      \" \" +\n      getInputDescribedByText(inputId, helperText !== \"\", showStatusText)\n    ).trim();\n\n    if (this.showLeftIcon) {\n      if (!readonly && disabledMode) {\n        this.showLeftIcon = false;\n      }\n    }\n\n    const invalid =\n      currentStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n    const disabledText = disabledMode && !readonly;\n\n    if (hiddenInput) {\n      renderHiddenInput(true, this.el, name, value, disabledMode);\n    }\n\n    return (\n      <Host class={{ [\"fullwidth\"]: fullWidth }}>\n        <ic-input-container readonly={readonly} disabled={disabledMode}>\n          {!this.hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabledText}\n              readonly={readonly}\n            ></ic-input-label>\n          )}\n\n          <ic-input-component-container\n            small={small}\n            validationStatus={currentStatus}\n            multiLine={multiline}\n            disabled={disabledMode}\n            readonly={readonly}\n            validationInline={validationInline}\n            fullWidth={fullWidth}\n          >\n            {this.showLeftIcon && (\n              <span\n                class={{\n                  [\"readonly\"]: readonly,\n                  [\"has-value\"]: value.length > 0,\n                }}\n                slot=\"left-icon\"\n              >\n                <slot name=\"icon\" />\n              </span>\n            )}\n\n            {!multiline && (\n              <input\n                id={inputId}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLInputElement)}\n                type={this.type}\n                value={value}\n                class={{\n                  [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n                  [\"readonly\"]: readonly,\n                  [\"truncate-value\"]: truncateValue,\n                }}\n                placeholder={placeholderText}\n                required={required}\n                disabled={disabledMode}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                aria-activedescendant={this.ariaActiveDescendant}\n                aria-expanded={this.ariaExpanded}\n                aria-owns={this.ariaOwns}\n                autocomplete={this.autocomplete}\n                autocapitalize={this.autocapitalize}\n                autoFocus={this.autoFocus}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                role={this.role}\n                {...this.inheritedAttributes}\n              ></input>\n            )}\n            {multiline && (\n              <textarea\n                id={inputId}\n                class={{\n                  [\"no-resize\"]: resize === false || readonly,\n                  [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n                  [\"readonly\"]: readonly,\n                }}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n                value={value}\n                rows={rows}\n                required={required}\n                disabled={disabledMode}\n                placeholder={placeholderText}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                autocapitalize={this.autocapitalize}\n                autoFocus={this.autoFocus}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                {...this.inheritedAttributes}\n              ></textarea>\n            )}\n            {isSlotUsed(this.el, \"clear-button\") && (\n              <slot name=\"clear-button\"></slot>\n            )}\n            {isSlotUsed(this.el, \"search-submit-button\") && (\n              <slot name=\"search-submit-button\"></slot>\n            )}\n          </ic-input-component-container>\n          {isSlotUsed(this.el, \"menu\") && <slot name=\"menu\"></slot>}\n          {(!isEmptyString(validationStatus) ||\n            !isEmptyString(validationText) ||\n            maxNumChars > 0) && (\n            <ic-input-validation\n              status={\n                this.hasStatus(currentStatus) === false ||\n                (currentStatus === IcInformationStatus.Success &&\n                  validationInline)\n                  ? \"\"\n                  : currentStatus\n              }\n              message={showStatusText ? currentValidationText : \"\"}\n              ariaLiveMode={messageAriaLive}\n              for={inputId}\n              fullWidth={fullWidth}\n            >\n              {!readonly && maxNumChars > 0 && (\n                <div slot=\"validation-message-adornment\">\n                  <ic-typography\n                    variant=\"caption\"\n                    class={{\n                      [\"maxlengthtext\"]: true,\n                      [\"exceeded\"]: maxLengthExceeded,\n                      [\"disabled\"]: disabledText,\n                    }}\n                  >\n                    <span\n                      aria-live=\"polite\"\n                      id={`${inputId}-charcount`}\n                      class=\"charcount\"\n                    >\n                      {numChars}/{maxNumChars}\n                    </span>\n                    <span hidden={true} id={hiddenCharCountDescId}>\n                      Field can contain a maximum of {maxNumChars} characters.\n                    </span>\n                  </ic-typography>\n                </div>\n              )}\n            </ic-input-validation>\n          )}\n        </ic-input-container>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-text-field.js","sourceRoot":"","sources":["../../../src/components/ic-text-field/ic-text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  Method,\n  h,\n} from \"@stencil/core\";\n\nimport {\n  IcAutocompleteTypes,\n  IcAutocorrectStates,\n  IcInformationStatusOrEmpty,\n  IcValueEventDetail,\n} from \"../../interface\";\nimport { IcInformationStatus } from \"../../utils/types\";\nimport {\n  inheritAttributes,\n  debounceEvent,\n  getInputDescribedByText,\n  renderHiddenInput,\n  isEmptyString,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcAriaAutocompleteTypes,\n  IcTextFieldInputModes,\n  IcTextFieldTypes,\n} from \"./ic-text-field.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot icon - Content will be placed to the left of the text input.\n */\n@Component({\n  tag: \"ic-text-field\",\n  styleUrl: \"ic-text-field.css\",\n  shadow: true,\n})\nexport class TextField {\n  @Element() el: HTMLIcTextFieldElement;\n\n  private inputEl: HTMLInputElement | HTMLTextAreaElement;\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  /**\n   * @slot clear-button - an ic-button clear component will render as an end adornment to the input.\n   * @slot search-submit-button - an ic-button search submit component will render as an end adornment to the input.\n   * @slot menu - an ic-menu component will appear below the input.\n   */\n\n  /**\n   * The ID for the input.\n   */\n  @Prop() inputId?: string = `ic-text-field-input-${inputIds++}`;\n\n  /**\n   * The label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the input will require a value.\n   */\n  @Prop() required: boolean = false;\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * If `true`, the read only state will be set.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * The placeholder value to be displayed.\n   */\n  @Prop() placeholder: string = \"\";\n\n  /**\n   * Specify whether the text field fills the full width of the container.\n   * If `true`, this overrides the --input-width CSS variable.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The number of rows to transform the text field into a text area with a specific height.\n   */\n  @Prop() rows: number = 1;\n\n  /**\n   * If `true`, the multiline text area will be resizeable.\n   */\n  @Prop() resize: boolean = false;\n\n  /**\n   * If `true`, the small styling will be applied to the text field.\n   */\n  @Prop({ reflect: true }) small: boolean = false;\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\n\n  /**\n   * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)\n   */\n  @Prop() min: number = undefined;\n\n  /**\n   * The maximum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of max value in `helperText` or `label`)\n   */\n  @Prop() max: number = undefined;\n\n  /**\n   * The maximum number of characters that can be entered in the field.\n   */\n  @Prop() maxLength: number = 0;\n\n  /**\n   * The validation state - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The validation state - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * If `true`, the icon in input control will be displayed - only applies when validationStatus ='success'.\n   */\n  @Prop() validationInline: boolean = false;\n\n  /**\n   * The automatic capitalisation of the text value as it is entered/edited by the user.\n   * Available options: \"off\", \"none\", \"on\", \"sentences\", \"words\", \"characters\".\n   */\n  @Prop() autocapitalize = \"off\";\n\n  /**\n   * The state of autocompletion the browser can apply on the text value.\n   */\n  @Prop() autocomplete: IcAutocompleteTypes = \"off\";\n\n  /**\n   * The state of autocorrection the browser can apply when the user is entering/editing the text value.\n   */\n  @Prop() autocorrect: IcAutocorrectStates = \"off\";\n\n  /**\n   * If `true`, the form control will have input focus when the page loads.\n   */\n  @Prop() autoFocus = false;\n\n  /**\n   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.\n   */\n  @Prop() debounce: number = 0;\n\n  private showLeftIcon: boolean = this.hasLeftIconSlot();\n\n  @Watch(\"debounce\")\n  private debounceChanged() {\n    this.icChange = debounceEvent(this.icChange, this.debounce);\n  }\n\n  /**\n   * The type of control to display. The default type is text.\n   */\n  @Prop() type: IcTextFieldTypes = \"text\";\n\n  /**\n   * A hint to the browser for which keyboard to display.\n   * Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n   * `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.\n   */\n  @Prop() inputmode: IcTextFieldInputModes = \"text\";\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name: string = this.inputId;\n\n  /**\n   * If `true`, the value of the text field will have its spelling and grammar checked.\n   */\n  @Prop() spellcheck: boolean = false;\n\n  /**\n   * @internal The active element when focus is on the ic-menu items.\n   */\n  @Prop() ariaActiveDescendant?: string;\n  /**\n   * @internal If `true`, an ellipsis will be displayed at the end of the value if the value is longer than the container.\n   */\n  @Prop() truncateValue?: boolean;\n\n  /**\n   * @internal Used to identify if the slotted menu is rendered\n   */\n  @Prop() ariaExpanded: string;\n\n  /**\n   * @internal Used to identify any related child component\n   */\n  @Prop() ariaOwns: string;\n\n  /**\n   * @internal Used to identify whether inputting any text triggers more predictions\n   */\n  @Prop() ariaAutocomplete: IcAriaAutocompleteTypes = undefined;\n\n  /**\n   * @internal Used to set the role if not default textbox;\n   */\n  @Prop() role: string;\n\n  /**\n   * @internal If `true`, the hidden form input will stop rendering for form submission.\n   */\n  @Prop() hiddenInput: boolean = true;\n\n  @State() numChars: number = 0;\n  @State() maxLengthExceeded: boolean = false;\n  @State() minValueUnattained: boolean = false;\n  @State() maxValueExceeded: boolean = false;\n  @State() initialValue = this.value;\n\n  @Watch(\"value\")\n  watchValueHandler(newValue: string): void {\n    if (this.inputEl && this.inputEl.value !== newValue) {\n      this.inputEl.value = newValue;\n    }\n\n    this.numChars = newValue.length;\n\n    if (this.type === \"number\") {\n      if (newValue && Number(newValue) < this.min) {\n        this.minValueUnattained = true;\n      } else {\n        this.minValueUnattained = false;\n      }\n      if (Number(newValue) > this.max) {\n        this.maxValueExceeded = true;\n      } else {\n        this.maxValueExceeded = false;\n      }\n    }\n\n    if (this.maxLength > 0) {\n      if (newValue.length > this.maxLength) {\n        this.maxLengthExceeded = true;\n      } else {\n        this.maxLengthExceeded = false;\n      }\n    }\n    this.icChange.emit({ value: newValue });\n  }\n\n  /**\n   * Sets focus on the native `input`.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.inputEl) {\n      this.inputEl.focus();\n    }\n  }\n\n  //stop keydown event bubbling up to storybook\n  @Listen(\"keydown\", {})\n  handleKeyDown(ev: KeyboardEvent): void {\n    this.icKeydown.emit({ event: ev });\n    ev.cancelBubble = true;\n  }\n\n  /**\n   * Emitted when a keydown event occurred.\n   */\n  @Event() icKeydown: EventEmitter<{ event: KeyboardEvent }>;\n\n  /**\n   * Emitted when a keyboard input occurred.\n   */\n  @Event() icInput: EventEmitter<IcValueEventDetail>;\n  private onInput = (ev: Event) => {\n    this.value = (ev.target as HTMLInputElement).value;\n    this.icInput.emit({ value: this.value });\n  };\n\n  /**\n   * Emitted when input loses focus.\n   */\n  @Event() icBlur: EventEmitter<IcValueEventDetail>;\n  private onBlur = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icBlur.emit({ value: value });\n  };\n\n  /**\n   * Emitted when input gains focus.\n   */\n  @Event() icFocus: EventEmitter<IcValueEventDetail>;\n  private onFocus = (ev: Event) => {\n    const value = (ev.target as HTMLInputElement).value;\n    this.icFocus.emit({ value: value });\n  };\n\n  /**\n   * Emitted when the value has changed.\n   */\n  @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n  private isTextArea = (): boolean => {\n    return this.rows > 1;\n  };\n\n  private hasLeftIconSlot(): boolean {\n    const iconEl = this.el.querySelector(`[slot=\"icon\"]`);\n    if (iconEl != null) {\n      return true;\n    }\n    return false;\n  }\n\n  private hasStatus = (status: IcInformationStatusOrEmpty): boolean => {\n    return status !== \"\" && !this.disabled;\n  };\n\n  private showStatusText = (status: IcInformationStatusOrEmpty): boolean => {\n    if (\n      this.hasStatus(status) &&\n      !(status == IcInformationStatus.Success && this.validationInline)\n    ) {\n      return true;\n    }\n    return false;\n  };\n\n  private handleFormReset = (): void => {\n    this.value = this.initialValue;\n  };\n\n  connectedCallback(): void {\n    this.debounceChanged();\n  }\n\n  componentWillLoad(): void {\n    this.watchValueHandler(this.value);\n\n    this.inheritedAttributes = inheritAttributes(this.el, [\n      ...IC_INHERITED_ARIA,\n      \"title\",\n      \"aria-autocomplete\",\n      \"aria-haspopup\",\n    ]);\n\n    if (this.readonly) {\n      this.maxLengthExceeded = false;\n      this.maxValueExceeded = false;\n      this.minValueUnattained = false;\n    }\n\n    addFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Text Field\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  render() {\n    const {\n      inputId,\n      name,\n      label,\n      required,\n      small,\n      placeholder,\n      helperText,\n      rows,\n      resize,\n      disabled,\n      value,\n      min,\n      max,\n      maxLength,\n      numChars,\n      readonly,\n      maxLengthExceeded,\n      minValueUnattained,\n      maxValueExceeded,\n      validationStatus,\n      validationText,\n      validationInline,\n      spellcheck,\n      inputmode,\n      fullWidth,\n      truncateValue,\n      hiddenInput,\n    } = this;\n\n    const disabledMode = readonly ? true : disabled;\n\n    const placeholderText = disabled ? \"\" : placeholder;\n\n    const currentStatus =\n      maxLengthExceeded || maxValueExceeded || minValueUnattained\n        ? IcInformationStatus.Error\n        : validationStatus;\n\n    const currentValidationText = maxLengthExceeded\n      ? \"Maximum length exceeded\"\n      : maxValueExceeded\n      ? `Maximum value of ${max} exceeded`\n      : minValueUnattained\n      ? `Minimum value of ${min} not met`\n      : validationText;\n\n    const maxNumChars = readonly ? 0 : maxLength;\n\n    const messageAriaLive =\n      maxLengthExceeded ||\n      maxValueExceeded ||\n      minValueUnattained ||\n      (maxLength === 0 && currentStatus === IcInformationStatus.Error)\n        ? \"assertive\"\n        : \"polite\";\n\n    const showStatusText = this.showStatusText(currentStatus);\n    const multiline = this.isTextArea();\n    const hiddenCharCountDescId =\n      maxLength > 0 ? inputId + \"-charcount-desc\" : \"\";\n    const describedBy = (\n      hiddenCharCountDescId +\n      \" \" +\n      getInputDescribedByText(inputId, helperText !== \"\", showStatusText)\n    ).trim();\n\n    if (this.showLeftIcon) {\n      if (!readonly && disabledMode) {\n        this.showLeftIcon = false;\n      }\n    }\n\n    const invalid =\n      currentStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n    const disabledText = disabledMode && !readonly;\n\n    if (hiddenInput) {\n      renderHiddenInput(true, this.el, name, value, disabledMode);\n    }\n\n    return (\n      <Host class={{ [\"fullwidth\"]: fullWidth }}>\n        <ic-input-container readonly={readonly} disabled={disabledMode}>\n          {!this.hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabledText}\n              readonly={readonly}\n            ></ic-input-label>\n          )}\n\n          <ic-input-component-container\n            small={small}\n            validationStatus={currentStatus}\n            multiLine={multiline}\n            disabled={disabledMode}\n            readonly={readonly}\n            validationInline={validationInline}\n            fullWidth={fullWidth}\n          >\n            {this.showLeftIcon && (\n              <span\n                class={{\n                  [\"readonly\"]: readonly,\n                  [\"has-value\"]: value.length > 0,\n                }}\n                slot=\"left-icon\"\n              >\n                <slot name=\"icon\" />\n              </span>\n            )}\n\n            {!multiline && (\n              <input\n                id={inputId}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLInputElement)}\n                type={this.type}\n                min={min}\n                max={max}\n                value={value}\n                class={{\n                  [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n                  [\"readonly\"]: readonly,\n                  [\"truncate-value\"]: truncateValue,\n                }}\n                placeholder={placeholderText}\n                required={required}\n                disabled={disabledMode}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                aria-activedescendant={this.ariaActiveDescendant}\n                aria-expanded={this.ariaExpanded}\n                aria-owns={this.ariaOwns}\n                autocomplete={this.autocomplete}\n                autocapitalize={this.autocapitalize}\n                autoFocus={this.autoFocus}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                role={this.role}\n                {...this.inheritedAttributes}\n              ></input>\n            )}\n            {multiline && (\n              <textarea\n                id={inputId}\n                class={{\n                  [\"no-resize\"]: resize === false || readonly,\n                  [\"no-left-pad\"]: !this.showLeftIcon && readonly,\n                  [\"readonly\"]: readonly,\n                }}\n                name={name}\n                ref={(el) => (this.inputEl = el as HTMLTextAreaElement)}\n                value={value}\n                rows={rows}\n                required={required}\n                disabled={disabledMode}\n                placeholder={placeholderText}\n                readonly={readonly}\n                onInput={this.onInput}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                autocapitalize={this.autocapitalize}\n                autoFocus={this.autoFocus}\n                spellcheck={spellcheck}\n                inputmode={inputmode}\n                {...this.inheritedAttributes}\n              ></textarea>\n            )}\n            {isSlotUsed(this.el, \"clear-button\") && (\n              <slot name=\"clear-button\"></slot>\n            )}\n            {isSlotUsed(this.el, \"search-submit-button\") && (\n              <slot name=\"search-submit-button\"></slot>\n            )}\n          </ic-input-component-container>\n          {isSlotUsed(this.el, \"menu\") && <slot name=\"menu\"></slot>}\n          {(!isEmptyString(validationStatus) ||\n            !isEmptyString(validationText) ||\n            maxNumChars > 0 ||\n            maxValueExceeded ||\n            minValueUnattained) && (\n            <ic-input-validation\n              status={\n                this.hasStatus(currentStatus) === false ||\n                (currentStatus === IcInformationStatus.Success &&\n                  validationInline)\n                  ? \"\"\n                  : currentStatus\n              }\n              message={showStatusText ? currentValidationText : \"\"}\n              ariaLiveMode={messageAriaLive}\n              for={inputId}\n              fullWidth={fullWidth}\n            >\n              {!readonly && maxNumChars > 0 && (\n                <div slot=\"validation-message-adornment\">\n                  <ic-typography\n                    variant=\"caption\"\n                    class={{\n                      [\"maxlengthtext\"]: true,\n                      [\"error\"]: maxLengthExceeded,\n                      [\"disabled\"]: disabledText,\n                    }}\n                  >\n                    <span\n                      aria-live=\"polite\"\n                      id={`${inputId}-charcount`}\n                      class=\"charcount\"\n                    >\n                      {numChars}/{maxNumChars}\n                    </span>\n                    <span hidden={true} id={hiddenCharCountDescId}>\n                      Field can contain a maximum of {maxNumChars} characters.\n                    </span>\n                  </ic-typography>\n                </div>\n              )}\n            </ic-input-validation>\n          )}\n        </ic-input-container>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-toast/ic-toast.css

@@ -441,6 +441,10 @@ video {
 }
 
 
+/**
+ * @prop --ic-z-index-toast: z-index of toast
+ */
+
 :host {
   --bottom-position: var(--ic-space-xl);
 
@@ -449,6 +453,7 @@ video {
   left: 50%;
   transform: translate(-50%);
   animation: fadein var(--ic-transition-duration-slow) ease-in-out;
+  z-index: var(--ic-z-index-toast);
 }
 
 :host(.hidden) {

package/dist/collection/components/ic-toast/ic-toast.js

@@ -142,6 +142,10 @@ export class Toast {
     if (dismissButton)
       this.interactiveElements.push(dismissButton);
   }
+  disconnectedCallback() {
+    window.clearTimeout(this.dismissTimeout);
+    window.clearInterval(this.timerRefreshInterval);
+  }
   render() {
     const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, } = this;
     return (h(Host, { class: { ["hidden"]: !visible }, role: isManual ? "dialog" : "status" }, h("div", { class: "container" }, variant && visible && (h("div", { class: "toast-icon-container" }, h("div", { class: {
@@ -185,7 +189,7 @@ export class Toast {
       },
       "variant": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "IcStatusVariants",
           "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
@@ -224,7 +228,7 @@ export class Toast {
       },
       "dismissMode": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "IcActivationTypes",
           "resolved": "\"automatic\" | \"manual\"",
@@ -247,7 +251,7 @@ export class Toast {
       },
       "autoDismissTimeout": {
         "type": "number",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "number",
           "resolved": "number",