@kyndryl-design-system/shidoka-applications 2.62.1 → 2.62.2
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabsScss from './tabs.scss?inline';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for kyn-tab-panel components.\n * @slot tabs - Slot for kyn-tab components.\n * @fires on-change - Emits the new selected Tab ID when switching tabs. `detail:{ origEvent: PointerEvent,selectedTabId: string }`\n */\n@customElement('kyn-tabs')\nexport class Tabs extends LitElement {\n static override styles = unsafeCSS(TabsScss);\n\n /** Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px. */\n @property({ type: String })\n accessor tabSize = 'md';\n\n /** Vertical orientation. */\n @property({ type: Boolean })\n accessor vertical = false;\n\n /** AI specifier. */\n @property({ type: Boolean })\n accessor aiConnected = false;\n\n /** Enables tab content change on focus with keyboard navigation/assistive technologies. */\n @property({ type: Boolean })\n accessor disableAutoFocusUpdate = false;\n\n /** Adds scrollable overflow to the tab panels. */\n @property({ type: Boolean })\n accessor scrollablePanels = false;\n\n /** Queries for slotted tabs.\n * @internal\n */\n @queryAssignedElements({ slot: 'tabs', selector: 'kyn-tab' })\n accessor _tabs!: any;\n\n /** Queries for slotted tab panels.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-tab-panel' })\n accessor _tabPanels!: any;\n\n override render() {\n const wrapperClasses = {\n wrapper: true,\n vertical: this.vertical,\n scrollable: this.scrollablePanels,\n 'ai-connected': this.aiConnected,\n };\n\n const tabsClasses = {\n tabs: true,\n 'ai-connected': this.aiConnected,\n };\n\n return html`\n <div class=${classMap(wrapperClasses)}>\n <div\n class=${classMap(tabsClasses)}\n role=\"tablist\"\n @keydown=${(e: any) => this._handleKeyboard(e)}\n >\n <slot name=\"tabs\" @slotchange=${this._handleSlotChangeTabs}></slot>\n </div>\n\n <div class=\"panels\" tabindex=${this.scrollablePanels ? '0' : '-1'}>\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('tab-activated', (e) => this._handleChange(e));\n }\n\n override disconnectedCallback() {\n this.removeEventListener('tab-activated', (e) => this._handleChange(e));\n super.disconnectedCallback();\n }\n\n override willUpdate(changedProps: any) {\n if (\n changedProps.has('tabSize') ||\n changedProps.has('vertical') ||\n changedProps.has('aiConnected')\n ) {\n this._updateChildren();\n }\n }\n\n private _handleSlotChangeTabs() {\n this._updateChildren();\n }\n\n private _updateChildren() {\n this._tabs.forEach((tab: any) => {\n tab._size = this.tabSize;\n tab.vertical = this.vertical;\n tab.aiConnected = this.aiConnected;\n });\n\n this._tabPanels.forEach((tabPanel: any) => {\n tabPanel.vertical = this.vertical;\n });\n }\n\n /**\n * Updates children and emits a change event based on the provided\n * event details when a child kyn-tab is clicked.\n * @param {any} e - The parameter \"e\" is an event object that contains information about the event\n * that triggered the handleChange function.\n */\n private _handleChange(e: any) {\n e.stopPropagation();\n this._updateChildrenSelection(e.detail.tabId);\n this._emitChangeEvent(e.detail.origEvent, e.detail.tabId);\n }\n\n /**\n * Updates the selected property of tabs and the visible property of tab panels based on\n * the selected tab ID.\n * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n * the tab that is currently selected.\n */\n private _updateChildrenSelection(selectedTabId: string, updatePanel = true) {\n // update tabs selected prop\n this._tabs.forEach((tab: any) => {\n tab.selected = tab.id === selectedTabId;\n });\n\n // update tab-panels visible prop\n if (!updatePanel) return;\n this._tabPanels.forEach((tabPanel: any) => {\n tabPanel.visible = tabPanel.tabId === selectedTabId;\n });\n }\n\n /**\n * Creates and dispatches a custom event called 'on-change' with the provided original event and\n * selected tab ID as details.\n * @param {any} origEvent - The origEvent parameter is the original event object that triggered the\n * change event. It could be any type of event object, such as a click event or a keydown event.\n * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n * the selected tab.\n */\n private _emitChangeEvent(origEvent: any, selectedTabId: string) {\n const event = new CustomEvent('on-change', {\n detail: { origEvent: origEvent, selectedTabId: selectedTabId },\n });\n this.dispatchEvent(event);\n }\n\n /**\n * Handles keyboard events for navigating between tabs.\n * @param {any} e - The parameter `e` is an event object that represents the keyboard event. It\n * contains information about the keyboard event, such as the key code of the pressed key.\n * @returns In this code, the function `_handleKeyboard` returns nothing in all cases\n * except when the `keyCode` matches the left or right arrow key codes.\n */\n private _handleKeyboard(e: any) {\n const LEFT_ARROW_KEY_CODE = 37;\n const UP_ARROW_KEY_CODE = 38;\n const RIGHT_ARROW_KEY_CODE = 39;\n const DOWN_ARROW_KEY_CODE = 40;\n const ENTER_KEY_CODE = 13;\n const SPACE_KEY_CODE = 32;\n const TabCount = this._tabs.length;\n const SelectedTabIndex = this._tabs.findIndex((tab: any) => tab.selected);\n\n switch (e.keyCode) {\n case ENTER_KEY_CODE:\n case SPACE_KEY_CODE: {\n this._updateChildrenSelection(\n this._tabs[SelectedTabIndex].id,\n this.disableAutoFocusUpdate\n );\n return;\n }\n case LEFT_ARROW_KEY_CODE:\n case UP_ARROW_KEY_CODE: {\n // activate previous tab\n let prevIndex =\n SelectedTabIndex === 0 ? TabCount - 1 : SelectedTabIndex - 1;\n let prevTab = this._tabs[prevIndex];\n\n if (prevTab.disabled) {\n prevIndex = prevIndex === 0 ? TabCount - 1 : prevIndex - 1;\n prevTab = this._tabs[prevIndex];\n }\n\n prevTab.focus();\n\n this._updateChildrenSelection(prevTab.id, !this.disableAutoFocusUpdate);\n this._emitChangeEvent(e, prevTab.id);\n return;\n }\n case RIGHT_ARROW_KEY_CODE:\n case DOWN_ARROW_KEY_CODE: {\n // activate next tab\n let nextIndex =\n SelectedTabIndex === TabCount - 1 ? 0 : SelectedTabIndex + 1;\n let nextTab = this._tabs[nextIndex];\n\n if (nextTab.disabled) {\n nextIndex = nextIndex === TabCount - 1 ? 0 : nextIndex + 1;\n nextTab = this._tabs[nextIndex];\n }\n\n nextTab.focus();\n\n this._updateChildrenSelection(nextTab.id, !this.disableAutoFocusUpdate);\n this._emitChangeEvent(e, nextTab.id);\n return;\n }\n default: {\n return;\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tabs': Tabs;\n }\n}\n"],"names":["Tabs","customElement","LitElement","_classThis","_classSuper","tabSize","__classPrivateFieldGet","this","_Tabs_tabSize_accessor_storage","value","__classPrivateFieldSet","vertical","_Tabs_vertical_accessor_storage","aiConnected","_Tabs_aiConnected_accessor_storage","disableAutoFocusUpdate","_Tabs_disableAutoFocusUpdate_accessor_storage","scrollablePanels","_Tabs_scrollablePanels_accessor_storage","_tabs","_Tabs__tabs_accessor_storage","_tabPanels","_Tabs__tabPanels_accessor_storage","render","wrapperClasses","wrapper","scrollable","tabsClasses","tabs","html","classMap","e","_handleKeyboard","_handleSlotChangeTabs","connectedCallback","super","addEventListener","_handleChange","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","_updateChildren","forEach","tab","_size","tabPanel","stopPropagation","_updateChildrenSelection","detail","tabId","_emitChangeEvent","origEvent","selectedTabId","updatePanel","selected","id","visible","event","CustomEvent","dispatchEvent","TabCount","length","SelectedTabIndex","findIndex","keyCode","prevIndex","prevTab","disabled","focus","nextIndex","nextTab","set","__runInitializers","_tabSize_initializers","_tabSize_extraInitializers","_vertical_initializers","_vertical_extraInitializers","_aiConnected_initializers","_aiConnected_extraInitializers","_disableAutoFocusUpdate_initializers","_disableAutoFocusUpdate_extraInitializers","_scrollablePanels_initializers","_scrollablePanels_extraInitializers","__tabs_initializers","__tabs_extraInitializers","__tabPanels_initializers","_tabSize_decorators","property","type","String","_vertical_decorators","Boolean","_aiConnected_decorators","_disableAutoFocusUpdate_decorators","_scrollablePanels_decorators","queryAssignedElements","slot","selector","__tabPanels_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","__tabs_decorators","__tabPanels_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","TabsScss"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs.js","sources":["../../../../src/components/reusable/tabs/tabs.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport TabsScss from './tabs.scss?inline';\n\n/**\n * Tabs.\n * @slot unnamed - Slot for kyn-tab-panel components.\n * @slot tabs - Slot for kyn-tab components.\n * @fires on-change - Emits the new selected Tab ID when switching tabs. `detail:{ origEvent: PointerEvent,selectedTabId: string }`\n */\n@customElement('kyn-tabs')\nexport class Tabs extends LitElement {\n static override styles = unsafeCSS(TabsScss);\n\n /** Size of the tab buttons, `'sm'` or `'md'`. Icon size: 16px. */\n @property({ type: String })\n accessor tabSize = 'md';\n\n /** Vertical orientation. */\n @property({ type: Boolean })\n accessor vertical = false;\n\n /** AI specifier. */\n @property({ type: Boolean })\n accessor aiConnected = false;\n\n /** Enables tab content change on focus with keyboard navigation/assistive technologies. */\n @property({ type: Boolean })\n accessor disableAutoFocusUpdate = false;\n\n /** Adds scrollable overflow to the tab panels. */\n @property({ type: Boolean })\n accessor scrollablePanels = false;\n\n /** Queries for slotted tabs.\n * @internal\n */\n @queryAssignedElements({ slot: 'tabs', selector: 'kyn-tab' })\n accessor _tabs!: any;\n\n /** Queries for slotted tab panels.\n * @internal\n */\n @queryAssignedElements({ selector: 'kyn-tab-panel' })\n accessor _tabPanels!: any;\n\n override render() {\n const wrapperClasses = {\n wrapper: true,\n vertical: this.vertical,\n scrollable: this.scrollablePanels,\n 'ai-connected': this.aiConnected,\n };\n\n const tabsClasses = {\n tabs: true,\n 'ai-connected': this.aiConnected,\n };\n\n return html`\n <div class=${classMap(wrapperClasses)}>\n <div\n class=${classMap(tabsClasses)}\n role=\"tablist\"\n @keydown=${(e: any) => this._handleKeyboard(e)}\n >\n <slot name=\"tabs\" @slotchange=${this._handleSlotChangeTabs}></slot>\n </div>\n\n <div class=\"panels\" tabindex=${this.scrollablePanels ? '0' : '-1'}>\n <slot></slot>\n </div>\n </div>\n `;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.addEventListener('tab-activated', (e) => this._handleChange(e));\n }\n\n override disconnectedCallback() {\n this.removeEventListener('tab-activated', (e) => this._handleChange(e));\n super.disconnectedCallback();\n }\n\n override willUpdate(changedProps: any) {\n if (\n changedProps.has('tabSize') ||\n changedProps.has('vertical') ||\n changedProps.has('aiConnected')\n ) {\n this._updateChildren();\n }\n }\n\n private _handleSlotChangeTabs() {\n this._updateChildren();\n }\n\n private _updateChildren() {\n this._tabs.forEach((tab: any) => {\n tab._size = this.tabSize;\n tab.vertical = this.vertical;\n tab.aiConnected = this.aiConnected;\n });\n\n this._tabPanels.forEach((tabPanel: any) => {\n tabPanel.vertical = this.vertical;\n });\n }\n\n /**\n * Updates children and emits a change event based on the provided\n * event details when a child kyn-tab is clicked.\n * @param {any} e - The parameter \"e\" is an event object that contains information about the event\n * that triggered the handleChange function.\n */\n private _handleChange(e: any) {\n e.stopPropagation();\n this._updateChildrenSelection(e.detail.tabId);\n this._emitChangeEvent(e.detail.origEvent, e.detail.tabId);\n }\n\n /**\n * Updates the selected property of tabs and the visible property of tab panels based on\n * the selected tab ID.\n * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n * the tab that is currently selected.\n */\n private _updateChildrenSelection(selectedTabId: string, updatePanel = true) {\n // update tabs selected prop\n this._tabs.forEach((tab: any) => {\n tab.selected = tab.id === selectedTabId;\n });\n\n // update tab-panels visible prop\n if (!updatePanel) return;\n this._tabPanels.forEach((tabPanel: any) => {\n tabPanel.visible = tabPanel.tabId === selectedTabId;\n });\n }\n\n /**\n * Creates and dispatches a custom event called 'on-change' with the provided original event and\n * selected tab ID as details.\n * @param {any} origEvent - The origEvent parameter is the original event object that triggered the\n * change event. It could be any type of event object, such as a click event or a keydown event.\n * @param {string} selectedTabId - The selectedTabId parameter is a string that represents the ID of\n * the selected tab.\n */\n private _emitChangeEvent(origEvent: any, selectedTabId: string) {\n const event = new CustomEvent('on-change', {\n detail: { origEvent: origEvent, selectedTabId: selectedTabId },\n });\n this.dispatchEvent(event);\n }\n\n /**\n * Handles keyboard events for navigating between tabs.\n * @param {any} e - The parameter `e` is an event object that represents the keyboard event. It\n * contains information about the keyboard event, such as the key code of the pressed key.\n * @returns In this code, the function `_handleKeyboard` returns nothing in all cases\n * except when the `keyCode` matches the left or right arrow key codes.\n */\n private _handleKeyboard(e: any) {\n const LEFT_ARROW_KEY_CODE = 37;\n const UP_ARROW_KEY_CODE = 38;\n const RIGHT_ARROW_KEY_CODE = 39;\n const DOWN_ARROW_KEY_CODE = 40;\n const ENTER_KEY_CODE = 13;\n const SPACE_KEY_CODE = 32;\n const TabCount = this._tabs.length;\n const SelectedTabIndex = this._tabs.findIndex((tab: any) => tab.selected);\n\n switch (e.keyCode) {\n case ENTER_KEY_CODE:\n case SPACE_KEY_CODE: {\n this._updateChildrenSelection(\n this._tabs[SelectedTabIndex].id,\n this.disableAutoFocusUpdate\n );\n return;\n }\n case LEFT_ARROW_KEY_CODE:\n case UP_ARROW_KEY_CODE: {\n // activate previous tab\n let prevIndex =\n SelectedTabIndex === 0 ? TabCount - 1 : SelectedTabIndex - 1;\n let prevTab = this._tabs[prevIndex];\n\n if (prevTab.disabled) {\n prevIndex = prevIndex === 0 ? TabCount - 1 : prevIndex - 1;\n prevTab = this._tabs[prevIndex];\n }\n\n prevTab.focus();\n\n this._updateChildrenSelection(prevTab.id, !this.disableAutoFocusUpdate);\n this._emitChangeEvent(e, prevTab.id);\n return;\n }\n case RIGHT_ARROW_KEY_CODE:\n case DOWN_ARROW_KEY_CODE: {\n // activate next tab\n let nextIndex =\n SelectedTabIndex === TabCount - 1 ? 0 : SelectedTabIndex + 1;\n let nextTab = this._tabs[nextIndex];\n\n if (nextTab.disabled) {\n nextIndex = nextIndex === TabCount - 1 ? 0 : nextIndex + 1;\n nextTab = this._tabs[nextIndex];\n }\n\n nextTab.focus();\n\n this._updateChildrenSelection(nextTab.id, !this.disableAutoFocusUpdate);\n this._emitChangeEvent(e, nextTab.id);\n return;\n }\n default: {\n return;\n }\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-tabs': Tabs;\n }\n}\n"],"names":["Tabs","customElement","LitElement","_classThis","_classSuper","tabSize","__classPrivateFieldGet","this","_Tabs_tabSize_accessor_storage","value","__classPrivateFieldSet","vertical","_Tabs_vertical_accessor_storage","aiConnected","_Tabs_aiConnected_accessor_storage","disableAutoFocusUpdate","_Tabs_disableAutoFocusUpdate_accessor_storage","scrollablePanels","_Tabs_scrollablePanels_accessor_storage","_tabs","_Tabs__tabs_accessor_storage","_tabPanels","_Tabs__tabPanels_accessor_storage","render","wrapperClasses","wrapper","scrollable","tabsClasses","tabs","html","classMap","e","_handleKeyboard","_handleSlotChangeTabs","connectedCallback","super","addEventListener","_handleChange","disconnectedCallback","removeEventListener","willUpdate","changedProps","has","_updateChildren","forEach","tab","_size","tabPanel","stopPropagation","_updateChildrenSelection","detail","tabId","_emitChangeEvent","origEvent","selectedTabId","updatePanel","selected","id","visible","event","CustomEvent","dispatchEvent","TabCount","length","SelectedTabIndex","findIndex","keyCode","prevIndex","prevTab","disabled","focus","nextIndex","nextTab","set","__runInitializers","_tabSize_initializers","_tabSize_extraInitializers","_vertical_initializers","_vertical_extraInitializers","_aiConnected_initializers","_aiConnected_extraInitializers","_disableAutoFocusUpdate_initializers","_disableAutoFocusUpdate_extraInitializers","_scrollablePanels_initializers","_scrollablePanels_extraInitializers","__tabs_initializers","__tabs_extraInitializers","__tabPanels_initializers","_tabSize_decorators","property","type","String","_vertical_decorators","Boolean","_aiConnected_decorators","_disableAutoFocusUpdate_decorators","_scrollablePanels_decorators","queryAssignedElements","slot","selector","__tabPanels_decorators","__esDecorate","kind","name","static","private","access","obj","get","metadata","_metadata","__tabs_decorators","__tabPanels_extraInitializers","_classDescriptor","_classDecorators","_classExtraInitializers","styles","unsafeCSS","TabsScss"],"mappings":"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"}
|