@infineon/infineon-design-system-stencil 34.0.0 → 34.1.0--canary.1869.c99e8e229a05ce3ff2fac5e98c5530c239905300.0

package/dist/collection/components/tree-view/tree-view.css

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+}
+
+.tree-view {
+  font-family: var(--ifx-font-family, sans-serif);
+  font-size: 14px;
+  color: var(--ifx-color-text, #1a1a1a);
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.tree-view__label {
+  font: 600 1.125rem/1.625rem "Source Sans 3";
+  margin-bottom: 8px;
+}

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

@@ -0,0 +1,169 @@
+import { h } from "@stencil/core";
+export class TreeView {
+    constructor() {
+        this.disableAllItems = false;
+        this.expandAllItems = false;
+        this.handleSlotRef = (el) => {
+            if (el) {
+                if (this.disableAllItems) {
+                    el.setAttribute('data-disable-all-items', 'true');
+                }
+                else {
+                    el.removeAttribute('data-disable-all-items');
+                }
+                if (this.expandAllItems) {
+                    el.setAttribute('data-expand-all-items', 'true');
+                }
+                else {
+                    el.removeAttribute('data-expand-all-items');
+                }
+            }
+        };
+    }
+    handleExpandAllItemsChange(newValue) {
+        this.ifxTreeViewExpandAllChange.emit(newValue);
+    }
+    handleDisableAllItemsChange(newValue) {
+        this.ifxTreeViewDisableAllChange.emit(newValue);
+    }
+    render() {
+        return (h("div", { key: '2fbff58e4ea0f95ef229a42f8dda01e05ccc24d5', class: `tree-view ${this.disableAllItems ? ' tree-view--disabled' : ''}`, role: "tree", "aria-label": this.ariaLabel }, this.label && this.label.trim() !== '' && h("div", { key: 'ce1827316c5f864f67ccde3fffc1b772d9662e26', class: "tree-view__label" }, this.label), h("slot", { key: '4ccd3da9d4537a925c0878f3d235555815dc983d', ref: this.handleSlotRef })));
+    }
+    static get is() { return "ifx-tree-view"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tree-view.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tree-view.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "disableAllItems": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disable-all-items",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "expandAllItems": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "expand-all-items",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "aria-label",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ifxTreeViewExpandAllChange",
+                "name": "ifxTreeViewExpandAllChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "ifxTreeViewDisableAllChange",
+                "name": "ifxTreeViewDisableAllChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "expandAllItems",
+                "methodName": "handleExpandAllItemsChange"
+            }, {
+                "propName": "disableAllItems",
+                "methodName": "handleDisableAllItemsChange"
+            }];
+    }
+}
+//# sourceMappingURL=tree-view.js.map

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

@@ -0,0 +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,MAAM,eAAe,CAAC;AAO/E,MAAM,OAAO,QAAQ;IALrB;QAOU,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;KAcH;IApCC,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,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 } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-tree-view',\n  styleUrl: 'tree-view.scss',\n  shadow: true,\n})\nexport class TreeView {\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  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

