npm - @ukic/web-components - Versions diffs - 2.1.0-beta.1 → 2.1.0-beta.10 - Mend

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

Files changed (817) hide show

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

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

package/dist/components/ic-tab-group.js CHANGED Viewed

@@ -1,165 +1,70 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { A as elementOverflowsX, c as checkResizeObserver, a as onComponentRequiredPropUndefined } from './helpers.js';
+import { a as onComponentRequiredPropUndefined } from './helpers.js';
 import { I as IcThemeForegroundEnum } from './types.js';
+import { d as defineCustomElement$6 } from './ic-button2.js';
+import { d as defineCustomElement$5 } from './ic-horizontal-scroll2.js';
+import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
-const LeftArrow = `<svg width="8" height="10" viewBox="0 0 8 10" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.0876 1.175L5.9126 0L0.912598 5L5.9126 10L7.0876 8.825L3.27093 5L7.0876 1.175Z"/>
-</svg>`;
+const icTabGroupCss = ":host{--border-bottom-color:var(--ic-architectural-300);display:block;margin-bottom:var(--ic-space-md);border-bottom:1px solid var(--border-bottom-color)}:host([inline]){margin-bottom:0;border-bottom:none}.light{--border-bottom-color:var(--ic-architectural-white)}.tabs-container{display:flex;flex-direction:row}.tabs-container::-webkit-scrollbar{display:none}";
-const RightArrow = `<svg width="8" height="10" viewBox="0 0 8 10" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.0876 0L0.912598 1.175L4.72926 5L0.912598 8.825L2.0876 10L7.0876 5L2.0876 0Z"/>
-</svg>
-`;
-const icTabGroupCss = ":host{--border-bottom-color:var(--ic-architectural-300);--splitter-color:var(--ic-architectural-100);--tab-scroll-focus:var(--ic-border-focus);--tab-scroll-fill:var(--ic-action-default);--tab-scroll-disabled-fill:var(--ic-architectural-300);--tab-scroll-hover:var(--ic-action-default-bg-hover);--tab-scroll-active:var(--ic-action-default-bg-active);display:block;margin-bottom:var(--ic-space-md);margin-left:calc(-1 * var(--ic-space-xs))}:host(.light){--splitter-color:var(--ic-architectural-white);--tab-scroll-focus:var(--ic-border-focus-dark);--tab-scroll-fill:var(--ic-action-light);--tab-scroll-disabled-fill:var(--ic-architectural-500);--tab-scroll-hover:var(--ic-action-dark-bg-hover);--tab-scroll-active:var(--ic-action-dark-bg-active)}:host([inline]){margin-bottom:0}.tabs-container{display:flex;flex-direction:row;overflow-y:hidden;overflow-x:scroll;height:100%;align-items:center;padding:var(--ic-space-xs);scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;margin:calc(-1 * var(--ic-space-xs)) 0}.tabs-container::-webkit-scrollbar{display:none}.ic-tab-group-container{display:flex;align-items:center}:host(.light.ic-tab-group-not-inline){--border-bottom-color:var(--ic-architectural-white)}.scroll-container{display:flex}.scroll-container.hidden{display:none}.scroll-container:first-child{margin-left:var(--ic-space-xs)}.scroll-arrow{display:flex;width:36px;height:36px;margin:var(--ic-space-xxs) var(--ic-space-xxxs);align-items:center;justify-content:center;fill:var(--tab-scroll-fill);cursor:pointer}.scroll-arrow:focus{outline:var(--ic-hc-focus-outline)}.scroll-arrow:hover{background-color:var(--tab-scroll-hover)}.scroll-arrow:active{background-color:var(--tab-scroll-active)}.scroll-container.disabled .scroll-arrow{fill:var(--tab-scroll-disabled-fill);cursor:default}.scroll-container.disabled .scroll-arrow:hover,.scroll-container.disabled .scroll-arrow:active,.scroll-container.disabled .scroll-arrow:focus{background-color:unset;box-shadow:none}.scroll-container.disabled .ic-tooltip-container{display:none !important}.scroll-splitter-left,.scroll-splitter-right{display:flex;height:var(--ic-space-lg);width:1px;margin-top:10px;background-color:var(--splitter-color)}.scroll-splitter-left{margin-left:var(--ic-space-xxxs)}.scroll-splitter-right{margin-right:var(--ic-space-xxxs)}.scroll-container.disabled .scroll-splitter-left,.scroll-container.disabled .scroll-splitter-right{display:none}.ic-tab-splitter{display:block;background-color:var(--border-bottom-color);height:1px;right:0;left:0;margin-left:var(--ic-space-xs)}.ic-tab-splitter.hidden{height:0}";
-const SCROLL_DELAY_MS = 200;
 const TabGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.buttonStateSet = false;
