npm - @ukic/web-components - Versions diffs - 3.0.0 → 3.1.0 - Mend

@ukic/web-components 3.0.0 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1143) hide show

package/dist/cjs/ic-tab-context.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-tab-context.entry.cjs.js","mappings":"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","names":["IcThemeForegroundEnum","h"],"sources":["src/components/ic-tab-context/ic-tab-context.tsx"],"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 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 appearance of the tab context, e.g dark, or light.\n /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n @Watch(\"appearance\")\n watchAppearanceHandler(): void {\n this.tabs.forEach((tab, index) => {\n tab.appearance = this.appearance;\n this.tabPanels[index].appearance = this.appearance;\n });\n this.tabGroup.appearance = this.appearance;\n }\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 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 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.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}
1	+ {"file":"ic-tab-context.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/ic-tab-context/ic-tab-context.tsx"],"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 \| null;\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 && (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 && (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 &&\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:\n 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 (\n this.selectedTab &&\n (!this.tabs[this.selectedTab] \|\| !this.tabPanels[this.selectedTab])\n )\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 (\n this.selectedTab &&\n this.tabs[this.selectedTab] &&\n this.tabPanels[this.selectedTab]\n ) {\n this.tabs[this.selectedTab].selected = true;\n } else {\n this.setInitialTab();\n }\n\n if (hadFocus && this.selectedTab) {\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 this.tabPanels[index].setAttribute(\"id\", tabPanelId);\n this.tabPanels[index].setAttribute(\"aria-labelledby\", tabId);\n\n if (this.contextId) {\n tab.setAttribute(CONTEXT_ID_ATTR, this.contextId);\n this.tabGroup &&\n this.tabGroup.setAttribute(CONTEXT_ID_ATTR, this.contextId);\n this.tabPanels[index].setAttribute(CONTEXT_ID_ATTR, this.contextId);\n }\n\n tab.theme = this.theme;\n this.tabPanels[index].theme = this.theme;\n this.tabGroup && (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 \|\| 0].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.active = 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:\n this.el.querySelectorAll(\"ic-tab\")[newIndex]?.textContent?.trim() \|\|\n \"\",\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"],"version":3}

package/dist/cjs/ic-tab-group.cjs.entry.js CHANGED Viewed

@@ -2,34 +2,38 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f982899d.js');
-const helpers = require('./helpers-94b33ab0.js');
-const types = require('./types-dc22e301.js');
+const index = require('./index-d337cd8a.js');
+const helpers = require('./helpers-a0a128bd.js');
-const icTabGroupCss = ":host{--border-bottom-color:var(--ic-architectural-300);display:block;margin-bottom:var(--ic-space-md);border-bottom:var(--ic-border-default)}:host(.ic-tab-group-inline){margin-bottom:0;border-bottom:none}:host(.ic-tab-group-light){border-bottom:var(--ic-border-width) solid var(--ic-architectural-white)}.tabs-container{display:flex;flex-direction:row}.tabs-container::-webkit-scrollbar{display:none}";
+const icTabGroupCss = ":host{display:block;margin-bottom:var(--ic-space-md);border-bottom:var(--ic-space-1px) solid var(--ic-tab-bottom-border)}:host(.ic-tab-group-monochrome){border-bottom:var(--ic-space-1px) solid\n    var(--ic-tab-bottom-border-monochrome)}:host(.ic-tab-group-inline){margin-bottom:0;border-bottom:none}.tabs-container{display:flex;flex-direction:row}.tabs-container::-webkit-scrollbar{display:none}:host ic-horizontal-scroll{--splitter-color:var(--ic-tab-divider)}:host(.ic-tab-group-monochrome) ic-horizontal-scroll{--splitter-color:var(--ic-tab-divider-monochrome)}";
+const IcTabGroupStyle0 = icTabGroupCss;
 const TabGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.appearance = "dark";
+        /**
+         * If `true`, the tabs and tab panels will be positioned separately.
+         */
         this.inline = false;
-        this.label = undefined;
+        /** @internal Determines whether black variant of the tabs should be displayed. */
+        this.monochrome = false;
+        /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+        this.theme = "inherit";
     }
     componentDidLoad() {
         helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tab Group");
     }
     render() {
-        const { appearance, label } = this;
-        return (index.h(index.Host, { role: "tablist", "aria-label": label, class: {
-                ["ic-tab-group-light"]: appearance === types.IcThemeForegroundEnum.Light,
-                ["ic-tab-group-inline"]: this.inline,
-            } }, index.h("ic-horizontal-scroll", { appearance: appearance === types.IcThemeForegroundEnum.Dark
-                ? types.IcThemeForegroundEnum.Default
-                : appearance, "focus-trigger": "tabFocus" }, index.h("div", { class: "tabs-container" }, index.h("slot", null)))));
+        const { inline, theme, label, monochrome } = this;
+        return (index.h(index.Host, { key: 'f42b97ec6fa8e200fbb5b5d2114f3f98d4f6ad35', role: "tablist", "aria-label": label, class: {
+                ["ic-tab-group-inline"]: !!inline,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                ["ic-tab-group-monochrome"]: !!monochrome,
+            } }, index.h("ic-horizontal-scroll", { key: 'fdfe2de9cecf661c164dda34f523c73520f6bce6', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, index.h("div", { key: '6523acdad07d4b4a48dab269da3cca2bf3003899', class: "tabs-container" }, index.h("slot", { key: '032517ca94833114e39faf4ad5da3126197e780a' })))));
     }
     static get delegatesFocus() { return true; }
 };