@@ -0,0 +1,353 @@
+import { action } from "@storybook/addon-actions";
+const hideAllControlsExcept = (allowedKeys) => {
+    const allProps = [
+        'label', 'disableAllItems', 'expandAllItems', 'ariaLabel', 'value'
+    ];
+    const argTypes = {};
+    for (const prop of allProps) {
+        if (!allowedKeys.includes(prop)) {
+            argTypes[prop] = { table: { disable: true } };
+        }
+    }
+    return argTypes;
+};
+const disableCustomEventControls = {
+    ifxTreeViewExpandAllChange: { table: { disable: true } },
+    ifxTreeViewDisableAllChange: { table: { disable: true } },
+    ifxTreeViewItemExpandChange: { table: { disable: true } },
+    ifxTreeViewItemCheckChange: { table: { disable: true } },
+    ifxTreeViewItemDisableChange: { table: { disable: true } }
+};
+const meta = {
+    title: 'Components/Tree View',
+    tags: ['autodocs'],
+    parameters: {
+        controls: { expanded: true },
+        docs: {
+            description: {
+                component: 'Tree View component with nested items, checkboxes, keyboard navigation, and accessibility.',
+            },
+        },
+    },
+    argTypes: {
+        // --- FUNCTION ---
+        disableAllItems: {
+            control: 'boolean',
+            description: 'Disables all tree items.',
+            table: { category: 'Function', defaultValue: { summary: 'false' } },
+        },
+        expandAllItems: {
+            control: 'boolean',
+            description: 'Expands all tree items.',
+            table: { category: 'Function', defaultValue: { summary: 'false' } },
+        },
+        initiallyExpanded: {
+            table: { category: 'Function', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+            description: 'Expands this tree item initially (set as attribute on the item). No interactive control.',
+            control: false,
+        },
+        initiallySelected: {
+            table: { category: 'Function', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+            description: 'Selects this tree item initially (set as attribute on the item). No interactive control.',
+            control: false,
+        },
+        disableItem: {
+            table: { category: 'Function', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },
+            description: 'Disables this tree item (set as attribute on the item). No interactive control.',
+            control: false,
+        },
+        value: {
+            control: false,
+            table: { category: 'Function', type: { summary: 'string' }, defaultValue: { summary: 'undefined' } },
+            description: 'Optional value for each tree item (set as attribute on the item). No interactive control.',
+        },
+        // --- Label ---
+        label: {
+            control: 'text',
+            description: 'Label / Heading for tree view.',
+            table: { category: 'Label', defaultValue: { summary: 'false' } },
+        },
+        // --- ARIA LABELS ---
+        ariaLabel: {
+            control: 'text',
+            description: 'ARIA label for the tree view.',
+            table: { category: 'Aria Labels', defaultValue: { summary: 'Tree View' } },
+        },
+        ariaLabelItem: {
+            control: 'text',
+            description: 'ARIA label for all tree view items.',
+            table: { category: 'Aria Labels', defaultValue: { summary: 'Tree Item' } },
+        },
+        // --- CUSTOM EVENTS ---
+        ifxTreeViewExpandAllChange: {
+            action: 'ifxTreeViewExpandAllChange',
+            table: { category: 'Custom Events' },
+            description: 'Fired when expandAllItems changes.',
+        },
+        ifxTreeViewDisableAllChange: {
+            action: 'ifxTreeViewDisableAllChange',
+            table: { category: 'Custom Events' },
+            description: 'Fired when disableAllItems changes.',
+        },
+        ifxTreeViewItemExpandChange: {
+            action: 'ifxTreeViewItemExpandChange',
+            table: { category: 'Custom Events' },
+            description: 'Fired when a tree item is expanded/collapsed. For parent items, includes affectedItems array with all affected parent descendants.',
+        },
+        ifxTreeViewItemCheckChange: {
+            action: 'ifxTreeViewItemCheckChange',
+            table: { category: 'Custom Events' },
+            description: 'Fired when a tree item is checked/unchecked. For parent items, includes affectedChildItems array with all affected descendants.',
+        },
+        ifxTreeViewItemDisableChange: {
+            action: 'ifxTreeViewItemDisableChange',
+            table: { category: 'Custom Events' },
+            description: 'Fired when a tree item is disabled/enabled.',
+        },
+    }
+};
+export default meta;
+const BaseTemplate = (args) => {
+    const el = document.createElement('ifx-tree-view');
+    if (args.label)
+        el.setAttribute('label', args.label);
+    el.setAttribute('aria-label', args.ariaLabel);
+    if (args.disableAllItems)
+        el.setAttribute('disable-all-items', 'true');
+    else
+        el.removeAttribute('disable-all-items');
+    if (args.expandAllItems)
+        el.setAttribute('expand-all-items', 'true');
+    else
+        el.removeAttribute('expand-all-items');
+    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.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));
+    el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));
+    el.addEventListener('ifxTreeViewItemExpandChange', (event) => {
+        const customEvent = event;
+        action('ifxTreeViewItemExpandChange')({
+            expanded: customEvent.detail.expanded,
+            value: customEvent.detail.value,
+            affectedItems: customEvent.detail.affectedItems || []
+        });
+    });
+    el.addEventListener('ifxTreeViewItemCheckChange', (event) => {
+        const customEvent = event;
+        action('ifxTreeViewItemCheckChange')({
+            checked: customEvent.detail.checked,
+            indeterminate: customEvent.detail.indeterminate,
+            value: customEvent.detail.value,
+            affectedChildItems: customEvent.detail.affectedChildItems || [],
+            level: customEvent.detail.level,
+            disabled: customEvent.detail.disabled
+        });
+    });
+    el.addEventListener('ifxTreeViewItemDisableChange', action('ifxTreeViewItemDisableChange'));
+    return el;
+};
+export const Default = BaseTemplate.bind({});
+Default.args = {
+    disableAllItems: false,
+    expandAllItems: false,
+    label: 'Tree Example',
+    ariaLabel: 'Tree View',
+    ariaLabelItem: 'Tree Item',
+};
+Default.argTypes = Object.assign(Object.assign(Object.assign({}, hideAllControlsExcept(['label', 'disableAllItems', 'expandAllItems', 'ariaLabel', 'value'])), disableCustomEventControls), { ifxTreeViewExpandAllChange: {
+        action: 'ifxTreeViewExpandAllChange',
+        table: { category: 'Custom Events' },
+        description: 'Fired when expandAllItems changes.',
+    }, ifxTreeViewDisableAllChange: {
+        action: 'ifxTreeViewDisableAllChange',
+        table: { category: 'Custom Events' },
+        description: 'Fired when disableAllItems changes.',
+    }, ifxTreeViewItemExpandChange: {
+        action: 'ifxTreeViewItemExpandChange',
+        table: { category: 'Custom Events' },
+        description: 'Fired when a tree item is expanded/collapsed. For parent items, includes affectedItems array with all affected parent descendants.',
+    }, ifxTreeViewItemCheckChange: {
+        action: 'ifxTreeViewItemCheckChange',
+        table: { category: 'Custom Events' },
+        description: 'Fired when a tree item is checked/unchecked. For parent items, includes affectedChildItems array with all affected descendants.',
+    }, ifxTreeViewItemDisableChange: {
+        action: 'ifxTreeViewItemDisableChange',
+        table: { category: 'Custom Events' },
+        description: 'Fired when a tree item is disabled/enabled.',
+    } });
+export const ContainerDemo = (args) => {
+    const ariaLabelItemAttr = args.ariaLabelItem
+        ? `aria-label="${args.ariaLabelItem}"`
+        : '';
+    const wrapper = document.createElement('div');
+    wrapper.style.maxWidth = '225px';
+    wrapper.style.border = '1px solid #ccc';
+    wrapper.style.padding = '8px';
+    wrapper.style.overflow = 'auto';
+    const el = document.createElement('ifx-tree-view');
+    el.setAttribute('label', args.label);
+    el.setAttribute('aria-label', args.ariaLabel);
+    if (args.disableAllItems)
+        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.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));
+    el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));
+    el.addEventListener('ifxTreeViewItemExpandChange', (event) => {
+        const customEvent = event;
+        action('ifxTreeViewItemExpandChange')({
+            expanded: customEvent.detail.expanded,
+            value: customEvent.detail.value,
+            affectedItems: customEvent.detail.affectedItems || []
+        });
+    });
+    el.addEventListener('ifxTreeViewItemCheckChange', (event) => {
+        const customEvent = event;
+        action('ifxTreeViewItemCheckChange')({
+            checked: customEvent.detail.checked,
+            indeterminate: customEvent.detail.indeterminate,
+            value: customEvent.detail.value,
+            affectedChildItems: customEvent.detail.affectedChildItems || [],
+            level: customEvent.detail.level,
+            disabled: customEvent.detail.disabled
+        });
+    });
+    el.addEventListener('ifxTreeViewItemDisableChange', action('ifxTreeViewItemDisableChange'));
+    wrapper.appendChild(el);
+    return wrapper;
+};
+ContainerDemo.args = {
+    disableAllItems: false,
+    expandAllItems: false,
+    label: 'Tree Example',
+    ariaLabel: 'Tree View',
+    ariaLabelItem: 'Tree Item',
+};
+ContainerDemo.storyName = 'TreeView with scrollbar';
+ContainerDemo.parameters = {
+    controls: { disable: true }
+};
+export const SingleItemStates = (args) => {
+    const el = document.createElement('ifx-tree-view');
+    if (args.label)
+        el.setAttribute('label', args.label);
+    el.setAttribute('aria-label', args.ariaLabel);
+    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.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));
+    el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));
+    el.addEventListener('ifxTreeViewItemExpandChange', (event) => {
+        const customEvent = event;
+        action('ifxTreeViewItemExpandChange')({
+            expanded: customEvent.detail.expanded,
+            value: customEvent.detail.value,
+            affectedItems: customEvent.detail.affectedItems || []
+        });
+    });
+    el.addEventListener('ifxTreeViewItemCheckChange', (event) => {
+        const customEvent = event;
+        action('ifxTreeViewItemCheckChange')({
+            checked: customEvent.detail.checked,
+            indeterminate: customEvent.detail.indeterminate,
+            value: customEvent.detail.value,
+            affectedChildItems: customEvent.detail.affectedChildItems || [],
+            level: customEvent.detail.level,
+            disabled: customEvent.detail.disabled
+        });
+    });
+    el.addEventListener('ifxTreeViewItemDisableChange', action('ifxTreeViewItemDisableChange'));
+    return el;
+};
+SingleItemStates.args = {
+    disableAllItems: false,
+    expandAllItems: false,
+    label: 'Tree Example',
+    ariaLabel: 'Tree View',
+    ariaLabelItem: 'Tree Item',
+};
+SingleItemStates.storyName = 'Single Item Expanded & disabled';
+SingleItemStates.parameters = {
+    controls: { disable: true }
+};
+//# sourceMappingURL=tree-view.stories.js.map