-    this.resizeObserverCallback = () => {
-      if (this.tabGroupEl === null || this.tabGroupEl === undefined) {
-        this.tabGroupEl = this.host.shadowRoot.querySelector(".tabs-container");
-      }
-      this.tabOverflow = elementOverflowsX(this.tabGroupEl);
-      if (this.tabOverflow) {
-        this.lastTabVisible =
-          this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=
-            this.tabGroupEl.scrollWidth;
-      }
-    };
-    this.runResizeObserver = () => {
-      this.resizeObserver = new ResizeObserver(() => {
-        this.resizeObserverCallback();
-      });
-      this.resizeObserver.observe(this.splitterEl);
-    };
-    this.scrollLeft = () => {
-      this.scrollTabIntoView(this.getCurrentLeftTab() - 1);
-    };
-    this.scrollRight = () => {
-      this.scrollTabIntoView(this.getCurrentLeftTab() + 1);
-    };
-    this.longScrollRight = () => {
-      this.scrollRight();
-      this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);
-    };
-    this.longScrollLeft = () => {
-      this.scrollLeft();
-      this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);
-    };
-    this.leftArrowMouseDownHandler = () => {
-      this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);
-    };
-    this.rightArrowMouseDownHandler = () => {
-      this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);
-    };
-    this.arrowMouseUpHandler = () => {
-      window.clearTimeout(this.scrollDelay);
-    };
-    this.getCurrentLeftTab = () => {
-      const index = this.tabOffsets.findIndex((el) => el > this.tabGroupEl.scrollLeft);
-      return index < 0 ? 0 : index;
-    };
-    this.scrollHandler = () => {
-      window.clearTimeout(this.isScrolling);
-      // Set a timeout to run after scrolling ends
-      this.isScrolling = window.setTimeout(this.scrollStopped, 50);
-    };
-    this.scrollStopped = () => {
-      // if scrollTabIntoView has been called, the button states will already be set
-      // can't just handle it here as it causes strange jumping behaviour in positioning
-      if (this.buttonStateSet === false) {
-        this.firstTabVisible = this.tabGroupEl.scrollLeft === 0;
-        this.lastTabVisible =
-          this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=
-            this.tabGroupEl.scrollWidth;
-      }
-      this.buttonStateSet = false;
-    };
     this.contextId = "default";
     this.inline = false;
     this.label = undefined;
     this.appearance = "dark";
-    this.firstTabVisible = true;
-    this.lastTabVisible = false;
-    this.tabOverflow = false;
-  }
-  /**
-   * @internal if tab side scrolling enabled, scrolls the specified tab into view
-   */
-  async scrollTabIntoView(tabNumber) {
-    this.firstTabVisible = tabNumber <= 0;
-    const newScrollPos = tabNumber <= 0 ? 0 : this.tabOffsets[tabNumber - 1];
-    this.lastTabVisible =
-      this.tabGroupEl.offsetWidth + newScrollPos >= this.tabGroupEl.scrollWidth;
-    this.buttonStateSet = true;
-    this.tabGroupEl.scrollLeft = newScrollPos;
-  }
-  tabFocusHandler(event) {
-    if (this.tabOverflow) {
-      this.scrollTabIntoView(event.detail.position);
-    }
   }
   componentDidLoad() {
-    this.tabs = Array.from(this.host.querySelectorAll("ic-tab"));
-    let runningTotal = 0;
-    this.tabOffsets = this.tabs.map((tab) => {
-      runningTotal += tab.offsetWidth;
-      return runningTotal;
-    });
-    checkResizeObserver(this.runResizeObserver);
-    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tab List");
-  }
-  disconnectedCallback() {
-    this.resizeObserver.disconnect();
+    onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tab Group");
   }
   render() {
-    const { inline, appearance, label, firstTabVisible, lastTabVisible, tabOverflow, } = this;
+    const { appearance, label } = this;
     return (h(Host, { role: "tablist", "aria-label": label, class: {
         ["light"]: appearance === IcThemeForegroundEnum.Light,
-        ["ic-tab-group-not-inline"]: !inline,
-      } }, h("div", { class: "ic-tab-group-container" }, this.tabOverflow && (h("div", { "aria-hidden": "true", id: "scroll-container-left", class: {
-        ["scroll-container"]: true,
-        ["hidden"]: !tabOverflow,
-        ["disabled"]: firstTabVisible,
-      } }, h("ic-tooltip", { placement: "bottom-start", label: "Scroll left", target: "left-arrow" }, h("span", { id: "left-arrow", class: "scroll-arrow", innerHTML: LeftArrow, onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler, onMouseUp: this.arrowMouseUpHandler })), h("span", { class: "scroll-splitter-left" }))), h("div", { class: "tabs-container", ref: (el) => (this.tabGroupEl = el), onScroll: this.scrollHandler }, h("slot", null)), this.tabOverflow && (h("div", { "aria-hidden": "true", id: "scroll-container-right", class: {
-        ["scroll-container"]: true,
-        ["hidden"]: !tabOverflow,
-        ["disabled"]: lastTabVisible,
-      } }, h("span", { class: "scroll-splitter-right" }), h("ic-tooltip", { placement: "bottom-start", label: "Scroll right", target: "right-arrow" }, h("span", { id: "right-arrow", class: "scroll-arrow", innerHTML: RightArrow, onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler, onMouseUp: this.arrowMouseUpHandler }))))), h("div", { "aria-hidden": "true", class: {
-        ["ic-tab-splitter"]: true,
-        ["hidden"]: inline,
-      }, ref: (el) => (this.splitterEl = el) })));
+      } }, h("ic-horizontal-scroll", { appearance: appearance === IcThemeForegroundEnum.Dark
+        ? IcThemeForegroundEnum.Default
+        : appearance }, h("div", { class: "tabs-container" }, h("slot", null)))));
   }