-TabGroup.style = icTabGroupCss;
+TabGroup.style = IcTabGroupStyle0;
 exports.ic_tab_group = TabGroup;

package/dist/cjs/ic-tab-group.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-tab-group.entry.cjs.js","mappings":"~~;;;;;;;;~~AAAA,MAAM,aAAa,GAAG,~~mZAAmZ~~;;~~MCe5Z~~,QAAQ~~;;;0BAI+B,MAAM~~;~~sBAKZ~~,KAAK~~;;;IAOjD~~,gBAAgB;QACdA,wCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,WAAW,CACZ,CAAC;KACH;IAED,MAAM;QACJ,MAAM,EAAE,~~UAAU~~,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;~~QAEnC~~,QACEC,QAACC,UAAI,~~IACH~~,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,KAAK,EAAE;gBACL,CAAC,~~oBAAoB~~,GAAG,~~UAAU~~,~~KAAKC~~,~~2BAAqB~~,CAAC,KAAK~~;gBAClE~~,~~CAAC~~,~~qBAAqB,~~GAAG,~~IAAI~~,~~CAAC~~,~~MAAM~~;~~aACrC~~,~~IAEDF~~,~~kCACE~~,~~UAAU~~,~~EACR~~,UAAU,~~KAAKE~~,~~2BAAqB~~,~~CAAC~~,~~IAAI;kBACrCA~~,~~2BAAqB~~,~~CAAC~~,~~OAAO;kBAC7B~~,UAAU,~~mBAEF~~,UAAU,~~IAExBF~~,~~iBAAK~~,KAAK,EAAC,gBAAgB,IACzBA,~~qBAAa~~,CACT,CACe,CAClB,EACP;KACH;;;;;;;","names":["onComponentRequiredPropUndefined","h","Host"~~,"IcThemeForegroundEnum"~~],"sources":["src/components/ic-tab-group/ic-tab-group.css?tag=ic-tab-group&encapsulation=shadow","src/components/ic-tab-group/ic-tab-group.tsx"],"sourcesContent":[":host {\n ~~--border-bottom-color: var(--ic-architectural-300);\n\n~~ display: block;\n margin-bottom: var(--ic-space-md);\n border-bottom: var(--ic-~~border~~-~~default~~);\n}\n\n:host(.ic-tab-group-~~inline~~) {\n ~~margin~~-bottom: ~~0;\~~n border-~~bottom: none~~;\n}\n\n:host(.ic-tab-group-~~light~~) {\n ~~border~~-bottom: ~~var(--ic-~~border-~~width)~~ ~~solid var(--ic-architectural-white)~~;\n}\n\n.tabs-container {\n display: flex;\n flex-direction: row;\n}\n\n.tabs-container::-webkit-scrollbar {\n display: none;\n}\n","import { Component, 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 /*\n @internal The appearance of the tab group, e.g dark, or light.\n /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\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 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 [\"ic-tab-group-~~light~~\"]: ~~appearance~~ ~~===~~ ~~IcThemeForegroundEnum.Light~~,\n [\"ic-tab-group-~~inline~~\"]: ~~this.inline~~,\n }}\n >\n <ic-horizontal-scroll\n ~~appearance~~={~~\n appearance === IcThemeForegroundEnum.Dark\n ? IcThemeForegroundEnum.Default\n : appearance\n~~ }\n focus-trigger=\"tabFocus\"\n >\n <div class=\"tabs-container\">\n <slot></slot>\n </div>\n </ic-horizontal-scroll>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-tab-group.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,ujBAAujB,CAAC;AAC9kB,yBAAe,aAAa;;MCWf,QAAQ;IAPrB;;;;;QAW2B,WAAM,GAAa,KAAK,CAAC;;QAQ1C,eAAU,GAAa,KAAK,CAAC;;QAG7B,UAAK,GAAiB,SAAS,CAAC;KAkCzC;IAhCC,gBAAgB;QACdA,wCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,WAAW,CACZ,CAAC;KACH;IAED,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAElD,QACEC,QAACC,UAAI,qDACH,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,KAAK,EAAE;gBACL,CAAC,qBAAqB,GAAG,CAAC,CAAC,MAAM;gBACjC,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;gBAC1C,CAAC,yBAAyB,GAAG,CAAC,CAAC,UAAU;aAC1C,IAEDD,mFACE,KAAK,EAAE,KAAK,mBACE,UAAU,EACxB,UAAU,EAAE,UAAU,IAEtBA,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,oEAAa,CACT,CACe,CAClB,EACP;KACH;;;;;;;","names":["onComponentRequiredPropUndefined","h","Host"],"sources":["src/components/ic-tab-group/ic-tab-group.css?tag=ic-tab-group&encapsulation=shadow","src/components/ic-tab-group/ic-tab-group.tsx"],"sourcesContent":[":host {\n display: block;\n margin-bottom: var(--ic-space-md);\n border-bottom: var(--ic-space-1px) solid var(--ic-tab-bottom-border);\n}\n\n:host(.ic-tab-group-monochrome) {\n border-bottom: var(--ic-space-1px) solid\n var(--ic-tab-bottom-border-monochrome);\n}\n\n:host(.ic-tab-group-inline) {\n margin-bottom: 0;\n border-bottom: none;\n}\n\n.tabs-container {\n display: flex;\n flex-direction: row;\n}\n\n.tabs-container::-webkit-scrollbar {\n display: none;\n}\n\n:host ic-horizontal-scroll {\n --splitter-color: var(--ic-tab-divider);\n}\n\n:host(.ic-tab-group-monochrome) ic-horizontal-scroll {\n --splitter-color: var(--ic-tab-divider-monochrome);\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport { IcThemeMode } 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 /*\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 /* @internal Determines whether black variant of the tabs should be displayed. /\n @Prop() monochrome?: boolean = false;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. */\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Tab Group\"\n );\n }\n\n render() {\n const { inline, theme, label, monochrome } = this;\n\n return (\n <Host\n role=\"tablist\"\n aria-label={label}\n class={{\n [\"ic-tab-group-inline\"]: !!inline,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [\"ic-tab-group-monochrome\"]: !!monochrome,\n }}\n >\n <ic-horizontal-scroll\n theme={theme}\n focus-trigger=\"tabFocus\"\n monochrome={monochrome}\n >\n <div class=\"tabs-container\">\n <slot></slot>\n </div>\n </ic-horizontal-scroll>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ic-tab-panel.cjs.entry.js CHANGED Viewed

@@ -2,36 +2,40 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f982899d.js');
-const types = require('./types-dc22e301.js');
-const helpers = require('./helpers-94b33ab0.js');
+const index = require('./index-d337cd8a.js');
-const icTabPanelCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host:not[hidden]{display:block}:host(.ic-tab-panel-light){color:white}";
+const icTabPanelCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-tab-panel-hidden){display:none}:host(:not(.ic-tab-panel-hidden)){display:block}:host{color:var(--ic-color-text-primary)}";
+const IcTabPanelStyle0 = icTabPanelCss;
 const TabPanel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tabPanelCreated = index.createEvent(this, "tabPanelCreated", 7);
         this.tabPanelRemoved = index.createEvent(this, "tabPanelRemoved", 7);
