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

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

@@ -2,285 +2,285 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { I as IcThemeForegroundEnum } from './types.js';
 
 const TabContext = /*@__PURE__*/ proxyCustomElement(class TabContext extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.icTabSelect = createEvent(this, "icTabSelect", 3);
-    this.tabSelect = createEvent(this, "tabSelect", 3);
-    this.newTabPanels = [];
-    this.newTabs = [];
-    // 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.tabPosition = index;
-        tab.setAttribute("aria-controls", tabPanelId);
-        tab.setAttribute(contextIdAttr, this.contextId);
-        this.tabGroup.setAttribute(contextIdAttr, 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);
-        if (this.appearance === IcThemeForegroundEnum.Light) {
-          tab.appearance = this.appearance;
-          this.tabPanels[index].appearance = this.appearance;
-        }
-      });
-      if (this.appearance === IcThemeForegroundEnum.Light) {
-        this.tabGroup.appearance = this.appearance;
-      }
-    };
-    // 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.host.querySelector("ic-tab-group");
-      this.tabs = Array.from(this.tabGroup.querySelectorAll("ic-tab"));
-      this.tabPanels = Array.from(this.host.children).filter((child) => child.tagName === "IC-TAB-PANEL");
-      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.attatchEventListeners = () => {
-      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;
-      }
-    };
-    // Sets the tab that is selected on initial render
-    this.setInitialTab = () => {
-      if (this.controlledMode) {
-        this.selectedTab = this.selectedTabIndex;
-        this.focusedTabIndex = this.selectedTabIndex;
-      }
-      else {
-        const firstEnabledTabIndex = this.tabs.findIndex((tab) => tab.tabId === this.enabledTabs[0].tabId);
-        this.selectedTab = firstEnabledTabIndex;
-        this.focusedTabIndex = firstEnabledTabIndex;
-      }
-    };
-    // 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.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.keyboardSelectTab = (enabledTabIndex) => {
-      const newIndex = this.tabs.findIndex((tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId);
-      this.enabledTabs[enabledTabIndex].focus();
-      if (!this.controlledMode) {
-        this.selectedTab = newIndex;
-      }
-      else {
-        this.icTabSelect.emit({ tabIndex: newIndex });
-        this.tabSelect.emit({ tabIndex: newIndex });
-      }
-    };
-    // 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.selectedTab = undefined;
-    this.activationType = "automatic";
-    this.appearance = "dark";
-    this.contextId = "default";
-    this.selectedTabIndex = undefined;
-  }
-  updateSelectedTab(newValue) {
-    this.selectedTab = newValue;
-  }
-  componentDidLoad() {
-    this.setControlledMode();
-    this.getChildren();
-    this.linkTabs();
-    this.attatchEventListeners();
-    this.setInitialTab();
-    this.configureTabs();
-  }
-  componentWillUpdate() {
-    this.configureTabs();
-  }
-  disconnectedCallback() {
-    this.tabGroup.removeEventListener("keydown", this.keydownHandler);
-  }
-  tabClickHandler(event) {
-    if (this.selectedTabIndex === undefined &&
-      event.detail.contextId === this.contextId) {
-      this.selectedTab = event.detail.position;
+    constructor() {
+        super();
+        this.__registerHost();
+        this.icTabSelect = createEvent(this, "icTabSelect", 3);
+        this.tabSelect = createEvent(this, "tabSelect", 3);
+        this.newTabPanels = [];
+        this.newTabs = [];
+        // 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.tabPosition = index;
+                tab.setAttribute("aria-controls", tabPanelId);
+                tab.setAttribute(contextIdAttr, this.contextId);
+                this.tabGroup.setAttribute(contextIdAttr, 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);
+                if (this.appearance === IcThemeForegroundEnum.Light) {
+                    tab.appearance = this.appearance;
+                    this.tabPanels[index].appearance = this.appearance;
+                }
+            });
+            if (this.appearance === IcThemeForegroundEnum.Light) {
+                this.tabGroup.appearance = this.appearance;
+            }
+        };
+        // 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"));
+            this.tabPanels = Array.from(this.el.children).filter((child) => child.tagName === "IC-TAB-PANEL");
+            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.attatchEventListeners = () => {
+            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;
+            }
+        };
+        // Sets the tab that is selected on initial render
+        this.setInitialTab = () => {
+            if (this.controlledMode) {
+                this.selectedTab = this.selectedTabIndex;
+                this.focusedTabIndex = this.selectedTabIndex;
+            }
+            else {
+                const firstEnabledTabIndex = this.tabs.findIndex((tab) => tab.tabId === this.enabledTabs[0].tabId);
+                this.selectedTab = firstEnabledTabIndex;
+                this.focusedTabIndex = firstEnabledTabIndex;
+            }
+        };
+        // 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.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.keyboardSelectTab = (enabledTabIndex) => {
+            const newIndex = this.tabs.findIndex((tab) => tab.tabId === this.enabledTabs[enabledTabIndex].tabId);
+            this.enabledTabs[enabledTabIndex].focus();
+            if (!this.controlledMode) {
+                this.selectedTab = newIndex;
+            }
+            else {
+                this.icTabSelect.emit({ tabIndex: newIndex });
+                this.tabSelect.emit({ tabIndex: newIndex });
+            }
+        };
+        // 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.selectedTab = undefined;
+        this.activationType = "automatic";
+        this.appearance = "dark";
+        this.contextId = "default";
+        this.selectedTabIndex = undefined;
     }