+  static get delegatesFocus() { return true; }
   get host() { return this; }
   static get style() { return icTabGroupCss; }
-}, [1, "ic-tab-group", {
+}, [17, "ic-tab-group", {
     "contextId": [513, "context-id"],
     "inline": [516],
     "label": [1],
-    "appearance": [1],
-    "firstTabVisible": [32],
-    "lastTabVisible": [32],
-    "tabOverflow": [32],
-    "scrollTabIntoView": [64]
-  }, [[0, "tabFocus", "tabFocusHandler"]]]);
+    "appearance": [1]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ic-tab-group", "ic-tooltip", "ic-typography"];
+  const components = ["ic-tab-group", "ic-button", "ic-horizontal-scroll", "ic-loading-indicator", "ic-tooltip", "ic-typography"];
   components.forEach(tagName => { switch (tagName) {
     case "ic-tab-group":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, TabGroup);
       }
       break;
+    case "ic-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "ic-horizontal-scroll":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "ic-loading-indicator":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
     case "ic-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();

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

	@@ -1 +1 @@
1	- {"file":"ic-tab-group.js","mappings":"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","names":[],"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 --splitter-color: var(--ic-architectural-100);\n --tab-scroll-focus: var(--ic-border-focus);\n --tab-scroll-fill: var(--ic-action-default);\n --tab-scroll-disabled-fill: var(--ic-architectural-300);\n --tab-scroll-hover: var(--ic-action-default-bg-hover);\n --tab-scroll-active: var(--ic-action-default-bg-active);\n\n display: block;\n margin-bottom: var(--ic-space-md);\n margin-left: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.light) {\n --splitter-color: var(--ic-architectural-white);\n --tab-scroll-focus: var(--ic-border-focus-dark);\n --tab-scroll-fill: var(--ic-action-light);\n --tab-scroll-disabled-fill: var(--ic-architectural-500);\n --tab-scroll-hover: var(--ic-action-dark-bg-hover);\n --tab-scroll-active: var(--ic-action-dark-bg-active);\n}\n\n:host([inline]) {\n margin-bottom: 0;\n}\n\n.tabs-container {\n display: flex;\n flex-direction: row;\n overflow-y: hidden;\n overflow-x: scroll;\n height: 100%;\n align-items: center;\n padding: var(--ic-space-xs);\n scroll-behavior: smooth;\n -ms-overflow-style: none;\n scrollbar-width: none;\n margin: calc(-1 * var(--ic-space-xs)) 0;\n}\n\n.tabs-container::-webkit-scrollbar {\n display: none;\n}\n\n.ic-tab-group-container {\n display: flex;\n align-items: center;\n}\n\n:host(.light.ic-tab-group-not-inline) {\n --border-bottom-color: var(--ic-architectural-white);\n}\n\n.scroll-container {\n display: flex;\n}\n\n.scroll-container.hidden {\n display: none;\n}\n\n.scroll-container:first-child {\n margin-left: var(--ic-space-xs);\n}\n\n.scroll-arrow {\n display: flex;\n width: 36px;\n height: 36px;\n margin: var(--ic-space-xxs) var(--ic-space-xxxs);\n align-items: center;\n justify-content: center;\n fill: var(--tab-scroll-fill);\n cursor: pointer;\n}\n\n.scroll-arrow:focus {\n outline: var(--ic-hc-focus-outline);\n}\n\n.scroll-arrow:hover {\n background-color: var(--tab-scroll-hover);\n}\n\n.scroll-arrow:active {\n background-color: var(--tab-scroll-active);\n}\n\n.scroll-container.disabled .scroll-arrow {\n fill: var(--tab-scroll-disabled-fill);\n cursor: default;\n}\n\n.scroll-container.disabled .scroll-arrow:hover,\n.scroll-container.disabled .scroll-arrow:active,\n.scroll-container.disabled .scroll-arrow:focus {\n background-color: unset;\n box-shadow: none;\n}\n\n.scroll-container.disabled .ic-tooltip-container {\n display: none !important;\n}\n\n.scroll-splitter-left,\n.scroll-splitter-right {\n display: flex;\n height: var(--ic-space-lg);\n width: 1px;\n margin-top: 10px;\n background-color: var(--splitter-color);\n}\n\n.scroll-splitter-left {\n margin-left: var(--ic-space-xxxs);\n}\n\n.scroll-splitter-right {\n margin-right: var(--ic-space-xxxs);\n}\n\n.scroll-container.disabled .scroll-splitter-left,\n.scroll-container.disabled .scroll-splitter-right {\n display: none;\n}\n\n.ic-tab-splitter {\n display: block;\n background-color: var(--border-bottom-color);\n height: 1px;\n right: 0;\n left: 0;\n margin-left: var(--ic-space-xs);\n}\n\n.ic-tab-splitter.hidden {\n height: 0;\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n State,\n Method,\n Listen,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\n\nimport {\n checkResizeObserver,\n elementOverflowsX,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcTabClickEventDetail } from \"../ic-tab/ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n tag: \"ic-tab-group\",\n styleUrl: \"ic-tab-group.css\",\n shadow: true,\n})\nexport class TabGroup {\n @Element() host: HTMLIcTabGroupElement;\n\n /*\n Provide a unique context 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 Use when tabs and tab panels are to be positioned separately.\n /\n @Prop({ reflect: true }) inline?: boolean = false;\n\n /\n Provide a label to describe the purpose of the set of tabs to screen reader users.\n /\n @Prop() label!: string;\n\n /* @internal Determines whether the light or dark variant of the tabs should be displayed. /\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n @State() firstTabVisible: boolean = true;\n @State() lastTabVisible: boolean = false;\n @State() tabOverflow: boolean = false;\n\n private tabs: HTMLIcTabElement[];\n private tabOffsets: number[];\n private tabGroupEl: HTMLElement;\n private splitterEl: HTMLElement;\n private resizeObserver: ResizeObserver;\n private isScrolling: number;\n private scrollDelay: number;\n private buttonStateSet: boolean = false;\n\n /\n @internal if tab side scrolling enabled, scrolls the specified tab into view\n */\n @Method()\n async scrollTabIntoView(tabNumber: number): Promise<void> {\n this.firstTabVisible = tabNumber <= 0;\n const newScrollPos = tabNumber <= 0 ? 0 : this.tabOffsets[tabNumber - 1];\n this.lastTabVisible =\n this.tabGroupEl.offsetWidth + newScrollPos >= this.tabGroupEl.scrollWidth;\n this.buttonStateSet = true;\n this.tabGroupEl.scrollLeft = newScrollPos;\n }\n\n @Listen(\"tabFocus\")\n tabFocusHandler(event: CustomEvent<IcTabClickEventDetail>): void {\n if (this.tabOverflow) {\n this.scrollTabIntoView(event.detail.position);\n }\n }\n\n private resizeObserverCallback = () => {\n if (this.tabGroupEl === null \|\| this.tabGroupEl === undefined) {\n this.tabGroupEl = this.host.shadowRoot.querySelector(\".tabs-container\");\n }\n this.tabOverflow = elementOverflowsX(this.tabGroupEl);\n if (this.tabOverflow) {\n this.lastTabVisible =\n this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=\n this.tabGroupEl.scrollWidth;\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.splitterEl);\n };\n\n private scrollLeft = () => {\n this.scrollTabIntoView(this.getCurrentLeftTab() - 1);\n };\n\n private scrollRight = () => {\n this.scrollTabIntoView(this.getCurrentLeftTab() + 1);\n };\n\n private longScrollRight = () => {\n this.scrollRight();\n this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n };\n\n private longScrollLeft = () => {\n this.scrollLeft();\n this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n };\n\n private leftArrowMouseDownHandler = () => {\n this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n };\n\n private rightArrowMouseDownHandler = () => {\n this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n };\n\n private arrowMouseUpHandler = () => {\n window.clearTimeout(this.scrollDelay);\n };\n\n private getCurrentLeftTab = (): number => {\n const index = this.tabOffsets.findIndex(\n (el) => el > this.tabGroupEl.scrollLeft\n );\n return index < 0 ? 0 : index;\n };\n\n private scrollHandler = () => {\n window.clearTimeout(this.isScrolling);\n // Set a timeout to run after scrolling ends\n this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n };\n\n private scrollStopped = () => {\n // if scrollTabIntoView has been called, the button states will already be set\n // can't just handle it here as it causes strange jumping behaviour in positioning\n if (this.buttonStateSet === false) {\n this.firstTabVisible = this.tabGroupEl.scrollLeft === 0;\n this.lastTabVisible =\n this.tabGroupEl.offsetWidth + this.tabGroupEl.scrollLeft >=\n this.tabGroupEl.scrollWidth;\n }\n this.buttonStateSet = false;\n };\n\n componentDidLoad(): void {\n this.tabs = Array.from(this.host.querySelectorAll(\"ic-tab\"));\n let runningTotal = 0;\n this.tabOffsets = this.tabs.map((tab) => {\n runningTotal += tab.offsetWidth;\n return runningTotal;\n });\n checkResizeObserver(this.runResizeObserver);\n\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Tab List\"\n );\n }\n\n disconnectedCallback(): void {\n this.resizeObserver.disconnect();\n }\n\n render() {\n const {\n inline,\n appearance,\n label,\n firstTabVisible,\n lastTabVisible,\n tabOverflow,\n } = this;\n\n return (\n <Host\n role=\"tablist\"\n aria-label={label}\n class={{\n [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n [\"ic-tab-group-not-inline\"]: !inline,\n }}\n >\n <div class=\"ic-tab-group-container\">\n {this.tabOverflow && (\n <div\n aria-hidden=\"true\"\n id=\"scroll-container-left\"\n class={{\n [\"scroll-container\"]: true,\n [\"hidden\"]: !tabOverflow,\n [\"disabled\"]: firstTabVisible,\n }}\n >\n <ic-tooltip\n placement=\"bottom-start\"\n label=\"Scroll left\"\n target=\"left-arrow\"\n >\n <span\n id=\"left-arrow\"\n class=\"scroll-arrow\"\n innerHTML={LeftArrow}\n onClick={this.scrollLeft}\n onMouseDown={this.leftArrowMouseDownHandler}\n onMouseUp={this.arrowMouseUpHandler}\n ></span>\n </ic-tooltip>\n <span class=\"scroll-splitter-left\"></span>\n </div>\n )}\n <div\n class=\"tabs-container\"\n ref={(el) => (this.tabGroupEl = el)}\n onScroll={this.scrollHandler}\n >\n <slot></slot>\n </div>\n {this.tabOverflow && (\n <div\n aria-hidden=\"true\"\n id=\"scroll-container-right\"\n class={{\n [\"scroll-container\"]: true,\n [\"hidden\"]: !tabOverflow,\n [\"disabled\"]: lastTabVisible,\n }}\n >\n <span class=\"scroll-splitter-right\"></span>\n <ic-tooltip\n placement=\"bottom-start\"\n label=\"Scroll right\"\n target=\"right-arrow\"\n >\n <span\n id=\"right-arrow\"\n class=\"scroll-arrow\"\n innerHTML={RightArrow}\n onClick={this.scrollRight}\n onMouseDown={this.rightArrowMouseDownHandler}\n onMouseUp={this.arrowMouseUpHandler}\n ></span>\n </ic-tooltip>\n </div>\n )}\n </div>\n\n <div\n aria-hidden=\"true\"\n class={{\n [\"ic-tab-splitter\"]: true,\n [\"hidden\"]: inline,\n }}\n ref={(el) => (this.splitterEl = el)}\n ></div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-tab-group.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,0WAA0W;;MCenX,QAAQ;;;;;qBAM2B,SAAS;kBAKX,KAAK;;sBAUC,MAAM;;EAExD,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,WAAW,CACZ,CAAC;GACH;EAED,MAAM;IACJ,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEnC,QACE,EAAC,IAAI,IACH,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,KAAK,EAAE;QACL,CAAC,OAAO,GAAG,UAAU,KAAK,qBAAqB,CAAC,KAAK;OACtD,IAED,4BACE,UAAU,EACR,UAAU,KAAK,qBAAqB,CAAC,IAAI;UACrC,qBAAqB,CAAC,OAAO;UAC7B,UAAU,IAGhB,WAAK,KAAK,EAAC,gBAAgB,IACzB,eAAa,CACT,CACe,CAClB,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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: 1px solid var(--border-bottom-color);\n}\n\n:host([inline]) {\n margin-bottom: 0;\n border-bottom: none;\n}\n\n.light {\n --border-bottom-color: 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, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport { onComponentRequiredPropUndefined } from \"../../utils/helpers\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n@Component({\n tag: \"ic-tab-group\",\n styleUrl: \"ic-tab-group.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class TabGroup {\n @Element() host: HTMLIcTabGroupElement;\n\n /*\n The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /\n If `true`, the tabs and tab panels will be positioned separately.\n /\n @Prop({ reflect: true }) inline?: boolean = false;\n\n /\n The label to describe the purpose of the set of tabs to screen reader users.\n /\n @Prop() label!: string;\n\n /\n @internal The appearance of the tab group, e.g dark, or light.\n */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Tab Group\"\n );\n }\n\n render() {\n const { appearance, label } = this;\n\n return (\n <Host\n role=\"tablist\"\n aria-label={label}\n class={{\n [\"light\"]: appearance === IcThemeForegroundEnum.Light,\n }}\n >\n <ic-horizontal-scroll\n appearance={\n appearance === IcThemeForegroundEnum.Dark\n ? IcThemeForegroundEnum.Default\n : appearance\n }\n >\n <div class=\"tabs-container\">\n <slot></slot>\n </div>\n </ic-horizontal-scroll>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-tab-panel.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { I as IcThemeForegroundEnum } from './types.js';
-const icTabPanelCss = ":host{display:block}:host(.ic-tab-panel-light){color:white}";
+const icTabPanelCss = ":host{display:block}:host(.ic-tab-panel-light){color:white}:host([hidden]){display:none}";
 const TabPanel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

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

	@@ -1 +1 @@
1	- {"file":"ic-tab-panel.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,~~6DAA6D~~;;~~MCWtE~~,QAAQ;;;;;qBAM2B,SAAS;;;;sBAYL,MAAM;;EAExD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAClD,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,oBAAoB,GAAG,UAAU,KAAK,qBAAqB,CAAC,KAAK;OACnE,EACD,IAAI,EAAC,UAAU,EACf,MAAM,EACJ,OAAO,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS;UAC9C,EAAE,OAAO,KAAK,WAAW,CAAC;UAC1B,IAAI,IAGV,eACE,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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":[":host {\n display: block;\n}\n\n:host(.ic-tab-panel-light) {\n color: white;\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport {\n IcThemeForegroundEnum,\n IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n tag: \"ic-tab-panel\",\n styleUrl: \"ic-tab-panel.css\",\n shadow: true,\n})\nexport class TabPanel {\n @Element() host: HTMLIcTabPanelElement;\n\n /*\n ~~Provide~~ a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /* @internal The position of the tab panel inside the tabs array in context. /\n @Prop({ reflect: true }) tabPosition?: number;\n\n /* @internal The shared ID that links the panel and tab. /\n @Prop({ reflect: true }) panelId?: string;\n\n /* @internal The shared ID of the currently selected tab. /\n @Prop() selectedTab?: string;\n\n /* @internal ~~Determines~~ ~~whether~~ ~~the light or dark variant~~ of the tabs ~~should~~ be ~~displayed~~. */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n render() {\n const { panelId, selectedTab, appearance } = this;\n return (\n <Host\n class={{\n [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\n }}\n role=\"tabpanel\"\n hidden={\n panelId !== undefined && selectedTab !== undefined\n ? !(panelId === selectedTab)\n : true\n }\n >\n <div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-tab-panel.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,0FAA0F;;MCWnG,QAAQ;;;;;qBAM2B,SAAS;;;;sBAYL,MAAM;;EAExD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAClD,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,oBAAoB,GAAG,UAAU,KAAK,qBAAqB,CAAC,KAAK;OACnE,EACD,IAAI,EAAC,UAAU,EACf,MAAM,EACJ,OAAO,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS;UAC9C,EAAE,OAAO,KAAK,WAAW,CAAC;UAC1B,IAAI,IAGV,eACE,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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":[":host {\n display: block;\n}\n\n:host(.ic-tab-panel-light) {\n color: white;\n}\n\n:host([hidden]) {\n display: none;\n}\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport {\n IcThemeForegroundEnum,\n IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n tag: \"ic-tab-panel\",\n styleUrl: \"ic-tab-panel.css\",\n shadow: true,\n})\nexport class TabPanel {\n @Element() host: HTMLIcTabPanelElement;\n\n /*\n The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.\n /\n @Prop({ reflect: true }) contextId?: string = \"default\";\n\n /* @internal The position of the tab panel inside the tabs array in context. /\n @Prop({ reflect: true }) tabPosition?: number;\n\n /* @internal The shared ID that links the panel and tab. /\n @Prop({ reflect: true }) panelId?: string;\n\n /* @internal The shared ID of the currently selected tab. /\n @Prop() selectedTab?: string;\n\n /* @internal The appearance of the tabs, e.g dark, or light. */\n @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n render() {\n const { panelId, selectedTab, appearance } = this;\n return (\n <Host\n class={{\n [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\n }}\n role=\"tabpanel\"\n hidden={\n panelId !== undefined && selectedTab !== undefined\n ? !(panelId === selectedTab)\n : true\n }\n >\n <div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-tab.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { I as IcThemeForegroundEnum } from './types.js';
 import { d as defineCustomElement$2 } from './ic-typography2.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:40px;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([selected]){border-bottom:var(--ic-space-xxs) solid var(--indicator-color)}:host([disabled]){pointer-events:none;color:var(--ic-architectural-300)}:host([selected].with-transition){transition:all var(--ic-easing-transition-slow),\n    border-color var(--ic-transition-duration-slow)}.ic-tab-label{pointer-events:none}::slotted(svg){fill:currentcolor}@media (forced-colors: active){:host{border-bottom:var(--ic-space-xxs) solid canvas}:host([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%);--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([selected]){border-bottom:var(--ic-space-xxs) solid var(--indicator-color)}:host([disabled]){pointer-events:none;color:var(--ic-architectural-300)}:host([selected].with-transition){transition:all var(--ic-easing-transition-slow),\n    border-color var(--ic-transition-duration-slow)}.ic-tab-label{pointer-events:none}::slotted(svg){fill:currentcolor}@media (forced-colors: active){:host{border-bottom:var(--ic-space-xxs) solid canvas}:host([disabled]){color:GrayText}}";
 const Tab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -50,6 +50,14 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.tabPosition = undefined;
     this.appearance = "dark";
   }
+  /**
+   * Sets focus on the tab.
+   */
+  async setFocus() {
+    if (this.host) {
+      this.host.focus();
+    }
+  }
   componentDidUpdate() {
     this.isInitialRender = false;
   }
@@ -68,7 +76,8 @@ const Tab = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "selected": [516],
     "tabId": [513, "tab-id"],
     "tabPosition": [2, "tab-position"],
-    "appearance": [1]
+    "appearance": [1],
+    "setFocus": [64]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/ic-tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-tab.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,~~i9HAAi9H~~;;~~MCwBr9H~~,GAAG;;;;;;;IAiCN,oBAAe,GAAY,IAAI,CAAC;IAChC,mBAAc,GAAY,KAAK,CAAC;IAEhC,gBAAW,GAAG;MACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;OAC3B,CAAC,CAAC;MACH,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;OAC7B;KACF,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;OACJ;KACF,CAAC;IAEM,oBAAe,GAAG;;;;MAIxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B,CAAC;qBA/D4C,SAAS;oBAK1B,KAAK;oBAGY,KAAK;;;sBASD,MAAM~~;;EAgDxD~~,kBAAkB;IAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;GAC9B;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAChD,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,eAAe;QAC1C,CAAC,cAAc,GAAG,UAAU,KAAK,qBAAqB,CAAC,KAAK;OAC7D,EACD,IAAI,EAAC,KAAK,mBACK,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,eAAe,mBAClB,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,IAE/B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,EACtE,qBAAe,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,OAAO,IACjD,gBACE,eAAa,CACR,CACO,CACX,EACP;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/ic-tab/ic-tab.css?tag=ic-tab&encapsulation=shadow","./src/components/ic-tab/ic-tab.tsx"],"sourcesContent":["@import \"../../global/~~normalise~~.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: ~~40px~~;\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([selected]) {\n border-bottom: var(--ic-space-xxs) solid var(--indicator-color);\n}\n\n:host([disabled]) {\n pointer-events: none;\n color: var(--ic-architectural-300);\n}\n\n:host([selected].with-transition) {\n transition: all var(--ic-easing-transition-slow),\n border-color var(--ic-transition-duration-slow);\n}\n\n.ic-tab-label {\n pointer-events: none;\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([disabled]) {\n color: GrayText;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/*\n @slot icon - Content will be rendered next to the tab label.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n @Element() host: HTMLIcTabElement;\n\n /* @internal ~~Provide~~ a unique context 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 ~~Disables~~ the ~~tab~~.\n /\n @Prop() disabled?: boolean = false;\n\n /* @internal ~~Will~~ display a selected indicator and set ~~tabIndex~~. /\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() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n /\n ~~Called~~ when a tab is selected.\n /\n @Event() tabClick: EventEmitter<IcTabClickEventDetail>;\n\n /\n @internal ~~Called~~ when a tab is focussed.\n */\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n private isInitialRender: boolean = true;\n private focusFromClick: boolean = false;\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.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 seperate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\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 }}\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.host.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 </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-tab.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,m9HAAm9H;;MCyBv9H,GAAG;;;;;;;IAiCN,oBAAe,GAAY,IAAI,CAAC;IAChC,mBAAc,GAAY,KAAK,CAAC;IAEhC,gBAAW,GAAG;MACpB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,SAAS,EAAE,IAAI,CAAC,SAAS;QACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;OAC3B,CAAC,CAAC;MACH,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;QACH,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;OAC7B;KACF,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;UACjB,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,SAAS,EAAE,IAAI,CAAC,SAAS;UACzB,QAAQ,EAAE,IAAI,CAAC,WAAW;SAC3B,CAAC,CAAC;OACJ;KACF,CAAC;IAEM,oBAAe,GAAG;;;;MAIxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B,CAAC;qBA/D4C,SAAS;oBAK1B,KAAK;oBAGY,KAAK;;;sBASD,MAAM;;;;;EAoDxD,MAAM,QAAQ;IACZ,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;KACnB;GACF;EAED,kBAAkB;IAChB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;GAC9B;EAED,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAChD,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,eAAe;QAC1C,CAAC,cAAc,GAAG,UAAU,KAAK,qBAAqB,CAAC,KAAK;OAC7D,EACD,IAAI,EAAC,KAAK,mBACK,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC1C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,eAAe,mBAClB,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC1C,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC,IAE/B,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,EACtE,qBAAe,KAAK,EAAC,cAAc,EAAC,OAAO,EAAC,OAAO,IACjD,gBACE,eAAa,CACR,CACO,CACX,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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([selected]) {\n border-bottom: var(--ic-space-xxs) solid var(--indicator-color);\n}\n\n:host([disabled]) {\n pointer-events: none;\n color: var(--ic-architectural-300);\n}\n\n:host([selected].with-transition) {\n transition: all var(--ic-easing-transition-slow),\n border-color var(--ic-transition-duration-slow);\n}\n\n.ic-tab-label {\n pointer-events: none;\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([disabled]) {\n color: GrayText;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n h,\n Method,\n} from \"@stencil/core\";\n\nimport { IcTabClickEventDetail } from \"./ic-tab.types\";\nimport {\n IcThemeForegroundNoDefault,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/*\n @slot icon - Content will be rendered next to the tab label.\n /\n@Component({\n tag: \"ic-tab\",\n styleUrl: \"ic-tab.css\",\n shadow: true,\n})\nexport class Tab {\n @Element() host: 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\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() appearance?: IcThemeForegroundNoDefault = \"dark\";\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 focussed.\n /\n @Event() tabFocus: EventEmitter<IcTabClickEventDetail>;\n\n private isInitialRender: boolean = true;\n private focusFromClick: boolean = false;\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.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 seperate event though to handle focus from keyboard\n this.focusFromClick = true;\n };\n\n /\n Sets focus on the tab.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.host) {\n this.host.focus();\n }\n }\n\n componentDidUpdate(): void {\n this.isInitialRender = false;\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 }}\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.host.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 </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-text-field2.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as IcInformationStatus } from './types.js';
-import { w as debounceEvent, m as inheritAttributes, d as addFormResetListener, a as onComponentRequiredPropUndefined, r as removeFormResetListener, h as getInputDescribedByText, e as renderHiddenInput, K as isEmptyString, n as IC_INHERITED_ARIA } from './helpers.js';
+import { O as debounceEvent, m as inheritAttributes, d as addFormResetListener, a as onComponentRequiredPropUndefined, r as removeFormResetListener, h as getInputDescribedByText, e as renderHiddenInput, i as isSlotUsed, P as isEmptyString, n as IC_INHERITED_ARIA } from './helpers.js';
 import { d as defineCustomElement$5 } from './ic-input-component-container2.js';
 import { d as defineCustomElement$4 } from './ic-input-container2.js';
 import { d as defineCustomElement$3 } from './ic-input-label2.js';
 import { d as defineCustomElement$2 } from './ic-input-validation2.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
-const icTextFieldCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}::-moz-placeholder{color:var(--ic-color-tertiary-text);opacity:1}::placeholder{color:var(--ic-color-tertiary-text);opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs)}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:6px}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(--ic-architectural-200)}input.readonly,textarea.readonly{color:var(--ic-color-primary-text)}.fullwidth{position:relative;width:100%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=\"number\"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.maxlengthtext{color:var(--ic-color-secondary-text)}.exceeded{color:var(--ic-status-error)}.disabled{color:var(--ic-architectural-200)}.no-left-pad{padding-left:0}::slotted([slot=\"icon\"]){fill:var(--ic-color-tertiary-text)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-color-primary-text)}.charcount{margin-right:calc(-1 * var(--ic-space-xxxs))}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration,input[type=\"search\"]::-webkit-search-results-button,input[type=\"search\"]::-webkit-search-results-decoration{display:none}input[type=\"search\"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
+const icTextFieldCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}:host([full-width]),.fullwidth{width:100%}::-moz-placeholder{color:var(--ic-color-tertiary-text);opacity:1}::placeholder{color:var(--ic-color-tertiary-text);opacity:1}input,textarea{border:0;border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs)}textarea{min-height:var(--ic-space-lg);resize:vertical;padding-top:0.375rem}input:focus,textarea:focus{border:0;outline:0}input:disabled,textarea:disabled{color:var(--ic-architectural-200)}input.readonly,textarea.readonly{color:var(--ic-color-primary-text)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=\"number\"]{-moz-appearance:textfield}textarea.no-resize{resize:none}.maxlengthtext{color:var(--ic-color-secondary-text)}.exceeded{color:var(--ic-status-error)}.disabled{color:var(--ic-architectural-200)}.no-left-pad{padding-left:0}::slotted([slot=\"icon\"]){fill:var(--ic-color-tertiary-text)}.has-value ::slotted([slot=\"icon\"]){fill:var(--ic-color-primary-text)}.charcount{margin-right:calc(-1 * var(--ic-space-xxxs))}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration,input[type=\"search\"]::-webkit-search-results-button,input[type=\"search\"]::-webkit-search-results-decoration{display:none}input[type=\"search\"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}@media (forced-colors: active){input.readonly,textarea.readonly{color:canvastext}.has-value ::slotted([slot=\"icon\"]){fill:currentcolor}}";
 let inputIds = 0;
 const TextField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -106,7 +106,7 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.icChange.emit({ value: newValue });
   }
   /**
-   * Sets focus on the native `input`
+   * Sets focus on the native `input`.
    */
   async setFocus() {
     if (this.inputEl) {
@@ -189,7 +189,7 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         ["no-resize"]: resize === false || readonly,
         ["no-left-pad"]: !this.showLeftIcon && readonly,
         ["readonly"]: readonly,
-      }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholderText, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode }, this.inheritedAttributes))), h("slot", { name: "clear-button" }), h("slot", { name: "search-submit-button" })), h("slot", { name: "menu" }), (!isEmptyString(validationStatus) ||
+      }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholderText, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocapitalize: this.autocapitalize, autoFocus: this.autoFocus, spellcheck: spellcheck, inputmode: inputmode }, this.inheritedAttributes))), isSlotUsed(this.el, "clear-button") && (h("slot", { name: "clear-button" })), isSlotUsed(this.el, "search-submit-button") && (h("slot", { name: "search-submit-button" }))), isSlotUsed(this.el, "menu") && h("slot", { name: "menu" }), (!isEmptyString(validationStatus) ||
       !isEmptyString(validationText) ||
       maxNumChars > 0) && (h("ic-input-validation", { status: this.hasStatus(currentStatus) === false ||
         (currentStatus === IcInformationStatus.Success &&
@@ -212,14 +212,14 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "label": [1],
     "required": [4],
     "disabled": [4],
-    "readonly": [4],
+    "readonly": [516],
     "placeholder": [1],
     "fullWidth": [4, "full-width"],
     "hideLabel": [4, "hide-label"],
     "helperText": [1, "helper-text"],
     "rows": [2],
     "resize": [4],
-    "small": [4],
+    "small": [516],
     "value": [1537],
     "maxLength": [2, "max-length"],
     "validationStatus": [1, "validation-status"],