-        this.appearance = "dark";
-        this.panelId = undefined;
-        this.selectedTab = undefined;
-        this.tabPosition = undefined;
+        /**
+         * @internal If `true`, the tab panel will be displayed.
+         */
+        this.active = false;
+        /**
+         * @internal Determines whether black variant of the tabs should be displayed.
+         */
+        this.monochrome = false;
+        /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+        this.theme = "inherit";
     }
     connectedCallback() {
         this.tabPanelCreated.emit(this.el);
     }
     render() {
-        const { panelId, selectedTab, appearance } = this;
-        return (index.h(index.Host, { class: {
-                ["ic-tab-panel-light"]: appearance === types.IcThemeForegroundEnum.Light,
-            }, role: "tabpanel", hidden: helpers.isPropDefined(panelId) && helpers.isPropDefined(selectedTab)
-                ? !(panelId === selectedTab)
-                : true }, index.h("div", null, index.h("slot", null))));
+        const { active, theme } = this;
+        return (index.h(index.Host, { key: '629c66ac51b529d443ad613d61f6875958e9d1a2', class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                "ic-tab-panel-hidden": !active,
+            }, role: "tabpanel", "aria-hidden": `${!active}` }, index.h("div", { key: '1f018abefa14feeaa6a1de08aa3c84c78788e8ea' }, index.h("slot", { key: '86343dd2934fa698c26dfe09b88a4b9004b62184' }))));
     }
     get el() { return index.getElement(this); }
 };
-TabPanel.style = icTabPanelCss;
+TabPanel.style = IcTabPanelStyle0;
 exports.ic_tab_panel = TabPanel;

