npm - @infineon/infineon-design-system-stencil - Versions diffs - 39.4.4--canary.1723.b577eb08ea34aa81e7d1054220d0f31ca92579a9.0 → 39.4.4-canary.0 - Mend

@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b577eb08ea34aa81e7d1054220d0f31ca92579a9.0 → 39.4.4-canary.0

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

Files changed (1205) hide show

package/dist/collection/components/tabs/tabs.js CHANGED Viewed

@@ -285,11 +285,11 @@ export class IfxTabs {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '17f31c13b84743786e5c6aa2f5c9c24f58b82ed2', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation} ${this.fullWidth ? 'full-width-enabled' : ''}` }, this.internalOrientation === 'horizontal' ? (h("div", { class: "tabs-container" }, h("ifx-icon-button", { shape: "round", variant: "tertiary", icon: "chevronLeft16", size: "s", disabled: false, "aria-label": "Scroll tabs left", onClick: () => this.scrollLeft(), class: `scroll-button scroll-left ${!this.canScrollLeft ? 'hidden' : ''}` }), h("ul", { role: "tablist", class: "tabs-list scrollable", ref: (el) => (this.tabsListElement = el), onScroll: () => this.onTabsListScroll() }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: '9328e6574bb80e44c1d91c96d21fb05baa17c4f7', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation} ${this.fullWidth ? 'full-width-enabled' : ''}` }, this.internalOrientation === 'horizontal' ? (h("div", { class: "tabs-container" }, h("ifx-icon-button", { shape: "round", variant: "tertiary", icon: "chevronLeft16", size: "s", disabled: false, "aria-label": "Scroll tabs left", onClick: () => this.scrollLeft(), class: `scroll-button scroll-left ${!this.canScrollLeft ? 'hidden' : ''}` }), h("ul", { role: "tablist", class: "tabs-list scrollable", ref: (el) => (this.tabsListElement = el), onScroll: () => this.onTabsListScroll() }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
             _a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
                 tab.header))), h("div", { class: "active-border" })), h("ifx-icon-button", { shape: "round", variant: "tertiary", icon: "chevronRight16", size: "s", disabled: false, "aria-label": "Scroll tabs right", onClick: () => this.scrollRight(), class: `scroll-button scroll-right ${!this.canScrollRight ? 'hidden' : ''}` }))) : (h("ul", { role: "tablist", class: "tabs-list" }, (_b = this.tabObjects) === null || _b === void 0 ? void 0 :
             _b.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
-                tab.header))), h("div", { class: "active-border" }))), h("div", { key: '852abb48779c3d068d3bb3d317e9dcf658f413e2', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
+                tab.header))), h("div", { class: "active-border" }))), h("div", { key: '593e426355b7adbb7eda796ed5e032f609cae1bd', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
     }
     static get is() { return "ifx-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tabs/tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-tabs',\n styleUrl: 'tabs.scss',\n shadow: true\n})\nexport class IfxTabs {\n @Element() el: HTMLElement;\n\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\n @Prop() fullWidth: boolean = false;\n\n @State() internalOrientation: string;\n @State() internalActiveTabIndex: number = 0;\n @State() tabObjects: any[] = [];\n @State() canScrollLeft: boolean = false;\n @State() canScrollRight: boolean = false;\n\n private internalFocusedTabIndex: number = 0;\n private tabRefs: HTMLElement[] = [];\n private tabHeaderRefs: HTMLElement[] = [];\n private tabsListElement: HTMLElement;\n private tabFocusHandlers: Map<HTMLElement, () => void> = new Map();\n\n @Event() ifxChange: EventEmitter;\n\n @Listen('resize', {target: 'window'})\n updateBorderOnWindowResize() {\n this.updateBorderAndFocus();\n this.updateScrollButtons();\n }\n\n setActiveAndFocusedTab(index: number) {\n if (index >= this.tabObjects.length) {\n index = this.tabObjects.length - 1;\n }\n if (index < 0) {\n index = 0;\n }\n if (!this.tabObjects[index]?.disabled) {\n this.internalActiveTabIndex = index;\n this.internalFocusedTabIndex = index;\n // Scroll the active tab into view\n setTimeout(() => this.scrollTabIntoView(index), 0);\n }\n }\n\n @Listen('tabHeaderChange')\n handleTabHeaderChange(e) {\n const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\n this.tabObjects[tabIndex].header = e.detail;\n this.tabObjects = [...this.tabObjects];\n }\n\n\n @Watch('activeTabIndex')\n activeTabIndexChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.setActiveAndFocusedTab(newValue);\n }\n }\n\n componentWillLoad() {\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n this.onSlotChange();\n this.setActiveAndFocusedTab(this.activeTabIndex);\n this.updateTabStyles();\n }\n\n updateTabStyles() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.classList.toggle('active', index === this.internalActiveTabIndex);\n tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\n });\n }\n\n\n // needed for smooth border transition\n reRenderBorder() {\n const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\n if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\n if (this.orientation === 'horizontal') {\n\n borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\n borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\n borderElement.style.top = '';\n borderElement.style.height = '';\n } else {\n borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\n borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\n borderElement.style.left = '';\n borderElement.style.width = '';\n }\n }\n }\n\n\n // when a slot is removed / added\n @Listen('slotchange')\n onSlotChange() {\n const tabs = this.el.querySelectorAll('ifx-tab');\n this.tabObjects = Array.from(tabs).map((tab) => {\n return {\n header: tab?.header,\n disabled: tab?.disabled === true,\n icon: tab?.icon,\n iconPosition: tab?.iconPosition\n }\n });\n\n this.tabRefs = Array.from(tabs);\n this.tabRefs.forEach((tab, index) => {\n tab.setAttribute('slot', `tab-${index}`);\n });\n\n // Re-setup focus listeners when tabs change\n setTimeout(() => {\n this.setupTabFocusListeners();\n this.updateScrollButtons();\n }, 0);\n }\n\n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) {\n const framework = detectFramework();\n trackComponent('ifx-tabs', await framework)\n }\n this.updateBorderAndFocus();\n this.updateScrollButtons();\n // Add keyboard event listeners for each tab header\n this.setupTabFocusListeners();\n }\n\n private setupTabFocusListeners() {\n // Clear any existing handlers\n this.tabFocusHandlers.clear();\n\n this.tabHeaderRefs.forEach((tab, index) => {\n const handler = () => {\n this.internalFocusedTabIndex = index;\n };\n\n // Store the handler so we can remove it later\n this.tabFocusHandlers.set(tab, handler);\n tab.addEventListener('focus', handler);\n });\n }\n\n disconnectedCallback() {\n // Remove keyboard event listeners when component is unmounted\n this.tabFocusHandlers.forEach((handler, tab) => {\n tab.removeEventListener('focus', handler);\n });\n this.tabFocusHandlers.clear();\n }\n componentDidUpdate() {\n this.updateBorderAndFocus();\n this.updateScrollButtons();\n }\n\n private updateBorderAndFocus() {\n this.reRenderBorder()\n this.updateTabFocusability();\n }\n\n private updateTabFocusability() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\n })\n }\n\n\n private focusNextTab() {\n let nextIndex = this.internalFocusedTabIndex + 1;\n while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\n nextIndex++;\n }\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\n this.internalFocusedTabIndex = nextIndex;\n this.tabHeaderRefs[nextIndex].focus();\n }\n }\n\n private focusPreviousTab() {\n let prevIndex = this.internalFocusedTabIndex - 1;\n while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\n prevIndex--;\n }\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.internalFocusedTabIndex = prevIndex;\n this.tabHeaderRefs[prevIndex].focus();\n }\n }\n\n\n private getTabItemClass(index: number) {\n const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\n const isDisabled = this.tabObjects[index].disabled;\n const iconPosition = this.tabObjects[index].iconPosition\n return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\n }\n\n private handleClick(tab, index) {\n if (!tab.disabled) {\n const previousTabIndex = this.internalActiveTabIndex;\n this.internalActiveTabIndex = index;\n this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: index });\n // Center the clicked tab\n setTimeout(() => this.scrollTabIntoView(index), 0);\n }\n }\n\n\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Tab') {\n\n if (ev.shiftKey) {\n // Shift + Tab\n if (this.internalFocusedTabIndex === 0) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusPreviousTab();\n }\n } else {\n // Tab\n if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusNextTab();\n }\n }\n } else if (ev.key === 'Enter') {\n const path = ev.composedPath();\n const isTabHeader = path.some(el => this.tabHeaderRefs.includes(el as HTMLElement));\n if (!isTabHeader) {\n return;\n }\n\n if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n const previousTabIndex = this.internalActiveTabIndex;\n this.internalActiveTabIndex = this.internalFocusedTabIndex;\n this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: this.internalFocusedTabIndex });\n // Center the activated tab\n setTimeout(() => this.scrollTabIntoView(this.internalFocusedTabIndex), 0);\n }\n }\n }\n\n private updateScrollButtons() {\n // Reset scroll buttons if conditions not met\n if (this.shouldDisableScrolling()) {\n this.canScrollLeft = false;\n this.canScrollRight = false;\n return;\n }\n\n const { scrollLeft, scrollWidth, clientWidth } = this.tabsListElement;\n this.canScrollLeft = scrollLeft > 0;\n this.canScrollRight = scrollLeft < scrollWidth - clientWidth;\n }\n\n private shouldDisableScrolling(): boolean {\n return !this.tabsListElement \|\|\n this.internalOrientation === 'vertical' \|\|\n this.fullWidth;\n }\n\n private scrollLeft() {\n if (!this.canScrollLeft \|\| !this.tabsListElement) return;\n\n const scrollAmount = Math.min(200, this.tabsListElement.scrollLeft);\n this.tabsListElement.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\n }\n\n private scrollRight() {\n if (!this.canScrollRight \|\| !this.tabsListElement) return;\n\n const maxScroll = this.tabsListElement.scrollWidth - this.tabsListElement.clientWidth;\n const currentScroll = this.tabsListElement.scrollLeft;\n const scrollAmount = Math.min(200, maxScroll - currentScroll);\n this.tabsListElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\n }\n\n private onTabsListScroll() {\n this.updateScrollButtons();\n }\n\n private scrollTabIntoView(index: number) {\n if (this.shouldDisableScrolling() \|\| !this.tabHeaderRefs[index]) {\n return;\n }\n\n const tabElement = this.tabHeaderRefs[index];\n const container = this.tabsListElement;\n\n const tabRect = this.getTabCenterInfo(tabElement);\n const containerRect = this.getContainerCenterInfo(container);\n\n // Only scroll if the tab is not already reasonably centered\n if (Math.abs(tabRect.center - containerRect.center) > 50) {\n const desiredScrollLeft = this.calculateCenteredScrollPosition(tabRect, containerRect);\n container.scrollTo({ left: desiredScrollLeft, behavior: 'smooth' });\n }\n }\n\n private getTabCenterInfo(tabElement: HTMLElement) {\n const left = tabElement.offsetLeft;\n const width = tabElement.offsetWidth;\n return {\n left,\n width,\n center: left + (width / 2)\n };\n }\n\n private getContainerCenterInfo(container: HTMLElement) {\n const scrollLeft = container.scrollLeft;\n const width = container.clientWidth;\n return {\n scrollLeft,\n width,\n center: scrollLeft + (width / 2)\n };\n }\n\n private calculateCenteredScrollPosition(tabRect: any, containerRect: any): number {\n const desiredScrollLeft = tabRect.center - (containerRect.width / 2);\n const maxScrollLeft = this.tabsListElement.scrollWidth - containerRect.width;\n return Math.max(0, Math.min(desiredScrollLeft, maxScrollLeft));\n }\n\n render() {\n return (\n <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation} ${this.fullWidth ? 'full-width-enabled' : ''}`}>\n {this.internalOrientation === 'horizontal' ? (\n <div class=\"tabs-container\">\n <ifx-icon-button\n shape=\"round\"\n variant=\"tertiary\"\n icon=\"chevronLeft16\"\n size=\"s\"\n disabled={false}\n aria-label=\"Scroll tabs left\"\n onClick={() => this.scrollLeft()}\n class={`scroll-button scroll-left ${!this.canScrollLeft ? 'hidden' : ''}`}\n >\n </ifx-icon-button>\n <ul\n role=\"tablist\"\n class=\"tabs-list scrollable\"\n ref={(el) => (this.tabsListElement = el)}\n onScroll={() => this.onTabsListScroll()}\n >\n {this.tabObjects?.map((tab, index) => (\n <li\n class={this.getTabItemClass(index)}\n ref={(el) => (this.tabHeaderRefs[index] = el)}\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => this.handleClick(tab, index)}\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n role=\"tab\"\n >\n {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n {tab?.header}\n </li>\n ))}\n <div class=\"active-border\"></div>\n </ul>\n <ifx-icon-button\n shape=\"round\"\n variant=\"tertiary\"\n icon=\"chevronRight16\"\n size=\"s\"\n disabled={false}\n aria-label=\"Scroll tabs right\"\n onClick={() => this.scrollRight()}\n class={`scroll-button scroll-right ${!this.canScrollRight ? 'hidden' : ''}`}\n >\n </ifx-icon-button>\n </div>\n ) : (\n <ul role=\"tablist\" class=\"tabs-list\">\n {this.tabObjects?.map((tab, index) => (\n <li\n class={this.getTabItemClass(index)}\n ref={(el) => (this.tabHeaderRefs[index] = el)}\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => this.handleClick(tab, index)}\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n role=\"tab\"\n >\n {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n {tab?.header}\n </li>\n ))}\n <div class=\"active-border\"></div>\n </ul>\n )}\n <div class=\"tab-content\">\n {Array.from(this.tabObjects).map((_, index) => (\n <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\n <slot name={`tab-${index}`} />\n </div>\n ))}\n </div>\n </div>\n );\n }\n\n}\n"]}