-    this.icTabSelect.emit({
-      tabIndex: event.detail.position,
-    });
-    this.tabSelect.emit({
-      tabIndex: event.detail.position,
-    });
-    event.stopImmediatePropagation();
-  }
-  tabCreatedHandler(ev) {
-    if (this.tabs && this.tabPanels) {
-      (ev.detail.setFocus ? this.newTabs : this.newTabPanels).push(ev.detail);
-      if (this.newTabs.length === this.newTabPanels.length) {
-        this.tabs.push(...this.newTabs);
-        this.tabPanels.push(...this.newTabPanels);
-        this.enabledTabs = this.getEnabledTabs();
+    updateSelectedTab(newValue) {
+        this.selectedTab = newValue;
+    }
+    componentDidLoad() {
+        this.setControlledMode();
+        this.getChildren();
         this.linkTabs();
-        this.newTabs = [];
-        this.newTabPanels = [];
-      }
+        this.attatchEventListeners();
+        this.setInitialTab();
+        this.configureTabs();
+    }
+    componentWillUpdate() {
+        this.configureTabs();
+    }
+    disconnectedCallback() {
+        this.tabGroup.removeEventListener("keydown", this.keydownHandler);
+    }
+    tabClickHandler(event) {
+        if (this.selectedTabIndex === undefined &&
+            event.detail.contextId === this.contextId) {
+            this.selectedTab = event.detail.position;
+        }
+        this.icTabSelect.emit({
+            tabIndex: event.detail.position,
+        });
+        this.tabSelect.emit({
+            tabIndex: event.detail.position,
+        });
+        event.stopImmediatePropagation();
     }
-  }
-  tabEnabledHandler() {
-    this.enabledTabs = this.getEnabledTabs();
-  }
-  /**
-   * @internal Used to set tab/tab panel IDs when a tab/tab panel has been removed
-   */
-  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;
+    tabCreatedHandler(ev) {
+        if (this.tabs && this.tabPanels) {
+            (ev.detail.setFocus ? this.newTabs : this.newTabPanels).push(ev.detail);
+            if (this.newTabs.length === this.newTabPanels.length) {
+                this.tabs.push(...this.newTabs);
+                this.tabPanels.push(...this.newTabPanels);
+                this.enabledTabs = this.getEnabledTabs();
+                this.linkTabs();
+                this.newTabs = [];
+                this.newTabPanels = [];
+            }
+        }
     }
-    else {
-      this.setInitialTab();
+    tabEnabledHandler() {
+        this.enabledTabs = this.getEnabledTabs();
+    }
+    /**
+     * @internal Used to set tab/tab panel IDs when a tab/tab panel has been removed
+     */
+    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;
+        }
+        else {
+            this.setInitialTab();
+        }
+        if (hadFocus) {
+            this.tabs[this.selectedTab].setFocus();
+        }
     }
-    if (hadFocus) {
-      this.tabs[this.selectedTab].setFocus();
+    render() {
+        return h("slot", null);
     }
-  }
-  render() {
-    return h("slot", null);
-  }
-  get host() { return this; }
-  static get watchers() { return {
-    "selectedTabIndex": ["updateSelectedTab"]
-  }; }
+    get el() { return this; }
+    static get watchers() { return {
+        "selectedTabIndex": ["updateSelectedTab"]
+    }; }
 }, [4, "ic-tab-context", {
-    "activationType": [1, "activation-type"],
-    "appearance": [1],
-    "contextId": [513, "context-id"],
-    "selectedTabIndex": [2, "selected-tab-index"],
-    "selectedTab": [32],
-    "tabRemovedHandler": [64]
-  }, [[0, "tabClick", "tabClickHandler"], [0, "tabCreated", "tabCreatedHandler"], [0, "tabPanelCreated", "tabCreatedHandler"], [0, "tabEnabled", "tabEnabledHandler"]], {
-    "selectedTabIndex": ["updateSelectedTab"]
-  }]);
+        "activationType": [1, "activation-type"],
+        "appearance": [1],
+        "contextId": [513, "context-id"],
+        "selectedTabIndex": [2, "selected-tab-index"],
+        "selectedTab": [32],
+        "tabRemovedHandler": [64]
+    }, [[0, "tabClick", "tabClickHandler"], [0, "tabCreated", "tabCreatedHandler"], [0, "tabPanelCreated", "tabCreatedHandler"], [0, "tabEnabled", "tabEnabledHandler"]], {
+        "selectedTabIndex": ["updateSelectedTab"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["ic-tab-context"];
-  components.forEach(tagName => { switch (tagName) {
-    case "ic-tab-context":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TabContext);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ic-tab-context"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ic-tab-context":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, TabContext);
+            }
+            break;
+    } });
 }
 
 const IcTabContext = TabContext;