package/dist/cjs/ic-tab-panel.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-tab-panel.entry.cjs.js","mappings":"~~;;;;;;;;~~AAAA,MAAM,aAAa,GAAG,~~w8EAAw8E~~;;~~MCoBj9E~~,QAAQ~~;;;;;0BAM+B~~,~~MAAM;;;;;IA2BxD~~,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,MAAM,EAAE,~~OAAO~~,EAAE,~~WAAW~~,EAAE,~~UAAU,EAAE,~~GAAG,IAAI,CAAC;~~QAClD~~,QACEA,QAACC,UAAI,~~IACH~~,KAAK,EAAE;gBACL,CAAC,~~oBAAoB~~,GAAG,~~UAAU~~,~~KAAKC~~,~~2BAAqB~~,CAAC,~~KAAK~~;~~aACnE~~,EACD,IAAI,EAAC,UAAU,~~EACf~~,~~MAAM~~,~~EACJC,qBAAa,~~CAAC,~~OAAO~~,~~CAAC,IAAIA,qBAAa,CAAC,WAAW,CAAC;kBAChD,~~EAAE,~~OAAO~~,~~KAAK~~,~~WAAW~~,~~CAAC;kBAC1B,IAAI,IAGVH,qBACEA,qBAAa,~~CACT,CACD,EACP;KACH;;;;;;;","names":["h","Host"~~,"IcThemeForegroundEnum","isPropDefined"~~],"sources":["src/components/ic-tab-panel/ic-tab-panel.css?tag=ic-tab-panel&encapsulation=shadow","src/components/ic-tab-panel/ic-tab-panel.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host~~:not[~~hidden] {\n display: ~~block~~;\n}\n\n:host(.ic-tab-panel-~~light~~) {\n color: ~~white~~;\n}\n","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\";\nimport { isPropDefined~~ } from \"../../utils/~~helpers~~\";\n\n@Component({\n tag: \"ic-tab-panel\",\n styleUrl: \"ic-tab-panel.css\",\n shadow: true,\n})\nexport class TabPanel {\n @Element() el: HTMLIcTabPanelElement;\n\n /*\n @internal ~~The~~ ~~appearance~~ of the tabs, ~~e.g~~ ~~dark,~~ ~~or light~~.\n /\n @Prop() ~~appearance~~?: ~~IcThemeForegroundNoDefault~~ = ~~\"dark\"~~;\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 position of the tab panel inside the tabs array in context.\n /\n @Prop({ reflect: true }) tabPosition?: number;\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.el);\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 isPropDefined(panelId) && isPropDefined(selectedTab)\n ?~~ !~~(panelId === selectedTab)\n : true\n~~ }\n >\n <div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-tab-panel.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,mgFAAmgF,CAAC;AAC1hF,yBAAe,aAAa;;MCef,QAAQ;IALrB;;;;;;;QAWU,WAAM,GAAY,KAAK,CAAC;;;;QAKxB,eAAU,GAAa,KAAK,CAAC;;QAkB7B,UAAK,GAAiB,SAAS,CAAC;KAiCzC;IArBC,iBAAiB;QACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAC/B,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;gBAC1C,qBAAqB,EAAE,CAAC,MAAM;aAC/B,EACD,IAAI,EAAC,UAAU,iBACF,GAAG,CAAC,MAAM,EAAE,IAEzBD,oEACEA,oEAAa,CACT,CACD,EACP;KACH;;;;;;;","names":["h","Host"],"sources":["src/components/ic-tab-panel/ic-tab-panel.css?tag=ic-tab-panel&encapsulation=shadow","src/components/ic-tab-panel/ic-tab-panel.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-tab-panel-hidden) {\n display: none;\n}\n\n:host(:not(.ic-tab-panel-hidden)) {\n display: block;\n}\n\n:host {\n color: var(--ic-color-text-primary);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n} from \"@stencil/core\";\nimport { IcThemeMode } 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() el: HTMLIcTabPanelElement;\n\n /*\n @internal If `true`, the tab panel will be displayed.\n /\n @Prop() active: boolean = false;\n\n /\n @internal Determines whether black variant of the tabs should be displayed.\n /\n @Prop() monochrome?: boolean = false;\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 position of the tab panel inside the tabs array in context.\n /\n @Prop({ reflect: true }) tabPosition?: number;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() theme?: IcThemeMode = \"inherit\";\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.el);\n }\n\n render() {\n const { active, theme } = this;\n return (\n <Host\n class={{\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n \"ic-tab-panel-hidden\": !active,\n }}\n role=\"tabpanel\"\n aria-hidden={`${!active}`}\n >\n <div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/ic-tab.cjs.entry.js CHANGED Viewed

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-f982899d.js');
-const types = require('./types-dc22e301.js');
-const helpers = require('./helpers-94b33ab0.js');
+const index = require('./index-d337cd8a.js');
+const helpers = require('./helpers-a0a128bd.js');
-const icTabCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--indicator-initial-color:rgba(23 89 188 / 0%);--indicator-color:var(--ic-action-default);--focus-indicator:var(--ic-border-focus);--label-color:var(--ic-color-primary-text);--background-color-hover:var(--ic-action-default-bg-hover);--background-color-active:var(--ic-action-default-bg-active);display:flex;align-items:center;border-radius:0;color:var(--label-color);height:2.5rem;padding:0 var(--ic-space-md);cursor:pointer;position:relative;border-bottom:var(--ic-space-xxs) solid var(--indicator-initial-color);gap:var(--ic-space-xs);transition:all var(--ic-easing-transition-fast)}:host(:focus){box-shadow:var(--focus-indicator);border-radius:var(--ic-border-radius)}:host(:focus-visible){outline:var(--ic-hc-focus-outline)}:host(:hover){background-color:var(--background-color-hover)}:host(:active){background-color:var(--background-color-active)}:host(.ic-tab-light){--indicator-initial-color:rgb(255 255 255 / 0%);--indicator-color:rgb(255 255 255 / 100%);--focus-indicator:var(--ic-border-focus);--label-color:white;--background-color-hover:var(--ic-action-dark-bg-hover);--background-color-active:var(--ic-action-dark-bg-active)}:host(.ic-tab-selected){border-bottom:var(--ic-space-xxs) solid var(--indicator-color)}:host(.ic-tab-disabled){pointer-events:none;color:var(--ic-architectural-300)}@media (prefers-reduced-motion: no-preference){:host(.ic-tab-selected.with-transition){transition:all var(--ic-easing-transition-slow),\n      border-color var(--ic-transition-duration-slow)}}.ic-tab-label{pointer-events:none;text-wrap:nowrap}::slotted(svg){fill:currentcolor}@media (forced-colors: active){:host{border-bottom:var(--ic-space-xxs) solid canvas}:host(.ic-tab-disabled){color:GrayText}}";
+const icTabCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{--indicator-initial-color:rgba(23 89 188 / 0%);--focus-indicator:var(--ic-border-focus);display:flex;align-items:center;border-radius:0;color:var(--ic-tab-label);--ic-typography-color:var(--ic-tab-label);height:2.5rem;padding:0 var(--ic-space-md);cursor:pointer;position:relative;border-bottom:var(--ic-space-xxs) solid var(--indicator-initial-color);gap:var(--ic-space-xs);transition:all var(--ic-easing-transition-fast)}::slotted([slot=\"icon\"]){fill:var(--ic-tab-icon)}:host(.ic-tab-disabled) ::slotted([slot=\"icon\"]){fill:var(--ic-tab-icon-disabled)}:host(:focus){box-shadow:var(--focus-indicator);border-radius:var(--ic-border-radius)}:host(:focus-visible){outline:var(--ic-hc-focus-outline)}:host(:hover){background-color:var(--ic-tab-item-hover)}:host(:active){background-color:var(--ic-tab-item-pressed)}:host(.ic-tab-selected){border-bottom:var(--ic-space-xxs) solid var(--ic-tab-item)}:host(.ic-tab-disabled){pointer-events:none;color:var(--ic-architectural-300)}:host(.ic-tab-disabled) ic-typography{--ic-typography-color:var(--ic-tab-label-disabled)}:host(.ic-tab-monochrome){color:var(--ic-tab-label-monochrome)}:host(.ic-tab-monochrome.ic-tab-disabled) ic-typography{color:var(--ic-tab-label-monochrome-disabled)}:host(.ic-tab-monochrome) ::slotted([slot=\"icon\"]){fill:var(--ic-tab-icon-monochrome)}:host(.ic-tab-monochrome.ic-tab-disabled) ::slotted([slot=\"icon\"]){fill:var(--ic-tab-icon-monochrome-disabled)}:host(.ic-tab-monochrome.ic-tab-selected){border-bottom:var(--ic-space-xxs) solid var(--ic-tab-item-monochrome)}:host(.ic-tab-monochrome:hover){background-color:var(--ic-tab-item-hover-monochrome)}:host(.ic-tab-monochrome:active){background-color:var(--ic-tab-item-pressed-monochrome)}@media (prefers-reduced-motion: no-preference){:host(.ic-tab-selected.with-transition){transition:all var(--ic-easing-transition-slow),\n      border-color var(--ic-transition-duration-slow)}}.ic-tab-label{pointer-events:none;text-wrap:nowrap}::slotted(svg){fill:currentcolor}@media (forced-colors: active){:host{border-bottom:var(--ic-space-xxs) solid canvas}:host(.ic-tab-disabled){color:GrayText}:host(.ic-tab-disabled) ic-typography{color:GrayText;--ic-typography-color:GrayText}}";
+const IcTabStyle0 = icTabCss;
 const Tab = class {
     constructor(hostRef) {
@@ -18,6 +18,18 @@ const Tab = class {
         this.tabRemoved = index.createEvent(this, "tabRemoved", 7);
         this.focusFromClick = false;
         this.isInitialRender = true;
+        /** @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */
+        this.contextId = "default";
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /** @internal Determines whether black variant of the tabs should be displayed. */
+        this.monochrome = false;
+        /** @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. */
+        this.selected = false;
+        /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+        this.theme = "inherit";
         this.handleClick = () => {
             this.tabClick.emit({
                 tabId: this.tabId,
@@ -49,12 +61,9 @@ const Tab = class {
             //the focus does need to be a separate event though to handle focus from keyboard
             this.focusFromClick = true;
         };
-        this.appearance = "dark";
-        this.contextId = "default";
-        this.disabled = false;
-        this.selected = false;
-        this.tabId = undefined;
-        this.tabPosition = undefined;
+    }
+    watchDisabledHandler() {
+        helpers.removeDisabledFalse(this.disabled, this.el);
     }
     disabledWatchHandler() {
         this.tabEnabled.emit();
@@ -63,10 +72,9 @@ const Tab = class {
         this.tabCreated.emit(this.el);
     }
     disconnectedCallback() {
-        const tabContext = document.querySelector(`ic-tab-context[context-id=${this.contextId}]`);
-        if (tabContext) {
-            tabContext.tabRemovedHandler(!!this.focusTabId);
-        }
+        var _a;
+        (_a = document
+            .querySelector(`ic-tab-context[context-id=${this.contextId}]`)) === null || _a === void 0 ? void 0 : _a.tabRemovedHandler(!!this.focusTabId);
     }
     componentWillLoad() {
         helpers.removeDisabledFalse(this.disabled, this.el);
@@ -83,20 +91,21 @@ const Tab = class {
         }
     }
     render() {
-        const { disabled, selected, appearance } = this;
-        return (index.h(index.Host, { class: {
+        const { disabled, selected, theme, monochrome, handleClick, handleFocus, handleMouseDown, } = this;
+        return (index.h(index.Host, { key: '954c5dd86688230d4ebb36c8a98b9c30c1524fc9', class: {
                 ["with-transition"]: !this.isInitialRender,
-                ["ic-tab-light"]: appearance === types.IcThemeForegroundEnum.Light,
-                ["ic-tab-selected"]: selected,
-                ["ic-tab-disabled"]: disabled,
-            }, role: "tab", "aria-selected": selected ? "true" : "false", onClick: this.handleClick, onFocus: this.handleFocus, onMouseDown: this.handleMouseDown, "aria-disabled": disabled ? "true" : "false", tabindex: this.selected ? 0 : -1 }, this.el.querySelector('[slot="icon"]') && index.h("slot", { name: "icon" }), index.h("ic-typography", { class: "ic-tab-label", variant: "label" }, index.h("span", null, index.h("slot", null))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { name: "badge" })));
+                ["ic-tab-selected"]: !!selected,
+                ["ic-tab-disabled"]: !!disabled,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                ["ic-tab-monochrome"]: !!monochrome,
+            }, role: "tab", "aria-selected": `${selected}`, onClick: handleClick, onFocus: handleFocus, onMouseDown: handleMouseDown, "aria-disabled": `${disabled}`, tabindex: selected ? 0 : -1 }, helpers.isSlotUsed(this.el, "icon") && index.h("slot", { key: '11506c4354b5dc44310df86479b02ed0638bbe32', name: "icon" }), index.h("ic-typography", { key: 'd466ad914e607cabb9ff47dc31b6428a081b08a7', class: "ic-tab-label", variant: "label" }, index.h("span", { key: '8cc33760084b7735ed7db8b222a2b0374c936f3f' }, index.h("slot", { key: '04bdfe11cd1eef76fad7f6e0afa7e059251ba3cc' }))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { key: 'a29692b7826b09874aba3ec5579dbca979cd791a', name: "badge" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "disabled": ["disabledWatchHandler"]
+        "disabled": ["watchDisabledHandler", "disabledWatchHandler"]
     }; }
 };
-Tab.style = icTabCss;
+Tab.style = IcTabStyle0;
 exports.ic_tab = Tab;

package/dist/cjs/ic-tab.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-tab.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","h","Host","IcThemeForegroundEnum","isSlotUsed"],"sources":["src/components/ic-tab/ic-tab.css?tag=ic-tab&encapsulation=shadow","src/components/ic-tab/ic-tab.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n --indicator-initial-color: rgba(23 89 188 / 0%);\n --indicator-color: var(--ic-action-default);\n --focus-indicator: var(--ic-border-focus);\n --label-color: var(--ic-color-primary-text);\n --background-color-hover: var(--ic-action-default-bg-hover);\n --background-color-active: var(--ic-action-default-bg-active);\n\n display: flex;\n align-items: center;\n border-radius: 0;\n color: var(--label-color);\n height: 2.5rem;\n padding: 0 var(--ic-space-md);\n cursor: pointer;\n position: relative;\n border-bottom: var(--ic-space-xxs) solid var(--indicator-initial-color);\n gap: var(--ic-space-xs);\n transition: all var(--ic-easing-transition-fast);\n}\n\n:host(:focus) {\n box-shadow: var(--focus-indicator);\n border-radius: var(--ic-border-radius);\n}\n\n:host(:focus-visible) {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(:hover) {\n background-color: var(--background-color-hover);\n}\n\n:host(:active) {\n background-color: var(--background-color-active);\n}\n\n:host(.ic-tab-light) {\n --indicator-initial-color: rgb(255 255 255 / 0%);\n --indicator-color: rgb(255 255 255 / 100%);\n --focus-indicator: var(--ic-border-focus);\n --label-color: white;\n --background-color-hover: var(--ic-action-dark-bg-hover);\n --background-color-active: var(--ic-action-dark-bg-active);\n}\n\n:host(.ic-tab-selected) {\n border-bottom: var(--ic-space-xxs) solid var(--indicator-color);\n}\n\n:host(.ic-tab-disabled) {\n pointer-events: none;\n color: var(--ic-architectural-300);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n :host(.ic-tab-selected.with-transition) {\n transition: all var(--ic-easing-transition-slow),\n border-color var(--ic-transition-duration-slow);\n }\n}\n\n.ic-tab-label {\n pointer-events: none;\n text-wrap: nowrap;\n}\n\n::slotted(svg) {\n fill: currentcolor;\n}\n\n@media (forced-colors: active) {\n :host {\n border-bottom: var(--ic-space-xxs) solid canvas;\n }\n\n :host(.ic-tab-disabled) {\n color: GrayText;\n }\n}\n\n/* Add back in after storybook has the `color-scheme: light dark` code /\n\n/ @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n :host(ic-tab) .ic-tab-label {\n color: var(--ic-architectural-white);\n }\n :host(ic-tab.ic-tab-disabled) .ic-tab-label {\n color: inherit;\n }\n} /\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n Method,\n Watch,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\n\n/\n @slot icon - Content will be rendered next to the tab label.\n * @slot badge - Badge component displayed inline with the tab.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n private focusFromClick: boolean = false;\n private focusTabId: string;\n private isInitialRender: boolean = true;\n\n @Element() el: HTMLIcTabElement;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /* @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n /* @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. /\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /* @internal The shared ID between panel and tab. /\n @Prop({ reflect: true }) tabId?: string;\n\n /* @internal The position of the tab inside the tabs array in context. /\n @Prop() tabPosition?: number;\n\n @Watch(\"disabled\")\n disabledWatchHandler(): void {\n this.tabEnabled.emit();\n }\n\n /\n @internal Emitted when a tab is selected.\n /\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is dynamically created.\n /\n @Event() tabCreated: EventEmitter<HTMLIcTabElement>;\n\n /\n @internal Emitted when a tab's disabled prop changes\n /\n @Event() tabEnabled: EventEmitter<void>;\n\n /\n @internal Emitted when a tab is focussed.\n /\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is unmounted.\n /\n @Event() tabRemoved: EventEmitter<void>;\n\n connectedCallback(): void {\n this.tabCreated.emit(this.el);\n }\n\n disconnectedCallback(): void {\n const tabContext = document.querySelector(\n `ic-tab-context[context-id=${this.contextId}]`\n ) as HTMLIcTabContextElement;\n if (tabContext) {\n tabContext.tabRemovedHandler(!!this.focusTabId);\n }\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n /\n Sets focus on the tab.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el) {\n this.el.focus();\n }\n }\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.focusTabId = this.tabId;\n\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a separate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n render() {\n const { disabled, selected, appearance } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-light\"]: appearance === IcThemeForegroundEnum.Light,\n [\"ic-tab-selected\"]: selected,\n [\"ic-tab-disabled\"]: disabled,\n }}\n role=\"tab\"\n aria-selected={selected ? \"true\" : \"false\"}\n onClick={this.handleClick}\n onFocus={this.handleFocus}\n onMouseDown={this.handleMouseDown}\n aria-disabled={disabled ? \"true\" : \"false\"}\n tabindex={this.selected ? 0 : -1}\n >\n {this.el.querySelector('[slot=\"icon\"]') && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-tab.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,QAAQ,GAAG,+hJAA+hJ,CAAC;AACjjJ,oBAAe,QAAQ;;MCwBV,GAAG;IALhB;;;;;;;QAMU,mBAAc,GAAY,KAAK,CAAC;QAEhC,oBAAe,GAAY,IAAI,CAAC;;QAKf,cAAS,GAAY,SAAS,CAAC;;;;QAKhD,aAAQ,GAAa,KAAK,CAAC;;QAO3B,eAAU,GAAa,KAAK,CAAC;;QAGZ,aAAQ,GAAa,KAAK,CAAC;;QAS5C,UAAK,GAAiB,SAAS,CAAC;QA8DhC,gBAAW,GAAG;YACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAU;gBAC1B,QAAQ,EAAE,IAAI,CAAC,WAAW;aAC3B,CAAC,CAAC;YACH,IAAI,IAAI,CAAC,cAAc,EAAE;gBACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,SAAS,EAAE,IAAI,CAAC,SAAU;oBAC1B,QAAQ,EAAE,IAAI,CAAC,WAAW;iBAC3B,CAAC,CAAC;gBACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;aAC7B;SACF,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;gBACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;gBAE7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;oBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,SAAS,EAAE,IAAI,CAAC,SAAU;oBAC1B,QAAQ,EAAE,IAAI,CAAC,WAAW;iBAC3B,CAAC,CAAC;aACJ;SACF,CAAC;QAEM,oBAAe,GAAG;;;;YAIxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B,CAAC;KAuCH;IAvJC,oBAAoB;QAClBA,2BAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAkBD,oBAAoB;QAClB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IA2BD,iBAAiB;QACf,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KAC/B;IAED,oBAAoB;;QAClB,MAAA,QAAQ;aACL,aAAa,CACZ,6BAA6B,IAAI,CAAC,SAAS,GAAG,CAC/C,0CACC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC1C;IAED,iBAAiB;QACfA,2BAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAED,kBAAkB;QAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;KAC9B;;;;IAMD,MAAM,QAAQ;QACZ,IAAI,IAAI,CAAC,EAAE,EAAE;YACX,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC;SACjB;KACF;IAqCD,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,UAAU,EACV,WAAW,EACX,WAAW,EACX,eAAe,GAChB,GAAG,IAAI,CAAC;QACT,QACEC,QAACC,UAAI,qDACH,KAAK,EAAE;gBACL,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,eAAe;gBAC1C,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;gBAC/B,CAAC,iBAAiB,GAAG,CAAC,CAAC,QAAQ;gBAC/B,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;gBAC1C,CAAC,mBAAmB,GAAG,CAAC,CAAC,UAAU;aACpC,EACD,IAAI,EAAC,KAAK,mBACK,GAAG,QAAQ,EAAE,EAC5B,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,WAAW,EAAE,eAAe,mBACb,GAAG,QAAQ,EAAE,EAC5B,QAAQ,EAAE,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,IAE1BC,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAIF,mEAAM,IAAI,EAAC,MAAM,GAAQ,EACzDA,4EAAe,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,OAAO,IACjDA,qEACEA,oEAAa,CACR,CACO,EACfE,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAIF,mEAAM,IAAI,EAAC,OAAO,GAAQ,CACtD,EACP;KACH;;;;;;;;;;","names":["removeDisabledFalse","h","Host","isSlotUsed"],"sources":["src/components/ic-tab/ic-tab.css?tag=ic-tab&encapsulation=shadow","src/components/ic-tab/ic-tab.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n --indicator-initial-color: rgba(23 89 188 / 0%);\n --focus-indicator: var(--ic-border-focus);\n\n display: flex;\n align-items: center;\n border-radius: 0;\n color: var(--ic-tab-label);\n\n --ic-typography-color: var(--ic-tab-label);\n\n height: 2.5rem;\n padding: 0 var(--ic-space-md);\n cursor: pointer;\n position: relative;\n border-bottom: var(--ic-space-xxs) solid var(--indicator-initial-color);\n gap: var(--ic-space-xs);\n transition: all var(--ic-easing-transition-fast);\n}\n\n::slotted([slot=\"icon\"]) {\n fill: var(--ic-tab-icon);\n}\n\n:host(.ic-tab-disabled) ::slotted([slot=\"icon\"]) {\n fill: var(--ic-tab-icon-disabled);\n}\n\n:host(:focus) {\n box-shadow: var(--focus-indicator);\n border-radius: var(--ic-border-radius);\n}\n\n:host(:focus-visible) {\n outline: var(--ic-hc-focus-outline);\n}\n\n:host(:hover) {\n background-color: var(--ic-tab-item-hover);\n}\n\n:host(:active) {\n background-color: var(--ic-tab-item-pressed);\n}\n\n:host(.ic-tab-selected) {\n border-bottom: var(--ic-space-xxs) solid var(--ic-tab-item);\n}\n\n:host(.ic-tab-disabled) {\n pointer-events: none;\n color: var(--ic-architectural-300);\n}\n\n:host(.ic-tab-disabled) ic-typography {\n --ic-typography-color: var(--ic-tab-label-disabled);\n}\n\n:host(.ic-tab-monochrome) {\n color: var(--ic-tab-label-monochrome);\n}\n\n:host(.ic-tab-monochrome.ic-tab-disabled) ic-typography {\n color: var(--ic-tab-label-monochrome-disabled);\n}\n\n:host(.ic-tab-monochrome) ::slotted([slot=\"icon\"]) {\n fill: var(--ic-tab-icon-monochrome);\n}\n\n:host(.ic-tab-monochrome.ic-tab-disabled) ::slotted([slot=\"icon\"]) {\n fill: var(--ic-tab-icon-monochrome-disabled);\n}\n\n:host(.ic-tab-monochrome.ic-tab-selected) {\n border-bottom: var(--ic-space-xxs) solid var(--ic-tab-item-monochrome);\n}\n\n:host(.ic-tab-monochrome:hover) {\n background-color: var(--ic-tab-item-hover-monochrome);\n}\n\n:host(.ic-tab-monochrome:active) {\n background-color: var(--ic-tab-item-pressed-monochrome);\n}\n\n@media (prefers-reduced-motion: no-preference) {\n :host(.ic-tab-selected.with-transition) {\n transition: all var(--ic-easing-transition-slow),\n border-color var(--ic-transition-duration-slow);\n }\n}\n\n.ic-tab-label {\n pointer-events: none;\n text-wrap: nowrap;\n}\n\n::slotted(svg) {\n fill: currentcolor;\n}\n\n@media (forced-colors: active) {\n :host {\n border-bottom: var(--ic-space-xxs) solid canvas;\n }\n\n :host(.ic-tab-disabled) {\n color: GrayText;\n }\n\n :host(.ic-tab-disabled) ic-typography {\n color: GrayText;\n\n --ic-typography-color: GrayText;\n }\n}\n\n/* Add back in after storybook has the `color-scheme: light dark` code /\n\n/ @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {\n :host(ic-tab) .ic-tab-label {\n color: var(--ic-architectural-white);\n }\n :host(ic-tab.ic-tab-disabled) .ic-tab-label {\n color: inherit;\n }\n} /\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n Method,\n Watch,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { isSlotUsed, removeDisabledFalse } from \"../../utils/helpers\";\n\n/\n @slot icon - Content will be rendered next to the tab label.\n * @slot badge - Badge component displayed inline with the tab.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n private focusFromClick: boolean = false;\n private focusTabId: string;\n private isInitialRender: boolean = true;\n\n @Element() el: HTMLIcTabElement;\n\n /* @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /* @internal Determines whether black variant of the tabs should be displayed. /\n @Prop() monochrome?: boolean = false;\n\n /* @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. /\n @Prop({ reflect: true }) selected?: boolean = false;\n\n /* @internal The shared ID between panel and tab. /\n @Prop({ reflect: true }) tabId!: string;\n\n /* @internal The position of the tab inside the tabs array in context. /\n @Prop() tabPosition!: number;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n @Watch(\"disabled\")\n disabledWatchHandler(): void {\n this.tabEnabled.emit();\n }\n\n /\n @internal Emitted when a tab is selected.\n /\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is dynamically created.\n /\n @Event() tabCreated: EventEmitter<HTMLIcTabElement>;\n\n /\n @internal Emitted when a tab's disabled prop changes\n /\n @Event() tabEnabled: EventEmitter<void>;\n\n /\n @internal Emitted when a tab is focussed.\n /\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal Emitted when a tab is unmounted.\n /\n @Event() tabRemoved: EventEmitter<void>;\n\n connectedCallback(): void {\n this.tabCreated.emit(this.el);\n }\n\n disconnectedCallback(): void {\n document\n .querySelector<HTMLIcTabContextElement>(\n `ic-tab-context[context-id=${this.contextId}]`\n )\n ?.tabRemovedHandler(!!this.focusTabId);\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\n }\n\n /\n Sets focus on the tab.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el) {\n this.el.focus();\n }\n }\n\n private handleClick = () => {\n this.tabClick.emit({\n tabId: this.tabId,\n contextId: this.contextId!,\n position: this.tabPosition,\n });\n if (this.focusFromClick) {\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId!,\n position: this.tabPosition,\n });\n this.focusFromClick = false;\n }\n };\n\n private handleFocus = () => {\n if (!this.focusFromClick) {\n this.focusTabId = this.tabId;\n\n this.tabFocus.emit({\n tabId: this.tabId,\n contextId: this.contextId!,\n position: this.tabPosition,\n });\n }\n };\n\n private handleMouseDown = () => {\n //set flag so that focus gets handled after click\n //there is a timing issue where a long click only causes focus to happen & not the click\n //the focus does need to be a separate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n render() {\n const {\n disabled,\n selected,\n theme,\n monochrome,\n handleClick,\n handleFocus,\n handleMouseDown,\n } = this;\n return (\n <Host\n class={{\n [\"with-transition\"]: !this.isInitialRender,\n [\"ic-tab-selected\"]: !!selected,\n [\"ic-tab-disabled\"]: !!disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [\"ic-tab-monochrome\"]: !!monochrome,\n }}\n role=\"tab\"\n aria-selected={`${selected}`}\n onClick={handleClick}\n onFocus={handleFocus}\n onMouseDown={handleMouseDown}\n aria-disabled={`${disabled}`}\n tabindex={selected ? 0 : -1}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n <ic-typography class=\"ic-tab-label\" variant=\"label\">\n <span>\n <slot></slot>\n </span>\n </ic-typography>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </Host>\n );\n }\n}\n"],"version":3}