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

@infineon/infineon-design-system-stencil 39.4.4-canary.0 → 39.5.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 (1210) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\r\nimport { createPopper } from '@popperjs/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-tooltip',\r\n styleUrl: 'tooltip.scss',\r\n shadow: true\r\n})\r\nexport class Tooltip {\r\n\r\n @Element() el: HTMLElement;\r\n @State() tooltipVisible: boolean = false;\r\n @Prop() header: string = '';\r\n @Prop() text: string = '';\r\n @Prop() position: 'bottom-start' \| 'top-start' \| 'left' \| 'bottom-end' \| 'top-end' \| 'right' \| 'bottom' \| 'top' \| 'auto' = 'auto';\r\n @State() internalPosition: 'bottom-start' \| 'top-start' \| 'left' \| 'bottom-end' \| 'top-end' \| 'right' \| 'bottom' \| 'top' \| 'auto' = 'auto';\r\n @Prop() ariaLabel: string \| null;\r\n @Prop() variant: 'compact' \| 'dismissible' \| 'extended' = 'compact';\r\n @Prop() icon: string;\r\n\r\n tooltipEl: HTMLElement;\r\n referenceEl: HTMLElement;\r\n popperInstance: any = null;\r\n\r\n\r\n componentWillLoad() { \r\n if(this.variant.toLowerCase().trim() === \"\") { \r\n this.variant = 'compact'\r\n }\r\n }\r\n \r\n async componentDidLoad() {\r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-tooltip', await framework)\r\n }\r\n const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\r\n \r\n if(this.variant.toLowerCase() === 'compact' \|\| this.variant.toLowerCase() === 'extended') {\r\n slotElement.addEventListener('mouseenter', this.onMouseEnter)\r\n slotElement.addEventListener('mouseleave', this.onMouseLeave)\r\n }else{\r\n slotElement.addEventListener('click', this.onClick);\r\n }\r\n\r\n }\r\n\r\n initializePopper() {\r\n if (this.popperInstance) return;\r\n\r\n this.referenceEl = this.el;\r\n this.tooltipEl;\r\n if (this.variant.toLowerCase() === 'compact') {\r\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\r\n }\r\n else if (this.variant.toLowerCase() === 'dismissible') {\r\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\r\n }\r\n else {\r\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\r\n\r\n }\r\n\r\n const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\r\n\r\n // Set the internalPosition\r\n this.internalPosition = effectivePosition;\r\n\r\n if (this.tooltipEl && this.referenceEl) {\r\n\r\n this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\r\n placement: this.internalPosition,\r\n modifiers: [\r\n {\r\n name: 'offset',\r\n options: {\r\n offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\r\n }\r\n },\r\n {\r\n name: 'arrow',\r\n options: {\r\n element: '.tooltip-arrow-svg'\r\n }\r\n }\r\n ]\r\n });\r\n\r\n }\r\n\r\n // Add this line to set the 'data-placement' attribute on the tooltip\r\n this.tooltipEl.setAttribute('data-placement', effectivePosition);\r\n\r\n\r\n }\r\n\r\n determineBestPosition() {\r\n // This is a simplified version, you can enhance this based on available viewport space.\r\n const rect = this.referenceEl.getBoundingClientRect();\r\n const yOffset = window.scrollY; // Get current scroll position\r\n const xOffset = window.scrollX; // Get current horizontal scroll position\r\n\r\n const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\r\n const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\r\n\r\n if (this.position === 'auto') {\r\n if (verticalHalfwayPoint > window.innerHeight / 2) {\r\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\r\n return 'top-end';\r\n } else {\r\n return 'top-start';\r\n }\r\n } else {\r\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\r\n return 'bottom-end';\r\n } else {\r\n return 'bottom-start';\r\n }\r\n }\r\n } else {\r\n return this.position;\r\n }\r\n }\r\n\r\n @Watch('position')\r\n positionChanged(newVal: any) {\r\n this.internalPosition = newVal;\r\n this.popperInstance?.destroy();\r\n this.popperInstance = null; // Force re-initialization on next mouse enter\r\n }\r\n\r\n\r\n\r\n onMouseEnter = () => {\r\n // Enable the event listeners immediately\r\n this.popperInstance?.setOptions((options) => ({\r\n ...options,\r\n modifiers: [\r\n ...options.modifiers,\r\n { name: 'eventListeners', enabled: true },\r\n ],\r\n }));\r\n\r\n // Initialize the popper instance\r\n this.initializePopper();\r\n\r\n // Make the tooltip visible\r\n this.tooltipVisible = true;\r\n this.tooltipEl.style.display = 'block';\r\n\r\n // Update the popper instance immediately after initialization\r\n this.popperInstance?.update();\r\n }\r\n\r\n\r\n onMouseLeave = () => {\r\n this.tooltipVisible = false;\r\n this.tooltipEl.style.display = 'none';\r\n\r\n }\r\n\r\n disconnectedCallback() {\r\n this.popperInstance?.destroy();\r\n }\r\n\r\n onClick = () => {\r\n if (this.variant.toLowerCase() === 'dismissible') {\r\n this.initializePopper();\r\n this.tooltipVisible = !this.tooltipVisible;\r\n this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\r\n this.popperInstance?.update();\r\n }\r\n }\r\n\r\n onDismissClick = () => {\r\n this.tooltipVisible = false;\r\n this.tooltipEl.style.display = 'none';\r\n }\r\n\r\n render() {\r\n const tooltipDismissible = {\r\n 'tooltip-dismissible': true,\r\n 'visible': this.tooltipVisible,\r\n };\r\n\r\n const tooltipCompact = {\r\n 'tooltip-compact': true,\r\n 'visible': this.tooltipVisible,\r\n };\r\n\r\n const tooltipExtended = {\r\n 'tooltip-extended': true,\r\n 'visible': this.tooltipVisible,\r\n };\r\n\r\n return (\r\n <div aria-label={this.ariaLabel} aria-value={this.header} class=\"tooltip__container\" >\r\n <slot></slot>\r\n\r\n {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\r\n <button aria-label=\"Close Tooltip\" class=\"close-button\" onClick={this.onDismissClick}>\r\n <ifx-icon icon=\"cross16\"></ifx-icon>\r\n </button>\r\n <div class=\"tooltip-dismissible-content\">\r\n {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\r\n <div class=\"tooltip-dismissible-body\">{this.text}</div>\r\n </div>\r\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\r\n </svg>\r\n </div>\r\n }\r\n {this.variant.toLowerCase() === 'compact' &&\r\n <div class={tooltipCompact}>\r\n {this.text}\r\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\r\n </svg>\r\n </div>\r\n }\r\n {this.variant.toLowerCase() === 'extended' &&\r\n <div class={tooltipExtended}>\r\n <slot name=\"icon\">\r\n {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\r\n <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\r\n <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\r\n <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\r\n <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\r\n </svg>\r\n }\r\n </slot>\r\n <div class=\"tooltip-extended-content\">\r\n {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\r\n <div class=\"tooltip-extended-body\">{this.text}</div>\r\n </div>\r\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\r\n </svg>\r\n </div >\r\n }\r\n </div>\r\n );\r\n }\r\n\r\n\r\n}"]}
1	+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/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-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true\n})\nexport class Tooltip {\n\n @Element() el: HTMLElement;\n @State() tooltipVisible: boolean = false;\n @Prop() header: string = '';\n @Prop() text: string = '';\n @Prop() position: 'bottom-start' \| 'top-start' \| 'left' \| 'bottom-end' \| 'top-end' \| 'right' \| 'bottom' \| 'top' \| 'auto' = 'auto';\n @State() internalPosition: 'bottom-start' \| 'top-start' \| 'left' \| 'bottom-end' \| 'top-end' \| 'right' \| 'bottom' \| 'top' \| 'auto' = 'auto';\n @Prop() ariaLabel: string \| null;\n @Prop() variant: 'compact' \| 'dismissible' \| 'extended' = 'compact';\n @Prop() icon: string;\n\n tooltipEl: HTMLElement;\n referenceEl: HTMLElement;\n popperInstance: any = null;\n\n\n componentWillLoad() { \n if(this.variant.toLowerCase().trim() === \"\") { \n this.variant = 'compact'\n }\n }\n \n async componentDidLoad() {\n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-tooltip', await framework)\n }\n const slotElement = this.el.shadowRoot.querySelector('.tooltip__container').firstChild;\n \n if(this.variant.toLowerCase() === 'compact' \|\| this.variant.toLowerCase() === 'extended') {\n slotElement.addEventListener('mouseenter', this.onMouseEnter)\n slotElement.addEventListener('mouseleave', this.onMouseLeave)\n }else{\n slotElement.addEventListener('click', this.onClick);\n }\n\n }\n\n initializePopper() {\n if (this.popperInstance) return;\n\n this.referenceEl = this.el;\n this.tooltipEl;\n if (this.variant.toLowerCase() === 'compact') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-compact');\n }\n else if (this.variant.toLowerCase() === 'dismissible') {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-dismissible');\n }\n else {\n this.tooltipEl = this.el.shadowRoot.querySelector('.tooltip-extended');\n\n }\n\n const effectivePosition = this.position === 'auto' ? this.determineBestPosition() : this.position;\n\n // Set the internalPosition\n this.internalPosition = effectivePosition;\n\n if (this.tooltipEl && this.referenceEl) {\n\n this.popperInstance = createPopper(this.referenceEl, this.tooltipEl, {\n placement: this.internalPosition,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8] // this offset should be adjusted to ensure the tooltip doesn't overlap its reference element\n }\n },\n {\n name: 'arrow',\n options: {\n element: '.tooltip-arrow-svg'\n }\n }\n ]\n });\n\n }\n\n // Add this line to set the 'data-placement' attribute on the tooltip\n this.tooltipEl.setAttribute('data-placement', effectivePosition);\n\n\n }\n\n determineBestPosition() {\n // This is a simplified version, you can enhance this based on available viewport space.\n const rect = this.referenceEl.getBoundingClientRect();\n const yOffset = window.scrollY; // Get current scroll position\n const xOffset = window.scrollX; // Get current horizontal scroll position\n\n const verticalHalfwayPoint = rect.top + yOffset + rect.height / 2;\n const horizontalHalfwayPoint = rect.left + xOffset + rect.width / 2;\n\n if (this.position === 'auto') {\n if (verticalHalfwayPoint > window.innerHeight / 2) {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'top-end';\n } else {\n return 'top-start';\n }\n } else {\n if (horizontalHalfwayPoint > window.innerWidth / 2) {\n return 'bottom-end';\n } else {\n return 'bottom-start';\n }\n }\n } else {\n return this.position;\n }\n }\n\n @Watch('position')\n positionChanged(newVal: any) {\n this.internalPosition = newVal;\n this.popperInstance?.destroy();\n this.popperInstance = null; // Force re-initialization on next mouse enter\n }\n\n\n\n onMouseEnter = () => {\n // Enable the event listeners immediately\n this.popperInstance?.setOptions((options) => ({\n ...options,\n modifiers: [\n ...options.modifiers,\n { name: 'eventListeners', enabled: true },\n ],\n }));\n\n // Initialize the popper instance\n this.initializePopper();\n\n // Make the tooltip visible\n this.tooltipVisible = true;\n this.tooltipEl.style.display = 'block';\n\n // Update the popper instance immediately after initialization\n this.popperInstance?.update();\n }\n\n\n onMouseLeave = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n\n }\n\n disconnectedCallback() {\n this.popperInstance?.destroy();\n }\n\n onClick = () => {\n if (this.variant.toLowerCase() === 'dismissible') {\n this.initializePopper();\n this.tooltipVisible = !this.tooltipVisible;\n this.tooltipEl.style.display = this.tooltipVisible ? 'block' : 'none';\n this.popperInstance?.update();\n }\n }\n\n onDismissClick = () => {\n this.tooltipVisible = false;\n this.tooltipEl.style.display = 'none';\n }\n\n render() {\n const tooltipDismissible = {\n 'tooltip-dismissible': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipCompact = {\n 'tooltip-compact': true,\n 'visible': this.tooltipVisible,\n };\n\n const tooltipExtended = {\n 'tooltip-extended': true,\n 'visible': this.tooltipVisible,\n };\n\n return (\n <div aria-label={this.ariaLabel} aria-value={this.header} class=\"tooltip__container\" >\n <slot></slot>\n\n {this.variant.toLowerCase() === 'dismissible' && <div class={tooltipDismissible}>\n <button aria-label=\"Close Tooltip\" class=\"close-button\" onClick={this.onDismissClick}>\n <ifx-icon icon=\"cross16\"></ifx-icon>\n </button>\n <div class=\"tooltip-dismissible-content\">\n {this.header && <div class=\"tooltip-dismissible-header\">{this.header}</div>}\n <div class=\"tooltip-dismissible-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'compact' &&\n <div class={tooltipCompact}>\n {this.text}\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div>\n }\n {this.variant.toLowerCase() === 'extended' &&\n <div class={tooltipExtended}>\n <slot name=\"icon\">\n {this.icon ? <div class=\"extended_icon\"><ifx-icon icon={this.icon}></ifx-icon></div> :\n <svg class=\"extended_icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" viewBox=\"0 0 24 24\">\n <path stroke=\"#fff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M20.5 2.5h-16a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-16a2 2 0 0 0-2-2Z\" />\n <path stroke=\"#fff\" d=\"M19 17H6l2.5-4 2.097 2.516.405.486.379-.506 4.118-5.49.003-.002L19 17Z\" />\n <path fill=\"#fff\" d=\"M10 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z\" />\n </svg>\n }\n </slot>\n <div class=\"tooltip-extended-content\">\n {this.header && <div class=\"tooltip-extended-header\">{this.header}</div>}\n <div class=\"tooltip-extended-body\">{this.text}</div>\n </div>\n <svg class=\"tooltip-arrow-svg\" width=\"12\" height=\"8\" viewBox=\"0 0 12 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"Indicator\" d=\"M6 0L12 8L0 8L6 0Z\" fill=\"#1D1D1D\" />\n </svg>\n </div >\n }\n </div>\n );\n }\n\n\n}"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\r\n\r\nexport default {\r\n title: 'Components/Tooltip',\r\n tags: ['autodocs'],\r\n args: {\r\n header: 'Tooltip headline',\r\n text: \"Hi, I'm a tooltip\",\r\n position: 'auto',\r\n variant: 'compact',\r\n icon: 'c-info-16',\r\n ariaLabel: 'Tooltip with important information'\r\n },\r\n argTypes: {\r\n text: {\r\n description: 'Defines the main content of the tooltip.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-tooltip props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n icon: {\r\n description: 'The icon to be displayed. This control is only applicable when the variant is set to *extended.',\r\n options: Object.keys(icons),\r\n control: 'select',\r\n table: {\r\n category: 'ifx-tooltip props',\r\n type: {\r\n summary: 'string',\r\n defaultValue: {\r\n summary: 'c-info-16'\r\n }\r\n }\r\n }\r\n },\r\n position: {\r\n description: 'Determines the position of the tooltip relative to the reference element.',\r\n options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],\r\n control: 'radio',\r\n table: {\r\n category: 'ifx-tooltip props',\r\n defaultValue: {\r\n summary: 'auto'\r\n }\r\n }\r\n },\r\n variant: {\r\n description: 'Sets the style variant of the tooltip.',\r\n control: 'radio',\r\n options: ['compact', 'dismissible', 'extended'],\r\n table: {\r\n category: 'ifx-tooltip props',\r\n defaultValue: {\r\n summary: 'compact'\r\n }\r\n }\r\n },\r\n header: {\r\n description: 'Specifies the header or title of the tooltip. This field is only applicable when the variant is set to dismissible* or *extended*.',\r\n control: 'text', \r\n if: { arg: 'variant', neq: 'compact' },\r\n table: {\r\n category: 'ifx-tooltip props',\r\n type: {\r\n summary: 'string'\r\n }\r\n }\r\n },\r\n ariaLabel: {\r\n description: 'Defines the aria-label for the tooltip, providing a text alternative for screen readers.',\r\n control: 'text',\r\n table: {\r\n category: 'ifx-tooltip props',\r\n type: {\r\n summary: 'string \| null'\r\n },\r\n defaultValue: {\r\n summary: 'null'\r\n }\r\n }\r\n }\r\n },\r\n};\r\n\r\nconst DefaultTemplate = ({ header, text, variant, position, icon, ariaLabel }) => {\r\n const element = document.createElement('ifx-tooltip');\r\n if (variant === 'dismissible' \|\| variant === 'extended') {\r\n element.setAttribute('header', header);\r\n }\r\n element.setAttribute('text', text);\r\n element.setAttribute('variant', variant === 'extended' ? 'extended' : variant);\r\n element.setAttribute('position', position);\r\n element.setAttribute('icon', icon);\r\n element.setAttribute('aria-label', ariaLabel);\r\n\r\n element.textContent = `I'm the tooltip reference element - Please ${variant==='dismissible' ? 'click' : 'hover'} me`; // Set content for the reference element\r\n\r\n return element;\r\n};\r\n\r\nexport const Default = DefaultTemplate.bind({});\r\n"]}
1	+ {"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Tooltip',\n tags: ['autodocs'],\n args: {\n header: 'Tooltip headline',\n text: \"Hi, I'm a tooltip\",\n position: 'auto',\n variant: 'compact',\n icon: 'c-info-16',\n ariaLabel: 'Tooltip with important information'\n },\n argTypes: {\n text: {\n description: 'Defines the main content of the tooltip.',\n control: 'text',\n table: {\n category: 'ifx-tooltip props',\n type: {\n summary: 'string'\n }\n }\n },\n icon: {\n description: 'The icon to be displayed. This control is only applicable when the variant is set to *extended.',\n options: Object.keys(icons),\n control: 'select',\n table: {\n category: 'ifx-tooltip props',\n type: {\n summary: 'string',\n defaultValue: {\n summary: 'c-info-16'\n }\n }\n }\n },\n position: {\n description: 'Determines the position of the tooltip relative to the reference element.',\n options: ['auto', 'bottom-start', 'top-start', 'left', 'bottom-end', 'top-end', 'right', 'bottom', 'top'],\n control: 'radio',\n table: {\n category: 'ifx-tooltip props',\n defaultValue: {\n summary: 'auto'\n }\n }\n },\n variant: {\n description: 'Sets the style variant of the tooltip.',\n control: 'radio',\n options: ['compact', 'dismissible', 'extended'],\n table: {\n category: 'ifx-tooltip props',\n defaultValue: {\n summary: 'compact'\n }\n }\n },\n header: {\n description: 'Specifies the header or title of the tooltip. This field is only applicable when the variant is set to dismissible* or *extended*.',\n control: 'text', \n if: { arg: 'variant', neq: 'compact' },\n table: {\n category: 'ifx-tooltip props',\n type: {\n summary: 'string'\n }\n }\n },\n ariaLabel: {\n description: 'Defines the aria-label for the tooltip, providing a text alternative for screen readers.',\n control: 'text',\n table: {\n category: 'ifx-tooltip props',\n type: {\n summary: 'string \| null'\n },\n defaultValue: {\n summary: 'null'\n }\n }\n }\n },\n};\n\nconst DefaultTemplate = ({ header, text, variant, position, icon, ariaLabel }) => {\n const element = document.createElement('ifx-tooltip');\n if (variant === 'dismissible' \|\| variant === 'extended') {\n element.setAttribute('header', header);\n }\n element.setAttribute('text', text);\n element.setAttribute('variant', variant === 'extended' ? 'extended' : variant);\n element.setAttribute('position', position);\n element.setAttribute('icon', icon);\n element.setAttribute('aria-label', ariaLabel);\n\n element.textContent = `I'm the tooltip reference element - Please ${variant==='dismissible' ? 'click' : 'hover'} me`; // Set content for the reference element\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/tree-view/tree-view-item.js CHANGED Viewed

@@ -356,12 +356,12 @@ export class TreeViewItem {
         };
     }
     render() {
-        return (h("div", { key: 'cec7573a072effbec3e579314dbc856800167c04', class: {
+        return (h("div", { key: '06430c8297a83b8ede5128151c7393c3fd03e2a2', class: {
                 'tree-item': true,
                 'tree-item--expanded': this.isExpanded,
                 'tree-item--has-children': this.hasChildren,
                 'tree-item--disabled': this.disabled,
-            }, role: "treeitem", "aria-expanded": this.isExpanded ? 'true' : 'false', "data-level": this.level, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel }, h("div", { key: 'f0846c5a21a769ddbce8fad581faa35b418007fd', class: "tree-item__content" }, h("div", { key: '9550350aa5e56bb2651746575d2433f24461dd7a', class: "tree-item__checkbox-container", onClick: e => e.stopPropagation() }, h("ifx-checkbox", { key: '33dbd5c3e261ac6993620228d91f7dd58fbbac63', size: 's', checked: this.partialChecked ? false : this.isChecked, indeterminate: this.partialChecked, onIfxChange: this.handleCheckboxChange, disabled: this.disabled })), h("div", { key: '4ef28c7b9b5390bcfe60db2745abfd14c23be9b0', class: "tree-item__header", style: { paddingLeft: `${this.level * 24 + 10}px` }, onClick: this.handleHeaderClick, tabIndex: -1, "aria-disabled": this.disabled ? 'true' : undefined }, this.hasChildren && (h("div", { key: '60be80051ed37101c43875e88a8a1bad388fc658', class: "tree-item__chevron-container", onClick: this.toggleExpand }, h("ifx-icon", { key: '1881571f0b36fc09e7b0919f164b583ed082ee3c', class: `tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`, icon: "chevron-right-16" }), h("div", { key: '1cbdef30e9a4f2b55520b9c9a2ee638199cb7a23', class: "tree-item__line" }))), h("div", { key: 'f1d2f18c6a1573d07eb5450ad63296c6bf535533', class: "tree-item__label-icon-container", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown }, h("div", { key: '972df68ce75bb5173715095ce7fb597fc537cd73', class: "tree-item__icon-container" }, this.hasChildren ? (h(Fragment, null, h("ifx-icon", { class: { 'icon--hidden': this.isExpanded }, icon: "folder-16" }), h("ifx-icon", { class: { 'icon--hidden': !this.isExpanded }, icon: "folder-open-16" }))) : (h("ifx-icon", { icon: "file-16" }))), h("span", { key: '19c43a81a85c58357bcac941533dd01db549d2fa', class: "tree-item__label" }, h("slot", { key: 'a840c5d9595c1a7697e199e02ea5c2adec7286f8' }))))), this.isExpanded && h("div", { key: '6787296ba279e142c2af6c9a47df469900040109', class: "tree-item__children" }, h("slot", { key: '43bdfa1c0b3a86724ff5de26b853914298abb182', name: "children" }))));
+            }, role: "treeitem", "aria-expanded": this.isExpanded ? 'true' : 'false', "data-level": this.level, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel }, h("div", { key: '2de63b8310c477646aeaf8deb3131bba1dc3801d', class: "tree-item__content" }, h("div", { key: '4269b1df1e670ec4106c1c4462cdd1dbe3cee7bd', class: "tree-item__checkbox-container", onClick: e => e.stopPropagation() }, h("ifx-checkbox", { key: '819444dfb6c9dd52a0aa703796c3e59c90616a79', size: 's', checked: this.partialChecked ? false : this.isChecked, indeterminate: this.partialChecked, onIfxChange: this.handleCheckboxChange, disabled: this.disabled })), h("div", { key: '2b4f487b08fbb77eed104ecee0774033c26f96fd', class: "tree-item__header", style: { paddingLeft: `${this.level * 24 + 10}px` }, onClick: this.handleHeaderClick, tabIndex: -1, "aria-disabled": this.disabled ? 'true' : undefined }, this.hasChildren && (h("div", { key: '59770cbe680dce25156ded6580dad90d3f4cc880', class: "tree-item__chevron-container", onClick: this.toggleExpand }, h("ifx-icon", { key: 'ef7ef1761781d4c179ee696e08af6d24af7d9b9f', class: `tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`, icon: "chevron-right-16" }), h("div", { key: '99ec9f0abe191fde4a158484fb3b74d9d4ce524e', class: "tree-item__line" }))), h("div", { key: 'e91ecf4d195285403ac2229fc838e470c0e46ba6', class: "tree-item__label-icon-container", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown }, h("div", { key: 'a4b44e04c85234486602bdce7be330c7b9775233', class: "tree-item__icon-container" }, this.hasChildren ? (h(Fragment, null, h("ifx-icon", { class: { 'icon--hidden': this.isExpanded }, icon: "folder-16" }), h("ifx-icon", { class: { 'icon--hidden': !this.isExpanded }, icon: "folder-open-16" }))) : (h("ifx-icon", { icon: "file-16" }))), h("span", { key: '855ebc797490c23969a22b31fe8df64ffae2ff32', class: "tree-item__label" }, h("slot", { key: '92d518b2c916f43229ca5f9a9c38809b08888d09' }))))), this.isExpanded && h("div", { key: '769744e6235899295020700585f278ae8f3ba091', class: "tree-item__children" }, h("slot", { key: '4e760a8d309e22549df336927b955a35036c1826', name: "children" }))));
     }
     static get is() { return "ifx-tree-view-item"; }
     static get encapsulation() { return "shadow"; }
@@ -525,7 +525,7 @@ export class TreeViewItem {
                     "references": {
                         "TreeViewExpandChangeEvent": {
                             "location": "local",
-                            "path": "/home/fp/Dev/IFX/dds/packages/components/src/components/tree-view/tree-view-item.tsx",
+                            "path": "/home/runner/work/infineon-design-system-stencil/infineon-design-system-stencil/packages/components/src/components/tree-view/tree-view-item.tsx",
                             "id": "src/components/tree-view/tree-view-item.tsx::TreeViewExpandChangeEvent"
                         }
                     }
@@ -546,7 +546,7 @@ export class TreeViewItem {
                     "references": {
                         "TreeViewCheckChangeEvent": {
                             "location": "local",
-                            "path": "/home/fp/Dev/IFX/dds/packages/components/src/components/tree-view/tree-view-item.tsx",
+                            "path": "/home/runner/work/infineon-design-system-stencil/infineon-design-system-stencil/packages/components/src/components/tree-view/tree-view-item.tsx",
                             "id": "src/components/tree-view/tree-view-item.tsx::TreeViewCheckChangeEvent"
                         }
                     }
@@ -567,7 +567,7 @@ export class TreeViewItem {
                     "references": {
                         "TreeViewDisableChangeEvent": {
                             "location": "local",
-                            "path": "/home/fp/Dev/IFX/dds/packages/components/src/components/tree-view/tree-view-item.tsx",
+                            "path": "/home/runner/work/infineon-design-system-stencil/infineon-design-system-stencil/packages/components/src/components/tree-view/tree-view-item.tsx",
                             "id": "src/components/tree-view/tree-view-item.tsx::TreeViewDisableChangeEvent"
                         }
                     }

package/dist/collection/components/tree-view/tree-view-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-view-item.js","sourceRoot":"","sources":["../../../src/components/tree-view/tree-view-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAkCzG,MAAM,OAAO,YAAY;IALzB;QAO0C,aAAQ,GAAY,KAAK,CAAC;QAC1D,sBAAiB,GAAY,KAAK,CAAC;QACnC,gBAAW,GAAY,KAAK,CAAC;QAE7B,sBAAiB,GAAY,KAAK,CAAC;QAO1B,gBAAW,GAAY,KAAK,CAAC;QAC7B,cAAS,GAAY,KAAK,CAAC;QAC3B,mBAAc,GAAY,KAAK,CAAC;QAChC,UAAK,GAAW,CAAC,CAAC;QAClB,oBAAe,GAAY,KAAK,CAAC;QACjC,mBAAc,GAAY,KAAK,CAAC;QAChC,yBAAoB,GAAY,KAAK,CAAC;QAU/C,iBAAY,GAAG,GAAG,EAAE,CAC1B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC3B,MAAM,CAAC,CAAC,KAAK,EAAwB,EAAE,CAAC,KAAK,YAAY,WAAW,IAAI,KAAK,CAAC,OAAO,KAAK,oBAAoB,CAAC,CAAC;QAE7G,uBAAkB,GAAG,GAAW,EAAE;YACxC,IAAI,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;YAChD,OAAO,MAAM,EAAE,CAAC;gBACd,IAAI,MAAM,CAAC,OAAO,KAAK,oBAAoB;oBAAE,KAAK,EAAE,CAAC;gBACrD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;YAChC,CAAC;YACD,OAAO,KAAK,CAAC;QACf,CAAC,CAAC;QAoDM,sBAAiB,GAAG,CAAC,KAAkB,EAAE,EAAE;YACjD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC9C,CAAC,CAAC;QAEM,yBAAoB,GAAG,CAAC,KAAkB,EAAE,EAAE;;YACpD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,gBAAgB,CAAC,MAAA,MAAA,KAAK,CAAC,MAAM,0CAAE,OAAO,mCAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAClE,CAAC,CAAC;QAEM,sBAAiB,GAAG,CAAC,EAAE,MAAM,EAAc,EAAE,EAAE;YACrD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAE,MAAsB,CAAC,OAAO,CAAC,+DAA+D,CAAC,EAAE,CAAC;gBACtG,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;oBACrB,MAAM,eAAe,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;oBACxC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;oBACvC,MAAM,aAAa,GAAG,eAAe;wBACnC,CAAC,CAAC,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC;wBAC3C,CAAC,CAAC,IAAI,CAAC,8BAA8B,CAAC,KAAK,CAAC,CAAC;oBAC/C,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC;wBACpC,QAAQ,EAAE,eAAe;wBACzB,aAAa;wBACb,SAAS,EAAE,IAAI;qBAChB,CAAC,CAAC;gBACL,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;gBACzC,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAiKM,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAO;YAC/C,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QACjC,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;;YAC/C,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CACzB,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,0CAAE,gBAAgB,CAAC,oBAAoB,CAAC,KAAI,EAAE,CACjF,CAAC;YACF,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;;gBAC1C,IAAI,MAAM,GAAG,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;gBAC/D,OAAO,MAAM,EAAE,CAAC;oBACd,MAAM,SAAS,GAAG,MAAa,CAAC;oBAChC,IAAI,CAAC,CAAC,SAAS,CAAC,cAAc,IAAI,SAAS,CAAC,QAAQ,CAAC;wBAAE,OAAO,KAAK,CAAC;oBACpE,MAAM,GAAG,MAAA,MAAM,CAAC,aAAa,0CAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;gBAC/D,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC,CAAC,CAAC;YACH,MAAM,YAAY,GAAG,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;YACpE,MAAM,cAAc,GAAG,CAAC,EAAkB,EAAE,EAAE,CAC3C,EAAyB,aAAzB,EAAE,uBAAF,EAAE,CAAyB,KAAK,EAAE,CAAC;YAEtC,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;gBAClB,KAAK,WAAW,CAAC,CAAC,CAAC;oBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,KAAK,IAAI,CAAC,GAAG,YAAY,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;wBAC5D,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAQ,CAAC;wBACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;4BACnB,cAAc,CAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,kCAAkC,CAAC,CAAC,CAAC;4BACnF,MAAM;wBACR,CAAC;oBACH,CAAC;oBACD,MAAM;gBACR,CAAC;gBACD,KAAK,SAAS,CAAC,CAAC,CAAC;oBACf,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,KAAK,IAAI,CAAC,GAAG,YAAY,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;wBAC3C,MAAM,IAAI,GAAG,YAAY,CAAC,CAAC,CAAQ,CAAC;wBACpC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;4BACnB,cAAc,CAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,kCAAkC,CAAC,CAAC,CAAC;4BACnF,MAAM;wBACR,CAAC;oBACH,CAAC;oBACD,MAAM;gBACR,CAAC;gBACD,KAAK,YAAY,CAAC,CAAC,CAAC;oBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;wBACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;oBACvB,CAAC;yBAAM,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;wBAC/C,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;wBACjE,IAAI,UAAU,IAAI,CAAE,UAAkB,CAAC,QAAQ,EAAE,CAAC;4BAChD,cAAc,CAAC,MAAC,UAA0B,CAAC,UAAU,0CAAE,aAAa,CAAC,kCAAkC,CAAC,CAAC,CAAC;wBAC5G,CAAC;oBACH,CAAC;oBACD,MAAM;gBACR,CAAC;gBACD,KAAK,WAAW,CAAC,CAAC,CAAC;oBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;wBACxC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;oBACxB,CAAC;yBAAM,CAAC;wBACN,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;wBACtE,IAAI,MAAM,IAAI,CAAE,MAAc,CAAC,QAAQ,EAAE,CAAC;4BACxC,cAAc,CAAC,MAAC,MAAsB,CAAC,UAAU,0CAAE,aAAa,CAAC,kCAAkC,CAAC,CAAC,CAAC;wBACxG,CAAC;oBACH,CAAC;oBACD,MAAM;gBACR,CAAC;gBACD,KAAK,GAAG,CAAC;gBACT,KAAK,OAAO,CAAC,CAAC,CAAC;oBACb,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;wBACrB,MAAM,eAAe,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;wBACxC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;wBACvC,MAAM,aAAa,GAAG,eAAe;4BACnC,CAAC,CAAC,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC;4BAC3C,CAAC,CAAC,IAAI,CAAC,8BAA8B,CAAC,KAAK,CAAC,CAAC;wBAC/C,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC;4BACpC,QAAQ,EAAE,eAAe;4BACzB,aAAa;4BACb,SAAS,EAAE,IAAI;yBAChB,CAAC,CAAC;oBACL,CAAC;yBAAM,CAAC;wBACN,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;oBACzC,CAAC;oBACD,MAAM;gBACR,CAAC;YACH,CAAC;QACH,CAAC,CAAC;KAgEH;IA9ZC,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,WAAW,CAAC;IAClD,CAAC;IAED,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,CAAC;IAC9C,CAAC;IAeD,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACvC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAClD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC5D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACxC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,6BAA6B,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACpF,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC,CAAC;QACpF,IAAI,CAAC,sBAAsB,CAAC,uBAAuB,EAAE,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,GAAG,GAAG,EAAE,IAAI,CAAC,CAAC;QAC7F,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAAE,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC9D,IAAI,CAAC,IAAY,CAAC,oBAAoB,CAAC,GAAG,IAAI,CAAC;QAChD,IAAI,IAAI,CAAC,iBAAiB;YAAE,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC,CAAC;IAC5E,CAAC;IAEO,sBAAsB,CAAC,IAAY,EAAE,EAA0B,EAAE,WAAW,GAAG,KAAK;QAC1F,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QACrC,OAAO,MAAM,EAAE,CAAC;YACd,IAAI,MAAM,CAAC,OAAO,KAAK,eAAe,IAAI,CAAC,WAAW,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;gBACrF,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBAC3E,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC/C,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC9B,MAAM;YACR,CAAC;YACD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;QAChC,CAAC;IACH,CAAC;IAEO,sBAAsB;QAC5B,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QACrC,OAAO,MAAM,EAAE,CAAC;YACd,IACE,MAAM,CAAC,OAAO,KAAK,eAAe;gBAClC,CAAC,MAAM,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,MAAM,CAAC,YAAY,CAAC,uBAAuB,CAAC,CAAC;gBACzF,OAAO,IAAI,CAAC;YACd,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;QAChC,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,oBAAoB;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,YAAY,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;;YACjC,KAAa,CAAC,QAAQ,GAAG,IAAI,CAAC;YAC/B,MAAA,MAAC,KAAa,EAAC,oBAAoB,kDAAI,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC;IAiCO,8BAA8B,CAAC,MAAe;QACpD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;QACjC,MAAM,aAAa,GAAiD,EAAE,CAAC;QACvE,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;QACvB,IAAI,IAAI,CAAC,WAAW;YAAE,aAAa,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAClF,IAAI,CAAC,YAAY,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YAClC,MAAM,aAAa,GAAI,KAAa,CAAC,oBAAoB,CAAC,CAAC;YAC3D,IAAI,aAAa,IAAI,aAAa,CAAC,WAAW,EAAE,CAAC;gBAC/C,aAAa,CAAC,oBAAoB,GAAG,IAAI,CAAC;gBAC1C,aAAa,CAAC,QAAQ,GAAG,MAAM,CAAC;gBAChC,aAAa,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC;gBACrE,IAAI,aAAa,CAAC,WAAW,EAAE,CAAC;oBAC9B,MAAM,aAAa,GAAG,aAAa,CAAC,8BAA8B,CAAC,MAAM,CAAC,CAAC;oBAC3E,aAAa,CAAC,IAAI,CAAC,GAAG,aAAa,CAAC,CAAC;gBACvC,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,oBAAoB,GAAG,KAAK,CAAC;QAClC,OAAO,aAAa,CAAC;IACvB,CAAC;IAEO,KAAK,CAAC,gBAAgB,CAAC,OAAgB,EAAE,UAAU,GAAG,KAAK;QACjE,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,uBAAuB,CAAC,OAAO,CAAC,CAAC;YACvD,IAAI,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC;YACxE,MAAM,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC;YAC3C,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC;gBACnC,OAAO;gBACP,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,kBAAkB,EAAE,QAAQ;gBAC5B,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;YACH,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;aAAM,IAAI,UAAU,EAAE,CAAC;YACtB,IAAI,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC;QAC1E,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;YACjE,MAAM,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;YACxC,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3B,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,sBAAsB,CAAC,OAAgB;QACnD,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE,CAAC;YACxC,MAAM,aAAa,GAAI,KAAa,CAAC,oBAAoB,CAAC,CAAC;YAC3D,IAAI,aAAa,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;gBAC7C,aAAa,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,KAAK,CAAC,CAAC;gBACjF,MAAM,aAAa,CAAC,sBAAsB,CAAC,OAAO,CAAC,CAAC;YACtD,CAAC;QACH,CAAC;IACH,CAAC;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC/B,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC;gBACpC,QAAQ,EAAE,QAAQ;gBAClB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,aAAa,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;gBAC1D,SAAS,EAAE,IAAI;aAChB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAGD,uBAAuB,CAAC,QAAiB;QACvC,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAClF,CAAC;IAEO,YAAY,CAAC,KAAgB,EAAE,SAAS,GAAG,IAAI;QACrD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC;QAC3C,IAAI,SAAS,EAAE,CAAC;YACd,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC;gBACnC,OAAO,EAAE,IAAI,CAAC,SAAS;gBACvB,aAAa,EAAE,IAAI,CAAC,cAAc;gBAClC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,SAAS,EAAE,IAAI;aACT,CAAC,CAAC;QACZ,CAAC;IACH,CAAC;IAEO,uBAAuB,CAAC,OAAgB;QAC9C,MAAM,WAAW,GAAwE,EAAE,CAAC;QAC5F,MAAM,OAAO,GAAG,CAAC,EAAW,EAAE,QAAQ,GAAG,KAAK,EAAE,EAAE;YAChD,IAAI,QAAQ,GAAQ,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAE,EAAU,CAAC,oBAAoB,CAAC,CAAC;YAChF,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,CAAA,EAAE,CAAC;gBACrC,WAAW,CAAC,IAAI,CAAC;oBACf,OAAO;oBACP,aAAa,EAAE,KAAK;oBACpB,KAAK,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,KAAK;iBACvB,CAAC,CAAC;YACL,CAAC;YACD,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;iBACpB,OAAO,CAAC,KAAK,CAAC,EAAE;gBACf,IAAI,KAAK,CAAC,OAAO,KAAK,oBAAoB;oBAAE,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YACpE,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QACF,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC3B,OAAO,CAAC,KAAK,CAAC,EAAE;YACf,IAAI,KAAK,CAAC,OAAO,KAAK,oBAAoB;gBAAE,OAAO,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;QACpE,CAAC,CAAC,CAAC;QACL,OAAO,WAAW,CAAC;IACrB,CAAC;IAEO,KAAK,CAAC,mBAAmB,CAAC,OAAgB;QAChD,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE,CAAC;YACxC,MAAM,aAAa,GAAI,KAAa,CAAC,oBAAoB,CAAC,CAAC;YAC3D,IAAI,aAAa,IAAI,CAAC,aAAa,CAAC,QAAQ,EAAE,CAAC;gBAC7C,MAAO,KAAoC,CAAC,gBAAgB,EAAE,CAAC;gBAC/D,KAAK,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,6BAA6B,EAAE;oBACjE,MAAM,EAAE,EAAE,OAAO,EAAE;oBACnB,OAAO,EAAE,KAAK;oBACd,QAAQ,EAAE,IAAI;iBACf,CAAC,CAAC,CAAC;YACN,CAAC;QACH,CAAC;IACH,CAAC;IAEO,gBAAgB,CAAC,MAAmB;QAC1C,OAAO,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;aAC/B,MAAM,CAAC,CAAC,KAAK,EAAuC,EAAE,CACrD,KAAK,YAAY,WAAW,IAAI,KAAK,CAAC,OAAO,KAAK,oBAAoB,CACvE,CAAC;IACN,CAAC;IAEO,iBAAiB;;QACvB,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,oBAAoB,CAA+B,CAAC;QACpG,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,UAAU,CAAC,GAAG,EAAE;YACd,MAAM,cAAc,GAAI,MAAc,CAAC,oBAAoB,CAAiB,CAAC;YAC7E,IAAI,CAAC,cAAc;gBAAE,OAAO;YAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;YAC/C,MAAM,EAAE,UAAU,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC;YAC1E,cAAc,CAAC,YAAY,CAAC;gBAC1B,SAAS,EAAE,UAAU;gBACrB,cAAc,EAAE,CAAC,UAAU,IAAI,WAAW;aAC3C,EAAE,KAAK,CAAC,CAAC;YACV,cAAc,CAAC,iBAAiB,EAAE,CAAC;QACrC,CAAC,EAAE,CAAC,CAAC,CAAC;IACR,CAAC;IAEO,sBAAsB,CAAC,QAAsC;QACnE,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;YAChC,MAAM,QAAQ,GAAI,GAAW,CAAC,oBAAoB,CAAiB,CAAC;YACpE,OAAO,EAAE,OAAO,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,cAAc,EAAE,CAAC;QAC7E,CAAC,CAAC,CAAC;QACH,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;QAClE,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;QAClE,OAAO;YACL,UAAU,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,KAAK,MAAM,CAAC,MAAM,IAAI,YAAY,KAAK,CAAC;YACrF,WAAW,EAAE,YAAY,GAAG,CAAC,IAAI,YAAY,GAAG,CAAC;SAClD,CAAC;IACJ,CAAC;IA6FD,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,qBAAqB,EAAE,IAAI,CAAC,UAAU;gBACtC,yBAAyB,EAAE,IAAI,CAAC,WAAW;gBAC3C,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC,EACD,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBACrC,IAAI,CAAC,KAAK,mBACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,gBACrC,IAAI,CAAC,SAAS;YAE1B,4DAAK,KAAK,EAAC,oBAAoB;gBAC7B,4DAAK,KAAK,EAAC,+BAA+B,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;oBAC1E,qEACE,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EACrD,aAAa,EAAE,IAAI,CAAC,cAAc,EAClC,WAAW,EAAE,IAAI,CAAC,oBAAoB,EACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE;gBACN,4DACE,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE,EAAE,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EACnD,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,QAAQ,EAAE,CAAC,CAAC,mBACG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;oBAEhD,IAAI,CAAC,WAAW,IAAI,CACnB,4DAAK,KAAK,EAAC,8BAA8B,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY;wBAClE,iEAAU,KAAK,EAAE,sBAAsB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,EAAE,EACjF,IAAI,EAAC,kBAAkB,GAAE;wBACnC,4DAAK,KAAK,EAAC,iBAAiB,GAAE,CAC1B,CACP;oBACD,4DACE,KAAK,EAAC,iCAAiC,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAChC,SAAS,EAAE,IAAI,CAAC,aAAa;wBAE7B,4DAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAClB,EAAC,QAAQ;4BACP,gBAAU,KAAK,EAAE,EAAC,cAAc,EAAE,IAAI,CAAC,UAAU,EAAC,EAAE,IAAI,EAAC,WAAW,GAAE;4BACtE,gBAAU,KAAK,EAAE,EAAC,cAAc,EAAE,CAAC,IAAI,CAAC,UAAU,EAAC,EAAE,IAAI,EAAC,gBAAgB,GAAE,CACnE,CACZ,CAAC,CAAC,CAAC,CACF,gBAAU,IAAI,EAAC,SAAS,GAAE,CAC3B,CACG;wBACN,6DAAM,KAAK,EAAC,kBAAkB;4BAAC,8DAAO,CAAO,CACzC,CACF,CACF;YACL,IAAI,CAAC,UAAU,IAAI,4DAAK,KAAK,EAAC,qBAAqB;gBAAC,6DAAM,IAAI,EAAC,UAAU,GAAE,CAAM,CAC9E,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Element, Fragment, Event, EventEmitter, Watch } from '@stencil/core';\r\n\r\nexport interface TreeViewCheckChangeEvent {\r\n checked: boolean;\r\n indeterminate: boolean;\r\n value?: string;\r\n affectedChildItems?: Array<{ checked: boolean; indeterminate: boolean; value?: string }>;\r\n component?: TreeViewItem;\r\n}\r\n\r\nexport interface TreeViewExpandChangeEvent {\r\n expanded: boolean;\r\n value?: string;\r\n affectedItems?: Array<{ expanded: boolean; value?: string }>;\r\n component?: TreeViewItem;\r\n}\r\n\r\nexport interface TreeViewDisableChangeEvent {\r\n disabled: boolean;\r\n component?: TreeViewItem;\r\n}\r\n\r\ninterface TreeState {\r\n isChecked: boolean;\r\n partialChecked: boolean;\r\n}\r\n\r\ntype HTMLIfxTreeViewItemElement = HTMLElement & { componentOnReady: () => Promise<unknown> };\r\n\r\n@Component({\r\n tag: 'ifx-tree-view-item',\r\n styleUrl: 'tree-view-item.scss',\r\n shadow: true,\r\n})\r\nexport class TreeViewItem {\r\n @Element() host: HTMLElement;\r\n @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\r\n @Prop() initiallyExpanded: boolean = false;\r\n @Prop() disableItem: boolean = false;\r\n @Prop() ariaLabel: string \| null;\r\n @Prop() initiallySelected: boolean = false;\r\n @Prop() value: string;\r\n\r\n @Event() ifxTreeViewItemExpandChange: EventEmitter<TreeViewExpandChangeEvent>;\r\n @Event() ifxTreeViewItemCheckChange: EventEmitter<TreeViewCheckChangeEvent>;\r\n @Event() ifxTreeViewItemDisableChange: EventEmitter<TreeViewDisableChangeEvent>;\r\n\r\n @State() private hasChildren: boolean = false;\r\n @State() private isChecked: boolean = false;\r\n @State() private partialChecked: boolean = false;\r\n @State() private level: number = 0;\r\n @State() private disableAllItems: boolean = false;\r\n @State() private expandAllItems: boolean = false;\r\n @State() private suppressExpandEvents: boolean = false;\r\n\r\n private get disabled() {\r\n return this.disableAllItems \|\| this.disableItem;\r\n }\r\n\r\n private get isExpanded() {\r\n return this.expandAllItems \|\| this.expanded;\r\n }\r\n\r\n private findChildren = () =>\r\n Array.from(this.host.children)\r\n .filter((child): child is HTMLElement => child instanceof HTMLElement && child.tagName === 'IFX-TREE-VIEW-ITEM');\r\n\r\n private calculateNodeLevel = (): number => {\r\n let level = 0, parent = this.host.parentElement;\r\n while (parent) {\r\n if (parent.tagName === 'IFX-TREE-VIEW-ITEM') level++;\r\n parent = parent.parentElement;\r\n }\r\n return level;\r\n };\r\n\r\n componentWillLoad() {\r\n this.expanded = this.initiallyExpanded;\r\n this.hasChildren = this.findChildren().length > 0;\r\n this.level = this.calculateNodeLevel();\r\n this.host.setAttribute('data-level', this.level.toString());\r\n this.isChecked = this.initiallySelected;\r\n this.host.addEventListener('internal-check-state-change', this.handleStateChange);\r\n }\r\n\r\n componentDidLoad() {\r\n this.observeParentAttribute('disable-all-items', val => this.disableAllItems = val);\r\n this.observeParentAttribute('data-expand-all-items', val => this.expandAllItems = val, true);\r\n if (this.shouldExpandFromParent()) this.expandAllDescendants();\r\n (this.host as any)['__stencil_instance'] = this;\r\n if (this.initiallySelected) setTimeout(() => this.updateParentState(), 0);\r\n }\r\n\r\n private observeParentAttribute(attr: string, cb: (val: boolean) => void, breakOnAttr = false) {\r\n let parent = this.host.parentElement;\r\n while (parent) {\r\n if (parent.tagName === 'IFX-TREE-VIEW' \|\| (breakOnAttr && parent.hasAttribute(attr))) {\r\n const observer = new MutationObserver(() => cb(parent.hasAttribute(attr)));\r\n observer.observe(parent, { attributes: true });\r\n cb(parent.hasAttribute(attr));\r\n break;\r\n }\r\n parent = parent.parentElement;\r\n }\r\n }\r\n\r\n private shouldExpandFromParent(): boolean {\r\n let parent = this.host.parentElement;\r\n while (parent) {\r\n if (\r\n parent.tagName === 'IFX-TREE-VIEW' &&\r\n (parent.hasAttribute('expand-all-items') \|\| parent.hasAttribute('data-expand-all-items'))\r\n ) return true;\r\n parent = parent.parentElement;\r\n }\r\n return false;\r\n }\r\n\r\n private expandAllDescendants() {\r\n this.expanded = true;\r\n this.findChildren().forEach(child => {\r\n (child as any).expanded = true;\r\n (child as any).expandAllDescendants?.();\r\n });\r\n }\r\n\r\n private handleStateChange = (event: CustomEvent) => {\r\n if (this.disabled) return;\r\n event.stopPropagation();\r\n this.updateCheckState(event.detail.checked);\r\n };\r\n\r\n private handleCheckboxChange = (event: CustomEvent) => {\r\n if (this.disabled) return;\r\n this.updateCheckState(event.detail?.checked ?? !this.isChecked);\r\n };\r\n\r\n private handleHeaderClick = ({ target }: MouseEvent) => {\r\n if (this.disabled) return;\r\n if (!(target as HTMLElement).closest('.tree-item__checkbox-container, .tree-item__chevron-container')) {\r\n if (this.hasChildren) {\r\n const newCheckedState = !this.isChecked;\r\n this.updateCheckState(newCheckedState);\r\n const affectedItems = newCheckedState\r\n ? this.expandOrCollapseAllDescendants(true)\r\n : this.expandOrCollapseAllDescendants(false);\r\n this.ifxTreeViewItemExpandChange.emit({\r\n expanded: newCheckedState,\r\n affectedItems,\r\n component: this\r\n });\r\n } else {\r\n this.updateCheckState(!this.isChecked);\r\n }\r\n }\r\n };\r\n\r\n private expandOrCollapseAllDescendants(expand: boolean) {\r\n this.suppressExpandEvents = true;\r\n const affectedItems: Array<{ expanded: boolean; value?: string }> = [];\r\n this.expanded = expand;\r\n if (this.hasChildren) affectedItems.push({ expanded: expand, value: this.value });\r\n this.findChildren().forEach(child => {\r\n const childInstance = (child as any)['__stencil_instance'];\r\n if (childInstance && childInstance.hasChildren) {\r\n childInstance.suppressExpandEvents = true;\r\n childInstance.expanded = expand;\r\n affectedItems.push({ expanded: expand, value: childInstance.value });\r\n if (childInstance.hasChildren) {\r\n const childAffected = childInstance.expandOrCollapseAllDescendants(expand);\r\n affectedItems.push(...childAffected);\r\n }\r\n }\r\n });\r\n this.suppressExpandEvents = false;\r\n return affectedItems;\r\n }\r\n\r\n private async updateCheckState(checked: boolean, fromParent = false) {\r\n if (this.disabled) return;\r\n if (!fromParent && this.hasChildren) {\r\n const affected = this.collectDescendantStates(checked);\r\n this.setNodeState({ isChecked: checked, partialChecked: false }, false);\r\n await this.updateChildrenSilently(checked);\r\n this.ifxTreeViewItemCheckChange.emit({\r\n checked,\r\n indeterminate: false,\r\n value: this.value,\r\n affectedChildItems: affected,\r\n component: this,\r\n });\r\n this.updateParentState();\r\n } else if (fromParent) {\r\n this.setNodeState({ isChecked: checked, partialChecked: false }, false);\r\n } else {\r\n this.setNodeState({ isChecked: checked, partialChecked: false });\r\n await this.updateChildrenState(checked);\r\n this.updateParentState();\r\n }\r\n }\r\n\r\n private async updateChildrenSilently(checked: boolean) {\r\n for (const child of this.findChildren()) {\r\n const childInstance = (child as any)['__stencil_instance'];\r\n if (childInstance && !childInstance.disabled) {\r\n childInstance.setNodeState({ isChecked: checked, partialChecked: false }, false);\r\n await childInstance.updateChildrenSilently(checked);\r\n }\r\n }\r\n }\r\n\r\n @Watch('expanded')\r\n handleExpandedChange(newValue: boolean) {\r\n if (!this.suppressExpandEvents) {\r\n this.ifxTreeViewItemExpandChange.emit({\r\n expanded: newValue,\r\n value: this.value,\r\n affectedItems: [{ expanded: newValue, value: this.value }],\r\n component: this\r\n });\r\n }\r\n }\r\n\r\n @Watch('disableItem')\r\n handleDisableItemChange(newValue: boolean) {\r\n this.ifxTreeViewItemDisableChange.emit({ disabled: newValue, component: this });\r\n }\r\n\r\n private setNodeState(state: TreeState, emitEvent = true) {\r\n this.isChecked = state.isChecked;\r\n this.partialChecked = state.partialChecked;\r\n if (emitEvent) {\r\n this.ifxTreeViewItemCheckChange.emit({\r\n checked: this.isChecked,\r\n indeterminate: this.partialChecked,\r\n value: this.value,\r\n level: this.level,\r\n disabled: this.disabled,\r\n component: this\r\n } as any);\r\n }\r\n }\r\n\r\n private collectDescendantStates(checked: boolean) {\r\n const descendants: Array<{ checked: boolean; indeterminate: boolean; value?: string }> = [];\r\n const collect = (el: Element, skipSelf = false) => {\r\n let instance: any = el === this.host ? this : (el as any)['__stencil_instance'];\r\n if (!skipSelf && !instance?.disabled) {\r\n descendants.push({\r\n checked,\r\n indeterminate: false,\r\n value: instance?.value,\r\n });\r\n }\r\n Array.from(el.children)\r\n .forEach(child => {\r\n if (child.tagName === 'IFX-TREE-VIEW-ITEM') collect(child, false);\r\n });\r\n };\r\n Array.from(this.host.children)\r\n .forEach(child => {\r\n if (child.tagName === 'IFX-TREE-VIEW-ITEM') collect(child, false);\r\n });\r\n return descendants;\r\n }\r\n\r\n private async updateChildrenState(checked: boolean) {\r\n for (const child of this.findChildren()) {\r\n const childInstance = (child as any)['__stencil_instance'];\r\n if (childInstance && !childInstance.disabled) {\r\n await (child as HTMLIfxTreeViewItemElement).componentOnReady();\r\n child.dispatchEvent(new CustomEvent('internal-check-state-change', {\r\n detail: { checked },\r\n bubbles: false,\r\n composed: true\r\n }));\r\n }\r\n }\r\n }\r\n\r\n private findSiblingNodes(parent: HTMLElement): HTMLIfxTreeViewItemElement[] {\r\n return Array.from(parent.children)\r\n .filter((child): child is HTMLIfxTreeViewItemElement =>\r\n child instanceof HTMLElement && child.tagName === 'IFX-TREE-VIEW-ITEM'\r\n );\r\n }\r\n\r\n private updateParentState() {\r\n const parent = this.host.parentElement?.closest('ifx-tree-view-item') as HTMLIfxTreeViewItemElement;\r\n if (!parent) return;\r\n setTimeout(() => {\r\n const parentInstance = (parent as any)['__stencil_instance'] as TreeViewItem;\r\n if (!parentInstance) return;\r\n const siblings = this.findSiblingNodes(parent);\r\n const { allChecked, someChecked } = this.calculateSiblingStates(siblings);\r\n parentInstance.setNodeState({\r\n isChecked: allChecked,\r\n partialChecked: !allChecked && someChecked\r\n }, false);\r\n parentInstance.updateParentState();\r\n }, 0);\r\n }\r\n\r\n private calculateSiblingStates(siblings: HTMLIfxTreeViewItemElement[]) {\r\n const states = siblings.map(sib => {\r\n const instance = (sib as any)['__stencil_instance'] as TreeViewItem;\r\n return { checked: instance?.isChecked, partial: instance?.partialChecked };\r\n });\r\n const checkedCount = states.filter(state => state.checked).length;\r\n const partialCount = states.filter(state => state.partial).length;\r\n return {\r\n allChecked: states.length > 0 && checkedCount === states.length && partialCount === 0,\r\n someChecked: checkedCount > 0 \|\| partialCount > 0\r\n };\r\n }\r\n\r\n private toggleExpand = () => {\r\n if (this.disabled \|\| !this.hasChildren) return;\r\n this.expanded = !this.expanded;\r\n };\r\n\r\n private handleKeyDown = (event: KeyboardEvent) => {\r\n const allItems = Array.from(\r\n this.host.closest('ifx-tree-view')?.querySelectorAll('ifx-tree-view-item') \|\| []\r\n );\r\n const visibleItems = allItems.filter(item => {\r\n let parent = item.parentElement?.closest('ifx-tree-view-item');\r\n while (parent) {\r\n const parentCmp = parent as any;\r\n if (!(parentCmp.expandAllItems \|\| parentCmp.expanded)) return false;\r\n parent = parent.parentElement?.closest('ifx-tree-view-item');\r\n }\r\n return true;\r\n });\r\n const currentIndex = visibleItems.findIndex(el => el === this.host);\r\n const focusLabelIcon = (el: Element \| null) =>\r\n (el as HTMLElement \| null)?.focus();\r\n\r\n switch (event.key) {\r\n case 'ArrowDown': {\r\n event.preventDefault();\r\n for (let i = currentIndex + 1; i < visibleItems.length; i++) {\r\n const next = visibleItems[i] as any;\r\n if (!next.disabled) {\r\n focusLabelIcon(next.shadowRoot?.querySelector('.tree-item__label-icon-container'));\r\n break;\r\n }\r\n }\r\n break;\r\n }\r\n case 'ArrowUp': {\r\n event.preventDefault();\r\n for (let i = currentIndex - 1; i >= 0; i--) {\r\n const prev = visibleItems[i] as any;\r\n if (!prev.disabled) {\r\n focusLabelIcon(prev.shadowRoot?.querySelector('.tree-item__label-icon-container'));\r\n break;\r\n }\r\n }\r\n break;\r\n }\r\n case 'ArrowRight': {\r\n event.preventDefault();\r\n if (!this.isExpanded && this.hasChildren) {\r\n this.expanded = true;\r\n } else if (this.isExpanded && this.hasChildren) {\r\n const firstChild = this.host.querySelector('ifx-tree-view-item');\r\n if (firstChild && !(firstChild as any).disabled) {\r\n focusLabelIcon((firstChild as HTMLElement).shadowRoot?.querySelector('.tree-item__label-icon-container'));\r\n }\r\n }\r\n break;\r\n }\r\n case 'ArrowLeft': {\r\n event.preventDefault();\r\n if (this.isExpanded && this.hasChildren) {\r\n this.expanded = false;\r\n } else {\r\n const parent = this.host.parentElement?.closest('ifx-tree-view-item');\r\n if (parent && !(parent as any).disabled) {\r\n focusLabelIcon((parent as HTMLElement).shadowRoot?.querySelector('.tree-item__label-icon-container'));\r\n }\r\n }\r\n break;\r\n }\r\n case ' ':\r\n case 'Enter': {\r\n event.preventDefault();\r\n if (this.hasChildren) {\r\n const newCheckedState = !this.isChecked;\r\n this.updateCheckState(newCheckedState);\r\n const affectedItems = newCheckedState\r\n ? this.expandOrCollapseAllDescendants(true)\r\n : this.expandOrCollapseAllDescendants(false);\r\n this.ifxTreeViewItemExpandChange.emit({\r\n expanded: newCheckedState,\r\n affectedItems,\r\n component: this\r\n });\r\n } else {\r\n this.updateCheckState(!this.isChecked);\r\n }\r\n break;\r\n }\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <div\r\n class={{\r\n 'tree-item': true,\r\n 'tree-item--expanded': this.isExpanded,\r\n 'tree-item--has-children': this.hasChildren,\r\n 'tree-item--disabled': this.disabled,\r\n }}\r\n role=\"treeitem\"\r\n aria-expanded={this.isExpanded ? 'true' : 'false'}\r\n data-level={this.level}\r\n aria-disabled={this.disabled ? 'true' : undefined}\r\n aria-label={this.ariaLabel}\r\n >\r\n <div class=\"tree-item__content\">\r\n <div class=\"tree-item__checkbox-container\" onClick={e => e.stopPropagation()}>\r\n <ifx-checkbox\r\n size='s'\r\n checked={this.partialChecked ? false : this.isChecked}\r\n indeterminate={this.partialChecked}\r\n onIfxChange={this.handleCheckboxChange}\r\n disabled={this.disabled}\r\n />\r\n </div>\r\n <div\r\n class=\"tree-item__header\"\r\n style={{ paddingLeft: `${this.level * 24 + 10}px` }}\r\n onClick={this.handleHeaderClick}\r\n tabIndex={-1}\r\n aria-disabled={this.disabled ? 'true' : undefined}\r\n >\r\n {this.hasChildren && (\r\n <div class=\"tree-item__chevron-container\" onClick={this.toggleExpand}>\r\n <ifx-icon class={`tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`}\r\n icon=\"chevron-right-16\"/>\r\n <div class=\"tree-item__line\"/>\r\n </div>\r\n )}\r\n <div\r\n class=\"tree-item__label-icon-container\"\r\n tabIndex={this.disabled ? -1 : 0}\r\n onKeyDown={this.handleKeyDown}\r\n >\r\n <div class=\"tree-item__icon-container\">\r\n {this.hasChildren ? (\r\n <Fragment>\r\n <ifx-icon class={{'icon--hidden': this.isExpanded}} icon=\"folder-16\"/>\r\n <ifx-icon class={{'icon--hidden': !this.isExpanded}} icon=\"folder-open-16\"/>\r\n </Fragment>\r\n ) : (\r\n <ifx-icon icon=\"file-16\"/>\r\n )}\r\n </div>\r\n <span class=\"tree-item__label\"><slot/></span>\r\n </div>\r\n </div>\r\n </div>\r\n {this.isExpanded && <div class=\"tree-item__children\"><slot name=\"children\"/></div>}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"tree-view-item.js","sourceRoot":"","sources":["../../../src/components/tree-view/tree-view-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Element, Fragment, Event, EventEmitter, Watch } from '@stencil/core';\n\nexport interface TreeViewCheckChangeEvent {\n checked: boolean;\n indeterminate: boolean;\n value?: string;\n affectedChildItems?: Array<{ checked: boolean; indeterminate: boolean; value?: string }>;\n component?: TreeViewItem;\n}\n\nexport interface TreeViewExpandChangeEvent {\n expanded: boolean;\n value?: string;\n affectedItems?: Array<{ expanded: boolean; value?: string }>;\n component?: TreeViewItem;\n}\n\nexport interface TreeViewDisableChangeEvent {\n disabled: boolean;\n component?: TreeViewItem;\n}\n\ninterface TreeState {\n isChecked: boolean;\n partialChecked: boolean;\n}\n\ntype HTMLIfxTreeViewItemElement = HTMLElement & { componentOnReady: () => Promise<unknown> };\n\n@Component({\n tag: 'ifx-tree-view-item',\n styleUrl: 'tree-view-item.scss',\n shadow: true,\n})\nexport class TreeViewItem {\n @Element() host: HTMLElement;\n @Prop({ reflect: true, mutable: true }) expanded: boolean = false;\n @Prop() initiallyExpanded: boolean = false;\n @Prop() disableItem: boolean = false;\n @Prop() ariaLabel: string \| null;\n @Prop() initiallySelected: boolean = false;\n @Prop() value: string;\n\n @Event() ifxTreeViewItemExpandChange: EventEmitter<TreeViewExpandChangeEvent>;\n @Event() ifxTreeViewItemCheckChange: EventEmitter<TreeViewCheckChangeEvent>;\n @Event() ifxTreeViewItemDisableChange: EventEmitter<TreeViewDisableChangeEvent>;\n\n @State() private hasChildren: boolean = false;\n @State() private isChecked: boolean = false;\n @State() private partialChecked: boolean = false;\n @State() private level: number = 0;\n @State() private disableAllItems: boolean = false;\n @State() private expandAllItems: boolean = false;\n @State() private suppressExpandEvents: boolean = false;\n\n private get disabled() {\n return this.disableAllItems \|\| this.disableItem;\n }\n\n private get isExpanded() {\n return this.expandAllItems \|\| this.expanded;\n }\n\n private findChildren = () =>\n Array.from(this.host.children)\n .filter((child): child is HTMLElement => child instanceof HTMLElement && child.tagName === 'IFX-TREE-VIEW-ITEM');\n\n private calculateNodeLevel = (): number => {\n let level = 0, parent = this.host.parentElement;\n while (parent) {\n if (parent.tagName === 'IFX-TREE-VIEW-ITEM') level++;\n parent = parent.parentElement;\n }\n return level;\n };\n\n componentWillLoad() {\n this.expanded = this.initiallyExpanded;\n this.hasChildren = this.findChildren().length > 0;\n this.level = this.calculateNodeLevel();\n this.host.setAttribute('data-level', this.level.toString());\n this.isChecked = this.initiallySelected;\n this.host.addEventListener('internal-check-state-change', this.handleStateChange);\n }\n\n componentDidLoad() {\n this.observeParentAttribute('disable-all-items', val => this.disableAllItems = val);\n this.observeParentAttribute('data-expand-all-items', val => this.expandAllItems = val, true);\n if (this.shouldExpandFromParent()) this.expandAllDescendants();\n (this.host as any)['__stencil_instance'] = this;\n if (this.initiallySelected) setTimeout(() => this.updateParentState(), 0);\n }\n\n private observeParentAttribute(attr: string, cb: (val: boolean) => void, breakOnAttr = false) {\n let parent = this.host.parentElement;\n while (parent) {\n if (parent.tagName === 'IFX-TREE-VIEW' \|\| (breakOnAttr && parent.hasAttribute(attr))) {\n const observer = new MutationObserver(() => cb(parent.hasAttribute(attr)));\n observer.observe(parent, { attributes: true });\n cb(parent.hasAttribute(attr));\n break;\n }\n parent = parent.parentElement;\n }\n }\n\n private shouldExpandFromParent(): boolean {\n let parent = this.host.parentElement;\n while (parent) {\n if (\n parent.tagName === 'IFX-TREE-VIEW' &&\n (parent.hasAttribute('expand-all-items') \|\| parent.hasAttribute('data-expand-all-items'))\n ) return true;\n parent = parent.parentElement;\n }\n return false;\n }\n\n private expandAllDescendants() {\n this.expanded = true;\n this.findChildren().forEach(child => {\n (child as any).expanded = true;\n (child as any).expandAllDescendants?.();\n });\n }\n\n private handleStateChange = (event: CustomEvent) => {\n if (this.disabled) return;\n event.stopPropagation();\n this.updateCheckState(event.detail.checked);\n };\n\n private handleCheckboxChange = (event: CustomEvent) => {\n if (this.disabled) return;\n this.updateCheckState(event.detail?.checked ?? !this.isChecked);\n };\n\n private handleHeaderClick = ({ target }: MouseEvent) => {\n if (this.disabled) return;\n if (!(target as HTMLElement).closest('.tree-item__checkbox-container, .tree-item__chevron-container')) {\n if (this.hasChildren) {\n const newCheckedState = !this.isChecked;\n this.updateCheckState(newCheckedState);\n const affectedItems = newCheckedState\n ? this.expandOrCollapseAllDescendants(true)\n : this.expandOrCollapseAllDescendants(false);\n this.ifxTreeViewItemExpandChange.emit({\n expanded: newCheckedState,\n affectedItems,\n component: this\n });\n } else {\n this.updateCheckState(!this.isChecked);\n }\n }\n };\n\n private expandOrCollapseAllDescendants(expand: boolean) {\n this.suppressExpandEvents = true;\n const affectedItems: Array<{ expanded: boolean; value?: string }> = [];\n this.expanded = expand;\n if (this.hasChildren) affectedItems.push({ expanded: expand, value: this.value });\n this.findChildren().forEach(child => {\n const childInstance = (child as any)['__stencil_instance'];\n if (childInstance && childInstance.hasChildren) {\n childInstance.suppressExpandEvents = true;\n childInstance.expanded = expand;\n affectedItems.push({ expanded: expand, value: childInstance.value });\n if (childInstance.hasChildren) {\n const childAffected = childInstance.expandOrCollapseAllDescendants(expand);\n affectedItems.push(...childAffected);\n }\n }\n });\n this.suppressExpandEvents = false;\n return affectedItems;\n }\n\n private async updateCheckState(checked: boolean, fromParent = false) {\n if (this.disabled) return;\n if (!fromParent && this.hasChildren) {\n const affected = this.collectDescendantStates(checked);\n this.setNodeState({ isChecked: checked, partialChecked: false }, false);\n await this.updateChildrenSilently(checked);\n this.ifxTreeViewItemCheckChange.emit({\n checked,\n indeterminate: false,\n value: this.value,\n affectedChildItems: affected,\n component: this,\n });\n this.updateParentState();\n } else if (fromParent) {\n this.setNodeState({ isChecked: checked, partialChecked: false }, false);\n } else {\n this.setNodeState({ isChecked: checked, partialChecked: false });\n await this.updateChildrenState(checked);\n this.updateParentState();\n }\n }\n\n private async updateChildrenSilently(checked: boolean) {\n for (const child of this.findChildren()) {\n const childInstance = (child as any)['__stencil_instance'];\n if (childInstance && !childInstance.disabled) {\n childInstance.setNodeState({ isChecked: checked, partialChecked: false }, false);\n await childInstance.updateChildrenSilently(checked);\n }\n }\n }\n\n @Watch('expanded')\n handleExpandedChange(newValue: boolean) {\n if (!this.suppressExpandEvents) {\n this.ifxTreeViewItemExpandChange.emit({\n expanded: newValue,\n value: this.value,\n affectedItems: [{ expanded: newValue, value: this.value }],\n component: this\n });\n }\n }\n\n @Watch('disableItem')\n handleDisableItemChange(newValue: boolean) {\n this.ifxTreeViewItemDisableChange.emit({ disabled: newValue, component: this });\n }\n\n private setNodeState(state: TreeState, emitEvent = true) {\n this.isChecked = state.isChecked;\n this.partialChecked = state.partialChecked;\n if (emitEvent) {\n this.ifxTreeViewItemCheckChange.emit({\n checked: this.isChecked,\n indeterminate: this.partialChecked,\n value: this.value,\n level: this.level,\n disabled: this.disabled,\n component: this\n } as any);\n }\n }\n\n private collectDescendantStates(checked: boolean) {\n const descendants: Array<{ checked: boolean; indeterminate: boolean; value?: string }> = [];\n const collect = (el: Element, skipSelf = false) => {\n let instance: any = el === this.host ? this : (el as any)['__stencil_instance'];\n if (!skipSelf && !instance?.disabled) {\n descendants.push({\n checked,\n indeterminate: false,\n value: instance?.value,\n });\n }\n Array.from(el.children)\n .forEach(child => {\n if (child.tagName === 'IFX-TREE-VIEW-ITEM') collect(child, false);\n });\n };\n Array.from(this.host.children)\n .forEach(child => {\n if (child.tagName === 'IFX-TREE-VIEW-ITEM') collect(child, false);\n });\n return descendants;\n }\n\n private async updateChildrenState(checked: boolean) {\n for (const child of this.findChildren()) {\n const childInstance = (child as any)['__stencil_instance'];\n if (childInstance && !childInstance.disabled) {\n await (child as HTMLIfxTreeViewItemElement).componentOnReady();\n child.dispatchEvent(new CustomEvent('internal-check-state-change', {\n detail: { checked },\n bubbles: false,\n composed: true\n }));\n }\n }\n }\n\n private findSiblingNodes(parent: HTMLElement): HTMLIfxTreeViewItemElement[] {\n return Array.from(parent.children)\n .filter((child): child is HTMLIfxTreeViewItemElement =>\n child instanceof HTMLElement && child.tagName === 'IFX-TREE-VIEW-ITEM'\n );\n }\n\n private updateParentState() {\n const parent = this.host.parentElement?.closest('ifx-tree-view-item') as HTMLIfxTreeViewItemElement;\n if (!parent) return;\n setTimeout(() => {\n const parentInstance = (parent as any)['__stencil_instance'] as TreeViewItem;\n if (!parentInstance) return;\n const siblings = this.findSiblingNodes(parent);\n const { allChecked, someChecked } = this.calculateSiblingStates(siblings);\n parentInstance.setNodeState({\n isChecked: allChecked,\n partialChecked: !allChecked && someChecked\n }, false);\n parentInstance.updateParentState();\n }, 0);\n }\n\n private calculateSiblingStates(siblings: HTMLIfxTreeViewItemElement[]) {\n const states = siblings.map(sib => {\n const instance = (sib as any)['__stencil_instance'] as TreeViewItem;\n return { checked: instance?.isChecked, partial: instance?.partialChecked };\n });\n const checkedCount = states.filter(state => state.checked).length;\n const partialCount = states.filter(state => state.partial).length;\n return {\n allChecked: states.length > 0 && checkedCount === states.length && partialCount === 0,\n someChecked: checkedCount > 0 \|\| partialCount > 0\n };\n }\n\n private toggleExpand = () => {\n if (this.disabled \|\| !this.hasChildren) return;\n this.expanded = !this.expanded;\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const allItems = Array.from(\n this.host.closest('ifx-tree-view')?.querySelectorAll('ifx-tree-view-item') \|\| []\n );\n const visibleItems = allItems.filter(item => {\n let parent = item.parentElement?.closest('ifx-tree-view-item');\n while (parent) {\n const parentCmp = parent as any;\n if (!(parentCmp.expandAllItems \|\| parentCmp.expanded)) return false;\n parent = parent.parentElement?.closest('ifx-tree-view-item');\n }\n return true;\n });\n const currentIndex = visibleItems.findIndex(el => el === this.host);\n const focusLabelIcon = (el: Element \| null) =>\n (el as HTMLElement \| null)?.focus();\n\n switch (event.key) {\n case 'ArrowDown': {\n event.preventDefault();\n for (let i = currentIndex + 1; i < visibleItems.length; i++) {\n const next = visibleItems[i] as any;\n if (!next.disabled) {\n focusLabelIcon(next.shadowRoot?.querySelector('.tree-item__label-icon-container'));\n break;\n }\n }\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n for (let i = currentIndex - 1; i >= 0; i--) {\n const prev = visibleItems[i] as any;\n if (!prev.disabled) {\n focusLabelIcon(prev.shadowRoot?.querySelector('.tree-item__label-icon-container'));\n break;\n }\n }\n break;\n }\n case 'ArrowRight': {\n event.preventDefault();\n if (!this.isExpanded && this.hasChildren) {\n this.expanded = true;\n } else if (this.isExpanded && this.hasChildren) {\n const firstChild = this.host.querySelector('ifx-tree-view-item');\n if (firstChild && !(firstChild as any).disabled) {\n focusLabelIcon((firstChild as HTMLElement).shadowRoot?.querySelector('.tree-item__label-icon-container'));\n }\n }\n break;\n }\n case 'ArrowLeft': {\n event.preventDefault();\n if (this.isExpanded && this.hasChildren) {\n this.expanded = false;\n } else {\n const parent = this.host.parentElement?.closest('ifx-tree-view-item');\n if (parent && !(parent as any).disabled) {\n focusLabelIcon((parent as HTMLElement).shadowRoot?.querySelector('.tree-item__label-icon-container'));\n }\n }\n break;\n }\n case ' ':\n case 'Enter': {\n event.preventDefault();\n if (this.hasChildren) {\n const newCheckedState = !this.isChecked;\n this.updateCheckState(newCheckedState);\n const affectedItems = newCheckedState\n ? this.expandOrCollapseAllDescendants(true)\n : this.expandOrCollapseAllDescendants(false);\n this.ifxTreeViewItemExpandChange.emit({\n expanded: newCheckedState,\n affectedItems,\n component: this\n });\n } else {\n this.updateCheckState(!this.isChecked);\n }\n break;\n }\n }\n };\n\n render() {\n return (\n <div\n class={{\n 'tree-item': true,\n 'tree-item--expanded': this.isExpanded,\n 'tree-item--has-children': this.hasChildren,\n 'tree-item--disabled': this.disabled,\n }}\n role=\"treeitem\"\n aria-expanded={this.isExpanded ? 'true' : 'false'}\n data-level={this.level}\n aria-disabled={this.disabled ? 'true' : undefined}\n aria-label={this.ariaLabel}\n >\n <div class=\"tree-item__content\">\n <div class=\"tree-item__checkbox-container\" onClick={e => e.stopPropagation()}>\n <ifx-checkbox\n size='s'\n checked={this.partialChecked ? false : this.isChecked}\n indeterminate={this.partialChecked}\n onIfxChange={this.handleCheckboxChange}\n disabled={this.disabled}\n />\n </div>\n <div\n class=\"tree-item__header\"\n style={{ paddingLeft: `${this.level * 24 + 10}px` }}\n onClick={this.handleHeaderClick}\n tabIndex={-1}\n aria-disabled={this.disabled ? 'true' : undefined}\n >\n {this.hasChildren && (\n <div class=\"tree-item__chevron-container\" onClick={this.toggleExpand}>\n <ifx-icon class={`tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`}\n icon=\"chevron-right-16\"/>\n <div class=\"tree-item__line\"/>\n </div>\n )}\n <div\n class=\"tree-item__label-icon-container\"\n tabIndex={this.disabled ? -1 : 0}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"tree-item__icon-container\">\n {this.hasChildren ? (\n <Fragment>\n <ifx-icon class={{'icon--hidden': this.isExpanded}} icon=\"folder-16\"/>\n <ifx-icon class={{'icon--hidden': !this.isExpanded}} icon=\"folder-open-16\"/>\n </Fragment>\n ) : (\n <ifx-icon icon=\"file-16\"/>\n )}\n </div>\n <span class=\"tree-item__label\"><slot/></span>\n </div>\n </div>\n </div>\n {this.isExpanded && <div class=\"tree-item__children\"><slot name=\"children\"/></div>}\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/tree-view/tree-view.js CHANGED Viewed

@@ -36,7 +36,7 @@ export class TreeView {
         }
     }
     render() {
-        return (h("div", { key: 'aba162fba2a38dd4db22ed431781a043df9164d3', class: `tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`, role: "tree", "aria-label": this.ariaLabel }, this.label && this.label.trim() !== '' && h("div", { key: '4c145a78864804bf55c39961e6171658b822f8df', class: "tree-view__label" }, this.label), h("slot", { key: '9597e6f0faacbca5b3f2d63b643c7cd8e95eb75d', ref: this.handleSlotRef })));
+        return (h("div", { key: 'd8339646d8f0aab7afd0a0c75423b03106c5eb1f', class: `tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`, role: "tree", "aria-label": this.ariaLabel }, this.label && this.label.trim() !== '' && h("div", { key: '010f9c98e9c17b4d6be10d886dce7738dc094a55', class: "tree-view__label" }, this.label), h("slot", { key: 'd09ddb739ede79d1b22ec390510444783cc2e8fc', ref: this.handleSlotRef })));
     }
     static get is() { return "ifx-tree-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tree-view/tree-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tree-view.js","sourceRoot":"","sources":["../../../src/components/tree-view/tree-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAOzE,MAAM,OAAO,QAAQ;IALrB;QAQU,oBAAe,GAAY,KAAK,CAAC;QACjC,mBAAc,GAAY,KAAK,CAAC;QAgBhC,kBAAa,GAAG,CAAC,EAA0B,EAAE,EAAE;YACrD,IAAI,EAAE,EAAE,CAAC;gBACP,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;oBACzB,EAAE,CAAC,YAAY,CAAC,wBAAwB,EAAE,MAAM,CAAC,CAAC;gBACpD,CAAC;qBAAM,CAAC;oBACN,EAAE,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC;gBAC/C,CAAC;gBACD,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;oBACxB,EAAE,CAAC,YAAY,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;gBACnD,CAAC;qBAAM,CAAC;oBACN,EAAE,CAAC,eAAe,CAAC,uBAAuB,CAAC,CAAC;gBAC9C,CAAC;YACH,CAAC;QACH,CAAC,CAAC;KAqBH;IA3CC,0BAA0B,CAAC,QAAiB;QAC1C,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,CAAC;IAGD,2BAA2B,CAAC,QAAiB;QAC3C,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClD,CAAC;IAiBD,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC,CAAA;QAClD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE,aAAa,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,EAAE,EACxE,IAAI,EAAC,MAAM,gBACC,IAAI,CAAC,SAAS;YAEzB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,4DAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO;YAC3F,6DAAM,GAAG,EAAE,IAAI,CAAC,aAAa,GAAS,CAClC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Watch, 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 tag: 'ifx-tree-view',\r\n styleUrl: 'tree-view.scss',\r\n shadow: true,\r\n})\r\nexport class TreeView {\r\n @Element() el: HTMLElement;\r\n @Prop() label?: string;\r\n @Prop() disableAllItems: boolean = false;\r\n @Prop() expandAllItems: boolean = false;\r\n @Prop() ariaLabel: string \| null;\r\n\r\n @Event() ifxTreeViewExpandAllChange: EventEmitter<boolean>;\r\n @Event() ifxTreeViewDisableAllChange: EventEmitter<boolean>;\r\n\r\n @Watch('expandAllItems')\r\n handleExpandAllItemsChange(newValue: boolean) {\r\n this.ifxTreeViewExpandAllChange.emit(newValue);\r\n }\r\n\r\n @Watch('disableAllItems')\r\n handleDisableAllItemsChange(newValue: boolean) {\r\n this.ifxTreeViewDisableAllChange.emit(newValue);\r\n }\r\n\r\n private handleSlotRef = (el: HTMLSlotElement \| null) => {\r\n if (el) {\r\n if (this.disableAllItems) {\r\n el.setAttribute('data-disable-all-items', 'true');\r\n } else {\r\n el.removeAttribute('data-disable-all-items');\r\n }\r\n if (this.expandAllItems) {\r\n el.setAttribute('data-expand-all-items', 'true');\r\n } else {\r\n el.removeAttribute('data-expand-all-items');\r\n }\r\n }\r\n };\r\n\r\n async componentDidLoad() { \r\n if(!isNestedInIfxComponent(this.el)) { \r\n const framework = detectFramework();\r\n trackComponent('ifx-tree-view', await framework)\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n class={`tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`}\r\n role=\"tree\"\r\n aria-label={this.ariaLabel}\r\n >\r\n {this.label && this.label.trim() !== '' && <div class=\"tree-view__label\">{this.label}</div>}\r\n <slot ref={this.handleSlotRef}></slot>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"tree-view.js","sourceRoot":"","sources":["../../../src/components/tree-view/tree-view.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAOzE,MAAM,OAAO,QAAQ;IALrB;QAQU,oBAAe,GAAY,KAAK,CAAC;QACjC,mBAAc,GAAY,KAAK,CAAC;QAgBhC,kBAAa,GAAG,CAAC,EAA0B,EAAE,EAAE;YACrD,IAAI,EAAE,EAAE,CAAC;gBACP,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;oBACzB,EAAE,CAAC,YAAY,CAAC,wBAAwB,EAAE,MAAM,CAAC,CAAC;gBACpD,CAAC;qBAAM,CAAC;oBACN,EAAE,CAAC,eAAe,CAAC,wBAAwB,CAAC,CAAC;gBAC/C,CAAC;gBACD,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;oBACxB,EAAE,CAAC,YAAY,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;gBACnD,CAAC;qBAAM,CAAC;oBACN,EAAE,CAAC,eAAe,CAAC,uBAAuB,CAAC,CAAC;gBAC9C,CAAC;YACH,CAAC;QACH,CAAC,CAAC;KAqBH;IA3CC,0BAA0B,CAAC,QAAiB;QAC1C,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,CAAC;IAGD,2BAA2B,CAAC,QAAiB;QAC3C,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAClD,CAAC;IAiBD,KAAK,CAAC,gBAAgB;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;YACpC,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,cAAc,CAAC,eAAe,EAAE,MAAM,SAAS,CAAC,CAAA;QAClD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE,aAAa,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,EAAE,EACxE,IAAI,EAAC,MAAM,gBACC,IAAI,CAAC,SAAS;YAEzB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,4DAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAO;YAC3F,6DAAM,GAAG,EAAE,IAAI,CAAC,aAAa,GAAS,CAClC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Watch, 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 tag: 'ifx-tree-view',\n styleUrl: 'tree-view.scss',\n shadow: true,\n})\nexport class TreeView {\n @Element() el: HTMLElement;\n @Prop() label?: string;\n @Prop() disableAllItems: boolean = false;\n @Prop() expandAllItems: boolean = false;\n @Prop() ariaLabel: string \| null;\n\n @Event() ifxTreeViewExpandAllChange: EventEmitter<boolean>;\n @Event() ifxTreeViewDisableAllChange: EventEmitter<boolean>;\n\n @Watch('expandAllItems')\n handleExpandAllItemsChange(newValue: boolean) {\n this.ifxTreeViewExpandAllChange.emit(newValue);\n }\n\n @Watch('disableAllItems')\n handleDisableAllItemsChange(newValue: boolean) {\n this.ifxTreeViewDisableAllChange.emit(newValue);\n }\n\n private handleSlotRef = (el: HTMLSlotElement \| null) => {\n if (el) {\n if (this.disableAllItems) {\n el.setAttribute('data-disable-all-items', 'true');\n } else {\n el.removeAttribute('data-disable-all-items');\n }\n if (this.expandAllItems) {\n el.setAttribute('data-expand-all-items', 'true');\n } else {\n el.removeAttribute('data-expand-all-items');\n }\n }\n };\n\n async componentDidLoad() { \n if(!isNestedInIfxComponent(this.el)) { \n const framework = detectFramework();\n trackComponent('ifx-tree-view', await framework)\n }\n }\n\n render() {\n return (\n <div\n class={`tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`}\n role=\"tree\"\n aria-label={this.ariaLabel}\n >\n {this.label && this.label.trim() !== '' && <div class=\"tree-view__label\">{this.label}</div>}\n <slot ref={this.handleSlotRef}></slot>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/tree-view/tree-view.stories.js CHANGED Viewed

@@ -123,39 +123,39 @@ const BaseTemplate = (args) => {
     const ariaLabelItemAttr = args.ariaLabelItem
         ? `aria-label="${args.ariaLabelItem}"`
         : '';
-    el.innerHTML = `
-    <ifx-tree-view-item icon="folder" initially-expanded="true" value="root-folder" ${ariaLabelItemAttr}>
-      Root Folder
-      <ifx-tree-view-item slot="children" icon="folder" initially-expanded="true" value="subfolder-1" ${ariaLabelItemAttr}>
-        Subfolder 1
-        <ifx-tree-view-item slot="children" icon="file" value="file-1-1" ${ariaLabelItemAttr}>File 1-1.txt</ifx-tree-view-item>
-        <ifx-tree-view-item slot="children" icon="file" value="file-1-2" ${ariaLabelItemAttr}>File 1-2.txt</ifx-tree-view-item>
-        <ifx-tree-view-item slot="children" icon="folder" value="subfolder-1-1" ${ariaLabelItemAttr}>
-          Subfolder 1-1
-          <ifx-tree-view-item slot="children" icon="file" value="file-1-1-1" ${ariaLabelItemAttr}>File 1-1-1.txt</ifx-tree-view-item>
-          <ifx-tree-view-item slot="children" icon="file" value="file-1-1-2" ${ariaLabelItemAttr}>File 1-1-2.txt</ifx-tree-view-item>
-        </ifx-tree-view-item>
-      </ifx-tree-view-item>
-      <ifx-tree-view-item slot="children" icon="folder" value="subfolder-2" ${ariaLabelItemAttr}>
-        Subfolder 2
-        <ifx-tree-view-item slot="children" icon="file" value="file-2-1" ${ariaLabelItemAttr}>File 2-1.txt</ifx-tree-view-item>
-        <ifx-tree-view-item slot="children" icon="folder" value="subfolder-2-1" ${ariaLabelItemAttr}>
-          Subfolder 2-1
-          <ifx-tree-view-item slot="children" icon="file" value="file-2-1-1" ${ariaLabelItemAttr}>File 2-1-1.txt</ifx-tree-view-item>
-          <ifx-tree-view-item slot="children" icon="folder" value="subfolder-2-1-1" ${ariaLabelItemAttr}>
-            Subfolder 2-1-1
-            <ifx-tree-view-item slot="children" icon="file" value="file-2-1-1-1" ${ariaLabelItemAttr}>File 2-1-1-1.txt</ifx-tree-view-item>
-          </ifx-tree-view-item>
-        </ifx-tree-view-item>
-      </ifx-tree-view-item>
-      <ifx-tree-view-item slot="children" icon="file" value="file-at-root" ${ariaLabelItemAttr}>File at root.txt</ifx-tree-view-item>
-    </ifx-tree-view-item>
-    <ifx-tree-view-item icon="folder" value="another-root" ${ariaLabelItemAttr}>
-      Another Root Folder
-      <ifx-tree-view-item slot="children" icon="file" value="file-a" ${ariaLabelItemAttr}>File A.txt</ifx-tree-view-item>
-      <ifx-tree-view-item slot="children" icon="file" value="file-b" ${ariaLabelItemAttr}>File B.txt</ifx-tree-view-item>
-    </ifx-tree-view-item>
-    <ifx-tree-view-item icon="file" value="single-file" ${ariaLabelItemAttr}>Single File</ifx-tree-view-item>
+    el.innerHTML = `
+    <ifx-tree-view-item icon="folder" initially-expanded="true" value="root-folder" ${ariaLabelItemAttr}>
+      Root Folder
+      <ifx-tree-view-item slot="children" icon="folder" initially-expanded="true" value="subfolder-1" ${ariaLabelItemAttr}>
+        Subfolder 1
+        <ifx-tree-view-item slot="children" icon="file" value="file-1-1" ${ariaLabelItemAttr}>File 1-1.txt</ifx-tree-view-item>
+        <ifx-tree-view-item slot="children" icon="file" value="file-1-2" ${ariaLabelItemAttr}>File 1-2.txt</ifx-tree-view-item>
+        <ifx-tree-view-item slot="children" icon="folder" value="subfolder-1-1" ${ariaLabelItemAttr}>
+          Subfolder 1-1
+          <ifx-tree-view-item slot="children" icon="file" value="file-1-1-1" ${ariaLabelItemAttr}>File 1-1-1.txt</ifx-tree-view-item>
+          <ifx-tree-view-item slot="children" icon="file" value="file-1-1-2" ${ariaLabelItemAttr}>File 1-1-2.txt</ifx-tree-view-item>
+        </ifx-tree-view-item>
+      </ifx-tree-view-item>
+      <ifx-tree-view-item slot="children" icon="folder" value="subfolder-2" ${ariaLabelItemAttr}>
+        Subfolder 2
+        <ifx-tree-view-item slot="children" icon="file" value="file-2-1" ${ariaLabelItemAttr}>File 2-1.txt</ifx-tree-view-item>
+        <ifx-tree-view-item slot="children" icon="folder" value="subfolder-2-1" ${ariaLabelItemAttr}>
+          Subfolder 2-1
+          <ifx-tree-view-item slot="children" icon="file" value="file-2-1-1" ${ariaLabelItemAttr}>File 2-1-1.txt</ifx-tree-view-item>
+          <ifx-tree-view-item slot="children" icon="folder" value="subfolder-2-1-1" ${ariaLabelItemAttr}>
+            Subfolder 2-1-1
+            <ifx-tree-view-item slot="children" icon="file" value="file-2-1-1-1" ${ariaLabelItemAttr}>File 2-1-1-1.txt</ifx-tree-view-item>
+          </ifx-tree-view-item>
+        </ifx-tree-view-item>
+      </ifx-tree-view-item>
+      <ifx-tree-view-item slot="children" icon="file" value="file-at-root" ${ariaLabelItemAttr}>File at root.txt</ifx-tree-view-item>
+    </ifx-tree-view-item>
+    <ifx-tree-view-item icon="folder" value="another-root" ${ariaLabelItemAttr}>
+      Another Root Folder
+      <ifx-tree-view-item slot="children" icon="file" value="file-a" ${ariaLabelItemAttr}>File A.txt</ifx-tree-view-item>
+      <ifx-tree-view-item slot="children" icon="file" value="file-b" ${ariaLabelItemAttr}>File B.txt</ifx-tree-view-item>
+    </ifx-tree-view-item>
+    <ifx-tree-view-item icon="file" value="single-file" ${ariaLabelItemAttr}>Single File</ifx-tree-view-item>
   `;
     el.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));
     el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));
@@ -226,39 +226,39 @@ export const ContainerDemo = (args) => {
         el.setAttribute('disable-all-items', 'true');
     if (args.expandAllItems)
         el.setAttribute('expand-all-items', 'true');
-    el.innerHTML = `
-    <ifx-tree-view-item icon="folder" initially-expanded="true" value="root-folder" ${ariaLabelItemAttr}>
-      Root Folder
-      <ifx-tree-view-item slot="children" icon="folder" initially-expanded="true" value="subfolder-1" ${ariaLabelItemAttr}>
-        Subfolder 1
-        <ifx-tree-view-item slot="children" icon="file" value="file-1-1" ${ariaLabelItemAttr}>File 1-1.txt</ifx-tree-view-item>
-        <ifx-tree-view-item slot="children" icon="file" value="file-1-2" ${ariaLabelItemAttr}>File 1-2.txt</ifx-tree-view-item>
-        <ifx-tree-view-item slot="children" icon="folder" value="subfolder-1-1" ${ariaLabelItemAttr}>
-          Subfolder 1-1
-          <ifx-tree-view-item slot="children" icon="file" value="file-1-1-1" ${ariaLabelItemAttr}>File 1-1-1.txt</ifx-tree-view-item>
-          <ifx-tree-view-item slot="children" icon="file" value="file-1-1-2" ${ariaLabelItemAttr}>File 1-1-2.txt</ifx-tree-view-item>
-        </ifx-tree-view-item>
-      </ifx-tree-view-item>
-      <ifx-tree-view-item slot="children" icon="folder" value="subfolder-2" ${ariaLabelItemAttr}>
-        Subfolder 2
-        <ifx-tree-view-item slot="children" icon="file" value="file-2-1" ${ariaLabelItemAttr}>File 2-1.txt</ifx-tree-view-item>
-        <ifx-tree-view-item slot="children" icon="folder" value="subfolder-2-1" ${ariaLabelItemAttr}>
-          Subfolder 2-1
-          <ifx-tree-view-item slot="children" icon="file" value="file-2-1-1" ${ariaLabelItemAttr}>File 2-1-1.txt</ifx-tree-view-item>
-          <ifx-tree-view-item slot="children" icon="folder" value="subfolder-2-1-1" ${ariaLabelItemAttr}>
-            Subfolder 2-1-1
-            <ifx-tree-view-item slot="children" icon="file" value="file-2-1-1-1" ${ariaLabelItemAttr}>File 2-1-1-1.txt</ifx-tree-view-item>
-          </ifx-tree-view-item>
-        </ifx-tree-view-item>
-      </ifx-tree-view-item>
-      <ifx-tree-view-item slot="children" icon="file" value="file-at-root" ${ariaLabelItemAttr}>File at root.txt</ifx-tree-view-item>
-    </ifx-tree-view-item>
-    <ifx-tree-view-item icon="folder" value="another-root" ${ariaLabelItemAttr}>
-      Another Root Folder
-      <ifx-tree-view-item slot="children" icon="file" value="file-a" ${ariaLabelItemAttr}>File A.txt</ifx-tree-view-item>
-      <ifx-tree-view-item slot="children" icon="file" value="file-b" ${ariaLabelItemAttr}>File B.txt</ifx-tree-view-item>
-    </ifx-tree-view-item>
-    <ifx-tree-view-item icon="file" value="single-file" ${ariaLabelItemAttr}>Single File</ifx-tree-view-item>
+    el.innerHTML = `
+    <ifx-tree-view-item icon="folder" initially-expanded="true" value="root-folder" ${ariaLabelItemAttr}>
+      Root Folder
+      <ifx-tree-view-item slot="children" icon="folder" initially-expanded="true" value="subfolder-1" ${ariaLabelItemAttr}>
+        Subfolder 1
+        <ifx-tree-view-item slot="children" icon="file" value="file-1-1" ${ariaLabelItemAttr}>File 1-1.txt</ifx-tree-view-item>
+        <ifx-tree-view-item slot="children" icon="file" value="file-1-2" ${ariaLabelItemAttr}>File 1-2.txt</ifx-tree-view-item>
+        <ifx-tree-view-item slot="children" icon="folder" value="subfolder-1-1" ${ariaLabelItemAttr}>
+          Subfolder 1-1
+          <ifx-tree-view-item slot="children" icon="file" value="file-1-1-1" ${ariaLabelItemAttr}>File 1-1-1.txt</ifx-tree-view-item>
+          <ifx-tree-view-item slot="children" icon="file" value="file-1-1-2" ${ariaLabelItemAttr}>File 1-1-2.txt</ifx-tree-view-item>
+        </ifx-tree-view-item>
+      </ifx-tree-view-item>
+      <ifx-tree-view-item slot="children" icon="folder" value="subfolder-2" ${ariaLabelItemAttr}>
+        Subfolder 2
+        <ifx-tree-view-item slot="children" icon="file" value="file-2-1" ${ariaLabelItemAttr}>File 2-1.txt</ifx-tree-view-item>
+        <ifx-tree-view-item slot="children" icon="folder" value="subfolder-2-1" ${ariaLabelItemAttr}>
+          Subfolder 2-1
+          <ifx-tree-view-item slot="children" icon="file" value="file-2-1-1" ${ariaLabelItemAttr}>File 2-1-1.txt</ifx-tree-view-item>
+          <ifx-tree-view-item slot="children" icon="folder" value="subfolder-2-1-1" ${ariaLabelItemAttr}>
+            Subfolder 2-1-1
+            <ifx-tree-view-item slot="children" icon="file" value="file-2-1-1-1" ${ariaLabelItemAttr}>File 2-1-1-1.txt</ifx-tree-view-item>
+          </ifx-tree-view-item>
+        </ifx-tree-view-item>
+      </ifx-tree-view-item>
+      <ifx-tree-view-item slot="children" icon="file" value="file-at-root" ${ariaLabelItemAttr}>File at root.txt</ifx-tree-view-item>
+    </ifx-tree-view-item>
+    <ifx-tree-view-item icon="folder" value="another-root" ${ariaLabelItemAttr}>
+      Another Root Folder
+      <ifx-tree-view-item slot="children" icon="file" value="file-a" ${ariaLabelItemAttr}>File A.txt</ifx-tree-view-item>
+      <ifx-tree-view-item slot="children" icon="file" value="file-b" ${ariaLabelItemAttr}>File B.txt</ifx-tree-view-item>
+    </ifx-tree-view-item>
+    <ifx-tree-view-item icon="file" value="single-file" ${ariaLabelItemAttr}>Single File</ifx-tree-view-item>
   `;
     el.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));
     el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));
@@ -304,16 +304,16 @@ export const SingleItemStates = (args) => {
     const ariaLabelItemAttr = args.ariaLabelItem
         ? `aria-label="${args.ariaLabelItem}"`
         : '';
-    el.innerHTML = `
-    <ifx-tree-view-item value="file-1" ${ariaLabelItemAttr}>File</ifx-tree-view-item>
-    <ifx-tree-view-item value="file-disabled" ${ariaLabelItemAttr} disable-item="true">File disabled</ifx-tree-view-item>
-    <ifx-tree-view-item initially-expanded="true" value="folder-expanded" ${ariaLabelItemAttr}>
-      Folder initially expanded
-      <ifx-tree-view-item slot="children" initially-selected="true" value="file-selected" ${ariaLabelItemAttr}>File</ifx-tree-view-item>
-      <ifx-tree-view-item slot="children" value="file-normal" ${ariaLabelItemAttr}>File</ifx-tree-view-item>
-    </ifx-tree-view-item>
-    <ifx-tree-view-item value="item-1" ${ariaLabelItemAttr}>Normal Item</ifx-tree-view-item>
-    <ifx-tree-view-item value="item-2" ${ariaLabelItemAttr}>Normal Item</ifx-tree-view-item>
+    el.innerHTML = `
+    <ifx-tree-view-item value="file-1" ${ariaLabelItemAttr}>File</ifx-tree-view-item>
+    <ifx-tree-view-item value="file-disabled" ${ariaLabelItemAttr} disable-item="true">File disabled</ifx-tree-view-item>
+    <ifx-tree-view-item initially-expanded="true" value="folder-expanded" ${ariaLabelItemAttr}>
+      Folder initially expanded
+      <ifx-tree-view-item slot="children" initially-selected="true" value="file-selected" ${ariaLabelItemAttr}>File</ifx-tree-view-item>
+      <ifx-tree-view-item slot="children" value="file-normal" ${ariaLabelItemAttr}>File</ifx-tree-view-item>
+    </ifx-tree-view-item>
+    <ifx-tree-view-item value="item-1" ${ariaLabelItemAttr}>Normal Item</ifx-tree-view-item>
+    <ifx-tree-view-item value="item-2" ${ariaLabelItemAttr}>Normal Item</ifx-tree-view-item>
   `;
     el.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));
     el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));