@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.10

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

@@ -1,33 +1,31 @@
 import { h, } from "@stencil/core";
+const CONTEXT_ID_ATTR = "context-id";
 export class TabContext {
     constructor() {
         this.newTabPanels = [];
         this.newTabs = [];
-        // Sets attributes to link tab-group, tabs and tab-panels
+        /** Sets attributes to link tab-group, tabs and tab-panels */
         this.linkTabs = () => {
             this.tabs.forEach((tab, index) => {
                 const tabId = `ic-tab-${index}-context-${this.contextId}`;
                 const tabPanelId = `ic-tab-panel-${index}-context-${this.contextId}`;
-                const shared = `ic-tab--${index}-context-${this.contextId}`;
-                const contextIdAttr = "context-id";
                 tab.setAttribute("id", tabId);
-                tab.tabId = shared;
+                tab.tabId = `ic-tab--${index}-context-${this.contextId}`;
                 tab.tabPosition = index;
                 tab.setAttribute("aria-controls", tabPanelId);
-                tab.setAttribute(contextIdAttr, this.contextId);
-                this.tabGroup.setAttribute(contextIdAttr, this.contextId);
+                tab.setAttribute(CONTEXT_ID_ATTR, this.contextId);
+                this.tabGroup.setAttribute(CONTEXT_ID_ATTR, this.contextId);
                 this.tabPanels[index].setAttribute("id", tabPanelId);
-                this.tabPanels[index].panelId = shared;
-                this.tabPanels[index].tabPosition = index;
                 this.tabPanels[index].setAttribute("aria-labelledby", tabId);
-                this.tabPanels[index].setAttribute(contextIdAttr, this.contextId);
+                this.tabPanels[index].setAttribute(CONTEXT_ID_ATTR, this.contextId);
                 tab.theme = this.theme;
                 this.tabPanels[index].theme = this.theme;
                 this.tabGroup.theme = this.theme;
             });
         };
-        // Gets tabs and tabpanels with the same context ID
-        // Using querySelector to selector the children in relation to the host
+        /**
+         * Gets tabs and tabpanels with the same context ID using querySelector to selector the children in relation to the host
+         */
         this.getChildren = () => {
             this.tabGroup = this.el.querySelector("ic-tab-group");
             this.tabs = Array.from(this.tabGroup.querySelectorAll("ic-tab"));
@@ -35,28 +33,42 @@ export class TabContext {
             this.enabledTabs = this.getEnabledTabs();
         };
         this.keydownHandler = (event) => {
-            if (this.activationType === "automatic") {
-                this.handleKeyBoardNavAutomatic(event);
-            }
-            else {
-                this.handleKeyBoardNavManual(event);
-            }
-        };
-        // Determines how keyboard navigation is to be handled based on the activation type
-        this.attachEventListeners = () => {
-            this.tabGroup.addEventListener("keydown", this.keydownHandler);
-        };
-        // Determines whether the selected tab is being controlled within the component
-        // or by the user (via selectedTabIndex and onIcTabSelect)
-        this.setControlledMode = () => {
-            if (this.selectedTabIndex !== undefined) {
-                this.controlledMode = true;
-                this.selectedTab = this.selectedTabIndex;
+            const isManual = this.activationType === "manual";
+            const enabledTabIndex = this.enabledTabs.findIndex((tab) => tab.tabId ===
+                this.tabs[isManual ? this.focusedTabIndex : this.selectedTab].tabId);
+            const keyboardFunction = isManual
+                ? this.keyboardFocusTab
+                : this.keyboardSelectTab;
+            let preventDefault = true;
+            switch (event.key) {
+                case "Home":
+                    keyboardFunction(0);
+                    break;
+                case "End":
+                    keyboardFunction(this.enabledTabs.length - 1);
+                    break;
+                case "ArrowRight":
+                    keyboardFunction(enabledTabIndex < this.enabledTabs.length - 1
+                        ? enabledTabIndex + 1
+                        : 0);
+                    break;
+                case "ArrowLeft":
+                    keyboardFunction((enabledTabIndex > 0 ? enabledTabIndex : this.enabledTabs.length) - 1);
+                    break;
+                default:
+                    if (isManual && (event.key === "Enter" || event.key === " ")) {
+                        this.keyboardSelectTab(this.focusedTabIndex);
+                    }
+                    else {
+                        preventDefault = false;
+                    }
             }
+            if (preventDefault)
+                event.preventDefault();
         };
-        // Sets the tab that is selected on initial render
+        /** Sets the tab that is selected on initial render */
         this.setInitialTab = () => {
-            if (this.controlledMode) {
+            if (this.selectedTabIndex !== undefined) {
                 this.selectedTab = this.selectedTabIndex;
                 this.focusedTabIndex = this.selectedTabIndex;
             }
@@ -66,26 +78,21 @@ export class TabContext {
                 this.focusedTabIndex = firstEnabledTabIndex;
             }
         };
-        // Passes the selected tab to the tab and tab panel components
+        /** Passes the selected tab to the tab and tab panel components */
         this.configureTabs = () => {
             this.enabledTabs.forEach((tab) => {
                 tab.selected = tab.tabPosition === this.selectedTab;
             });
-            this.tabPanels.forEach((tabPanel) => {
-                tabPanel.selectedTab = this.tabs[this.selectedTab].tabId;
+            this.tabPanels.forEach((tabPanel, index) => {
+                tabPanel.hidden = index !== this.selectedTab;
             });
         };
-        this.getEnabledTabs = () => {
-            return Array.from(this.tabs).filter((child) => !child.disabled);
-        };
-        this.getIndexOfEnabledTab = (allTabsIndex) => {
-            return this.enabledTabs.findIndex((tab) => tab.tabId === this.tabs[allTabsIndex].tabId);
-        };
-        // Sets focus on tab and selects it
+        this.getEnabledTabs = () => Array.from(this.tabs).filter((child) => !child.disabled);
+        /** Sets focus on tab and selects it */
         this.keyboardSelectTab = (enabledTabIndex) => {
             const newIndex = this.tabs.findIndex((tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId);
             this.enabledTabs[enabledTabIndex].focus();
-            if (!this.controlledMode) {
+            if (this.selectedTabIndex === undefined) {
                 this.selectedTab = newIndex;
             }
             else {
@@ -96,85 +103,11 @@ export class TabContext {
                         .querySelectorAll("ic-tab")[newIndex].textContent.trim(),
                 });
             }
-            /* eslint-enable no-unexpected-multiline */
         };
-        // Sets focus on tab without selecting it (for manual activation)
+        /** Sets focus on tab without selecting it (for manual activation) */
         this.keyboardFocusTab = (enabledTabIndex) => {
-            const newIndex = this.tabs.findIndex((tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId);
             this.enabledTabs[enabledTabIndex].focus();
-            this.focusedTabIndex = newIndex;
-        };
-        this.handleKeyBoardNavAutomatic = (event) => {
-            const key = event.key;
-            const enabledTabIndex = this.getIndexOfEnabledTab(this.selectedTab);
-            let preventDefault = true;
-            switch (key) {
-                case "Home":
-                    this.keyboardSelectTab(0);
-                    break;
-                case "End":
-                    this.keyboardSelectTab(this.enabledTabs.length - 1);
-                    break;
-                case "ArrowRight":
-                    if (enabledTabIndex < this.enabledTabs.length - 1) {
-                        this.keyboardSelectTab(enabledTabIndex + 1);
-                    }
-                    else {
-                        this.keyboardSelectTab(0);
-                    }
-                    break;
-                case "ArrowLeft":
-                    if (enabledTabIndex > 0) {
-                        this.keyboardSelectTab(enabledTabIndex - 1);
-                    }
-                    else {
-                        this.keyboardSelectTab(this.enabledTabs.length - 1);
-                    }
-                    break;
-                default:
-                    preventDefault = false;
-            }
-            if (preventDefault)
-                event.preventDefault();
-        };
-        this.handleKeyBoardNavManual = (event) => {
-            const key = event.key;
-            const enabledTabIndex = this.getIndexOfEnabledTab(this.focusedTabIndex);
-            let preventDefault = true;
-            switch (key) {
-                case "Home":
-                    this.keyboardFocusTab(0);
-                    break;
-                case "End":
-                    this.keyboardFocusTab(this.enabledTabs.length - 1);
-                    break;
-                case "ArrowRight":
-                    if (enabledTabIndex < this.enabledTabs.length - 1) {
-                        this.keyboardFocusTab(enabledTabIndex + 1);
-                    }
-                    else {
-                        this.keyboardFocusTab(0);
-                    }
-                    break;
-                case "ArrowLeft":
-                    if (enabledTabIndex > 0) {
-                        this.keyboardFocusTab(enabledTabIndex - 1);
-                    }
-                    else {
-                        this.keyboardFocusTab(this.enabledTabs.length - 1);
-                    }
-                    break;
-                case "Enter":
-                    this.keyboardSelectTab(this.focusedTabIndex);
-                    break;
-                case " ":
-                    this.keyboardSelectTab(this.focusedTabIndex);
-                    break;
-                default:
-                    preventDefault = false;
-            }
-            if (preventDefault)
-                event.preventDefault();
+            this.focusedTabIndex = this.tabs.findIndex((tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId);
         };
         this.selectedTab = undefined;
         this.activationType = "automatic";
@@ -201,10 +134,12 @@ export class TabContext {
         this.tabGroup.theme = this.theme;
     }
     componentDidLoad() {
-        this.setControlledMode();
+        if (this.selectedTabIndex !== undefined) {
+            this.selectedTab = this.selectedTabIndex;
+        }
         this.getChildren();
         this.linkTabs();
-        this.attachEventListeners();
+        this.tabGroup.addEventListener("keydown", this.keydownHandler);
         this.setInitialTab();
         this.configureTabs();
     }
@@ -212,7 +147,8 @@ export class TabContext {
         this.configureTabs();
     }
     disconnectedCallback() {
-        this.tabGroup.removeEventListener("keydown", this.keydownHandler);
+        var _a;
+        (_a = this.tabGroup) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", this.keydownHandler);
     }
     tabClickHandler(event) {
         if (this.selectedTabIndex === undefined &&
@@ -236,6 +172,9 @@ export class TabContext {
                 this.tabPanels.push(...this.newTabPanels);
                 this.enabledTabs = this.getEnabledTabs();
                 this.linkTabs();
+                if (!this.tabs[this.selectedTab] || !this.tabPanels[this.selectedTab])
+                    this.setInitialTab();
+                this.configureTabs();
                 this.newTabs = [];
                 this.newTabPanels = [];
             }
@@ -249,12 +188,10 @@ export class TabContext {
      */
     async tabRemovedHandler(hadFocus) {
         this.getChildren();
-        this.enabledTabs = this.getEnabledTabs();
         this.linkTabs();
         if (this.tabs[this.selectedTab] && this.tabPanels[this.selectedTab]) {
             this.tabs[this.selectedTab].selected = true;
-            this.tabPanels[this.selectedTab].selectedTab =
-                this.tabs[this.selectedTab].tabId;
+            this.tabPanels[this.selectedTab].hidden = false;
         }
         else {
             this.setInitialTab();

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  Method,\n} from \"@stencil/core\";\nimport { IcActivationTypes, IcThemeMode } 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 enabledTabs: HTMLIcTabElement[];\n  private focusedTabIndex: number;\n  private newTabPanels: HTMLIcTabPanelElement[] = [];\n  private newTabs: HTMLIcTabElement[] = [];\n  private tabs: HTMLIcTabElement[];\n  private tabGroup: HTMLIcTabGroupElement;\n  private tabPanels: HTMLIcTabPanelElement[];\n\n  @Element() el: HTMLIcTabContextElement;\n\n  @State() selectedTab: number | null;\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 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   * 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  @Watch(\"selectedTabIndex\")\n  updateSelectedTab(newValue: number): void {\n    this.selectedTab = newValue;\n  }\n\n  /**\n   * If `true`, the tabs will display as black in the light theme.\n   */\n  @Prop() monochrome?: boolean = false;\n  @Watch(\"monochrome\")\n  watchMonochromeHandler(): void {\n    this.tabs.forEach((tab, index) => {\n      tab.monochrome = this.monochrome;\n      this.tabPanels[index].monochrome = this.monochrome;\n    });\n    this.tabGroup.monochrome = this.monochrome;\n  }\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n  @Watch(\"theme\")\n  watchThemeHandler(): void {\n    this.tabs.forEach((tab, index) => {\n      tab.theme = this.theme;\n      this.tabPanels[index].theme = this.theme;\n    });\n    this.tabGroup.theme = this.theme;\n  }\n\n  /**\n   * Emitted when a user selects a tab.\n   */\n  @Event({ bubbles: false }) icTabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n  componentDidLoad(): void {\n    this.setControlledMode();\n    this.getChildren();\n    this.linkTabs();\n    this.attachEventListeners();\n    this.setInitialTab();\n    this.configureTabs();\n  }\n\n  componentWillUpdate(): void {\n    this.configureTabs();\n  }\n\n  disconnectedCallback(): void {\n    this.tabGroup.removeEventListener(\"keydown\", this.keydownHandler);\n  }\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    /* eslint-disable no-unexpected-multiline */\n    this.icTabSelect.emit({\n      tabIndex: event.detail.position,\n      tabLabel: this.el\n        .querySelectorAll(\"ic-tab\")\n        [event.detail.position].textContent.trim(),\n    });\n    /* eslint-enable no-unexpected-multiline */\n    event.stopImmediatePropagation();\n  }\n\n  @Listen(\"tabCreated\")\n  @Listen(\"tabPanelCreated\")\n  tabCreatedHandler(ev: CustomEvent): void {\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  @Listen(\"tabEnabled\")\n  tabEnabledHandler(): void {\n    this.enabledTabs = this.getEnabledTabs();\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): Promise<void> {\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      const contextIdAttr = \"context-id\";\n      tab.setAttribute(\"id\", tabId);\n      tab.tabId = shared;\n      tab.tabPosition = index;\n      tab.setAttribute(\"aria-controls\", tabPanelId);\n      tab.setAttribute(contextIdAttr, this.contextId);\n      this.tabGroup.setAttribute(contextIdAttr, 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(contextIdAttr, this.contextId);\n\n      tab.theme = this.theme;\n      this.tabPanels[index].theme = this.theme;\n      this.tabGroup.theme = this.theme;\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.el.querySelector(\"ic-tab-group\");\n    this.tabs = Array.from(this.tabGroup.querySelectorAll(\"ic-tab\"));\n    this.tabPanels = Array.from(this.el.children).filter(\n      (child) => child.tagName === \"IC-TAB-PANEL\"\n    ) as HTMLIcTabPanelElement[];\n    this.enabledTabs = this.getEnabledTabs();\n  };\n\n  private keydownHandler = (event: KeyboardEvent) => {\n    if (this.activationType === \"automatic\") {\n      this.handleKeyBoardNavAutomatic(event);\n    } else {\n      this.handleKeyBoardNavManual(event);\n    }\n  };\n\n  // Determines how keyboard navigation is to be handled based on the activation type\n  private attachEventListeners = (): void => {\n    this.tabGroup.addEventListener(\"keydown\", this.keydownHandler);\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      /* eslint-disable no-unexpected-multiline */\n      this.icTabSelect.emit({\n        tabIndex: newIndex,\n        tabLabel: this.el\n          .querySelectorAll(\"ic-tab\")\n          [newIndex].textContent.trim(),\n      });\n    }\n    /* eslint-enable no-unexpected-multiline */\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  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 { IcActivationTypes, IcThemeMode } from \"../../utils/types\";\n\nimport {\n  IcTabClickEventDetail,\n  IcTabSelectEventDetail,\n} from \"../ic-tab/ic-tab.types\";\n\nconst CONTEXT_ID_ATTR = \"context-id\";\n\n@Component({\n  tag: \"ic-tab-context\",\n})\nexport class TabContext {\n  private enabledTabs: HTMLIcTabElement[];\n  private focusedTabIndex: number;\n  private newTabPanels: HTMLIcTabPanelElement[] = [];\n  private newTabs: HTMLIcTabElement[] = [];\n  private tabs: HTMLIcTabElement[];\n  private tabGroup: HTMLIcTabGroupElement;\n  private tabPanels: HTMLIcTabPanelElement[];\n\n  @Element() el: HTMLIcTabContextElement;\n\n  @State() selectedTab: number | null;\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 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   * 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  @Watch(\"selectedTabIndex\")\n  updateSelectedTab(newValue: number): void {\n    this.selectedTab = newValue;\n  }\n\n  /**\n   * If `true`, the tabs will display as black in the light theme.\n   */\n  @Prop() monochrome?: boolean = false;\n  @Watch(\"monochrome\")\n  watchMonochromeHandler(): void {\n    this.tabs.forEach((tab, index) => {\n      tab.monochrome = this.monochrome;\n      this.tabPanels[index].monochrome = this.monochrome;\n    });\n    this.tabGroup.monochrome = this.monochrome;\n  }\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n  @Watch(\"theme\")\n  watchThemeHandler(): void {\n    this.tabs.forEach((tab, index) => {\n      tab.theme = this.theme;\n      this.tabPanels[index].theme = this.theme;\n    });\n    this.tabGroup.theme = this.theme;\n  }\n\n  /**\n   * Emitted when a user selects a tab.\n   */\n  @Event({ bubbles: false }) icTabSelect: EventEmitter<IcTabSelectEventDetail>;\n\n  componentDidLoad(): void {\n    if (this.selectedTabIndex !== undefined) {\n      this.selectedTab = this.selectedTabIndex;\n    }\n    this.getChildren();\n    this.linkTabs();\n    this.tabGroup.addEventListener(\"keydown\", this.keydownHandler);\n    this.setInitialTab();\n    this.configureTabs();\n  }\n\n  componentWillUpdate(): void {\n    this.configureTabs();\n  }\n\n  disconnectedCallback(): void {\n    this.tabGroup?.removeEventListener(\"keydown\", this.keydownHandler);\n  }\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    /* eslint-disable no-unexpected-multiline */\n    this.icTabSelect.emit({\n      tabIndex: event.detail.position,\n      tabLabel: this.el\n        .querySelectorAll(\"ic-tab\")\n        [event.detail.position].textContent.trim(),\n    });\n    /* eslint-enable no-unexpected-multiline */\n    event.stopImmediatePropagation();\n  }\n\n  @Listen(\"tabCreated\")\n  @Listen(\"tabPanelCreated\")\n  tabCreatedHandler(ev: CustomEvent): void {\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        if (!this.tabs[this.selectedTab] || !this.tabPanels[this.selectedTab])\n          this.setInitialTab();\n        this.configureTabs();\n        this.newTabs = [];\n        this.newTabPanels = [];\n      }\n    }\n  }\n\n  @Listen(\"tabEnabled\")\n  tabEnabledHandler(): void {\n    this.enabledTabs = this.getEnabledTabs();\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): Promise<void> {\n    this.getChildren();\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].hidden = false;\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      tab.setAttribute(\"id\", tabId);\n      tab.tabId = `ic-tab--${index}-context-${this.contextId}`;\n      tab.tabPosition = index;\n      tab.setAttribute(\"aria-controls\", tabPanelId);\n      tab.setAttribute(CONTEXT_ID_ATTR, this.contextId);\n      this.tabGroup.setAttribute(CONTEXT_ID_ATTR, this.contextId);\n      this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n      this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n      this.tabPanels[index].setAttribute(CONTEXT_ID_ATTR, this.contextId);\n\n      tab.theme = this.theme;\n      this.tabPanels[index].theme = this.theme;\n      this.tabGroup.theme = this.theme;\n    });\n  };\n\n  /**\n   * Gets tabs and tabpanels with the same context ID using querySelector to selector the children in relation to the host\n   */\n  private getChildren = (): void => {\n    this.tabGroup = this.el.querySelector(\"ic-tab-group\");\n    this.tabs = Array.from(this.tabGroup.querySelectorAll(\"ic-tab\"));\n    this.tabPanels = Array.from(this.el.children).filter(\n      (child) => child.tagName === \"IC-TAB-PANEL\"\n    ) as HTMLIcTabPanelElement[];\n    this.enabledTabs = this.getEnabledTabs();\n  };\n\n  private keydownHandler = (event: KeyboardEvent) => {\n    const isManual = this.activationType === \"manual\";\n    const enabledTabIndex = this.enabledTabs.findIndex(\n      (tab) =>\n        tab.tabId ===\n        this.tabs[isManual ? this.focusedTabIndex : this.selectedTab].tabId\n    );\n    const keyboardFunction = isManual\n      ? this.keyboardFocusTab\n      : this.keyboardSelectTab;\n    let preventDefault = true;\n    switch (event.key) {\n      case \"Home\":\n        keyboardFunction(0);\n        break;\n      case \"End\":\n        keyboardFunction(this.enabledTabs.length - 1);\n        break;\n      case \"ArrowRight\":\n        keyboardFunction(\n          enabledTabIndex < this.enabledTabs.length - 1\n            ? enabledTabIndex + 1\n            : 0\n        );\n        break;\n      case \"ArrowLeft\":\n        keyboardFunction(\n          (enabledTabIndex > 0 ? enabledTabIndex : this.enabledTabs.length) - 1\n        );\n        break;\n      default:\n        if (isManual && (event.key === \"Enter\" || event.key === \" \")) {\n          this.keyboardSelectTab(this.focusedTabIndex);\n        } else {\n          preventDefault = false;\n        }\n    }\n    if (preventDefault) event.preventDefault();\n  };\n\n  /** Sets the tab that is selected on initial render */\n  private setInitialTab = (): void => {\n    if (this.selectedTabIndex !== undefined) {\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, index) => {\n      tabPanel.hidden = index !== this.selectedTab;\n    });\n  };\n\n  private getEnabledTabs = () =>\n    Array.from(this.tabs).filter((child) => !child.disabled);\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.selectedTabIndex === undefined) {\n      this.selectedTab = newIndex;\n    } else {\n      /* eslint-disable no-unexpected-multiline */\n      this.icTabSelect.emit({\n        tabIndex: newIndex,\n        tabLabel: this.el\n          .querySelectorAll(\"ic-tab\")\n          [newIndex].textContent.trim(),\n      });\n    }\n  };\n\n  /** Sets focus on tab without selecting it (for manual activation) */\n  private keyboardFocusTab = (enabledTabIndex: number) => {\n    this.enabledTabs[enabledTabIndex].focus();\n    this.focusedTabIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId\n    );\n  };\n\n  render() {\n    return <slot></slot>;\n  }\n}\n"]}