package/dist/collection/components/tree-view/tree-view.stories.js.map

@@ -0,0 +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', 'value'\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    initiallySelected: {\n      table: { category: 'Function', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } },\n      description: 'Selects 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    value: {\n      control: false,\n      table: { category: 'Function', type: { summary: 'string' }, defaultValue: { summary: 'undefined' } },\n      description: 'Optional value for each tree item (set as attribute on the item). No interactive control.',\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. For parent items, includes affectedItems array with all affected parent descendants.',\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 icon=\"folder\" initially-expanded=\"true\" value=\"root-folder\" ${ariaLabelItemAttr}>\n      Root Folder\n      <ifx-tree-view-item slot=\"children\" icon=\"folder\" initially-expanded=\"true\" value=\"subfolder-1\" ${ariaLabelItemAttr}>\n        Subfolder 1\n        <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-1-1\" ${ariaLabelItemAttr}>File 1-1.txt</ifx-tree-view-item>\n        <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-1-2\" ${ariaLabelItemAttr}>File 1-2.txt</ifx-tree-view-item>\n        <ifx-tree-view-item slot=\"children\" icon=\"folder\" value=\"subfolder-1-1\" ${ariaLabelItemAttr}>\n          Subfolder 1-1\n          <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-1-1-1\" ${ariaLabelItemAttr}>File 1-1-1.txt</ifx-tree-view-item>\n          <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-1-1-2\" ${ariaLabelItemAttr}>File 1-1-2.txt</ifx-tree-view-item>\n        </ifx-tree-view-item>\n      </ifx-tree-view-item>\n      <ifx-tree-view-item slot=\"children\" icon=\"folder\" value=\"subfolder-2\" ${ariaLabelItemAttr}>\n        Subfolder 2\n        <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-2-1\" ${ariaLabelItemAttr}>File 2-1.txt</ifx-tree-view-item>\n        <ifx-tree-view-item slot=\"children\" icon=\"folder\" value=\"subfolder-2-1\" ${ariaLabelItemAttr}>\n          Subfolder 2-1\n          <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-2-1-1\" ${ariaLabelItemAttr}>File 2-1-1.txt</ifx-tree-view-item>\n          <ifx-tree-view-item slot=\"children\" icon=\"folder\" value=\"subfolder-2-1-1\" ${ariaLabelItemAttr}>\n            Subfolder 2-1-1\n            <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>\n          </ifx-tree-view-item>\n        </ifx-tree-view-item>\n      </ifx-tree-view-item>\n      <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-at-root\" ${ariaLabelItemAttr}>File at root.txt</ifx-tree-view-item>\n    </ifx-tree-view-item>\n    <ifx-tree-view-item icon=\"folder\" value=\"another-root\" ${ariaLabelItemAttr}>\n      Another Root Folder\n      <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-a\" ${ariaLabelItemAttr}>File A.txt</ifx-tree-view-item>\n      <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-b\" ${ariaLabelItemAttr}>File B.txt</ifx-tree-view-item>\n    </ifx-tree-view-item>\n    <ifx-tree-view-item icon=\"file\" value=\"single-file\" ${ariaLabelItemAttr}>Single File</ifx-tree-view-item>\n  `;\n\n  el.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));\n  el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));\n  el.addEventListener('ifxTreeViewItemExpandChange', (event) => {\n    const customEvent = event as CustomEvent;\n    action('ifxTreeViewItemExpandChange')({\n      expanded: customEvent.detail.expanded,\n      value: customEvent.detail.value,\n      affectedItems: customEvent.detail.affectedItems || []\n    });\n  });\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      value: customEvent.detail.value,\n      affectedChildItems: customEvent.detail.affectedChildItems || [],\n      level: customEvent.detail.level,\n      disabled: customEvent.detail.disabled\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', 'value']),\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. For parent items, includes affectedItems array with all affected parent descendants.',\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 icon=\"folder\" initially-expanded=\"true\" value=\"root-folder\" ${ariaLabelItemAttr}>\n      Root Folder\n      <ifx-tree-view-item slot=\"children\" icon=\"folder\" initially-expanded=\"true\" value=\"subfolder-1\" ${ariaLabelItemAttr}>\n        Subfolder 1\n        <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-1-1\" ${ariaLabelItemAttr}>File 1-1.txt</ifx-tree-view-item>\n        <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-1-2\" ${ariaLabelItemAttr}>File 1-2.txt</ifx-tree-view-item>\n        <ifx-tree-view-item slot=\"children\" icon=\"folder\" value=\"subfolder-1-1\" ${ariaLabelItemAttr}>\n          Subfolder 1-1\n          <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-1-1-1\" ${ariaLabelItemAttr}>File 1-1-1.txt</ifx-tree-view-item>\n          <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-1-1-2\" ${ariaLabelItemAttr}>File 1-1-2.txt</ifx-tree-view-item>\n        </ifx-tree-view-item>\n      </ifx-tree-view-item>\n      <ifx-tree-view-item slot=\"children\" icon=\"folder\" value=\"subfolder-2\" ${ariaLabelItemAttr}>\n        Subfolder 2\n        <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-2-1\" ${ariaLabelItemAttr}>File 2-1.txt</ifx-tree-view-item>\n        <ifx-tree-view-item slot=\"children\" icon=\"folder\" value=\"subfolder-2-1\" ${ariaLabelItemAttr}>\n          Subfolder 2-1\n          <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-2-1-1\" ${ariaLabelItemAttr}>File 2-1-1.txt</ifx-tree-view-item>\n          <ifx-tree-view-item slot=\"children\" icon=\"folder\" value=\"subfolder-2-1-1\" ${ariaLabelItemAttr}>\n            Subfolder 2-1-1\n            <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>\n          </ifx-tree-view-item>\n        </ifx-tree-view-item>\n      </ifx-tree-view-item>\n      <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-at-root\" ${ariaLabelItemAttr}>File at root.txt</ifx-tree-view-item>\n    </ifx-tree-view-item>\n    <ifx-tree-view-item icon=\"folder\" value=\"another-root\" ${ariaLabelItemAttr}>\n      Another Root Folder\n      <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-a\" ${ariaLabelItemAttr}>File A.txt</ifx-tree-view-item>\n      <ifx-tree-view-item slot=\"children\" icon=\"file\" value=\"file-b\" ${ariaLabelItemAttr}>File B.txt</ifx-tree-view-item>\n    </ifx-tree-view-item>\n    <ifx-tree-view-item icon=\"file\" value=\"single-file\" ${ariaLabelItemAttr}>Single File</ifx-tree-view-item>\n  `;\n\n  el.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));\n  el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));\n  el.addEventListener('ifxTreeViewItemExpandChange', (event) => {\n    const customEvent = event as CustomEvent;\n    action('ifxTreeViewItemExpandChange')({\n      expanded: customEvent.detail.expanded,\n      value: customEvent.detail.value,\n      affectedItems: customEvent.detail.affectedItems || []\n    });\n  });\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      value: customEvent.detail.value,\n      affectedChildItems: customEvent.detail.affectedChildItems || [],\n      level: customEvent.detail.level,\n      disabled: customEvent.detail.disabled\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  if (args.label) el.setAttribute('label', args.label);\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 value=\"file-1\" ${ariaLabelItemAttr}>File</ifx-tree-view-item>\n    <ifx-tree-view-item value=\"file-disabled\" ${ariaLabelItemAttr} disable-item=\"true\">File disabled</ifx-tree-view-item>\n    <ifx-tree-view-item initially-expanded=\"true\" value=\"folder-expanded\" ${ariaLabelItemAttr}>\n      Folder initially expanded\n      <ifx-tree-view-item slot=\"children\" initially-selected=\"true\" value=\"file-selected\" ${ariaLabelItemAttr}>File</ifx-tree-view-item>\n      <ifx-tree-view-item slot=\"children\" value=\"file-normal\" ${ariaLabelItemAttr}>File</ifx-tree-view-item>\n    </ifx-tree-view-item>\n    <ifx-tree-view-item value=\"item-1\" ${ariaLabelItemAttr}>Normal Item</ifx-tree-view-item>\n    <ifx-tree-view-item value=\"item-2\" ${ariaLabelItemAttr}>Normal Item</ifx-tree-view-item>\n  `;\n\n  el.addEventListener('ifxTreeViewExpandAllChange', action('ifxTreeViewExpandAllChange'));\n  el.addEventListener('ifxTreeViewDisableAllChange', action('ifxTreeViewDisableAllChange'));\n  el.addEventListener('ifxTreeViewItemExpandChange', (event) => {\n    const customEvent = event as CustomEvent;\n    action('ifxTreeViewItemExpandChange')({\n      expanded: customEvent.detail.expanded,\n      value: customEvent.detail.value,\n      affectedItems: customEvent.detail.affectedItems || []\n    });\n  });\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      value: customEvent.detail.value,\n      affectedChildItems: customEvent.detail.affectedChildItems || [],\n      level: customEvent.detail.level,\n      disabled: customEvent.detail.disabled\n    });\n  });\n  el.addEventListener('ifxTreeViewItemDisableChange', action('ifxTreeViewItemDisableChange'));\n\n  return el;\n};\n\nSingleItemStates.args = {\n  disableAllItems: false,\n  expandAllItems: false,\n  label: 'Tree Example',\n  ariaLabel: 'Tree View',\n  ariaLabelItem: 'Tree Item',\n};\n\nSingleItemStates.storyName = 'Single Item Expanded & disabled';\nSingleItemStates.parameters = {\n  controls: { disable: true }\n};\n"]}