1	+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-tabs',\r\n styleUrl: 'tabs.scss',\r\n shadow: true\r\n})\r\nexport class IfxTabs {\r\n @Element() el: HTMLElement;\r\n\r\n @Prop() orientation: string = \"horizontal\";\r\n @Prop({ mutable: true }) activeTabIndex: number = 0;\r\n @Prop() fullWidth: boolean = false;\r\n\r\n @State() internalOrientation: string;\r\n @State() internalActiveTabIndex: number = 0;\r\n @State() tabObjects: any[] = [];\r\n @State() canScrollLeft: boolean = false;\r\n @State() canScrollRight: boolean = false;\r\n\r\n private internalFocusedTabIndex: number = 0;\r\n private tabRefs: HTMLElement[] = [];\r\n private tabHeaderRefs: HTMLElement[] = [];\r\n private tabsListElement: HTMLElement;\r\n private tabFocusHandlers: Map<HTMLElement, () => void> = new Map();\r\n\r\n @Event() ifxChange: EventEmitter;\r\n\r\n @Listen('resize', {target: 'window'})\r\n updateBorderOnWindowResize() {\r\n this.updateBorderAndFocus();\r\n this.updateScrollButtons();\r\n }\r\n\r\n setActiveAndFocusedTab(index: number) {\r\n if (index >= this.tabObjects.length) {\r\n index = this.tabObjects.length - 1;\r\n }\r\n if (index < 0) {\r\n index = 0;\r\n }\r\n if (!this.tabObjects[index]?.disabled) {\r\n this.internalActiveTabIndex = index;\r\n this.internalFocusedTabIndex = index;\r\n // Scroll the active tab into view\r\n setTimeout(() => this.scrollTabIntoView(index), 0);\r\n }\r\n }\r\n\r\n @Listen('tabHeaderChange')\r\n handleTabHeaderChange(e) {\r\n const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\r\n this.tabObjects[tabIndex].header = e.detail;\r\n this.tabObjects = [...this.tabObjects];\r\n }\r\n\r\n\r\n @Watch('activeTabIndex')\r\n activeTabIndexChanged(newValue: number, oldValue: number) {\r\n if (newValue !== oldValue) {\r\n this.setActiveAndFocusedTab(newValue);\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\r\n this.onSlotChange();\r\n this.setActiveAndFocusedTab(this.activeTabIndex);\r\n this.updateTabStyles();\r\n }\r\n\r\n updateTabStyles() {\r\n this.tabHeaderRefs.forEach((tab, index) => {\r\n tab.classList.toggle('active', index === this.internalActiveTabIndex);\r\n tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\r\n });\r\n }\r\n\r\n\r\n // needed for smooth border transition\r\n reRenderBorder() {\r\n const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\r\n if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\r\n if (this.orientation === 'horizontal') {\r\n\r\n borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\r\n borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\r\n borderElement.style.top = '';\r\n borderElement.style.height = '';\r\n } else {\r\n borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\r\n borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\r\n borderElement.style.left = '';\r\n borderElement.style.width = '';\r\n }\r\n }\r\n }\r\n\r\n\r\n // when a slot is removed / added\r\n @Listen('slotchange')\r\n onSlotChange() {\r\n const tabs = this.el.querySelectorAll('ifx-tab');\r\n this.tabObjects = Array.from(tabs).map((tab) => {\r\n return {\r\n header: tab?.header,\r\n disabled: tab?.disabled === true,\r\n icon: tab?.icon,\r\n iconPosition: tab?.iconPosition\r\n }\r\n });\r\n\r\n this.tabRefs = Array.from(tabs);\r\n this.tabRefs.forEach((tab, index) => {\r\n tab.setAttribute('slot', `tab-${index}`);\r\n });\r\n\r\n // Re-setup focus listeners when tabs change\r\n setTimeout(() => {\r\n this.setupTabFocusListeners();\r\n this.updateScrollButtons();\r\n }, 0);\r\n }\r\n\r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) {\r\n const framework = detectFramework();\r\n trackComponent('ifx-tabs', await framework)\r\n }\r\n this.updateBorderAndFocus();\r\n this.updateScrollButtons();\r\n // Add keyboard event listeners for each tab header\r\n this.setupTabFocusListeners();\r\n }\r\n\r\n private setupTabFocusListeners() {\r\n // Clear any existing handlers\r\n this.tabFocusHandlers.clear();\r\n\r\n this.tabHeaderRefs.forEach((tab, index) => {\r\n const handler = () => {\r\n this.internalFocusedTabIndex = index;\r\n };\r\n\r\n // Store the handler so we can remove it later\r\n this.tabFocusHandlers.set(tab, handler);\r\n tab.addEventListener('focus', handler);\r\n });\r\n }\r\n\r\n disconnectedCallback() {\r\n // Remove keyboard event listeners when component is unmounted\r\n this.tabFocusHandlers.forEach((handler, tab) => {\r\n tab.removeEventListener('focus', handler);\r\n });\r\n this.tabFocusHandlers.clear();\r\n }\r\n componentDidUpdate() {\r\n this.updateBorderAndFocus();\r\n this.updateScrollButtons();\r\n }\r\n\r\n private updateBorderAndFocus() {\r\n this.reRenderBorder()\r\n this.updateTabFocusability();\r\n }\r\n\r\n private updateTabFocusability() {\r\n this.tabHeaderRefs.forEach((tab, index) => {\r\n tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\r\n })\r\n }\r\n\r\n\r\n private focusNextTab() {\r\n let nextIndex = this.internalFocusedTabIndex + 1;\r\n while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\r\n nextIndex++;\r\n }\r\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\r\n this.internalFocusedTabIndex = nextIndex;\r\n this.tabHeaderRefs[nextIndex].focus();\r\n }\r\n }\r\n\r\n private focusPreviousTab() {\r\n let prevIndex = this.internalFocusedTabIndex - 1;\r\n while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\r\n prevIndex--;\r\n }\r\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\r\n this.internalFocusedTabIndex = prevIndex;\r\n this.tabHeaderRefs[prevIndex].focus();\r\n }\r\n }\r\n\r\n\r\n private getTabItemClass(index: number) {\r\n const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\r\n const isDisabled = this.tabObjects[index].disabled;\r\n const iconPosition = this.tabObjects[index].iconPosition\r\n return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\r\n }\r\n\r\n private handleClick(tab, index) {\r\n if (!tab.disabled) {\r\n const previousTabIndex = this.internalActiveTabIndex;\r\n this.internalActiveTabIndex = index;\r\n this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: index });\r\n // Center the clicked tab\r\n setTimeout(() => this.scrollTabIntoView(index), 0);\r\n }\r\n }\r\n\r\n\r\n\r\n @Listen('keydown')\r\n handleKeyDown(ev: KeyboardEvent) {\r\n if (ev.key === 'Tab') {\r\n\r\n if (ev.shiftKey) {\r\n // Shift + Tab\r\n if (this.internalFocusedTabIndex === 0) {\r\n // Allow default behavior to move focus out of component\r\n return;\r\n } else {\r\n ev.preventDefault();\r\n this.focusPreviousTab();\r\n }\r\n } else {\r\n // Tab\r\n if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\r\n // Allow default behavior to move focus out of component\r\n return;\r\n } else {\r\n ev.preventDefault();\r\n this.focusNextTab();\r\n }\r\n }\r\n } else if (ev.key === 'Enter') {\r\n const path = ev.composedPath();\r\n const isTabHeader = path.some(el => this.tabHeaderRefs.includes(el as HTMLElement));\r\n if (!isTabHeader) {\r\n return;\r\n }\r\n\r\n if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\r\n const previousTabIndex = this.internalActiveTabIndex;\r\n this.internalActiveTabIndex = this.internalFocusedTabIndex;\r\n this.ifxChange.emit({ previousTab: previousTabIndex, currentTab: this.internalFocusedTabIndex });\r\n // Center the activated tab\r\n setTimeout(() => this.scrollTabIntoView(this.internalFocusedTabIndex), 0);\r\n }\r\n }\r\n }\r\n\r\n private updateScrollButtons() {\r\n // Reset scroll buttons if conditions not met\r\n if (this.shouldDisableScrolling()) {\r\n this.canScrollLeft = false;\r\n this.canScrollRight = false;\r\n return;\r\n }\r\n\r\n const { scrollLeft, scrollWidth, clientWidth } = this.tabsListElement;\r\n this.canScrollLeft = scrollLeft > 0;\r\n this.canScrollRight = scrollLeft < scrollWidth - clientWidth;\r\n }\r\n\r\n private shouldDisableScrolling(): boolean {\r\n return !this.tabsListElement \|\|\r\n this.internalOrientation === 'vertical' \|\|\r\n this.fullWidth;\r\n }\r\n\r\n private scrollLeft() {\r\n if (!this.canScrollLeft \|\| !this.tabsListElement) return;\r\n\r\n const scrollAmount = Math.min(200, this.tabsListElement.scrollLeft);\r\n this.tabsListElement.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\r\n }\r\n\r\n private scrollRight() {\r\n if (!this.canScrollRight \|\| !this.tabsListElement) return;\r\n\r\n const maxScroll = this.tabsListElement.scrollWidth - this.tabsListElement.clientWidth;\r\n const currentScroll = this.tabsListElement.scrollLeft;\r\n const scrollAmount = Math.min(200, maxScroll - currentScroll);\r\n this.tabsListElement.scrollBy({ left: scrollAmount, behavior: 'smooth' });\r\n }\r\n\r\n private onTabsListScroll() {\r\n this.updateScrollButtons();\r\n }\r\n\r\n private scrollTabIntoView(index: number) {\r\n if (this.shouldDisableScrolling() \|\| !this.tabHeaderRefs[index]) {\r\n return;\r\n }\r\n\r\n const tabElement = this.tabHeaderRefs[index];\r\n const container = this.tabsListElement;\r\n\r\n const tabRect = this.getTabCenterInfo(tabElement);\r\n const containerRect = this.getContainerCenterInfo(container);\r\n\r\n // Only scroll if the tab is not already reasonably centered\r\n if (Math.abs(tabRect.center - containerRect.center) > 50) {\r\n const desiredScrollLeft = this.calculateCenteredScrollPosition(tabRect, containerRect);\r\n container.scrollTo({ left: desiredScrollLeft, behavior: 'smooth' });\r\n }\r\n }\r\n\r\n private getTabCenterInfo(tabElement: HTMLElement) {\r\n const left = tabElement.offsetLeft;\r\n const width = tabElement.offsetWidth;\r\n return {\r\n left,\r\n width,\r\n center: left + (width / 2)\r\n };\r\n }\r\n\r\n private getContainerCenterInfo(container: HTMLElement) {\r\n const scrollLeft = container.scrollLeft;\r\n const width = container.clientWidth;\r\n return {\r\n scrollLeft,\r\n width,\r\n center: scrollLeft + (width / 2)\r\n };\r\n }\r\n\r\n private calculateCenteredScrollPosition(tabRect: any, containerRect: any): number {\r\n const desiredScrollLeft = tabRect.center - (containerRect.width / 2);\r\n const maxScrollLeft = this.tabsListElement.scrollWidth - containerRect.width;\r\n return Math.max(0, Math.min(desiredScrollLeft, maxScrollLeft));\r\n }\r\n\r\n render() {\r\n return (\r\n <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation} ${this.fullWidth ? 'full-width-enabled' : ''}`}>\r\n {this.internalOrientation === 'horizontal' ? (\r\n <div class=\"tabs-container\">\r\n <ifx-icon-button\r\n shape=\"round\"\r\n variant=\"tertiary\"\r\n icon=\"chevronLeft16\"\r\n size=\"s\"\r\n disabled={false}\r\n aria-label=\"Scroll tabs left\"\r\n onClick={() => this.scrollLeft()}\r\n class={`scroll-button scroll-left ${!this.canScrollLeft ? 'hidden' : ''}`}\r\n >\r\n </ifx-icon-button>\r\n <ul\r\n role=\"tablist\"\r\n class=\"tabs-list scrollable\"\r\n ref={(el) => (this.tabsListElement = el)}\r\n onScroll={() => this.onTabsListScroll()}\r\n >\r\n {this.tabObjects?.map((tab, index) => (\r\n <li\r\n class={this.getTabItemClass(index)}\r\n ref={(el) => (this.tabHeaderRefs[index] = el)}\r\n onMouseDown={(event) => event.preventDefault()}\r\n onClick={() => this.handleClick(tab, index)}\r\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\r\n aria-disabled={tab.disabled ? 'true' : 'false'}\r\n role=\"tab\"\r\n >\r\n {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\r\n {tab?.header}\r\n </li>\r\n ))}\r\n <div class=\"active-border\"></div>\r\n </ul>\r\n <ifx-icon-button\r\n shape=\"round\"\r\n variant=\"tertiary\"\r\n icon=\"chevronRight16\"\r\n size=\"s\"\r\n disabled={false}\r\n aria-label=\"Scroll tabs right\"\r\n onClick={() => this.scrollRight()}\r\n class={`scroll-button scroll-right ${!this.canScrollRight ? 'hidden' : ''}`}\r\n >\r\n </ifx-icon-button>\r\n </div>\r\n ) : (\r\n <ul role=\"tablist\" class=\"tabs-list\">\r\n {this.tabObjects?.map((tab, index) => (\r\n <li\r\n class={this.getTabItemClass(index)}\r\n ref={(el) => (this.tabHeaderRefs[index] = el)}\r\n onMouseDown={(event) => event.preventDefault()}\r\n onClick={() => this.handleClick(tab, index)}\r\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\r\n aria-disabled={tab.disabled ? 'true' : 'false'}\r\n role=\"tab\"\r\n >\r\n {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\r\n {tab?.header}\r\n </li>\r\n ))}\r\n <div class=\"active-border\"></div>\r\n </ul>\r\n )}\r\n <div class=\"tab-content\">\r\n {Array.from(this.tabObjects).map((_, index) => (\r\n <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\r\n <slot name={`tab-${index}`} />\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n}\r\n"]}

