@infineon/infineon-design-system-stencil 33.6.0--canary.1869.b1674220449fed92bf0dee5aead2bd511f2c78f1.0 → 33.6.0--canary.1869.7438a96be80961b83f2346f57d219844afbd5c18.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.
- package/dist/cjs/ifx-tree-view-item.cjs.entry.js +67 -11
- package/dist/cjs/ifx-tree-view-item.cjs.entry.js.map +1 -1
- package/dist/collection/components/tree-view/tree-view-item.js +76 -14
- package/dist/collection/components/tree-view/tree-view-item.js.map +1 -1
- package/dist/collection/components/tree-view/tree-view.stories.js +26 -5
- package/dist/collection/components/tree-view/tree-view.stories.js.map +1 -1
- package/dist/components/ifx-tree-view-item.js +67 -11
- package/dist/components/ifx-tree-view-item.js.map +1 -1
- package/dist/esm/ifx-tree-view-item.entry.js +67 -11
- package/dist/esm/ifx-tree-view-item.entry.js.map +1 -1
- package/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js +1 -1
- package/dist/infineon-design-system-stencil/p-09b12ecd.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-09b12ecd.entry.js.map +1 -0
- package/dist/types/components/tree-view/tree-view-item.d.ts +12 -4
- package/dist/types/components.d.ts +4 -2
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-d5c7d113.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-d5c7d113.entry.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tree-view.stories.js","sourceRoot":"","sources":["../../../src/components/tree-view/tree-view.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/html';\n\nconst hideAllControlsExcept = (allowedKeys: string[]) => {\n const allProps = [\n 'label', 'disableAllItems', 'expandAllItems', 'ariaLabel'\n ];\n const argTypes: Record<string, any> = {};\n for (const prop of allProps) {\n if (!allowedKeys.includes(prop)) {\n argTypes[prop] = { table: { disable: true } };\n }\n }\n return argTypes;\n};\n\nconst disableCustomEventControls = {\n ifxTreeViewExpandAllChange: { table: { disable: true } },\n ifxTreeViewDisableAllChange: { table: { disable: true } },\n ifxTreeViewItemExpandChange: { table: { disable: true } },\n ifxTreeViewItemCheckChange: { table: { disable: true } },\n ifxTreeViewItemDisableChange: { table: { disable: true } }\n};\n\nconst meta: Meta = {\n title: 'Components/Tree View',\n tags: ['autodocs'],\n parameters: {\n controls: { expanded: true },\n docs: {\n description: {\n component: 'Tree View component with nested items, checkboxes, keyboard navigation, and accessibility.',\n },\n },\n },\n argTypes: {\n // --- FUNCTION ---\n disableAllItems: {\n control: 'boolean',\n description: 'Disables all tree items.',\n table: { category: 'Function', defaultValue: { summary: 'false' } },\n },\n expandAllItems: {\n control: 'boolean',\n description: 'Expands all tree items.',\n table: { category: 'Function', defaultValue: { summary: 'false' } },\n },\n initiallyExpanded: {\n table: { category: 'Function', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },\n description: 'Expands this tree item initially (set as attribute on the item). No interactive control.',\n control: false,\n },\n disableItem: {\n table: { category: 'Function', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },\n description: 'Disables this tree item (set as attribute on the item). No interactive control.',\n control: false,\n },\n\n // --- Label ---\n label: {\n control: 'text',\n description: 'Label / Heading for tree view.',\n table: { category: 'Label', defaultValue: { summary: 'false' } },\n },\n\n // --- ARIA LABELS ---\n ariaLabel: {\n control: 'text',\n description: 'ARIA label for the tree view.',\n table: { category: 'Aria Labels', defaultValue: { summary: 'Tree View' } },\n },\n ariaLabelItem: {\n control: 'text',\n description: 'ARIA label for all tree view items.',\n table: { category: 'Aria Labels', defaultValue: { summary: 'Tree Item' } },\n },\n\n // --- CUSTOM EVENTS ---\n ifxTreeViewExpandAllChange: {\n action: 'ifxTreeViewExpandAllChange',\n table: { category: 'Custom Events' },\n description: 'Fired when expandAllItems changes.',\n },\n ifxTreeViewDisableAllChange: {\n action: 'ifxTreeViewDisableAllChange',\n table: { category: 'Custom Events' },\n description: 'Fired when disableAllItems changes.',\n },\n ifxTreeViewItemExpandChange: {\n action: 'ifxTreeViewItemExpandChange',\n table: { category: 'Custom Events' },\n description: 'Fired when a tree item is expanded/collapsed.',\n },\n ifxTreeViewItemCheckChange: {\n action: 'ifxTreeViewItemCheckChange',\n table: { category: 'Custom Events' },\n description: 'Fired when a tree item is checked/unchecked.',\n },\n ifxTreeViewItemDisableChange: {\n action: 'ifxTreeViewItemDisableChange',\n table: { category: 'Custom Events' },\n description: 'Fired when a tree item is disabled/enabled.',\n },\n }\n};\n\nexport default meta;\n\nconst BaseTemplate: StoryFn = (args) => {\n const el = document.createElement('ifx-tree-view');\n if (args.label) el.setAttribute('label', args.label);\n el.setAttribute('aria-label', args.ariaLabel);\n\n if (args.disableAllItems) el.setAttribute('disable-all-items', 'true');\n else el.removeAttribute('disable-all-items');\n\n if (args.expandAllItems) el.setAttribute('expand-all-items', 'true');\n else el.removeAttribute('expand-all-items');\n\n const ariaLabelItemAttr = args.ariaLabelItem\n ? `aria-label=\"${args.ariaLabelItem}\"`\n : '';\n\n el.innerHTML = `\n <ifx-tree-view-item label=\"Root Folder\" icon=\"folder\" initially-expanded=\"true\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"Subfolder 1\" icon=\"folder\" initially-expanded=\"true\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File 1-2.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 1-1\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 1-1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File 1-1-2.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 2\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 2-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 2-1\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 2-1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 2-1-1\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 2-1-1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n </ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"File at root.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Another Root Folder\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File A.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File B.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Single File\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n `;\n\n el.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));\n el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));\n el.addEventListener('ifxTreeViewItemExpandChange', action('ifxTreeViewItemExpandChange'));\n el.addEventListener('ifxTreeViewItemCheckChange', action('ifxTreeViewItemCheckChange'));\n el.addEventListener('ifxTreeViewItemDisableChange', action('ifxTreeViewItemDisableChange'));\n\n return el;\n};\n\nexport const Default = BaseTemplate.bind({});\nDefault.args = {\n disableAllItems: false,\n expandAllItems: false,\n label: 'Tree Example',\n ariaLabel: 'Tree View',\n ariaLabelItem: 'Tree Item',\n};\n\nDefault.argTypes = {\n ...hideAllControlsExcept(['label', 'disableAllItems', 'expandAllItems', 'ariaLabel']),\n ...disableCustomEventControls,\n\n ifxTreeViewExpandAllChange: {\n action: 'ifxTreeViewExpandAllChange',\n table: { category: 'Custom Events' },\n description: 'Fired when expandAllItems changes.',\n },\n ifxTreeViewDisableAllChange: {\n action: 'ifxTreeViewDisableAllChange',\n table: { category: 'Custom Events' },\n description: 'Fired when disableAllItems changes.',\n },\n ifxTreeViewItemExpandChange: {\n action: 'ifxTreeViewItemExpandChange',\n table: { category: 'Custom Events' },\n description: 'Fired when a tree item is expanded/collapsed.',\n },\n ifxTreeViewItemCheckChange: {\n action: 'ifxTreeViewItemCheckChange',\n table: { category: 'Custom Events' },\n description: 'Fired when a tree item is checked/unchecked.',\n },\n ifxTreeViewItemDisableChange: {\n action: 'ifxTreeViewItemDisableChange',\n table: { category: 'Custom Events' },\n description: 'Fired when a tree item is disabled/enabled.',\n },\n};\n\nexport const ContainerDemo: StoryFn = (args) => {\n const ariaLabelItemAttr = args.ariaLabelItem\n ? `aria-label=\"${args.ariaLabelItem}\"`\n : '';\n\n\n const wrapper = document.createElement('div');\n wrapper.style.maxWidth = '225px';\n wrapper.style.border = '1px solid #ccc';\n wrapper.style.padding = '8px';\n wrapper.style.overflow = 'auto';\n\n const el = document.createElement('ifx-tree-view');\n el.setAttribute('label', args.label);\n el.setAttribute('aria-label', args.ariaLabel);\n\n if (args.disableAllItems) el.setAttribute('disable-all-items', 'true');\n if (args.expandAllItems) el.setAttribute('expand-all-items', 'true');\n\n el.innerHTML = `\n <ifx-tree-view-item label=\"Root Folder\" icon=\"folder\" initially-expanded=\"true\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"Subfolder 1\" icon=\"folder\" initially-expanded=\"true\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File 1-2.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 1-1\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 1-1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File 1-1-2.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 2\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 2-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 2-1\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 2-1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 2-1-1\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 2-1-1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n </ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"File at root.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Another Root Folder\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File A.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File B.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Single File\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n `;\n\n el.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));\n el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));\n el.addEventListener('ifxTreeViewItemExpandChange', action('ifxTreeViewItemExpandChange'));\n el.addEventListener('ifxTreeViewItemCheckChange', action('ifxTreeViewItemCheckChange'));\n el.addEventListener('ifxTreeViewItemDisableChange', action('ifxTreeViewItemDisableChange'));\n\n wrapper.appendChild(el);\n return wrapper;\n};\n\nContainerDemo.args = {\n disableAllItems: false,\n expandAllItems: false,\n label: 'Tree Example',\n ariaLabel: 'Tree View',\n ariaLabelItem: 'Tree Item',\n};\n\nContainerDemo.storyName = 'TreeView with scrollbar';\nContainerDemo.parameters = {\n controls: { disable: true }\n};\n\nexport const SingleItemStates: StoryFn = (args) => {\n const el = document.createElement('ifx-tree-view');\n el.setAttribute('aria-label', args.ariaLabel);\n\n const ariaLabelItemAttr = args.ariaLabelItem\n ? `aria-label=\"${args.ariaLabelItem}\"`\n : '';\n\n el.innerHTML = `\n <ifx-tree-view-item label=\"File\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File disabled\" ${ariaLabelItemAttr} disable-item=\"true\"></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Folder initially expanded\" initially-expanded=\"true\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File disabled\" disable-item=\"true\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Normal Item\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Normal Item\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n `;\n\n el.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));\n el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));\n el.addEventListener('ifxTreeViewItemExpandChange', action('ifxTreeViewItemExpandChange'));\n el.addEventListener('ifxTreeViewItemCheckChange', action('ifxTreeViewItemCheckChange'));\n el.addEventListener('ifxTreeViewItemDisableChange', action('ifxTreeViewItemDisableChange'));\n\n return el;\n};\n\nSingleItemStates.args = {\n ariaLabel: 'Tree View',\n ariaLabelItem: 'Tree Item',\n};\n\nSingleItemStates.storyName = 'Single Item Expanded & disabled';\nSingleItemStates.parameters = {\n controls: { disable: true }\n};\n"]}
|
|
1
|
+
{"version":3,"file":"tree-view.stories.js","sourceRoot":"","sources":["../../../src/components/tree-view/tree-view.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/html';\n\nconst hideAllControlsExcept = (allowedKeys: string[]) => {\n const allProps = [\n 'label', 'disableAllItems', 'expandAllItems', 'ariaLabel'\n ];\n const argTypes: Record<string, any> = {};\n for (const prop of allProps) {\n if (!allowedKeys.includes(prop)) {\n argTypes[prop] = { table: { disable: true } };\n }\n }\n return argTypes;\n};\n\nconst disableCustomEventControls = {\n ifxTreeViewExpandAllChange: { table: { disable: true } },\n ifxTreeViewDisableAllChange: { table: { disable: true } },\n ifxTreeViewItemExpandChange: { table: { disable: true } },\n ifxTreeViewItemCheckChange: { table: { disable: true } },\n ifxTreeViewItemDisableChange: { table: { disable: true } }\n};\n\nconst meta: Meta = {\n title: 'Components/Tree View',\n tags: ['autodocs'],\n parameters: {\n controls: { expanded: true },\n docs: {\n description: {\n component: 'Tree View component with nested items, checkboxes, keyboard navigation, and accessibility.',\n },\n },\n },\n argTypes: {\n // --- FUNCTION ---\n disableAllItems: {\n control: 'boolean',\n description: 'Disables all tree items.',\n table: { category: 'Function', defaultValue: { summary: 'false' } },\n },\n expandAllItems: {\n control: 'boolean',\n description: 'Expands all tree items.',\n table: { category: 'Function', defaultValue: { summary: 'false' } },\n },\n initiallyExpanded: {\n table: { category: 'Function', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },\n description: 'Expands this tree item initially (set as attribute on the item). No interactive control.',\n control: false,\n },\n disableItem: {\n table: { category: 'Function', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },\n description: 'Disables this tree item (set as attribute on the item). No interactive control.',\n control: false,\n },\n\n // --- Label ---\n label: {\n control: 'text',\n description: 'Label / Heading for tree view.',\n table: { category: 'Label', defaultValue: { summary: 'false' } },\n },\n\n // --- ARIA LABELS ---\n ariaLabel: {\n control: 'text',\n description: 'ARIA label for the tree view.',\n table: { category: 'Aria Labels', defaultValue: { summary: 'Tree View' } },\n },\n ariaLabelItem: {\n control: 'text',\n description: 'ARIA label for all tree view items.',\n table: { category: 'Aria Labels', defaultValue: { summary: 'Tree Item' } },\n },\n\n // --- CUSTOM EVENTS ---\n ifxTreeViewExpandAllChange: {\n action: 'ifxTreeViewExpandAllChange',\n table: { category: 'Custom Events' },\n description: 'Fired when expandAllItems changes.',\n },\n ifxTreeViewDisableAllChange: {\n action: 'ifxTreeViewDisableAllChange',\n table: { category: 'Custom Events' },\n description: 'Fired when disableAllItems changes.',\n },\n ifxTreeViewItemExpandChange: {\n action: 'ifxTreeViewItemExpandChange',\n table: { category: 'Custom Events' },\n description: 'Fired when a tree item is expanded/collapsed.',\n },\n ifxTreeViewItemCheckChange: {\n action: 'ifxTreeViewItemCheckChange',\n table: { category: 'Custom Events' },\n description: 'Fired when a tree item is checked/unchecked. For parent items, includes affectedChildItems array with all affected descendants.',\n },\n ifxTreeViewItemDisableChange: {\n action: 'ifxTreeViewItemDisableChange',\n table: { category: 'Custom Events' },\n description: 'Fired when a tree item is disabled/enabled.',\n },\n }\n};\n\nexport default meta;\n\nconst BaseTemplate: StoryFn = (args) => {\n const el = document.createElement('ifx-tree-view');\n if (args.label) el.setAttribute('label', args.label);\n el.setAttribute('aria-label', args.ariaLabel);\n\n if (args.disableAllItems) el.setAttribute('disable-all-items', 'true');\n else el.removeAttribute('disable-all-items');\n\n if (args.expandAllItems) el.setAttribute('expand-all-items', 'true');\n else el.removeAttribute('expand-all-items');\n\n const ariaLabelItemAttr = args.ariaLabelItem\n ? `aria-label=\"${args.ariaLabelItem}\"`\n : '';\n\n el.innerHTML = `\n <ifx-tree-view-item label=\"Root Folder\" icon=\"folder\" initially-expanded=\"true\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"Subfolder 1\" icon=\"folder\" initially-expanded=\"true\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File 1-2.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 1-1\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 1-1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File 1-1-2.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 2\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 2-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 2-1\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 2-1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 2-1-1\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 2-1-1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n </ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"File at root.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Another Root Folder\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File A.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File B.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Single File\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n `;\n\n el.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));\n el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));\n el.addEventListener('ifxTreeViewItemExpandChange', action('ifxTreeViewItemExpandChange'));\n el.addEventListener('ifxTreeViewItemCheckChange', (event) => {\n const customEvent = event as CustomEvent;\n action('ifxTreeViewItemCheckChange')({\n checked: customEvent.detail.checked,\n indeterminate: customEvent.detail.indeterminate,\n affectedChildItems: customEvent.detail.affectedChildItems || []\n });\n });\n el.addEventListener('ifxTreeViewItemDisableChange', action('ifxTreeViewItemDisableChange'));\n\n return el;\n};\n\nexport const Default = BaseTemplate.bind({});\nDefault.args = {\n disableAllItems: false,\n expandAllItems: false,\n label: 'Tree Example',\n ariaLabel: 'Tree View',\n ariaLabelItem: 'Tree Item',\n};\n\nDefault.argTypes = {\n ...hideAllControlsExcept(['label', 'disableAllItems', 'expandAllItems', 'ariaLabel']),\n ...disableCustomEventControls,\n\n ifxTreeViewExpandAllChange: {\n action: 'ifxTreeViewExpandAllChange',\n table: { category: 'Custom Events' },\n description: 'Fired when expandAllItems changes.',\n },\n ifxTreeViewDisableAllChange: {\n action: 'ifxTreeViewDisableAllChange',\n table: { category: 'Custom Events' },\n description: 'Fired when disableAllItems changes.',\n },\n ifxTreeViewItemExpandChange: {\n action: 'ifxTreeViewItemExpandChange',\n table: { category: 'Custom Events' },\n description: 'Fired when a tree item is expanded/collapsed.',\n },\n ifxTreeViewItemCheckChange: {\n action: 'ifxTreeViewItemCheckChange',\n table: { category: 'Custom Events' },\n description: 'Fired when a tree item is checked/unchecked. For parent items, includes affectedChildItems array with all affected descendants.',\n },\n ifxTreeViewItemDisableChange: {\n action: 'ifxTreeViewItemDisableChange',\n table: { category: 'Custom Events' },\n description: 'Fired when a tree item is disabled/enabled.',\n },\n};\n\nexport const ContainerDemo: StoryFn = (args) => {\n const ariaLabelItemAttr = args.ariaLabelItem\n ? `aria-label=\"${args.ariaLabelItem}\"`\n : '';\n\n\n const wrapper = document.createElement('div');\n wrapper.style.maxWidth = '225px';\n wrapper.style.border = '1px solid #ccc';\n wrapper.style.padding = '8px';\n wrapper.style.overflow = 'auto';\n\n const el = document.createElement('ifx-tree-view');\n el.setAttribute('label', args.label);\n el.setAttribute('aria-label', args.ariaLabel);\n\n if (args.disableAllItems) el.setAttribute('disable-all-items', 'true');\n if (args.expandAllItems) el.setAttribute('expand-all-items', 'true');\n\n el.innerHTML = `\n <ifx-tree-view-item label=\"Root Folder\" icon=\"folder\" initially-expanded=\"true\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"Subfolder 1\" icon=\"folder\" initially-expanded=\"true\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File 1-2.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 1-1\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 1-1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File 1-1-2.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 2\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 2-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 2-1\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 2-1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Subfolder 2-1-1\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File 2-1-1-1.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n </ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"File at root.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Another Root Folder\" icon=\"folder\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File A.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File B.txt\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Single File\" icon=\"file\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n `;\n\n el.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));\n el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));\n el.addEventListener('ifxTreeViewItemExpandChange', action('ifxTreeViewItemExpandChange'));\n el.addEventListener('ifxTreeViewItemCheckChange', (event) => {\n const customEvent = event as CustomEvent;\n action('ifxTreeViewItemCheckChange')({\n checked: customEvent.detail.checked,\n indeterminate: customEvent.detail.indeterminate,\n affectedChildItems: customEvent.detail.affectedChildItems || []\n });\n });\n el.addEventListener('ifxTreeViewItemDisableChange', action('ifxTreeViewItemDisableChange'));\n\n wrapper.appendChild(el);\n return wrapper;\n};\n\nContainerDemo.args = {\n disableAllItems: false,\n expandAllItems: false,\n label: 'Tree Example',\n ariaLabel: 'Tree View',\n ariaLabelItem: 'Tree Item',\n};\n\nContainerDemo.storyName = 'TreeView with scrollbar';\nContainerDemo.parameters = {\n controls: { disable: true }\n};\n\nexport const SingleItemStates: StoryFn = (args) => {\n const el = document.createElement('ifx-tree-view');\n el.setAttribute('aria-label', args.ariaLabel);\n\n const ariaLabelItemAttr = args.ariaLabelItem\n ? `aria-label=\"${args.ariaLabelItem}\"`\n : '';\n\n el.innerHTML = `\n <ifx-tree-view-item label=\"File\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File disabled\" ${ariaLabelItemAttr} disable-item=\"true\"></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Folder initially expanded\" initially-expanded=\"true\" ${ariaLabelItemAttr}>\n <ifx-tree-view-item label=\"File\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"File disabled\" disable-item=\"true\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n </ifx-tree-view-item>\n <ifx-tree-view-item label=\"Normal Item\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n <ifx-tree-view-item label=\"Normal Item\" ${ariaLabelItemAttr}></ifx-tree-view-item>\n `;\n\n el.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));\n el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));\n el.addEventListener('ifxTreeViewItemExpandChange', action('ifxTreeViewItemExpandChange'));\n el.addEventListener('ifxTreeViewItemCheckChange', (event) => {\n const customEvent = event as CustomEvent;\n action('ifxTreeViewItemCheckChange')({\n checked: customEvent.detail.checked,\n indeterminate: customEvent.detail.indeterminate,\n affectedChildItems: customEvent.detail.affectedChildItems || []\n });\n });\n el.addEventListener('ifxTreeViewItemDisableChange', action('ifxTreeViewItemDisableChange'));\n\n return el;\n};\n\nSingleItemStates.args = {\n ariaLabel: 'Tree View',\n ariaLabelItem: 'Tree Item',\n};\n\nSingleItemStates.storyName = 'Single Item Expanded & disabled';\nSingleItemStates.parameters = {\n controls: { disable: true }\n};\n"]}
|
|
@@ -155,6 +155,7 @@ const TreeViewItem = /*@__PURE__*/ proxyCustomElement(class TreeViewItem extends
|
|
|
155
155
|
if (this.shouldExpandFromParent()) {
|
|
156
156
|
this.expandAllDescendants();
|
|
157
157
|
}
|
|
158
|
+
this.host['__stencil_instance'] = this;
|
|
158
159
|
}
|
|
159
160
|
shouldExpandFromParent() {
|
|
160
161
|
let parent = this.host.parentElement;
|
|
@@ -228,12 +229,38 @@ const TreeViewItem = /*@__PURE__*/ proxyCustomElement(class TreeViewItem extends
|
|
|
228
229
|
setupEventListeners() {
|
|
229
230
|
this.host.addEventListener('internal-check-state-change', this.handleStateChange);
|
|
230
231
|
}
|
|
231
|
-
async updateCheckState(checked) {
|
|
232
|
+
async updateCheckState(checked, fromParent = false) {
|
|
232
233
|
if (this.disabled)
|
|
233
234
|
return;
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
235
|
+
if (!fromParent && this.hasChildren) {
|
|
236
|
+
const affected = this.collectDescendantStates(checked);
|
|
237
|
+
this.setNodeState({ isChecked: checked, partialChecked: false }, false);
|
|
238
|
+
await this.updateChildrenSilently(checked);
|
|
239
|
+
this.ifxTreeViewItemCheckChange.emit({
|
|
240
|
+
checked,
|
|
241
|
+
indeterminate: false,
|
|
242
|
+
affectedChildItems: affected,
|
|
243
|
+
});
|
|
244
|
+
this.updateParentState();
|
|
245
|
+
}
|
|
246
|
+
else if (fromParent) {
|
|
247
|
+
this.setNodeState({ isChecked: checked, partialChecked: false }, false);
|
|
248
|
+
}
|
|
249
|
+
else {
|
|
250
|
+
this.setNodeState({ isChecked: checked, partialChecked: false });
|
|
251
|
+
await this.updateChildrenState(checked);
|
|
252
|
+
this.updateParentState();
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
async updateChildrenSilently(checked) {
|
|
256
|
+
const children = this.findChildren();
|
|
257
|
+
for (const child of children) {
|
|
258
|
+
const childInstance = child['__stencil_instance'];
|
|
259
|
+
if (childInstance) {
|
|
260
|
+
childInstance.setNodeState({ isChecked: checked, partialChecked: false }, false);
|
|
261
|
+
await childInstance.updateChildrenSilently(checked);
|
|
262
|
+
}
|
|
263
|
+
}
|
|
237
264
|
}
|
|
238
265
|
handleExpandedChange(newValue) {
|
|
239
266
|
this.ifxTreeViewItemExpandChange.emit(newValue);
|
|
@@ -241,13 +268,42 @@ const TreeViewItem = /*@__PURE__*/ proxyCustomElement(class TreeViewItem extends
|
|
|
241
268
|
handleDisableItemChange(newValue) {
|
|
242
269
|
this.ifxTreeViewItemDisableChange.emit(newValue);
|
|
243
270
|
}
|
|
244
|
-
setNodeState(state) {
|
|
271
|
+
setNodeState(state, emitEvent = true) {
|
|
245
272
|
this.isChecked = state.isChecked;
|
|
246
273
|
this.partialChecked = state.partialChecked;
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
274
|
+
if (emitEvent) {
|
|
275
|
+
this.ifxTreeViewItemCheckChange.emit({
|
|
276
|
+
checked: this.isChecked,
|
|
277
|
+
indeterminate: this.partialChecked,
|
|
278
|
+
});
|
|
279
|
+
}
|
|
280
|
+
}
|
|
281
|
+
collectDescendantStates(checked) {
|
|
282
|
+
const descendants = [];
|
|
283
|
+
const collect = (el) => {
|
|
284
|
+
var _a, _b;
|
|
285
|
+
let instance = null;
|
|
286
|
+
if (el === this.host) {
|
|
287
|
+
instance = this;
|
|
288
|
+
}
|
|
289
|
+
else if (el['__stencil_instance']) {
|
|
290
|
+
instance = el['__stencil_instance'];
|
|
291
|
+
}
|
|
292
|
+
const label = (_b = (_a = instance === null || instance === void 0 ? void 0 : instance.label) !== null && _a !== void 0 ? _a : el.label) !== null && _b !== void 0 ? _b : '';
|
|
293
|
+
descendants.push({
|
|
294
|
+
label,
|
|
295
|
+
checked,
|
|
296
|
+
indeterminate: false,
|
|
297
|
+
});
|
|
298
|
+
Array.from(el.children)
|
|
299
|
+
.forEach(child => {
|
|
300
|
+
if (child.tagName === 'IFX-TREE-VIEW-ITEM') {
|
|
301
|
+
collect(child);
|
|
302
|
+
}
|
|
303
|
+
});
|
|
304
|
+
};
|
|
305
|
+
collect(this.host);
|
|
306
|
+
return descendants;
|
|
251
307
|
}
|
|
252
308
|
async updateChildrenState(checked) {
|
|
253
309
|
const children = this.findChildren();
|
|
@@ -294,12 +350,12 @@ const TreeViewItem = /*@__PURE__*/ proxyCustomElement(class TreeViewItem extends
|
|
|
294
350
|
};
|
|
295
351
|
}
|
|
296
352
|
render() {
|
|
297
|
-
return (h("div", { key: '
|
|
353
|
+
return (h("div", { key: 'a626535eaa7807016da9b015daecc1c4ecba4283', class: {
|
|
298
354
|
'tree-item': true,
|
|
299
355
|
'tree-item--expanded': this.isExpanded,
|
|
300
356
|
'tree-item--has-children': this.hasChildren,
|
|
301
357
|
'tree-item--disabled': this.disabled,
|
|
302
|
-
}, 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: '
|
|
358
|
+
}, 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: 'e6e9bf260e0c1f5584826189ae44de0abbeed4e0', class: "tree-item__content" }, this.renderCheckbox(), this.renderHeader()), this.isExpanded && h("div", { key: 'e24cad37fc29633023d9e2b7216c2281056fc76e', class: "tree-item__children" }, h("slot", { key: '65d7afa55a28667bed348cafd784636256cd23d5' }))));
|
|
303
359
|
}
|
|
304
360
|
renderHeader() {
|
|
305
361
|
return (h("div", { class: "tree-item__header", style: { paddingLeft: `${this.level * 24 + 10}px` }, onClick: this.handleHeaderClick, tabIndex: -1, "aria-disabled": this.disabled ? 'true' : undefined }, this.renderControls()));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ifx-tree-view-item.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,i/DAAi/D,CAAC;AAC1gE,8BAAe,eAAe;;MCajB,YAAY;IALzB;;;;;;;QAQ0C,aAAQ,GAAY,KAAK,CAAC;QAC1D,sBAAiB,GAAY,KAAK,CAAC;QACnC,gBAAW,GAAY,KAAK,CAAC;QAOpB,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;QAUzC,iBAAY,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;aACxD,MAAM,CAAC,CAAC,KAAK,KACZ,KAAK,YAAYA,CAAW,IAAI,KAAK,CAAC,OAAO,KAAK,oBAAoB,CACvE,CAAC;QAEI,uBAAkB,GAAG;YAC3B,IAAI,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;YAChD,OAAO,MAAM,EAAE;gBACb,IAAI,MAAM,CAAC,OAAO,KAAK,oBAAoB;oBAAE,KAAK,EAAE,CAAC;gBACrD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;aAC/B;YACD,OAAO,KAAK,CAAC;SACd,CAAC;QAmGM,sBAAiB,GAAG,CAAC,KAAkB;YAC7C,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;SAC7C,CAAC;QAEM,yBAAoB,GAAG,CAAC,KAAkB;;YAChD,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;SACjE,CAAC;QAEM,sBAAiB,GAAG,CAAC,EAAE,MAAM,EAAc;YACjD,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAE,MAAsB,CAAC,OAAO,CAAC,+DAA+D,CAAC,EAAE;gBACrG,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;aACxC;SACF,CAAC;QA0EM,iBAAY,GAAG;YACrB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SACtD,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB;;YAE3C,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CACzB,CAAA,MAAA,IAAI,CAAC,IAAI;iBACN,OAAO,CAAC,eAAe,CAAC,0CACvB,gBAAgB,CAAC,oBAAoB,CAAC,KAAI,EAAE,CACjD,CAAC;YAEF,MAAM,YAAY,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI;;gBACvC,IAAI,MAAM,GAAG,MAAA,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;gBAC/D,OAAO,MAAM,EAAE;oBACb,MAAM,SAAS,GAAG,MAAa,CAAC;oBAChC,IAAI,EAAE,SAAS,CAAC,cAAc,IAAI,SAAS,CAAC,QAAQ,CAAC,EAAE;wBACrD,OAAO,KAAK,CAAC;qBACd;oBACD,MAAM,GAAG,MAAA,MAAM,CAAC,aAAa,0CAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;iBAC9D;gBACD,OAAO,IAAI,CAAC;aACb,CAAC,CAAC;YAEH,MAAM,YAAY,GAAG,YAAY,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,IAAI,CAAC,CAAC;YAEpE,SAAS,cAAc,CAAC,EAAkB;gBACvC,EAAyB,aAAzB,EAAE,uBAAF,EAAE,CAAyB,KAAK,EAAE,CAAC;aACrC;YAED,QAAQ,KAAK,CAAC,GAAG;gBACf,KAAK,WAAW,EAAE;oBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,SAAS,GAAG,YAAY,GAAG,CAAC,CAAC;oBACjC,OAAO,SAAS,GAAG,YAAY,CAAC,MAAM,EAAE;wBACtC,MAAM,IAAI,GAAG,YAAY,CAAC,SAAS,CAAQ,CAAC;wBAC5C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;4BAClB,cAAc,CAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,kCAAkC,CAAC,CAAC,CAAC;4BACnF,MAAM;yBACP;wBACD,SAAS,EAAE,CAAC;qBACb;oBACD,MAAM;iBACP;gBACD,KAAK,SAAS,EAAE;oBACd,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,SAAS,GAAG,YAAY,GAAG,CAAC,CAAC;oBACjC,OAAO,SAAS,IAAI,CAAC,EAAE;wBACrB,MAAM,IAAI,GAAG,YAAY,CAAC,SAAS,CAAQ,CAAC;wBAC5C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;4BAClB,cAAc,CAAC,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,kCAAkC,CAAC,CAAC,CAAC;4BACnF,MAAM;yBACP;wBACD,SAAS,EAAE,CAAC;qBACb;oBACD,MAAM;iBACP;gBACD,KAAK,YAAY,EAAE;oBACjB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE;wBACxC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;qBACtB;yBAAM,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE;wBAC9C,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;wBACjE,IAAI,UAAU,IAAI,CAAE,UAAkB,CAAC,QAAQ,EAAE;4BAC/C,cAAc,CAAC,MAAC,UAA0B,CAAC,UAAU,0CAAE,aAAa,CAAC,kCAAkC,CAAC,CAAC,CAAC;yBAC3G;qBACF;oBACD,MAAM;iBACP;gBACD,KAAK,WAAW,EAAE;oBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAAE;wBACvC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;qBACvB;yBAAM;wBACL,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;wBACtE,IAAI,MAAM,IAAI,CAAE,MAAc,CAAC,QAAQ,EAAE;4BACvC,cAAc,CAAC,MAAC,MAAsB,CAAC,UAAU,0CAAE,aAAa,CAAC,kCAAkC,CAAC,CAAC,CAAC;yBACvG;qBACF;oBACD,MAAM;iBACP;gBACD,KAAK,GAAG,CAAC;gBACT,KAAK,OAAO,EAAE;oBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;oBACvC,MAAM;iBACP;aACF;SACF,CAAC;KAoFH;IA9XC,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,WAAW,CAAC;KACjD;IAED,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,CAAC;KAC7C;IAgBD,iBAAiB;QACf,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,gBAAgB;QACd,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC,sBAAsB,EAAE,EAAE;YACjC,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;KACF;IAEO,sBAAsB;QAC5B,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QACrC,OAAO,MAAM,EAAE;YACb,IACE,MAAM,CAAC,OAAO,KAAK,eAAe;iBACjC,MAAM,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,MAAM,CAAC,YAAY,CAAC,uBAAuB,CAAC,CAAC,EACzF;gBACA,OAAO,IAAI,CAAC;aACb;YACD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;SAC/B;QACD,OAAO,KAAK,CAAC;KACd;IAEO,oBAAoB;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACrC,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE;YAC5B,IAAI,OAAQ,KAAa,CAAC,QAAQ,KAAK,WAAW,EAAE;gBACjD,KAAa,CAAC,QAAQ,GAAG,IAAI,CAAC;aAChC;YACD,IAAI,OAAQ,KAAa,CAAC,oBAAoB,KAAK,UAAU,EAAE;gBAC5D,KAAa,CAAC,oBAAoB,EAAE,CAAC;aACvC;SACF;KACF;IAEO,sBAAsB;QAC5B,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QACrC,OAAO,MAAM,EAAE;YACb,IAAI,MAAM,CAAC,OAAO,KAAK,eAAe,EAAE;gBACtC,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,SAAS;oBAC7C,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE;wBAChC,IACE,QAAQ,CAAC,IAAI,KAAK,YAAY;4BAC9B,QAAQ,CAAC,aAAa,KAAK,mBAAmB,EAC9C;4BACA,MAAM,UAAU,GAAI,MAAc,CAAC,eAAe,CAAC;4BACnD,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,UAAU,IAAI,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;yBACjF;qBACF;iBACF,CAAC,CAAC;gBACH,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC/C,MAAM,UAAU,GAAI,MAAc,CAAC,eAAe,CAAC;gBACnD,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,UAAU,IAAI,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,CAAC;gBAChF,MAAM;aACP;YACD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;SAC/B;KACF;IAEO,qBAAqB;QAC3B,IAAI,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;QACrC,OAAO,MAAM,EAAE;YACb,IAAI,MAAM,CAAC,OAAO,KAAK,eAAe,IAAI,MAAM,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE;gBACtF,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,SAAS;oBAC7C,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE;wBAChC,IACE,QAAQ,CAAC,IAAI,KAAK,YAAY;4BAC9B,QAAQ,CAAC,aAAa,KAAK,uBAAuB,EAClD;4BACA,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,YAAY,CAAC,uBAAuB,CAAC,CAAC;yBACpE;qBACF;iBACF,CAAC,CAAC;gBACH,QAAQ,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;gBAC/C,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,YAAY,CAAC,uBAAuB,CAAC,CAAC;gBACnE,MAAM;aACP;YACD,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC;SAC/B;KACF;IAEO,cAAc;QACpB,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;KAC7D;IAEO,mBAAmB;QACzB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,6BAA6B,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACnF;IAoBO,MAAM,gBAAgB,CAAC,OAAgB;QAC7C,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;QACjE,MAAM,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC;QACxC,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B;IAGD,oBAAoB,CAAC,QAAiB;QACpC,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjD;IAGD,uBAAuB,CAAC,QAAiB;QACvC,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAClD;IAEO,YAAY,CAAC,KAAgB;QACnC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;QACjC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC;QAC3C,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC;YACnC,OAAO,EAAE,IAAI,CAAC,SAAS;YACvB,aAAa,EAAE,IAAI,CAAC,cAAc;SACnC,CAAC,CAAC;KACJ;IAEO,MAAM,mBAAmB,CAAC,OAAgB;QAChD,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACrC,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE;YAC5B,MAAO,KAAoC,CAAC,gBAAgB,EAAE,CAAC;YAC/D,KAAK,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,6BAA6B,EAAE;gBACjE,MAAM,EAAE,EAAE,OAAO,EAAE;gBACnB,OAAO,EAAE,KAAK;gBACd,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC,CAAC;SACL;KACF;IAEO,gBAAgB,CAAC,MAAmB;QAC1C,MAAM,QAAQ,GAAG,MAAM,CAAC,aAAa,CAAC;QACtC,IAAI,CAAC,QAAQ;YAAE,OAAO,EAAE,CAAC;QACzB,OAAO,KAAK,CAAC,IAAI,CACf,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAChD,CAAC,GAAG,CAAC,EAAE,IAAI,EAAgC,CAAC,CAAC;KAC/C;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,MAAM,CAAC,gBAAgB,EAAE,CAAC,IAAI,CAAC,QAAQ;YACrC,MAAM,UAAU,GAAG,QAAmC,CAAC;YACvD,IAAI,EAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,iBAAiB,CAAA;gBAAE,OAAO;YAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;YAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC;YACrD,UAAU,CAAC,YAAY,CAAC;gBACtB,SAAS,EAAE,MAAM,CAAC,UAAU;gBAC5B,cAAc,EAAE,CAAC,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,WAAW;aACzD,CAAC,CAAC;YACH,UAAU,CAAC,iBAAiB,EAAE,CAAC;SAChC,CAAC,CAAC;KACJ;IAEO,sBAAsB,CAAC,QAAsC;QACnE,OAAO;YACL,UAAU,EAAE,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAK,GAA+B,CAAC,SAAS,CAAC;YAC7E,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG;gBAC5B,MAAM,IAAI,GAAG,GAA8B,CAAC;gBAC5C,OAAO,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC;aAC9C,CAAC;SACH,CAAC;KACH;IA6FD,MAAM;QACJ,QACE,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,GAAG,MAAM,GAAG,OAAO,gBACrC,IAAI,CAAC,KAAK,mBACP,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,gBACrC,IAAI,CAAC,SAAS,IAE1B,4DAAK,KAAK,EAAC,oBAAoB,IAC5B,IAAI,CAAC,cAAc,EAAE,EACrB,IAAI,CAAC,YAAY,EAAE,CAChB,EACL,IAAI,CAAC,UAAU,IAAI,4DAAK,KAAK,EAAC,qBAAqB,IAAC,8DAAO,CAAM,CAC9D,EACN;KACH;IAEO,YAAY;QAClB,QACE,WACE,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,GAAG,MAAM,GAAG,SAAS,IAEhD,IAAI,CAAC,cAAc,EAAE,CAClB,EACN;KACH;IAEO,cAAc;QACpB,QACE,WAAK,KAAK,EAAC,+BAA+B,EAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,IAC1E,oBACE,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,aAAa,EAAE,IAAI,CAAC,cAAc,EAClC,WAAW,EAAE,IAAI,CAAC,oBAAoB,EACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,CACE,EACN;KACH;IAEO,cAAc;QACpB,OAAO;YACL,IAAI,CAAC,WAAW,KACd,WAAK,KAAK,EAAC,8BAA8B,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IAClE,gBAAU,KAAK,EAAE,sBAAsB,IAAI,CAAC,UAAU,GAAG,cAAc,GAAG,eAAe,EAAE,EACjF,IAAI,EAAC,kBAAkB,GAAE,EACnC,WAAK,KAAK,EAAC,iBAAiB,GAAE,CAC1B,CACP;YACD,WACE,KAAK,EAAC,iCAAiC,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAChC,SAAS,EAAE,IAAI,CAAC,aAAa,IAE7B,WAAK,KAAK,EAAC,2BAA2B,IAElC,IAAI,CAAC,WAAW,IACd,EAAC,QAAQ,QACP,gBAAU,KAAK,EAAE,EAAC,cAAc,EAAE,IAAI,CAAC,UAAU,EAAC,EAAE,IAAI,EAAC,WAAW,GAAE,EACtE,gBAAU,KAAK,EAAE,EAAC,cAAc,EAAE,CAAC,IAAI,CAAC,UAAU,EAAC,EAAE,IAAI,EAAC,gBAAgB,GAAE,CACnE,KAEX,gBAAU,IAAI,EAAC,SAAS,GAAE,CAC3B,CAEC,EACN,YAAM,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC9C;SACP,CAAC;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["HTMLElement"],"sources":["src/components/tree-view/tree-view-item.scss?tag=ifx-tree-view-item&encapsulation=shadow","src/components/tree-view/tree-view-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.tree-item {\n position: relative;\n cursor: pointer;\n list-style: none;\n\n &.tree-item--expanded {\n position: relative;\n }\n\n &.tree-item--has-children {\n position: relative;\n\n .tree-item__header > .tree-item__chevron-container {\n display: flex;\n }\n\n &.tree-item--expanded {\n .tree-item__header > .tree-item__chevron-container::after {\n display: block;\n }\n }\n }\n\n &--disabled {\n cursor: not-allowed;\n pointer-events: none;\n color: tokens.$ifxColorEngineering300;\n }\n\n &__content {\n display: flex;\n flex-direction: row;\n\n &:hover {\n .tree-item__checkbox-container,\n .tree-item__header {\n background-color: tokens.$ifxColorEngineering100;\n }\n }\n }\n\n &__checkbox-container {\n position: sticky;\n left: 0;\n z-index: 10;\n padding: tokens.$ifxSpace50;\n background-color: tokens.$ifxColorBaseWhite;\n }\n\n &__header {\n flex-grow: 1;\n display: flex;\n align-items: center;\n white-space: nowrap;\n height: tokens.$ifxSize250;\n padding-top: tokens.$ifxSpace50;\n padding-right: tokens.$ifxSpace200;\n padding-bottom: tokens.$ifxSpace50;\n padding-left: tokens.$ifxSpace100;\n }\n\n &__chevron-container {\n display: none;\n align-items: center;\n margin-right: tokens.$ifxSpace100;\n height: tokens.$ifxSize250;\n\n &::after {\n --height-line-start: 28px;\n\n display: none;\n content: '';\n position: absolute;\n z-index: 1;\n top: var(--height-line-start);\n left: auto;\n margin-left: tokens.$ifxSpace100;\n width: tokens.$ifxSize12;\n height: calc(100% - var(--height-line-start));\n background-color: tokens.$ifxColorEngineering200;\n\n .tree-item--disabled & {\n color: tokens.$ifxColorEngineering200;\n }\n }\n }\n\n &__chevron {\n &.chevron-down {\n transform: rotate(90deg);\n }\n\n &.chevron-right {\n transform: rotate(0);\n }\n }\n\n &__label-icon-container {\n display: flex;\n align-items: center;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n border-radius: tokens.$ifxBorderRadius12;\n }\n }\n\n &__icon-container {\n position: relative;\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n\n ifx-icon {\n position: absolute;\n left: 0;\n top: 0;\n opacity: 1;\n transition: opacity 0.2s ease-in-out;\n\n &.icon--hidden {\n opacity: 0;\n }\n }\n }\n\n &__label {\n padding-left: tokens.$ifxSpace100;\n }\n\n &__children {\n display: none;\n\n .tree-item[aria-expanded=\"true\"] > & {\n display: block;\n }\n }\n}\n\n","import { Component, h, Prop, State, Element, Fragment, Event, EventEmitter, Watch } from '@stencil/core';\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() label: string;\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\n @Event() ifxTreeViewItemExpandChange: EventEmitter<boolean>;\n @Event() ifxTreeViewItemCheckChange: EventEmitter<{ checked: boolean; indeterminate: boolean }>;\n @Event() ifxTreeViewItemDisableChange: EventEmitter<boolean>;\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\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 = () => Array.from(this.host.children)\n .filter((child): child is HTMLElement =>\n child instanceof HTMLElement && child.tagName === 'IFX-TREE-VIEW-ITEM'\n );\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.initializeNode();\n this.setupEventListeners();\n }\n\n componentDidLoad() {\n this.observeDisableAllItems();\n this.observeExpandAllItems();\n if (this.shouldExpandFromParent()) {\n this.expandAllDescendants();\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 ) {\n return true;\n }\n parent = parent.parentElement;\n }\n return false;\n }\n\n private expandAllDescendants() {\n this.expanded = true;\n const children = this.findChildren();\n for (const child of children) {\n if (typeof (child as any).expanded !== 'undefined') {\n (child as any).expanded = true;\n }\n if (typeof (child as any).expandAllDescendants === 'function') {\n (child as any).expandAllDescendants();\n }\n }\n }\n\n private observeDisableAllItems() {\n let parent = this.host.parentElement;\n while (parent) {\n if (parent.tagName === 'IFX-TREE-VIEW') {\n const observer = new MutationObserver(mutations => {\n for (const mutation of mutations) {\n if (\n mutation.type === 'attributes' &&\n mutation.attributeName === 'disable-all-items'\n ) {\n const disableAll = (parent as any).disableAllItems;\n this.disableAllItems = !!disableAll || parent.hasAttribute('disable-all-items');\n }\n }\n });\n observer.observe(parent, { attributes: true });\n const disableAll = (parent as any).disableAllItems;\n this.disableAllItems = !!disableAll || parent.hasAttribute('disable-all-items');\n break;\n }\n parent = parent.parentElement;\n }\n }\n\n private observeExpandAllItems() {\n let parent = this.host.parentElement;\n while (parent) {\n if (parent.tagName === 'IFX-TREE-VIEW' || parent.hasAttribute('data-expand-all-items')) {\n const observer = new MutationObserver(mutations => {\n for (const mutation of mutations) {\n if (\n mutation.type === 'attributes' &&\n mutation.attributeName === 'data-expand-all-items'\n ) {\n this.expandAllItems = parent.hasAttribute('data-expand-all-items');\n }\n }\n });\n observer.observe(parent, { attributes: true });\n this.expandAllItems = parent.hasAttribute('data-expand-all-items');\n break;\n }\n parent = parent.parentElement;\n }\n }\n\n private initializeNode() {\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 }\n\n private setupEventListeners() {\n this.host.addEventListener('internal-check-state-change', this.handleStateChange);\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 this.updateCheckState(!this.isChecked);\n }\n };\n\n private async updateCheckState(checked: boolean) {\n if (this.disabled) return;\n this.setNodeState({ isChecked: checked, partialChecked: false });\n await this.updateChildrenState(checked);\n this.updateParentState();\n }\n\n @Watch('expanded')\n handleExpandedChange(newValue: boolean) {\n this.ifxTreeViewItemExpandChange.emit(newValue);\n }\n\n @Watch('disableItem')\n handleDisableItemChange(newValue: boolean) {\n this.ifxTreeViewItemDisableChange.emit(newValue);\n }\n\n private setNodeState(state: TreeState) {\n this.isChecked = state.isChecked;\n this.partialChecked = state.partialChecked;\n this.ifxTreeViewItemCheckChange.emit({\n checked: this.isChecked,\n indeterminate: this.partialChecked,\n });\n }\n\n private async updateChildrenState(checked: boolean) {\n const children = this.findChildren();\n for (const child of children) {\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 private findSiblingNodes(parent: HTMLElement): HTMLIfxTreeViewItemElement[] {\n const parentEl = parent.parentElement;\n if (!parentEl) return [];\n return Array.from(\n parentEl.querySelectorAll('ifx-tree-view-item')\n ).map(el => el as HTMLIfxTreeViewItemElement);\n }\n\n private updateParentState() {\n const parent = this.host.parentElement?.closest('ifx-tree-view-item') as HTMLIfxTreeViewItemElement;\n if (!parent) return;\n parent.componentOnReady().then(resolved => {\n const parentNode = resolved as unknown as TreeViewItem;\n if (!parentNode?.updateParentState) return;\n const siblings = this.findSiblingNodes(parent);\n const states = this.calculateSiblingStates(siblings);\n parentNode.setNodeState({\n isChecked: states.allChecked,\n partialChecked: !states.allChecked && states.someChecked\n });\n parentNode.updateParentState();\n });\n }\n\n private calculateSiblingStates(siblings: HTMLIfxTreeViewItemElement[]) {\n return {\n allChecked: siblings.every(sib => (sib as unknown as TreeViewItem).isChecked),\n someChecked: siblings.some(sib => {\n const node = sib as unknown as TreeViewItem;\n return node.isChecked || node.partialChecked;\n })\n };\n }\n\n private toggleExpand = () => {\n if (this.disabled) return;\n this.hasChildren && (this.expanded = !this.expanded);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n\n const allItems = Array.from(\n this.host\n .closest('ifx-tree-view')\n ?.querySelectorAll('ifx-tree-view-item') || []\n );\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)) {\n return false;\n }\n parent = parent.parentElement?.closest('ifx-tree-view-item');\n }\n return true;\n });\n\n const currentIndex = visibleItems.findIndex(el => el === this.host);\n\n function focusLabelIcon(el: Element | null) {\n (el as HTMLElement | null)?.focus();\n }\n\n switch (event.key) {\n case 'ArrowDown': {\n event.preventDefault();\n let nextIndex = currentIndex + 1;\n while (nextIndex < visibleItems.length) {\n const next = visibleItems[nextIndex] as any;\n if (!next.disabled) {\n focusLabelIcon(next.shadowRoot?.querySelector('.tree-item__label-icon-container'));\n break;\n }\n nextIndex++;\n }\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n let prevIndex = currentIndex - 1;\n while (prevIndex >= 0) {\n const prev = visibleItems[prevIndex] as any;\n if (!prev.disabled) {\n focusLabelIcon(prev.shadowRoot?.querySelector('.tree-item__label-icon-container'));\n break;\n }\n prevIndex--;\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 this.updateCheckState(!this.isChecked);\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 {this.renderCheckbox()}\n {this.renderHeader()}\n </div>\n {this.isExpanded && <div class=\"tree-item__children\"><slot/></div>}\n </div>\n );\n }\n\n private renderHeader() {\n return (\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.renderControls()}\n </div>\n );\n }\n\n private renderCheckbox() {\n return (\n <div class=\"tree-item__checkbox-container\" onClick={e => e.stopPropagation()}>\n <ifx-checkbox\n size='s'\n checked={this.isChecked}\n indeterminate={this.partialChecked}\n onIfxChange={this.handleCheckboxChange}\n disabled={this.disabled}\n />\n </div>\n );\n }\n\n private renderControls() {\n return [\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 {\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 }\n </div>\n <span class=\"tree-item__label\">{this.label}</span>\n </div>\n ];\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"ifx-tree-view-item.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/tree-view/tree-view-item.scss?tag=ifx-tree-view-item&encapsulation=shadow","src/components/tree-view/tree-view-item.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n.tree-item {\n position: relative;\n cursor: pointer;\n list-style: none;\n\n &.tree-item--expanded {\n position: relative;\n }\n\n &.tree-item--has-children {\n position: relative;\n\n .tree-item__header > .tree-item__chevron-container {\n display: flex;\n }\n\n &.tree-item--expanded {\n .tree-item__header > .tree-item__chevron-container::after {\n display: block;\n }\n }\n }\n\n &--disabled {\n cursor: not-allowed;\n pointer-events: none;\n color: tokens.$ifxColorEngineering300;\n }\n\n &__content {\n display: flex;\n flex-direction: row;\n\n &:hover {\n .tree-item__checkbox-container,\n .tree-item__header {\n background-color: tokens.$ifxColorEngineering100;\n }\n }\n }\n\n &__checkbox-container {\n position: sticky;\n left: 0;\n z-index: 10;\n padding: tokens.$ifxSpace50;\n background-color: tokens.$ifxColorBaseWhite;\n }\n\n &__header {\n flex-grow: 1;\n display: flex;\n align-items: center;\n white-space: nowrap;\n height: tokens.$ifxSize250;\n padding-top: tokens.$ifxSpace50;\n padding-right: tokens.$ifxSpace200;\n padding-bottom: tokens.$ifxSpace50;\n padding-left: tokens.$ifxSpace100;\n }\n\n &__chevron-container {\n display: none;\n align-items: center;\n margin-right: tokens.$ifxSpace100;\n height: tokens.$ifxSize250;\n\n &::after {\n --height-line-start: 28px;\n\n display: none;\n content: '';\n position: absolute;\n z-index: 1;\n top: var(--height-line-start);\n left: auto;\n margin-left: tokens.$ifxSpace100;\n width: tokens.$ifxSize12;\n height: calc(100% - var(--height-line-start));\n background-color: tokens.$ifxColorEngineering200;\n\n .tree-item--disabled & {\n color: tokens.$ifxColorEngineering200;\n }\n }\n }\n\n &__chevron {\n &.chevron-down {\n transform: rotate(90deg);\n }\n\n &.chevron-right {\n transform: rotate(0);\n }\n }\n\n &__label-icon-container {\n display: flex;\n align-items: center;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: 2px solid tokens.$ifxColorOcean500;\n outline-offset: 2px;\n border-radius: tokens.$ifxBorderRadius12;\n }\n }\n\n &__icon-container {\n position: relative;\n width: tokens.$ifxSize200;\n height: tokens.$ifxSize200;\n\n ifx-icon {\n position: absolute;\n left: 0;\n top: 0;\n opacity: 1;\n transition: opacity 0.2s ease-in-out;\n\n &.icon--hidden {\n opacity: 0;\n }\n }\n }\n\n &__label {\n padding-left: tokens.$ifxSpace100;\n }\n\n &__children {\n display: none;\n\n .tree-item[aria-expanded=\"true\"] > & {\n display: block;\n }\n }\n}\n\n","import { Component, h, Prop, State, Element, Fragment, Event, EventEmitter, Watch } from '@stencil/core';\n\nexport interface TreeViewCheckChangeEvent {\n checked: boolean;\n indeterminate: boolean;\n affectedChildItems?: Array<{ label: string; checked: boolean; indeterminate: boolean }>;\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() label: string;\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\n @Event() ifxTreeViewItemExpandChange: EventEmitter<boolean>;\n @Event() ifxTreeViewItemCheckChange: EventEmitter<TreeViewCheckChangeEvent>;\n @Event() ifxTreeViewItemDisableChange: EventEmitter<boolean>;\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\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 = () => Array.from(this.host.children)\n .filter((child): child is HTMLElement =>\n child instanceof HTMLElement && child.tagName === 'IFX-TREE-VIEW-ITEM'\n );\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.initializeNode();\n this.setupEventListeners();\n }\n\n componentDidLoad() {\n this.observeDisableAllItems();\n this.observeExpandAllItems();\n if (this.shouldExpandFromParent()) {\n this.expandAllDescendants();\n }\n (this.host as any)['__stencil_instance'] = this;\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 ) {\n return true;\n }\n parent = parent.parentElement;\n }\n return false;\n }\n\n private expandAllDescendants() {\n this.expanded = true;\n const children = this.findChildren();\n for (const child of children) {\n if (typeof (child as any).expanded !== 'undefined') {\n (child as any).expanded = true;\n }\n if (typeof (child as any).expandAllDescendants === 'function') {\n (child as any).expandAllDescendants();\n }\n }\n }\n\n private observeDisableAllItems() {\n let parent = this.host.parentElement;\n while (parent) {\n if (parent.tagName === 'IFX-TREE-VIEW') {\n const observer = new MutationObserver(mutations => {\n for (const mutation of mutations) {\n if (\n mutation.type === 'attributes' &&\n mutation.attributeName === 'disable-all-items'\n ) {\n const disableAll = (parent as any).disableAllItems;\n this.disableAllItems = !!disableAll || parent.hasAttribute('disable-all-items');\n }\n }\n });\n observer.observe(parent, { attributes: true });\n const disableAll = (parent as any).disableAllItems;\n this.disableAllItems = !!disableAll || parent.hasAttribute('disable-all-items');\n break;\n }\n parent = parent.parentElement;\n }\n }\n\n private observeExpandAllItems() {\n let parent = this.host.parentElement;\n while (parent) {\n if (parent.tagName === 'IFX-TREE-VIEW' || parent.hasAttribute('data-expand-all-items')) {\n const observer = new MutationObserver(mutations => {\n for (const mutation of mutations) {\n if (\n mutation.type === 'attributes' &&\n mutation.attributeName === 'data-expand-all-items'\n ) {\n this.expandAllItems = parent.hasAttribute('data-expand-all-items');\n }\n }\n });\n observer.observe(parent, { attributes: true });\n this.expandAllItems = parent.hasAttribute('data-expand-all-items');\n break;\n }\n parent = parent.parentElement;\n }\n }\n\n private initializeNode() {\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 }\n\n private setupEventListeners() {\n this.host.addEventListener('internal-check-state-change', this.handleStateChange);\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 this.updateCheckState(!this.isChecked);\n }\n };\n\n private async updateCheckState(checked: boolean, fromParent = false) {\n if (this.disabled) return;\n\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 affectedChildItems: affected,\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 const children = this.findChildren();\n for (const child of children) {\n const childInstance = (child as any)['__stencil_instance'];\n if (childInstance) {\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 this.ifxTreeViewItemExpandChange.emit(newValue);\n }\n\n @Watch('disableItem')\n handleDisableItemChange(newValue: boolean) {\n this.ifxTreeViewItemDisableChange.emit(newValue);\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 });\n }\n }\n\n private collectDescendantStates(checked: boolean) {\n const descendants: Array<{ label: string; checked: boolean; indeterminate: boolean }> = [];\n const collect = (el: Element) => {\n let instance: any = null;\n if (el === this.host) {\n instance = this;\n } else if ((el as any)['__stencil_instance']) {\n instance = (el as any)['__stencil_instance'];\n }\n const label = instance?.label ?? (el as any).label ?? '';\n descendants.push({\n label,\n checked,\n indeterminate: false,\n });\n Array.from(el.children)\n .forEach(child => {\n if (child.tagName === 'IFX-TREE-VIEW-ITEM') {\n collect(child);\n }\n });\n };\n collect(this.host);\n return descendants;\n }\n\n private async updateChildrenState(checked: boolean) {\n const children = this.findChildren();\n for (const child of children) {\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 private findSiblingNodes(parent: HTMLElement): HTMLIfxTreeViewItemElement[] {\n const parentEl = parent.parentElement;\n if (!parentEl) return [];\n return Array.from(\n parentEl.querySelectorAll('ifx-tree-view-item')\n ).map(el => el as HTMLIfxTreeViewItemElement);\n }\n\n private updateParentState() {\n const parent = this.host.parentElement?.closest('ifx-tree-view-item') as HTMLIfxTreeViewItemElement;\n if (!parent) return;\n parent.componentOnReady().then(resolved => {\n const parentNode = resolved as unknown as TreeViewItem;\n if (!parentNode?.updateParentState) return;\n const siblings = this.findSiblingNodes(parent);\n const states = this.calculateSiblingStates(siblings);\n parentNode.setNodeState({\n isChecked: states.allChecked,\n partialChecked: !states.allChecked && states.someChecked\n });\n parentNode.updateParentState();\n });\n }\n\n private calculateSiblingStates(siblings: HTMLIfxTreeViewItemElement[]) {\n return {\n allChecked: siblings.every(sib => (sib as unknown as TreeViewItem).isChecked),\n someChecked: siblings.some(sib => {\n const node = sib as unknown as TreeViewItem;\n return node.isChecked || node.partialChecked;\n })\n };\n }\n\n private toggleExpand = () => {\n if (this.disabled) return;\n this.hasChildren && (this.expanded = !this.expanded);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n\n const allItems = Array.from(\n this.host\n .closest('ifx-tree-view')\n ?.querySelectorAll('ifx-tree-view-item') || []\n );\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)) {\n return false;\n }\n parent = parent.parentElement?.closest('ifx-tree-view-item');\n }\n return true;\n });\n\n const currentIndex = visibleItems.findIndex(el => el === this.host);\n\n function focusLabelIcon(el: Element | null) {\n (el as HTMLElement | null)?.focus();\n }\n\n switch (event.key) {\n case 'ArrowDown': {\n event.preventDefault();\n let nextIndex = currentIndex + 1;\n while (nextIndex < visibleItems.length) {\n const next = visibleItems[nextIndex] as any;\n if (!next.disabled) {\n focusLabelIcon(next.shadowRoot?.querySelector('.tree-item__label-icon-container'));\n break;\n }\n nextIndex++;\n }\n break;\n }\n case 'ArrowUp': {\n event.preventDefault();\n let prevIndex = currentIndex - 1;\n while (prevIndex >= 0) {\n const prev = visibleItems[prevIndex] as any;\n if (!prev.disabled) {\n focusLabelIcon(prev.shadowRoot?.querySelector('.tree-item__label-icon-container'));\n break;\n }\n prevIndex--;\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 this.updateCheckState(!this.isChecked);\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 {this.renderCheckbox()}\n {this.renderHeader()}\n </div>\n {this.isExpanded && <div class=\"tree-item__children\"><slot/></div>}\n </div>\n );\n }\n\n private renderHeader() {\n return (\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.renderControls()}\n </div>\n );\n }\n\n private renderCheckbox() {\n return (\n <div class=\"tree-item__checkbox-container\" onClick={e => e.stopPropagation()}>\n <ifx-checkbox\n size='s'\n checked={this.isChecked}\n indeterminate={this.partialChecked}\n onIfxChange={this.handleCheckboxChange}\n disabled={this.disabled}\n />\n </div>\n );\n }\n\n private renderControls() {\n return [\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 {\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 }\n </div>\n <span class=\"tree-item__label\">{this.label}</span>\n </div>\n ];\n }\n}\n"],"version":3}
|
|
@@ -151,6 +151,7 @@ const TreeViewItem = class {
|
|
|
151
151
|
if (this.shouldExpandFromParent()) {
|
|
152
152
|
this.expandAllDescendants();
|
|
153
153
|
}
|
|
154
|
+
this.host['__stencil_instance'] = this;
|
|
154
155
|
}
|
|
155
156
|
shouldExpandFromParent() {
|
|
156
157
|
let parent = this.host.parentElement;
|
|
@@ -224,12 +225,38 @@ const TreeViewItem = class {
|
|
|
224
225
|
setupEventListeners() {
|
|
225
226
|
this.host.addEventListener('internal-check-state-change', this.handleStateChange);
|
|
226
227
|
}
|
|
227
|
-
async updateCheckState(checked) {
|
|
228
|
+
async updateCheckState(checked, fromParent = false) {
|
|
228
229
|
if (this.disabled)
|
|
229
230
|
return;
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
231
|
+
if (!fromParent && this.hasChildren) {
|
|
232
|
+
const affected = this.collectDescendantStates(checked);
|
|
233
|
+
this.setNodeState({ isChecked: checked, partialChecked: false }, false);
|
|
234
|
+
await this.updateChildrenSilently(checked);
|
|
235
|
+
this.ifxTreeViewItemCheckChange.emit({
|
|
236
|
+
checked,
|
|
237
|
+
indeterminate: false,
|
|
238
|
+
affectedChildItems: affected,
|
|
239
|
+
});
|
|
240
|
+
this.updateParentState();
|
|
241
|
+
}
|
|
242
|
+
else if (fromParent) {
|
|
243
|
+
this.setNodeState({ isChecked: checked, partialChecked: false }, false);
|
|
244
|
+
}
|
|
245
|
+
else {
|
|
246
|
+
this.setNodeState({ isChecked: checked, partialChecked: false });
|
|
247
|
+
await this.updateChildrenState(checked);
|
|
248
|
+
this.updateParentState();
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
async updateChildrenSilently(checked) {
|
|
252
|
+
const children = this.findChildren();
|
|
253
|
+
for (const child of children) {
|
|
254
|
+
const childInstance = child['__stencil_instance'];
|
|
255
|
+
if (childInstance) {
|
|
256
|
+
childInstance.setNodeState({ isChecked: checked, partialChecked: false }, false);
|
|
257
|
+
await childInstance.updateChildrenSilently(checked);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
233
260
|
}
|
|
234
261
|
handleExpandedChange(newValue) {
|
|
235
262
|
this.ifxTreeViewItemExpandChange.emit(newValue);
|
|
@@ -237,13 +264,42 @@ const TreeViewItem = class {
|
|
|
237
264
|
handleDisableItemChange(newValue) {
|
|
238
265
|
this.ifxTreeViewItemDisableChange.emit(newValue);
|
|
239
266
|
}
|
|
240
|
-
setNodeState(state) {
|
|
267
|
+
setNodeState(state, emitEvent = true) {
|
|
241
268
|
this.isChecked = state.isChecked;
|
|
242
269
|
this.partialChecked = state.partialChecked;
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
270
|
+
if (emitEvent) {
|
|
271
|
+
this.ifxTreeViewItemCheckChange.emit({
|
|
272
|
+
checked: this.isChecked,
|
|
273
|
+
indeterminate: this.partialChecked,
|
|
274
|
+
});
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
collectDescendantStates(checked) {
|
|
278
|
+
const descendants = [];
|
|
279
|
+
const collect = (el) => {
|
|
280
|
+
var _a, _b;
|
|
281
|
+
let instance = null;
|
|
282
|
+
if (el === this.host) {
|
|
283
|
+
instance = this;
|
|
284
|
+
}
|
|
285
|
+
else if (el['__stencil_instance']) {
|
|
286
|
+
instance = el['__stencil_instance'];
|
|
287
|
+
}
|
|
288
|
+
const label = (_b = (_a = instance === null || instance === void 0 ? void 0 : instance.label) !== null && _a !== void 0 ? _a : el.label) !== null && _b !== void 0 ? _b : '';
|
|
289
|
+
descendants.push({
|
|
290
|
+
label,
|
|
291
|
+
checked,
|
|
292
|
+
indeterminate: false,
|
|
293
|
+
});
|
|
294
|
+
Array.from(el.children)
|
|
295
|
+
.forEach(child => {
|
|
296
|
+
if (child.tagName === 'IFX-TREE-VIEW-ITEM') {
|
|
297
|
+
collect(child);
|
|
298
|
+
}
|
|
299
|
+
});
|
|
300
|
+
};
|
|
301
|
+
collect(this.host);
|
|
302
|
+
return descendants;
|
|
247
303
|
}
|
|
248
304
|
async updateChildrenState(checked) {
|
|
249
305
|
const children = this.findChildren();
|
|
@@ -290,12 +346,12 @@ const TreeViewItem = class {
|
|
|
290
346
|
};
|
|
291
347
|
}
|
|
292
348
|
render() {
|
|
293
|
-
return (h("div", { key: '
|
|
349
|
+
return (h("div", { key: 'a626535eaa7807016da9b015daecc1c4ecba4283', class: {
|
|
294
350
|
'tree-item': true,
|
|
295
351
|
'tree-item--expanded': this.isExpanded,
|
|
296
352
|
'tree-item--has-children': this.hasChildren,
|
|
297
353
|
'tree-item--disabled': this.disabled,
|
|
298
|
-
}, 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: '
|
|
354
|
+
}, 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: 'e6e9bf260e0c1f5584826189ae44de0abbeed4e0', class: "tree-item__content" }, this.renderCheckbox(), this.renderHeader()), this.isExpanded && h("div", { key: 'e24cad37fc29633023d9e2b7216c2281056fc76e', class: "tree-item__children" }, h("slot", { key: '65d7afa55a28667bed348cafd784636256cd23d5' }))));
|
|
299
355
|
}
|
|
300
356
|
renderHeader() {
|
|
301
357
|
return (h("div", { class: "tree-item__header", style: { paddingLeft: `${this.level * 24 + 10}px` }, onClick: this.handleHeaderClick, tabIndex: -1, "aria-disabled": this.disabled ? 'true' : undefined }, this.renderControls()));
|