package/dist/collection/stories/setup-and-installation/faq/faq.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Faq {
     render() {
-        return (h("div", { key: '4e761e2d958ce9c5fea599b01b12fca554835a0e', class: 'container' }, h("ifx-accordion", { key: 'f304b4deedb45cab9d852ed07b80dd967c820382' }, h("ifx-accordion-item", { key: 'a36e8eadc373b7afd6371dfde1058d483f279cab', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: 'e603437b41806c870030d8e63b88ec985ae3e46d', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: '77593944637daecd4a1eacc72e6472e0c865c95c', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: 'be834115e1e4e3c231d141858c31685bb9d7ecc8', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: '7b2def3eaf82ac3959ebebcbdae34bbf50b730fe', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
+        return (h("div", { key: 'b6a295a5fcd3822cec18fcea5be65cd6ca694403', class: 'container' }, h("ifx-accordion", { key: 'c1f797d5061e13ad5ecb4faed585ae11d6584814' }, h("ifx-accordion-item", { key: '31d5e4edbeeb2f076d163979fab39b66828c07dc', caption: "What is the Infineon DDS?" }, "The Infineon Digital Design System consists of code components, design principles, tools and guidelines as well as a dedicated interdisciplinary team. Its purpose is to support internal and external colleagues create digital user interfaces with a high level of usability as well as a consistent expression of the Infineon brand. The DDS does not focus on the content of a web application but it describes how the design of the application\u2019s structure should be."), h("ifx-accordion-item", { key: '1166136dfff3448320117820fd1cb0fb9f15396e', caption: "How do I get access to the DDS?" }, "You can use the provided Figma file as a foundation for mockups and prototypes, use Storybook to view what UI components and variants are available and use code components provided via Storybook or Github."), h("ifx-accordion-item", { key: '7c138a0003e9c26799c4db406c9d5aac57ecfa93', caption: "Can I integrate the Infineon DDS into my project?" }, "Yes, you can. We are happy to discuss with you which point in time and which scope of integration is bestsuited for updating your interface to the Infineon DDS. (To avoid that users get confused by a mixture of UI components, we recommend choosing larger updates or technology changes as opportunity to integrate the Infineon DDS.)"), h("ifx-accordion-item", { key: 'ac7304ccb5552bf1122c933891c7cf6ff4044b04', caption: "Are Infineon DDS components accessable?" }, "We have taken WCAG 2.0 Level AA as baseline level for all design decisions inside the Infineon Digital Design System. To make an online experience truly accessible you have to implement the specific code, content, and visual design according to the accessibility standard. Find an introduction to this topic here."), h("ifx-accordion-item", { key: '4dece35f001fcc0d3354e67d869aaf7d4cea0b1d', caption: "How to request a new component?" }, "Please contact us like described in the contribution section! We are planning to expand the number of components continually. If your component is also usable for multiple other projects, there is a good chance we might work together with you."))));
     }
     static get is() { return "ifx-faq"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/ifx-accordion-item.js

@@ -1,4 +1,4 @@
-import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-f7a8339d.js';
+import { I as IfxAccordionItem$1, d as defineCustomElement$1 } from './p-817e9528.js';
 
 const IfxAccordionItem = IfxAccordionItem$1;
 const defineCustomElement = defineCustomElement$1;