package/dist/collection/components/tabs/tabs.stories.js CHANGED Viewed

@@ -136,10 +136,10 @@ const Template = args => {
         var icon = args.icon === 'none' ? '' : args.icon;
         tabContent.setAttribute('icon', icon);
         tabContent.setAttribute('icon-position', args.iconPosition);
-        tabContent.innerHTML = `
-        Content for Tab #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
+        tabContent.innerHTML = `
+        Content for Tab #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.
     `;
         tabsElement.append(tabContent);
     }

package/dist/collection/components/tabs/tabs.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Tabs',\n tags: ['autodocs'],\n\n component: 'ifx-tabs',\n args: {\n amountOfTabs: 3,\n orientation: 'horizontal',\n icon: '',\n header: 'Tab',\n disabled: false,\n fullWidth: false,\n },\n argTypes: {\n amountOfTabs: {\n name: 'Amount of Tabs', control: 'number',\n description: 'Set the number of tabs.',\n table: {\n category: 'story controls',\n type: {\n summary: 'number'\n }\n }\n },\n orientation: {\n options: ['horizontal', 'vertical'],\n control: { type: 'radio' },\n description: 'Set the orientation of the tabs.',\n table: {\n category:\n 'ifx-tabs props',\n defaultValue: {\n summary: 'horizontal',\n },\n type: {\n summary: 'horizontal \| vertical'\n }\n }\n },\n icon: {\n name: 'icon',\n control: { type: 'select' },\n options: Object.keys(icons),\n description: 'Set the icon of the tab. Choose \"none\" to display no icon.',\n table: {\n category: 'ifx-tab props',\n defaultValue: {\n summary: ''\n },\n type: {\n summary: 'string'\n }\n }\n },\n fullWidth: {\n control: { type: 'boolean' },\n description: \"Adds flex: 1 to the ifx-tab child components, thus making them occupy the full width of their parent\",\n table: {\n category: 'ifx-tabs props',\n defaultValue: {\n summary: 'false'\n },\n type: {\n summary: 'boolean'\n }\n }\n },\n iconPosition: {\n options: ['left', 'right'],\n control: { type: 'radio' },\n description: 'Set the position of the icon.',\n table: {\n category: 'ifx-tab props',\n defaultValue: {\n summary: 'left'\n },\n type: {\n summary: 'left \| right'\n },\n },\n },\n activeTabIndex: {\n description: 'Set the tab as active by providing the index (tab can not be disabled).',\n table: {\n category: 'ifx-tabs props',\n defaultValue: { summary: '0' },\n type: {\n summary: 'number'\n }\n }\n },\n header: {\n control: 'text',\n description: 'Set the header of the tab.',\n table: {\n defaultValue: { summary: 'Tab' },\n category: 'ifx-tab props',\n type: {\n summary: 'string'\n }\n }\n },\n disabled: {\n control: 'boolean',\n description: 'Set the tab to disabled. In the storybook, the second tab will be disabled.',\n table: {\n category: 'ifx-tab props',\n defaultValue: { summary: 'false' },\n }\n },\n ifxChange: {\n action: 'ifxChange',\n description: 'Custom event that is emitted when the active tab changes.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n },\n },\n};\n\nconst Template = args => {\n const tabsElement = document.createElement('ifx-tabs') as HTMLIfxTabsElement;\n tabsElement.setAttribute('orientation', args.orientation);\n tabsElement.setAttribute('active-tab-index', args.activeTabIndex);\n tabsElement.setAttribute('full-width', args.fullWidth);\n tabsElement.addEventListener('ifxChange', action(`ifxChange`));\n\n for (let i = 0; i < args.amountOfTabs; i++) {\n const tabContent = document.createElement('ifx-tab');\n tabContent.setAttribute('header', `${args.header} ${i + 1}`);\n if (i == 1) {\n tabContent.setAttribute('disabled', args.disabled);\n }\n var icon = args.icon === 'none' ? '' : args.icon;\n tabContent.setAttribute('icon', icon);\n tabContent.setAttribute('icon-position', args.iconPosition);\n tabContent.innerHTML = `\n Content for Tab #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\n `;\n tabsElement.append(tabContent);\n }\n\n return tabsElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n amountOfTabs: 3,\n orientation: 'horizontal',\n activeTabIndex: 0,\n icon: '',\n iconPosition: 'left',\n header: 'Tab',\n disabled: false,\n};"]}
1	+ {"version":3,"file":"tabs.stories.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\nimport { icons } from '@infineon/infineon-icons';\r\n\r\nexport default {\r\n title: 'Components/Tabs',\r\n tags: ['autodocs'],\r\n\r\n component: 'ifx-tabs',\r\n args: {\r\n amountOfTabs: 3,\r\n orientation: 'horizontal',\r\n icon: '',\r\n header: 'Tab',\r\n disabled: false,\r\n fullWidth: false,\r\n },\r\n argTypes: {\r\n amountOfTabs: {\r\n name: 'Amount of Tabs', control: 'number',\r\n description: 'Set the number of tabs.',\r\n table: {\r\n category: 'story controls',\r\n type: {\r\n summary: 'number'\r\n }\r\n }\r\n },\r\n orientation: {\r\n options: ['horizontal', 'vertical'],\r\n control: { type: 'radio' },\r\n description: 'Set the orientation of the tabs.',\r\n table: {\r\n category:\r\n 'ifx-tabs props',\r\n defaultValue: {\r\n summary: 'horizontal',\r\n },\r\n type: {\r\n summary: 'horizontal \| vertical'\r\n }\r\n }\r\n },\r\n icon: {\r\n name: 'icon',\r\n control: { type: 'select' },\r\n options: Object.keys(icons),\r\n description: 'Set the icon of the tab. Choose \"none\" to display no icon.',\r\n table: {\r\n category: 'ifx-tab props',\r\n defaultValue: {\r\n summary: ''\r\n },\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n fullWidth: {\r\n control: { type: 'boolean' },\r\n description: \"Adds flex: 1 to the ifx-tab child components, thus making them occupy the full width of their parent\",\r\n table: {\r\n category: 'ifx-tabs props',\r\n defaultValue: {\r\n summary: 'false'\r\n },\r\n type: {\r\n summary: 'boolean'\r\n }\r\n }\r\n },\r\n iconPosition: {\r\n options: ['left', 'right'],\r\n control: { type: 'radio' },\r\n description: 'Set the position of the icon.',\r\n table: {\r\n category: 'ifx-tab props',\r\n defaultValue: {\r\n summary: 'left'\r\n },\r\n type: {\r\n summary: 'left \| right'\r\n },\r\n },\r\n },\r\n activeTabIndex: {\r\n description: 'Set the tab as active by providing the index (tab can not be disabled).',\r\n table: {\r\n category: 'ifx-tabs props',\r\n defaultValue: { summary: '0' },\r\n type: {\r\n summary: 'number'\r\n }\r\n }\r\n },\r\n header: {\r\n control: 'text',\r\n description: 'Set the header of the tab.',\r\n table: {\r\n defaultValue: { summary: 'Tab' },\r\n category: 'ifx-tab props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n disabled: {\r\n control: 'boolean',\r\n description: 'Set the tab to disabled. In the storybook, the second tab will be disabled.',\r\n table: {\r\n category: 'ifx-tab props',\r\n defaultValue: { summary: 'false' },\r\n }\r\n },\r\n ifxChange: {\r\n action: 'ifxChange',\r\n description: 'Custom event that is emitted when the active tab changes.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\r\n },\r\n },\r\n },\r\n },\r\n};\r\n\r\nconst Template = args => {\r\n const tabsElement = document.createElement('ifx-tabs') as HTMLIfxTabsElement;\r\n tabsElement.setAttribute('orientation', args.orientation);\r\n tabsElement.setAttribute('active-tab-index', args.activeTabIndex);\r\n tabsElement.setAttribute('full-width', args.fullWidth);\r\n tabsElement.addEventListener('ifxChange', action(`ifxChange`));\r\n\r\n for (let i = 0; i < args.amountOfTabs; i++) {\r\n const tabContent = document.createElement('ifx-tab');\r\n tabContent.setAttribute('header', `${args.header} ${i + 1}`);\r\n if (i == 1) {\r\n tabContent.setAttribute('disabled', args.disabled);\r\n }\r\n var icon = args.icon === 'none' ? '' : args.icon;\r\n tabContent.setAttribute('icon', icon);\r\n tabContent.setAttribute('icon-position', args.iconPosition);\r\n tabContent.innerHTML = `\r\n Content for Tab #${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\r\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque.\r\n `;\r\n tabsElement.append(tabContent);\r\n }\r\n\r\n return tabsElement;\r\n};\r\n\r\nexport const Default = Template.bind({});\r\nDefault.args = {\r\n amountOfTabs: 3,\r\n orientation: 'horizontal',\r\n activeTabIndex: 0,\r\n icon: '',\r\n iconPosition: 'left',\r\n header: 'Tab',\r\n disabled: false,\r\n};"]}

package/dist/collection/components/templates/template/template.js CHANGED Viewed

@@ -128,7 +128,7 @@ export class Template {
         }
     }
     render() {
-        return (h("div", { key: '05eceff653bfdbab6627a338ee585a6f3c7a3c07' }, this.isTemplatePage
+        return (h("div", { key: '3e7b9bcba9d4004b9c4f35a98684eeb11e0f039f' }, this.isTemplatePage
             ?
                 h("div", { class: "template__page-wrapper" }, !this.repoUrl && !this.repoError &&
                     h("div", null, h("h3", null, "Your repository is getting ready.."), h("p", null, "This will only take a minute.")), this.isLoading && !this.repoError && h("div", null, h("ifx-spinner", { variant: 'default', size: 's' })), this.repoUrl && h("ifx-link", { href: this.repoUrl, target: "_parent", size: "m", variant: "underlined" }, "Your repository"), this.repoError && h("div", null, this.repoError))

package/dist/collection/components/templates/template/template.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/components/templates/template/template.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\n\n@Component({\n tag: 'ifx-template',\n styleUrl: 'template.scss',\n shadow: true,\n})\nexport class Template {\n @Element() el: HTMLElement;\n @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\n @State() repoUrl: string;\n @State() showDetails: boolean = false;\n @State() isTemplatePage: boolean = false;\n @State() isLoading: boolean = true;\n @State() repoError: string;\n @Prop() name: string;\n @Event() toggleTemplates: EventEmitter;\n @Event() fieldError: EventEmitter;\n @Prop() thumbnail: string;\n \n private clientId = 'Ov23lixmXiNTTNb6V5W6'\n private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\n private scope = 'repo workflow'\n private state = 'template123'\n\n authUser() { \n const authorizationUrl = `https://github.com/login/oauth/authorize?` +\n `client_id=${this.clientId}&` +\n `redirect_uri=${this.redirectUri}&` +\n `scope=${this.scope}&` +\n `state=${this.state}`;\n \n window.open(authorizationUrl, '_blank'); \n }\n\n componentDidLoad() { \n const url = new URL(window.location.href);\n const code = url.searchParams.get('code');\n const { templateName } = this.getLocalStorageValues()\n if(code && this.name === templateName) { \n this.isTemplatePage = true;\n this.toggleTemplates.emit('details')\n this.getUserToken(code)\n } \n }\n\n getLocalStorageValues() { \n const repoName = localStorage.getItem('repo_name');\n const repoDesc = localStorage.getItem('repo_desc');\n const repoFramework = localStorage.getItem('repo_framework');\n const templateName = localStorage.getItem('selectedTemplate');\n return { repoName, repoDesc, repoFramework, templateName }\n }\n\n async getUserToken(authCode) {\n const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\n\n fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\n .then(response => {\n if (response.ok) {\n return response.text();\n } else {\n return response.text().then(errorMessage => {\n throw new Error(errorMessage);\n });\n }\n })\n .then(data => { \n if(data) { \n this.isLoading = false;\n this.repoUrl = data;\n localStorage.clear();\n } \n })\n .catch(error => {\n this.repoError = error.message;\n console.error('Error:', error.message)\n });\n }\n\n handleUserInput(e, type) { \n if (type === 'name') {\n this.repoDetails = { ...this.repoDetails, name: e.target.value };\n } else if (type === 'desc') {\n this.repoDetails = { ...this.repoDetails, desc: e.target.value };\n } else if(type === 'framework') { \n this.repoDetails = { ...this.repoDetails, framework: e.target.value };\n }\n }\n\n submitUserData() { \n if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \n localStorage.setItem('repo_name', this.repoDetails.name);\n localStorage.setItem('repo_desc', this.repoDetails.desc);\n localStorage.setItem('repo_framework', this.repoDetails.framework);\n localStorage.setItem('selectedTemplate', this.name);\n this.fieldError.emit(false)\n this.authUser()\n } else { \n this.fieldError.emit('All fields are mandatory')\n }\n }\n\n togglePadding(action) { \n let parent = this.el.parentElement;\n if (parent) {\n const rootNode = parent.getRootNode();\n if (rootNode instanceof ShadowRoot) {\n parent = rootNode.host.parentElement;\n } else {\n parent = parent.parentElement;\n }\n if(action === 'remove') { \n parent.parentElement.style.padding = '0px';\n } else if(action === 'add') { \n parent.parentElement.style.padding = '4rem 20px';\n }\n }\n }\n\n handleCurrentTemplate(e) { \n if(e && !this.showDetails) { \n this.togglePadding('remove')\n const targetTemplate = e.currentTarget;\n this.toggleTemplates.emit(targetTemplate)\n this.showDetails = true;\n } \n }\n\n @Method()\n async toggleTemplate(currTemp) { \n const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\n if(templateWrapper) { \n if(!templateWrapper.classList.contains('hide') && currTemp ) { \n if(templateWrapper !== currTemp) {\n templateWrapper.classList.add('hide')\n }\n } else { \n if(this.showDetails) { \n this.showDetails = false;\n }\n this.togglePadding('add')\n templateWrapper.classList.remove('hide')\n }\n }\n }\n\n \n render() {\n return (\n <div>\n {this.isTemplatePage \n ? \n <div class=\"template__page-wrapper\">\n {!this.repoUrl && !this.repoError && \n <div>\n <h3>Your repository is getting ready..</h3>\n <p>This will only take a minute.</p>\n </div>}\n {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\n {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\n {this.repoError && <div>{this.repoError}</div>}\n </div> \n : \n <div class=\"react__template-container\">\n <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\n <div class=\"image__wrapper\">\n <img src={this.thumbnail} />\n </div>\n </div>\n {this.showDetails && \n <div class=\"details__wrapper\">\n <div class=\"selection__buttons-wrapper\">\n <div class=\"selection__input\">\n <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')} />\n <label htmlFor=\"react\">React</label>\n </div>\n <div class=\"selection__input vue\">\n <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\n <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\n </div>\n </div>\n \n\n <div class=\"input__fields-wrapper\">\n <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\n\n <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\n\n <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\n </div>\n \n </div>}\n </div>}\n </div>\n );\n }\n}"]}
1	+ {"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/components/templates/template/template.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, State, Prop, Event, EventEmitter, Method } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-template',\r\n styleUrl: 'template.scss',\r\n shadow: true,\r\n})\r\nexport class Template {\r\n @Element() el: HTMLElement;\r\n @State() repoDetails: { name: string, desc: string, framework: string } = { name: \"\", desc: \"\", framework: \"\" };\r\n @State() repoUrl: string;\r\n @State() showDetails: boolean = false;\r\n @State() isTemplatePage: boolean = false;\r\n @State() isLoading: boolean = true;\r\n @State() repoError: string;\r\n @Prop() name: string;\r\n @Event() toggleTemplates: EventEmitter;\r\n @Event() fieldError: EventEmitter;\r\n @Prop() thumbnail: string;\r\n \r\n private clientId = 'Ov23lixmXiNTTNb6V5W6'\r\n private redirectUri = 'https://infineon.github.io/infineon-design-system-stencil/?path=/docs/dds-templates--development';\r\n private scope = 'repo workflow'\r\n private state = 'template123'\r\n\r\n authUser() { \r\n const authorizationUrl = `https://github.com/login/oauth/authorize?` +\r\n `client_id=${this.clientId}&` +\r\n `redirect_uri=${this.redirectUri}&` +\r\n `scope=${this.scope}&` +\r\n `state=${this.state}`;\r\n \r\n window.open(authorizationUrl, '_blank'); \r\n }\r\n\r\n componentDidLoad() { \r\n const url = new URL(window.location.href);\r\n const code = url.searchParams.get('code');\r\n const { templateName } = this.getLocalStorageValues()\r\n if(code && this.name === templateName) { \r\n this.isTemplatePage = true;\r\n this.toggleTemplates.emit('details')\r\n this.getUserToken(code)\r\n } \r\n }\r\n\r\n getLocalStorageValues() { \r\n const repoName = localStorage.getItem('repo_name');\r\n const repoDesc = localStorage.getItem('repo_desc');\r\n const repoFramework = localStorage.getItem('repo_framework');\r\n const templateName = localStorage.getItem('selectedTemplate');\r\n return { repoName, repoDesc, repoFramework, templateName }\r\n }\r\n\r\n async getUserToken(authCode) {\r\n const { repoName, repoDesc, repoFramework, templateName } = this.getLocalStorageValues();\r\n\r\n fetch(`https://ddstemplate-srv.cfapps.eu10-004.hana.ondemand.com/token/${authCode}/${repoName}/${repoDesc}/${repoFramework}/${templateName}`)\r\n .then(response => {\r\n if (response.ok) {\r\n return response.text();\r\n } else {\r\n return response.text().then(errorMessage => {\r\n throw new Error(errorMessage);\r\n });\r\n }\r\n })\r\n .then(data => { \r\n if(data) { \r\n this.isLoading = false;\r\n this.repoUrl = data;\r\n localStorage.clear();\r\n } \r\n })\r\n .catch(error => {\r\n this.repoError = error.message;\r\n console.error('Error:', error.message)\r\n });\r\n }\r\n\r\n handleUserInput(e, type) { \r\n if (type === 'name') {\r\n this.repoDetails = { ...this.repoDetails, name: e.target.value };\r\n } else if (type === 'desc') {\r\n this.repoDetails = { ...this.repoDetails, desc: e.target.value };\r\n } else if(type === 'framework') { \r\n this.repoDetails = { ...this.repoDetails, framework: e.target.value };\r\n }\r\n }\r\n\r\n submitUserData() { \r\n if(this.repoDetails.name && this.repoDetails.desc && this.repoDetails.framework) { \r\n localStorage.setItem('repo_name', this.repoDetails.name);\r\n localStorage.setItem('repo_desc', this.repoDetails.desc);\r\n localStorage.setItem('repo_framework', this.repoDetails.framework);\r\n localStorage.setItem('selectedTemplate', this.name);\r\n this.fieldError.emit(false)\r\n this.authUser()\r\n } else { \r\n this.fieldError.emit('All fields are mandatory')\r\n }\r\n }\r\n\r\n togglePadding(action) { \r\n let parent = this.el.parentElement;\r\n if (parent) {\r\n const rootNode = parent.getRootNode();\r\n if (rootNode instanceof ShadowRoot) {\r\n parent = rootNode.host.parentElement;\r\n } else {\r\n parent = parent.parentElement;\r\n }\r\n if(action === 'remove') { \r\n parent.parentElement.style.padding = '0px';\r\n } else if(action === 'add') { \r\n parent.parentElement.style.padding = '4rem 20px';\r\n }\r\n }\r\n }\r\n\r\n handleCurrentTemplate(e) { \r\n if(e && !this.showDetails) { \r\n this.togglePadding('remove')\r\n const targetTemplate = e.currentTarget;\r\n this.toggleTemplates.emit(targetTemplate)\r\n this.showDetails = true;\r\n } \r\n }\r\n\r\n @Method()\r\n async toggleTemplate(currTemp) { \r\n const templateWrapper = this.el.shadowRoot.querySelector('.react__template-wrapper');\r\n if(templateWrapper) { \r\n if(!templateWrapper.classList.contains('hide') && currTemp ) { \r\n if(templateWrapper !== currTemp) {\r\n templateWrapper.classList.add('hide')\r\n }\r\n } else { \r\n if(this.showDetails) { \r\n this.showDetails = false;\r\n }\r\n this.togglePadding('add')\r\n templateWrapper.classList.remove('hide')\r\n }\r\n }\r\n }\r\n\r\n \r\n render() {\r\n return (\r\n <div>\r\n {this.isTemplatePage \r\n ? \r\n <div class=\"template__page-wrapper\">\r\n {!this.repoUrl && !this.repoError && \r\n <div>\r\n <h3>Your repository is getting ready..</h3>\r\n <p>This will only take a minute.</p>\r\n </div>}\r\n {this.isLoading && !this.repoError && <div><ifx-spinner variant='default' size='s' /></div>}\r\n {this.repoUrl && <ifx-link href={this.repoUrl} target=\"_parent\" size=\"m\" variant=\"underlined\">Your repository</ifx-link>}\r\n {this.repoError && <div>{this.repoError}</div>}\r\n </div> \r\n : \r\n <div class=\"react__template-container\">\r\n <div class=\"react__template-wrapper\" onClick={(e) => this.handleCurrentTemplate(e)}>\r\n <div class=\"image__wrapper\">\r\n <img src={this.thumbnail} />\r\n </div>\r\n </div>\r\n {this.showDetails && \r\n <div class=\"details__wrapper\">\r\n <div class=\"selection__buttons-wrapper\">\r\n <div class=\"selection__input\">\r\n <input type=\"radio\" id=\"react\" name=\"chosen_framework\" value=\"react\" onInput={(e) => this.handleUserInput(e, 'framework')} />\r\n <label htmlFor=\"react\">React</label>\r\n </div>\r\n <div class=\"selection__input vue\">\r\n <input class=\"vue__input\" disabled type=\"radio\" id=\"vue\" name=\"chosen_framework\" value=\"vue\" onInput={(e) => this.handleUserInput(e, 'framework')}/>\r\n <label class=\"vue__label\" htmlFor=\"vue\">Vue</label> (Soon)\r\n </div>\r\n </div>\r\n \r\n\r\n <div class=\"input__fields-wrapper\">\r\n <ifx-text-field required={true} onInput={(e) => this.handleUserInput(e, 'name')} size=\"m\" icon=\"c-info-16\" placeholder=\"Your repository name\">Repository Name</ifx-text-field>\r\n\r\n <ifx-text-field required={true} size=\"m\" icon=\"c-info-16\" onInput={(e) => this.handleUserInput(e, 'desc')} placeholder=\"Your repository description\">Repository Description</ifx-text-field>\r\n\r\n <ifx-button fullWidth={true} onClick={() => this.submitUserData()} variant='primary'>Generate template</ifx-button>\r\n </div>\r\n \r\n </div>}\r\n </div>}\r\n </div>\r\n );\r\n }\r\n}"]}

package/dist/collection/components/templates/templates-ui/templates-ui.js CHANGED Viewed

@@ -40,7 +40,7 @@ export class TemplatesUI {
         alertWrapper.classList.remove('show');
     }
     render() {
-        return (h("div", { key: '625f556bc421af7b7eb482e3516f7792b4c1ef71', class: 'templates__container' }, h("div", { key: 'b4baf8ddbb682ed4c8fd68915d5ade140e0f599f', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: 'ae7543d14589bedb717e5798d2adfee5466cd7dc', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: '62661f884e553205dcb63977c110b5cb8e174e53', class: "alert__wrapper" }, h("ifx-alert", { key: '5a9d3c9ed711cb2f3ceebb1baebbc106899f7e1f', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '60fb42f545206c1e19b4d3762c9110270cbd391e', class: "templates__title" }, "Choose your template"), h("div", { key: '4d4db713807c60c8cf3d10dde9d7b7b64304a2c5', class: "templates__wrapper" }, h("ifx-template", { key: 'edacabf2edfc49a2b23bf3a200ac559a6637336d', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '78eb56d6b2ae1f3f3020eaf36b99eeb5fd8b24ea', name: 'template-02', thumbnail: this.wizardTemplate }))));
+        return (h("div", { key: 'fc3137911fc8299bc0f8ae74a84a71777a64eb50', class: 'templates__container' }, h("div", { key: '18e0c658819d3f54015ea225324cd84547b610fd', class: "back__btn-wrapper" }, h("ifx-icon-button", { key: '38fe366203319f5d9389c47982859f5dd299c039', onClick: () => this.filterTemplates(false), shape: "round", variant: "tertiary", icon: "arrow-left-16", target: "_blank", size: "m" }), h("div", { key: 'd93ea47ff32322c18da387652e0a0588b11c9101', class: "alert__wrapper" }, h("ifx-alert", { key: '3eb753278341ff0728c70a5fbc65a49b6b0e736f', onClick: () => this.closeAlert(), "aria-live": "assertive", variant: "danger", icon: "c-info-16" }, "All fields are mandatory"))), h("h2", { key: '785625a3790c5fe645793050429d735057bf5ff6', class: "templates__title" }, "Choose your template"), h("div", { key: 'e17b970189a89a47962ed5d4ba39c3e2bd9c3220', class: "templates__wrapper" }, h("ifx-template", { key: 'bc6435e17865c78c0daa837e3d5ecf1123eb121f', name: 'template-01', thumbnail: this.tableTemplate }), h("ifx-template", { key: '5979431eb9d74b272c266258a57c7bc0e2fd4498', name: 'template-02', thumbnail: this.wizardTemplate }))));
     }
     static get is() { return "ifx-templates-ui"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/templates/templates-ui/templates-ui.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"templates-ui.js","sourceRoot":"","sources":["../../../../src/components/templates/templates-ui/templates-ui.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Listen, Element, getAssetPath } from '@stencil/core';\n\n@Component({\n tag: 'ifx-templates-ui',\n styleUrl: 'templates-ui.scss',\n shadow: true,\n assetsDirs: ['assets']\n})\n\nexport class TemplatesUI {\n @Element() el: HTMLElement;\n\n private tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);\n private wizardTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);\n\n\n toggleTemplate(currTemp) { \n const templates = this.el.shadowRoot.querySelector('.templates__wrapper').querySelectorAll('ifx-template');\n templates.forEach((template) => { \n template.toggleTemplate(currTemp)\n })\n }\n\n @Listen('fieldError')\n handleError(e) { \n const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\n if(e.detail) { \n alertWrapper.classList.add('show');\n } else { \n alertWrapper.classList.remove('show');\n }\n }\n\n @Listen('toggleTemplates')\n filterTemplates(e) {\n const title = this.el.shadowRoot.querySelector('.templates__title');\n const backBtn = this.el.shadowRoot.querySelector('.back__btn-wrapper');\n if(e.detail) { \n title.classList.add('hide');\n if(e.detail !== 'details') { \n backBtn.classList.add('show');\n }\n this.toggleTemplate(e.detail)\n } else { \n title.classList.remove('hide');\n backBtn.classList.remove('show');\n this.toggleTemplate(null)\n }\n }\n\n closeAlert() { \n const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\n alertWrapper.classList.remove('show');\n }\n\n render() {\n return (\n <div class='templates__container'>\n <div class=\"back__btn-wrapper\">\n <ifx-icon-button onClick={() => this.filterTemplates(false)} shape=\"round\" variant=\"tertiary\" icon=\"arrow-left-16\" target=\"_blank\" size=\"m\" />\n <div class=\"alert__wrapper\">\n <ifx-alert onClick={() => this.closeAlert()} aria-live=\"assertive\" variant=\"danger\" icon=\"c-info-16\">All fields are mandatory</ifx-alert>\n </div>\n </div>\n <h2 class=\"templates__title\">Choose your template</h2>\n <div class=\"templates__wrapper\">\n <ifx-template name='template-01' thumbnail={this.tableTemplate} />\n <ifx-template name='template-02' thumbnail={this.wizardTemplate} />\n </div>\n </div>\n )\n }\n}\n"]}
1	+ {"version":3,"file":"templates-ui.js","sourceRoot":"","sources":["../../../../src/components/templates/templates-ui/templates-ui.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Listen, Element, getAssetPath } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'ifx-templates-ui',\r\n styleUrl: 'templates-ui.scss',\r\n shadow: true,\r\n assetsDirs: ['assets']\r\n})\r\n\r\nexport class TemplatesUI {\r\n @Element() el: HTMLElement;\r\n\r\n private tableTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/table_template.png`);\r\n private wizardTemplate = getAssetPath(`https://raw.githubusercontent.com/Infineon/public-assets/refs/heads/main/wizard_template.png`);\r\n\r\n\r\n toggleTemplate(currTemp) { \r\n const templates = this.el.shadowRoot.querySelector('.templates__wrapper').querySelectorAll('ifx-template');\r\n templates.forEach((template) => { \r\n template.toggleTemplate(currTemp)\r\n })\r\n }\r\n\r\n @Listen('fieldError')\r\n handleError(e) { \r\n const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\r\n if(e.detail) { \r\n alertWrapper.classList.add('show');\r\n } else { \r\n alertWrapper.classList.remove('show');\r\n }\r\n }\r\n\r\n @Listen('toggleTemplates')\r\n filterTemplates(e) {\r\n const title = this.el.shadowRoot.querySelector('.templates__title');\r\n const backBtn = this.el.shadowRoot.querySelector('.back__btn-wrapper');\r\n if(e.detail) { \r\n title.classList.add('hide');\r\n if(e.detail !== 'details') { \r\n backBtn.classList.add('show');\r\n }\r\n this.toggleTemplate(e.detail)\r\n } else { \r\n title.classList.remove('hide');\r\n backBtn.classList.remove('show');\r\n this.toggleTemplate(null)\r\n }\r\n }\r\n\r\n closeAlert() { \r\n const alertWrapper = this.el.shadowRoot.querySelector('.alert__wrapper');\r\n alertWrapper.classList.remove('show');\r\n }\r\n\r\n render() {\r\n return (\r\n <div class='templates__container'>\r\n <div class=\"back__btn-wrapper\">\r\n <ifx-icon-button onClick={() => this.filterTemplates(false)} shape=\"round\" variant=\"tertiary\" icon=\"arrow-left-16\" target=\"_blank\" size=\"m\" />\r\n <div class=\"alert__wrapper\">\r\n <ifx-alert onClick={() => this.closeAlert()} aria-live=\"assertive\" variant=\"danger\" icon=\"c-info-16\">All fields are mandatory</ifx-alert>\r\n </div>\r\n </div>\r\n <h2 class=\"templates__title\">Choose your template</h2>\r\n <div class=\"templates__wrapper\">\r\n <ifx-template name='template-01' thumbnail={this.tableTemplate} />\r\n <ifx-template name='template-02' thumbnail={this.wizardTemplate} />\r\n </div>\r\n </div>\r\n )\r\n }\r\n}\r\n"]}

package/dist/collection/components/text-field/text-field.js CHANGED Viewed

@@ -58,11 +58,11 @@ export class TextField {
         }
     }
     render() {
-        return (h("div", { key: 'fde8ba65931e70265b84ddd75143a78627cbbba7', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, h("div", { key: '662198ca46ff5a6d568589b5d0ebb4b6117a6205', class: "textInput__top-wrapper" }, this.label && (h("label", { key: 'be2ec4dec1d869c891f8defac11181ca18f06053', htmlFor: this.internalId }, h("span", { key: '46d77c5682c4ed8ac8cfb41a4ef676bc061236a8' }, this.label), this.required && h("span", { key: '28ddfeee2b30168c4c755bdc822fec0ef98c529a', class: `required ${this.error && !this.readOnly ? 'error' : ''}` }, "*")))), h("div", { key: '20457f5caf1857c5e7259763a885ed7c7a9df636', class: "textInput__bottom-wrapper" }, h("div", { key: '7e9a0bfc6a2f590d741ece4639d5f38e4c712085', class: "input-container" }, this.icon && h("ifx-icon", { key: 'ebdc52fb4dcca7912fd6ac428f1f42442fbb2313', class: "input-icon", icon: this.icon }), h("input", { key: '4760819b300477cbac4da643c41b3dfb97d62285', ref: el => (this.inputElement = el), disabled: this.disabled && !this.error, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, readonly: this.readOnly, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ''}
-                ${this.error ? 'error' : ''}
-                ${this.readOnly ? 'readonly' : ''}
-              ${this.size === 's' ? 'input-s' : ''}
-              ${this.success ? 'success' : ''}` }), this.showDeleteIcon && this.value && h("ifx-icon", { key: '34d4b05f44f3b5a0f4afddf40b2d3a0384482a57', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() })), this.caption && (h("div", { key: 'da655fe4c12336e535e9f1be649136ce9344c115', class: `textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}` }, this.caption)))));
+        return (h("div", { key: 'd67359eb3f5b01ca82f3d7e100c932b394f5dd72', "aria-label": "a text field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, h("div", { key: '984feba03b24e932834781c8f816e79817fbec7f', class: "textInput__top-wrapper" }, this.label && (h("label", { key: '02c23276205f851ee2c8807d2b67bccc11fb4350', htmlFor: this.internalId }, h("span", { key: '8473ccc62f76dad8aa84b5f98b36caacaa5c3fb2' }, this.label), this.required && h("span", { key: '60b25e7269a034b0d4fa7fd63e25151c1e0b8de0', class: `required ${this.error && !this.readOnly ? 'error' : ''}` }, "*")))), h("div", { key: 'f9e0d1caa7c5f8774132fbed4857e84af4dbb5a2', class: "textInput__bottom-wrapper" }, h("div", { key: '10ae27bf8edb9a9fc1a35b9e79db46dc07272a76', class: "input-container" }, this.icon && h("ifx-icon", { key: 'e78ef7ef5c27a8366fcc87148112c3f2fd5c6432', class: "input-icon", icon: this.icon }), h("input", { key: 'f384201d840524143d8e9e75dd25e7d09b64ab52', ref: el => (this.inputElement = el), disabled: this.disabled && !this.error, autocomplete: this.autocomplete, type: this.internalType, id: this.internalId, value: this.value, onInput: () => this.handleInput(), placeholder: this.placeholder, readonly: this.readOnly, maxlength: this.maxlength, class: `${this.icon ? 'icon' : ''}
+                ${this.error ? 'error' : ''}
+                ${this.readOnly ? 'readonly' : ''}
+              ${this.size === 's' ? 'input-s' : ''}
+              ${this.success ? 'success' : ''}` }), this.showDeleteIcon && this.value && h("ifx-icon", { key: 'b2e4e802c696d38c22975c09c1e2737187bf51f6', class: "delete-icon", icon: "cRemove16", onClick: () => this.handleDeleteContent() })), this.caption && (h("div", { key: '870558a1ab7766ffc694ae7e0fcb1b6ba95e5f6b', class: `textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}` }, this.caption)))));
     }
     static get is() { return "ifx-text-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text-field/text-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n tag: 'ifx-text-field',\n styleUrl: 'text-field.scss',\n shadow: true,\n // formAssociated: true\n})\nexport class TextField {\n private inputElement: HTMLInputElement;\n @Element() el;\n @Prop() placeholder: string = 'Placeholder';\n @Prop({ mutable: true }) value: string = '';\n @Prop() error: boolean = false;\n @Prop() label: string = '';\n @Prop() icon: string = '';\n @Prop() caption: string = '';\n @Prop() size: string = 'm';\n @Prop() required: boolean = false;\n @Prop() success: boolean = false;\n @Prop() disabled: boolean = false;\n @Prop() readOnly: boolean = false;\n @Prop() maxlength?: number;\n @Prop() showDeleteIcon: boolean = false;\n @Prop() autocomplete: string = 'on';\n @Prop() type: 'text' \| 'password' = 'text';\n @Prop() internalId: string = 'text-field';\n @State() internalType: string;\n @Event() ifxInput: EventEmitter<String>;\n // @Prop({ reflect: true })\n // resetOnSubmit: boolean = false;\n\n @AttachInternals() internals: ElementInternals;\n\n @Watch('value')\n valueWatcher(newValue: string) {\n if (newValue !== this.inputElement.value) {\n this.inputElement.value = newValue;\n }\n }\n\n @Method()\n async reset() {\n this.value = '';\n this.inputElement.value = '';\n }\n\n handleDeleteContent() {\n if (!this.disabled && !this.readOnly) {\n this.reset();\n this.ifxInput.emit(this.value);\n }\n }\n\n handleInput() {\n const query = this.inputElement.value;\n this.value = query;\n //this.internals.setFormValue(query) // update form value\n this.ifxInput.emit(this.value);\n }\n\n handleTypeProp() {\n this.internalType = this.type === 'text' \|\| this.type === 'password' ? this.type : 'text';\n }\n\n // formResetCallback() {\n // this.internals.setValidity({});\n // this.internals.setFormValue(\"\");\n // }\n\n componentWillLoad() {\n this.handleTypeProp();\n }\n\n async componentDidLoad() {\n if (!isNestedInIfxComponent(this.el)) {\n const framework = detectFramework();\n trackComponent('ifx-text-field', await framework);\n }\n }\n\n render() {\n return (\n <div\n aria-label=\"a text field for user input\"\n aria-value={this.value}\n aria-disabled={this.disabled}\n class={`textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}`}\n >\n <div class=\"textInput__top-wrapper\">\n {this.label && (\n <label htmlFor={this.internalId}>\n <span>{this.label}</span>\n {this.required && <span class={`required ${this.error && !this.readOnly ? 'error' : ''}`}>*</span>}\n </label>\n )}\n </div>\n\n <div class=\"textInput__bottom-wrapper\">\n <div class=\"input-container\">\n {this.icon && <ifx-icon class=\"input-icon\" icon={this.icon} />}\n <input\n ref={el => (this.inputElement = el)}\n disabled={this.disabled && !this.error}\n autocomplete={this.autocomplete}\n type={this.internalType}\n id={this.internalId}\n value={this.value}\n onInput={() => this.handleInput()}\n placeholder={this.placeholder}\n readonly={this.readOnly}\n maxlength={this.maxlength}\n class={`${this.icon ? 'icon' : ''}\n ${this.error ? 'error' : ''} \n ${this.readOnly ? 'readonly' : ''} \n ${this.size === 's' ? 'input-s' : ''}\n ${this.success ? 'success' : ''}`}\n />\n\n {this.showDeleteIcon && this.value && <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon>}\n </div>\n {this.caption && (\n <div class={`textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}`}>\n {this.caption}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Event, Element, Prop, EventEmitter, Watch, Method, AttachInternals, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n tag: 'ifx-text-field',\r\n styleUrl: 'text-field.scss',\r\n shadow: true,\r\n // formAssociated: true\r\n})\r\nexport class TextField {\r\n private inputElement: HTMLInputElement;\r\n @Element() el;\r\n @Prop() placeholder: string = 'Placeholder';\r\n @Prop({ mutable: true }) value: string = '';\r\n @Prop() error: boolean = false;\r\n @Prop() label: string = '';\r\n @Prop() icon: string = '';\r\n @Prop() caption: string = '';\r\n @Prop() size: string = 'm';\r\n @Prop() required: boolean = false;\r\n @Prop() success: boolean = false;\r\n @Prop() disabled: boolean = false;\r\n @Prop() readOnly: boolean = false;\r\n @Prop() maxlength?: number;\r\n @Prop() showDeleteIcon: boolean = false;\r\n @Prop() autocomplete: string = 'on';\r\n @Prop() type: 'text' \| 'password' = 'text';\r\n @Prop() internalId: string = 'text-field';\r\n @State() internalType: string;\r\n @Event() ifxInput: EventEmitter<String>;\r\n // @Prop({ reflect: true })\r\n // resetOnSubmit: boolean = false;\r\n\r\n @AttachInternals() internals: ElementInternals;\r\n\r\n @Watch('value')\r\n valueWatcher(newValue: string) {\r\n if (newValue !== this.inputElement.value) {\r\n this.inputElement.value = newValue;\r\n }\r\n }\r\n\r\n @Method()\r\n async reset() {\r\n this.value = '';\r\n this.inputElement.value = '';\r\n }\r\n\r\n handleDeleteContent() {\r\n if (!this.disabled && !this.readOnly) {\r\n this.reset();\r\n this.ifxInput.emit(this.value);\r\n }\r\n }\r\n\r\n handleInput() {\r\n const query = this.inputElement.value;\r\n this.value = query;\r\n //this.internals.setFormValue(query) // update form value\r\n this.ifxInput.emit(this.value);\r\n }\r\n\r\n handleTypeProp() {\r\n this.internalType = this.type === 'text' \|\| this.type === 'password' ? this.type : 'text';\r\n }\r\n\r\n // formResetCallback() {\r\n // this.internals.setValidity({});\r\n // this.internals.setFormValue(\"\");\r\n // }\r\n\r\n componentWillLoad() {\r\n this.handleTypeProp();\r\n }\r\n\r\n async componentDidLoad() {\r\n if (!isNestedInIfxComponent(this.el)) {\r\n const framework = detectFramework();\r\n trackComponent('ifx-text-field', await framework);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n aria-label=\"a text field for user input\"\r\n aria-value={this.value}\r\n aria-disabled={this.disabled}\r\n class={`textInput__container ${this.readOnly ? 'readonly' : ''} ${this.disabled && !this.error ? 'disabled' : ''}`}\r\n >\r\n <div class=\"textInput__top-wrapper\">\r\n {this.label && (\r\n <label htmlFor={this.internalId}>\r\n <span>{this.label}</span>\r\n {this.required && <span class={`required ${this.error && !this.readOnly ? 'error' : ''}`}>*</span>}\r\n </label>\r\n )}\r\n </div>\r\n\r\n <div class=\"textInput__bottom-wrapper\">\r\n <div class=\"input-container\">\r\n {this.icon && <ifx-icon class=\"input-icon\" icon={this.icon} />}\r\n <input\r\n ref={el => (this.inputElement = el)}\r\n disabled={this.disabled && !this.error}\r\n autocomplete={this.autocomplete}\r\n type={this.internalType}\r\n id={this.internalId}\r\n value={this.value}\r\n onInput={() => this.handleInput()}\r\n placeholder={this.placeholder}\r\n readonly={this.readOnly}\r\n maxlength={this.maxlength}\r\n class={`${this.icon ? 'icon' : ''}\r\n ${this.error ? 'error' : ''} \r\n ${this.readOnly ? 'readonly' : ''} \r\n ${this.size === 's' ? 'input-s' : ''}\r\n ${this.success ? 'success' : ''}`}\r\n />\r\n\r\n {this.showDeleteIcon && this.value && <ifx-icon class=\"delete-icon\" icon=\"cRemove16\" onClick={() => this.handleDeleteContent()}></ifx-icon>}\r\n </div>\r\n {this.caption && (\r\n <div class={`textInput__bottom-wrapper-caption ${this.error && !this.readOnly ? 'error' : ''} ${this.disabled && !this.readOnly && !this.error ? 'disabled' : ''}`}>\r\n {this.caption}\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/text-field/text-field.stories.js CHANGED Viewed

@@ -88,7 +88,7 @@ export default {
         },
         readOnly: {
             name: 'read-only',
-            description: `Text cannot be edited when set to true.\n
+            description: `Text cannot be edited when set to true.\n
 *Note: It is different from disabled prop, control is focusable in readOnly mode unlike disabled.*`,
             table: {
                 category: 'ifx-text-field props',

package/dist/collection/components/text-field/text-field.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-field.stories.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Text Field',\n // tags: ['autodocs'],\n\n args: {\n label: 'Label',\n error: false,\n disabled: false,\n size: 'm',\n icon: '',\n success: false,\n placeholder: 'Placeholder',\n readOnly: false,\n caption: 'Caption',\n required: true,\n\n name: 'text-field',\n showDeleteIcon: false,\n maxlength: '',\n value: '',\n autocomplete: 'on',\n type: 'text',\n internalId: 'text-field',\n ariaLabel: 'text field for user input'\n },\n\n argTypes: {\n label: {\n name: 'Label of Text Field',\n description: 'The text label displayed above the <ifx-text-field>.',\n table: {\n category: 'ifx-text-field props',\n }\n },\n error: {\n description: 'Indicates an error state for the text field.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n disabled: {\n description: 'Disables the text field.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n size: {\n description: 'Size options: s (36px) and m (40px) - default: m',\n options: ['s', 'm'],\n control: 'radio',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: 'm'\n }\n }\n },\n icon: {\n description: 'Specifies an icon to display within the text field.',\n options: Object.keys(icons),\n control: 'select',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: ''\n }\n }\n },\n success: {\n description: 'Indicates a successful state for the text field.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n placeholder: {\n description: 'Displays a placeholder text inside the text field when it is empty.',\n table: {\n category: 'ifx-text-field props',\n }\n },\n readOnly: {\n\t\t\tname: 'read-only',\n\t\t\tdescription: `Text cannot be edited when set to true.\\n \nNote: It is different from disabled prop, control is focusable in readOnly mode unlike disabled.`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-text-field props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'false',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n caption: {\n description: 'Text displayed below the text field to provide additional information.',\n table: {\n category: 'ifx-text-field props',\n }\n },\n required: {\n description: 'Marks the text field as required for form submission. Displays an asterisk next to the label when set to true.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: true\n }\n }\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.',\n table: {\n category: 'ifx-text-field props',\n }\n },\n showDeleteIcon: {\n description: 'Displays a delete icon inside the text field when set to true, allowing user to clear the input content.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n maxlength: {\n description: 'Specifies the maximum number of characters that can be entered into the text field.',\n control: 'number',\n table: {\n category: 'ifx-text-field props',\n }\n },\n value: {\n description: 'The value of the text field. It is used for the form submission.',\n control: 'text',\n table: {\n category: 'ifx-text-field props',\n type: {\n summary: 'string'\n }\n }\n },\n internalId: {\n description: 'Sets the ID of the internal input and the value of htmlFor for the label element',\n control: 'text',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: 'text-field'\n },\n type: {\n summary: 'string'\n }\n }\n },\n autocomplete: {\n description: 'Sets the autocomplete attribute. \"on\" by default.',\n control: 'text',\n table: {\n category: 'ifx-text-field props',\n type: {\n summary: 'string'\n }\n }\n },\n type: {\n description: 'Sets the type attribute. \"Text\" by default.',\n options: ['text', 'password'],\n control: 'radio',\n table: {\n category: 'ifx-text-field props',\n type: {\n summary: 'string'\n },\n defaultValue: {\n summary: 'text'\n }\n }\n },\n ariaLabel: {\n description: 'Aria label of the Tag.',\n control: 'text',\n table: {\n category: 'ARIA Labels',\n defaultValue: {\n summary: '',\n },\n type: {\n summary: 'string',\n },\n },\n },\n ifxInput: {\n action: 'ifxInput',\n description: 'Custom event emitted on input change.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, placeholder, readOnly, label, caption, icon, required, name, maxlength, showDeleteIcon, value, autocomplete, type, internalId, ariaLabel }) => {\n const element = document.createElement('ifx-text-field');\n element.setAttribute('error', error);\n element.setAttribute('disabled', disabled);\n element.setAttribute('size', size);\n element.setAttribute('icon', icon);\n element.setAttribute('success', success);\n element.setAttribute('placeholder', placeholder);\n element.setAttribute('read-only', readOnly);\n element.setAttribute('caption', caption);\n element.setAttribute('label', label);\n element.setAttribute('required', required);\n element.setAttribute('name', name);\n element.setAttribute('show-delete-icon', showDeleteIcon);\n element.setAttribute('value', value);\n element.setAttribute('autocomplete', autocomplete);\n element.setAttribute('type', type);\n element.setAttribute('internal-id', internalId);\n element.setAttribute('aria-label', ariaLabel);\n if (maxlength) element.setAttribute('maxlength', maxlength);\n\n element.addEventListener('ifxInput', action('ifxInput'));\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
1	+ {"version":3,"file":"text-field.stories.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\r\nimport { icons } from '@infineon/infineon-icons';\r\n\r\nexport default {\r\n title: 'Components/Text Field',\r\n // tags: ['autodocs'],\r\n\r\n args: {\r\n label: 'Label',\r\n error: false,\r\n disabled: false,\r\n size: 'm',\r\n icon: '',\r\n success: false,\r\n placeholder: 'Placeholder',\r\n readOnly: false,\r\n caption: 'Caption',\r\n required: true,\r\n\r\n name: 'text-field',\r\n showDeleteIcon: false,\r\n maxlength: '',\r\n value: '',\r\n autocomplete: 'on',\r\n type: 'text',\r\n internalId: 'text-field',\r\n ariaLabel: 'text field for user input'\r\n },\r\n\r\n argTypes: {\r\n label: {\r\n name: 'Label of Text Field',\r\n description: 'The text label displayed above the <ifx-text-field>.',\r\n table: {\r\n category: 'ifx-text-field props',\r\n }\r\n },\r\n error: {\r\n description: 'Indicates an error state for the text field.',\r\n table: {\r\n category: 'ifx-text-field props',\r\n defaultValue: {\r\n summary: false\r\n }\r\n }\r\n },\r\n disabled: {\r\n description: 'Disables the text field.',\r\n table: {\r\n category: 'ifx-text-field props',\r\n defaultValue: {\r\n summary: false\r\n }\r\n }\r\n },\r\n size: {\r\n description: 'Size options: s (36px) and m (40px) - default: m',\r\n options: ['s', 'm'],\r\n control: 'radio',\r\n table: {\r\n category: 'ifx-text-field props',\r\n defaultValue: {\r\n summary: 'm'\r\n }\r\n }\r\n },\r\n icon: {\r\n description: 'Specifies an icon to display within the text field.',\r\n options: Object.keys(icons),\r\n control: 'select',\r\n table: {\r\n category: 'ifx-text-field props',\r\n defaultValue: {\r\n summary: ''\r\n }\r\n }\r\n },\r\n success: {\r\n description: 'Indicates a successful state for the text field.',\r\n table: {\r\n category: 'ifx-text-field props',\r\n defaultValue: {\r\n summary: false\r\n }\r\n }\r\n },\r\n placeholder: {\r\n description: 'Displays a placeholder text inside the text field when it is empty.',\r\n table: {\r\n category: 'ifx-text-field props',\r\n }\r\n },\r\n readOnly: {\r\n\t\t\tname: 'read-only',\r\n\t\t\tdescription: `Text cannot be edited when set to true.\\n \r\nNote: It is different from disabled prop, control is focusable in readOnly mode unlike disabled.`,\r\n\t\t\ttable: {\r\n\t\t\t\tcategory: 'ifx-text-field props',\r\n\t\t\t\tdefaultValue: {\r\n\t\t\t\t\tsummary: 'false',\r\n\t\t\t\t},\r\n\t\t\t},\r\n\t\t},\r\n caption: {\r\n description: 'Text displayed below the text field to provide additional information.',\r\n table: {\r\n category: 'ifx-text-field props',\r\n }\r\n },\r\n required: {\r\n description: 'Marks the text field as required for form submission. Displays an asterisk next to the label when set to true.',\r\n table: {\r\n category: 'ifx-text-field props',\r\n defaultValue: {\r\n summary: true\r\n }\r\n }\r\n },\r\n name: {\r\n description: 'Name of the element, that is used as reference when a form is submitted.',\r\n table: {\r\n category: 'ifx-text-field props',\r\n }\r\n },\r\n showDeleteIcon: {\r\n description: 'Displays a delete icon inside the text field when set to true, allowing user to clear the input content.',\r\n table: {\r\n category: 'ifx-text-field props',\r\n defaultValue: {\r\n summary: false\r\n }\r\n }\r\n },\r\n maxlength: {\r\n description: 'Specifies the maximum number of characters that can be entered into the text field.',\r\n control: 'number',\r\n table: {\r\n category: 'ifx-text-field props',\r\n }\r\n },\r\n value: {\r\n description: 'The value of the text field. It is used for the form submission.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-text-field props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n internalId: {\r\n description: 'Sets the ID of the internal input and the value of htmlFor for the label element',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-text-field props',\r\n defaultValue: {\r\n summary: 'text-field'\r\n },\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n autocomplete: {\r\n description: 'Sets the autocomplete attribute. \"on\" by default.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-text-field props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n type: {\r\n description: 'Sets the type attribute. \"Text\" by default.',\r\n options: ['text', 'password'],\r\n control: 'radio',\r\n table: {\r\n category: 'ifx-text-field props',\r\n type: {\r\n summary: 'string'\r\n },\r\n defaultValue: {\r\n summary: 'text'\r\n }\r\n }\r\n },\r\n ariaLabel: {\r\n description: 'Aria label of the Tag.',\r\n control: 'text',\r\n table: {\r\n category: 'ARIA Labels',\r\n defaultValue: {\r\n summary: '',\r\n },\r\n type: {\r\n summary: 'string',\r\n },\r\n },\r\n },\r\n ifxInput: {\r\n action: 'ifxInput',\r\n description: 'Custom event emitted on input change.',\r\n table: {\r\n category: 'custom events',\r\n type: {\r\n summary: 'Framework integration',\r\n detail:\r\n 'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\r\n },\r\n },\r\n },\r\n },\r\n};\r\n\r\nconst DefaultTemplate = ({ error, disabled, success, size, placeholder, readOnly, label, caption, icon, required, name, maxlength, showDeleteIcon, value, autocomplete, type, internalId, ariaLabel }) => {\r\n const element = document.createElement('ifx-text-field');\r\n element.setAttribute('error', error);\r\n element.setAttribute('disabled', disabled);\r\n element.setAttribute('size', size);\r\n element.setAttribute('icon', icon);\r\n element.setAttribute('success', success);\r\n element.setAttribute('placeholder', placeholder);\r\n element.setAttribute('read-only', readOnly);\r\n element.setAttribute('caption', caption);\r\n element.setAttribute('label', label);\r\n element.setAttribute('required', required);\r\n element.setAttribute('name', name);\r\n element.setAttribute('show-delete-icon', showDeleteIcon);\r\n element.setAttribute('value', value);\r\n element.setAttribute('autocomplete', autocomplete);\r\n element.setAttribute('type', type);\r\n element.setAttribute('internal-id', internalId);\r\n element.setAttribute('aria-label', ariaLabel);\r\n if (maxlength) element.setAttribute('maxlength', maxlength);\r\n\r\n element.addEventListener('ifxInput', action('ifxInput'));\r\n\r\n return element;\r\n};\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n"]}

package/dist/collection/components/textarea/textarea.js CHANGED Viewed

@@ -54,8 +54,8 @@ export class TextArea {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '78ee16999292032b82986fe1e356e7f15609f0f4', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled && !this.error ? 'disabled' : ''}` }, h("label", { key: 'a4faec9c9761ef71c2025d9d5c6f6c8637786bbe', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.trim(), this.required && (h("span", { key: '7dba2fdd58743c379597dc59d839d8cb32dadbc1', class: `required ${this.error ? 'error' : ""}` }, "*"))), h("div", { key: 'ce8d1a3c5f53ab7a378ac475b008d033e746db8d', class: 'wrapper__textarea' }, h("textarea", { key: 'ab8d751375870e9293644d6f69c329afac342504', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled && !this.error, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled && !this.error, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'f9a033dd8fa43d821f0476f38161bb2dbf683432', class: 'wrapper__caption' }, this.caption.trim()))));
+        return (h(Host, { key: 'a9f618b92f2720f7bf197e371af943aa2422f70c', class: `wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled && !this.error ? 'disabled' : ''}` }, h("label", { key: '52ea7e0eb40c9748083a9773fcc85fd740840e02', class: 'wrapper__label', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.trim(), this.required && (h("span", { key: '72297526f3f916daed89166c976aaeece30a74cb', class: `required ${this.error ? 'error' : ""}` }, "*"))), h("div", { key: '303064596188f7d41df4006ef017446fe75bfacb', class: 'wrapper__textarea' }, h("textarea", { key: '8aac393a2ae65d663de9c0abd2a69f823c5ebdd4', "aria-label": 'a textarea', "aria-value": this.value, "aria-disabled": this.disabled && !this.error, id: this.inputId, style: { resize: this.resize }, name: this.name ? this.name : this.inputId, cols: this.cols, rows: this.rows, maxlength: this.maxlength, wrap: this.wrap, disabled: this.disabled && !this.error, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, onInput: (e) => this.handleOnInput(e) })), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: 'ab644ae0fd95135ec150ebe3cae25bde377133c0', class: 'wrapper__caption' }, this.caption.trim()))));
     }
     static get is() { return "ifx-textarea"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n\t// formAssociated: true,\n\tshadow: true,\n\tstyleUrl: 'textarea.scss',\n\ttag: 'ifx-textarea'\n})\n\nexport class TextArea {\n\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\n\n\t@AttachInternals() internals: ElementInternals;\n\n\t@Event() ifxInput: EventEmitter<String>;\n\t@Element() el;\n\t@Prop() caption: string;\n\t@Prop() cols: number;\n\t@Prop() disabled: boolean = false;\n\t@Prop() error: boolean = false;\n\t@Prop() label: string;\n\t@Prop() maxlength: number;\n\t@Prop() name: string;\n\t@Prop() placeholder: string;\n\t@Prop() required: boolean = false;\n\t@Prop() readOnly: boolean = false;\n\t@Prop() resize: 'both' \| 'horizontal' \| 'vertical' \| 'none' = 'both';\n\t@Prop() rows: number;\n\t@Prop({ mutable: true }) value: string;\n\t@Prop() wrap: 'hard' \| 'soft' \| 'off' = 'soft';\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\n\n\t@Method()\n\tasync reset() {\n\t\tthis.resetTextarea();\n\t}\n\n\thandleComponentWidth() {\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\n\n\t\tif (isFullWidth) {\n\t\t\ttextareaWrapper.classList.add('fullWidth')\n\t\t} else if (textareaWrapper.classList.contains('fullWidth')) {\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\n\t\t}\n\t}\n\n\tcomponentDidRender() {\n\t\tthis.handleComponentWidth()\n\t}\n\n\tformResetCallback(): void {\n\t\tthis.resetTextarea();\n\t\t//this.internals.setFormValue(\"\");\n\t}\n\n\thandleOnInput(e: InputEvent): void {\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\n\t\t//this.internals.setFormValue(this.value);\n\t\tthis.ifxInput.emit(this.value);\n\t}\n\n\tresetTextarea() {\n\t\tthis.value = '';\n\t\t//this.internals.setValidity({});\n\t\t//this.internals.setFormValue('');\n\t}\n\n\t// componentWillLoad() {\n\t// \tthis.internals.setFormValue(this.value);\n\t// }\n\n\t\tasync componentDidLoad() { \n\t\tif(!isNestedInIfxComponent(this.el)) { \n\t\t\tconst framework = detectFramework();\n\t\t\ttrackComponent('ifx-textarea', await framework)\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled && !this.error ? 'disabled' : ''}`}>\n\t\t\t\t<label class='wrapper__label' htmlFor={this.inputId}>\n\t\t\t\t\t{this.label?.trim()}\n\t\t\t\t\t{this.required && (\n\t\t\t\t\t\t<span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\n\t\t\t\t\t)}\n\t\t\t\t</label>\n\n\t\t\t\t<div class='wrapper__textarea'>\n\t\t\t\t\t<textarea\n\t\t\t\t\t\taria-label='a textarea'\n\t\t\t\t\t\taria-value={this.value}\n\t\t\t\t\t\taria-disabled={this.disabled && !this.error}\n\t\t\t\t\t\tid={this.inputId}\n\t\t\t\t\t\tstyle={{ resize: this.resize }}\n\t\t\t\t\t\tname={this.name ? this.name : this.inputId}\n\t\t\t\t\t\tcols={this.cols}\n\t\t\t\t\t\trows={this.rows}\n\t\t\t\t\t\tmaxlength={this.maxlength}\n\t\t\t\t\t\twrap={this.wrap}\n\t\t\t\t\t\tdisabled={this.disabled && !this.error}\n\t\t\t\t\t\treadonly={this.readOnly}\n\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tonInput={(e) => this.handleOnInput(e)}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{this.caption?.trim() && (\n\t\t\t\t\t<div class='wrapper__caption'>\n\t\t\t\t\t\t{this.caption.trim()}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n\nlet textareaId = 0;"]}
1	+ {"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, AttachInternals, Component, Event, EventEmitter, Host, Method, Prop, Element } from \"@stencil/core\"\r\nimport { trackComponent } from '../../global/utils/tracking';\r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\n\r\n@Component({\r\n\t// formAssociated: true,\r\n\tshadow: true,\r\n\tstyleUrl: 'textarea.scss',\r\n\ttag: 'ifx-textarea'\r\n})\r\n\r\nexport class TextArea {\r\n\r\n\tprivate inputId: string = `ifx-textarea-${++textareaId}`;\r\n\r\n\t@AttachInternals() internals: ElementInternals;\r\n\r\n\t@Event() ifxInput: EventEmitter<String>;\r\n\t@Element() el;\r\n\t@Prop() caption: string;\r\n\t@Prop() cols: number;\r\n\t@Prop() disabled: boolean = false;\r\n\t@Prop() error: boolean = false;\r\n\t@Prop() label: string;\r\n\t@Prop() maxlength: number;\r\n\t@Prop() name: string;\r\n\t@Prop() placeholder: string;\r\n\t@Prop() required: boolean = false;\r\n\t@Prop() readOnly: boolean = false;\r\n\t@Prop() resize: 'both' \| 'horizontal' \| 'vertical' \| 'none' = 'both';\r\n\t@Prop() rows: number;\r\n\t@Prop({ mutable: true }) value: string;\r\n\t@Prop() wrap: 'hard' \| 'soft' \| 'off' = 'soft';\r\n\t@Prop({ reflect: true }) fullWidth: string = \"false\";\r\n\r\n\t@Method()\r\n\tasync reset() {\r\n\t\tthis.resetTextarea();\r\n\t}\r\n\r\n\thandleComponentWidth() {\r\n\t\tconst textareaWrapper = this.el.shadowRoot.querySelector('.wrapper__textarea')\r\n\t\tconst isFullWidth = this.fullWidth.toLowerCase() === \"true\";\r\n\r\n\t\tif (isFullWidth) {\r\n\t\t\ttextareaWrapper.classList.add('fullWidth')\r\n\t\t} else if (textareaWrapper.classList.contains('fullWidth')) {\r\n\t\t\ttextareaWrapper.classList.remove('fullWidth');\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidRender() {\r\n\t\tthis.handleComponentWidth()\r\n\t}\r\n\r\n\tformResetCallback(): void {\r\n\t\tthis.resetTextarea();\r\n\t\t//this.internals.setFormValue(\"\");\r\n\t}\r\n\r\n\thandleOnInput(e: InputEvent): void {\r\n\t\tthis.value = (e.target as HTMLTextAreaElement).value;\r\n\t\t//this.internals.setFormValue(this.value);\r\n\t\tthis.ifxInput.emit(this.value);\r\n\t}\r\n\r\n\tresetTextarea() {\r\n\t\tthis.value = '';\r\n\t\t//this.internals.setValidity({});\r\n\t\t//this.internals.setFormValue('');\r\n\t}\r\n\r\n\t// componentWillLoad() {\r\n\t// \tthis.internals.setFormValue(this.value);\r\n\t// }\r\n\r\n\t\tasync componentDidLoad() { \r\n\t\tif(!isNestedInIfxComponent(this.el)) { \r\n\t\t\tconst framework = detectFramework();\r\n\t\t\ttrackComponent('ifx-textarea', await framework)\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<Host class={`wrapper--${this.error ? 'error' : ''} wrapper--${this.disabled && !this.error ? 'disabled' : ''}`}>\r\n\t\t\t\t<label class='wrapper__label' htmlFor={this.inputId}>\r\n\t\t\t\t\t{this.label?.trim()}\r\n\t\t\t\t\t{this.required && (\r\n\t\t\t\t\t\t<span class={`required ${this.error ? 'error' : \"\"}`}>*</span>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</label>\r\n\r\n\t\t\t\t<div class='wrapper__textarea'>\r\n\t\t\t\t\t<textarea\r\n\t\t\t\t\t\taria-label='a textarea'\r\n\t\t\t\t\t\taria-value={this.value}\r\n\t\t\t\t\t\taria-disabled={this.disabled && !this.error}\r\n\t\t\t\t\t\tid={this.inputId}\r\n\t\t\t\t\t\tstyle={{ resize: this.resize }}\r\n\t\t\t\t\t\tname={this.name ? this.name : this.inputId}\r\n\t\t\t\t\t\tcols={this.cols}\r\n\t\t\t\t\t\trows={this.rows}\r\n\t\t\t\t\t\tmaxlength={this.maxlength}\r\n\t\t\t\t\t\twrap={this.wrap}\r\n\t\t\t\t\t\tdisabled={this.disabled && !this.error}\r\n\t\t\t\t\t\treadonly={this.readOnly}\r\n\t\t\t\t\t\tplaceholder={this.placeholder}\r\n\t\t\t\t\t\tvalue={this.value}\r\n\t\t\t\t\t\tonInput={(e) => this.handleOnInput(e)}\r\n\t\t\t\t\t/>\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t{this.caption?.trim() && (\r\n\t\t\t\t\t<div class='wrapper__caption'>\r\n\t\t\t\t\t\t{this.caption.trim()}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n}\r\n\r\nlet textareaId = 0;"]}