@infineon/infineon-design-system-stencil 33.6.0--canary.1869.e95c44b8ec1518dec18f74c0487b310bdd3c5eb3.0 → 33.6.0

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

@@ -1,112 +0,0 @@
-.tree-item {
-  position: relative;
-  cursor: pointer;
-  list-style: none;
-}
-.tree-item.tree-item--expanded {
-  position: relative;
-}
-.tree-item.tree-item--has-children {
-  position: relative;
-}
-.tree-item.tree-item--has-children .tree-item__header > .tree-item__chevron-container {
-  display: flex;
-}
-.tree-item.tree-item--has-children.tree-item--expanded .tree-item__header > .tree-item__chevron-container::after {
-  display: block;
-}
-.tree-item--disabled {
-  cursor: not-allowed;
-  pointer-events: none;
-  color: #BFBBBB;
-}
-.tree-item__content {
-  display: flex;
-  flex-direction: row;
-}
-.tree-item__content:hover .tree-item__checkbox-container,
-.tree-item__content:hover .tree-item__header {
-  background-color: #F7F7F7;
-}
-.tree-item__checkbox-container {
-  position: sticky;
-  left: 0;
-  z-index: 10;
-  padding: 4px;
-  background-color: #FFFFFF;
-}
-.tree-item__header {
-  flex-grow: 1;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  height: 20px;
-  padding-top: 4px;
-  padding-right: 16px;
-  padding-bottom: 4px;
-  padding-left: 8px;
-}
-.tree-item__chevron-container {
-  display: none;
-  align-items: center;
-  margin-right: 8px;
-  height: 20px;
-}
-.tree-item__chevron-container::after {
-  --height-line-start: 28px;
-  display: none;
-  content: "";
-  position: absolute;
-  z-index: 1;
-  top: var(--height-line-start);
-  left: auto;
-  margin-left: 8px;
-  width: 1px;
-  height: calc(100% - var(--height-line-start));
-  background-color: #EEEDED;
-}
-.tree-item--disabled .tree-item__chevron-container::after {
-  color: #EEEDED;
-}
-.tree-item__chevron.chevron-down {
-  transform: rotate(90deg);
-}
-.tree-item__chevron.chevron-right {
-  transform: rotate(0);
-}
-.tree-item__label-icon-container {
-  display: flex;
-  align-items: center;
-}
-.tree-item__label-icon-container:focus {
-  outline: none;
-}
-.tree-item__label-icon-container:focus-visible {
-  outline: 2px solid #0A8276;
-  outline-offset: 2px;
-  border-radius: 1px;
-}
-.tree-item__icon-container {
-  position: relative;
-  width: 16px;
-  height: 16px;
-}
-.tree-item__icon-container ifx-icon {
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 1;
-  transition: opacity 0.2s ease-in-out;
-}
-.tree-item__icon-container ifx-icon.icon--hidden {
-  opacity: 0;
-}
-.tree-item__label {
-  padding-left: 8px;
-}
-.tree-item__children {
-  display: none;
-}
-.tree-item[aria-expanded=true] > .tree-item__children {
-  display: block;
-}

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

@@ -1,549 +0,0 @@
-import { h, Fragment } from "@stencil/core";
-export class TreeViewItem {
-    constructor() {
-        this.expanded = false;
-        this.initiallyExpanded = false;
-        this.disableItem = false;
-        this.hasChildren = false;
-        this.isChecked = false;
-        this.partialChecked = false;
-        this.level = 0;
-        this.disableAllItems = false;
-        this.expandAllItems = false;
-        this.findChildren = () => Array.from(this.host.children)
-            .filter((child) => child instanceof HTMLElement && child.tagName === 'IFX-TREE-VIEW-ITEM');
-        this.calculateNodeLevel = () => {
-            let level = 0, parent = this.host.parentElement;
-            while (parent) {
-                if (parent.tagName === 'IFX-TREE-VIEW-ITEM')
-                    level++;
-                parent = parent.parentElement;
-            }
-            return level;
-        };
-        this.handleStateChange = (event) => {
-            if (this.disabled)
-                return;
-            event.stopPropagation();
-            this.updateCheckState(event.detail.checked);
-        };
-        this.handleCheckboxChange = (event) => {
-            var _a, _b;
-            if (this.disabled)
-                return;
-            this.updateCheckState((_b = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : !this.isChecked);
-        };
-        this.handleHeaderClick = ({ target }) => {
-            if (this.disabled)
-                return;
-            if (!target.closest('.tree-item__checkbox-container, .tree-item__chevron-container')) {
-                this.updateCheckState(!this.isChecked);
-            }
-        };
-        this.toggleExpand = () => {
-            if (this.disabled)
-                return;
-            this.hasChildren && (this.expanded = !this.expanded);
-        };
-        this.handleKeyDown = (event) => {
-            var _a, _b, _c, _d, _e, _f;
-            const allItems = Array.from(((_a = this.host
-                .closest('ifx-tree-view')) === null || _a === void 0 ? void 0 : _a.querySelectorAll('ifx-tree-view-item')) || []);
-            const visibleItems = allItems.filter(item => {
-                var _a, _b;
-                let parent = (_a = item.parentElement) === null || _a === void 0 ? void 0 : _a.closest('ifx-tree-view-item');
-                while (parent) {
-                    const parentCmp = parent;
-                    if (!(parentCmp.expandAllItems || parentCmp.expanded)) {
-                        return false;
-                    }
-                    parent = (_b = parent.parentElement) === null || _b === void 0 ? void 0 : _b.closest('ifx-tree-view-item');
-                }
-                return true;
-            });
-            const currentIndex = visibleItems.findIndex(el => el === this.host);
-            function focusLabelIcon(el) {
-                el === null || el === void 0 ? void 0 : el.focus();
-            }
-            switch (event.key) {
-                case 'ArrowDown': {
-                    event.preventDefault();
-                    let nextIndex = currentIndex + 1;
-                    while (nextIndex < visibleItems.length) {
-                        const next = visibleItems[nextIndex];
-                        if (!next.disabled) {
-                            focusLabelIcon((_b = next.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.tree-item__label-icon-container'));
-                            break;
-                        }
-                        nextIndex++;
-                    }
-                    break;
-                }
-                case 'ArrowUp': {
-                    event.preventDefault();
-                    let prevIndex = currentIndex - 1;
-                    while (prevIndex >= 0) {
-                        const prev = visibleItems[prevIndex];
-                        if (!prev.disabled) {
-                            focusLabelIcon((_c = prev.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.tree-item__label-icon-container'));
-                            break;
-                        }
-                        prevIndex--;
-                    }
-                    break;
-                }
-                case 'ArrowRight': {
-                    event.preventDefault();
-                    if (!this.isExpanded && this.hasChildren) {
-                        this.expanded = true;
-                    }
-                    else if (this.isExpanded && this.hasChildren) {
-                        const firstChild = this.host.querySelector('ifx-tree-view-item');
-                        if (firstChild && !firstChild.disabled) {
-                            focusLabelIcon((_d = firstChild.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.tree-item__label-icon-container'));
-                        }
-                    }
-                    break;
-                }
-                case 'ArrowLeft': {
-                    event.preventDefault();
-                    if (this.isExpanded && this.hasChildren) {
-                        this.expanded = false;
-                    }
-                    else {
-                        const parent = (_e = this.host.parentElement) === null || _e === void 0 ? void 0 : _e.closest('ifx-tree-view-item');
-                        if (parent && !parent.disabled) {
-                            focusLabelIcon((_f = parent.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector('.tree-item__label-icon-container'));
-                        }
-                    }
-                    break;
-                }
-                case ' ':
-                case 'Enter': {
-                    event.preventDefault();
-                    this.updateCheckState(!this.isChecked);
-                    break;
-                }
-            }
-        };
-    }
-    get disabled() {
-        return this.disableAllItems || this.disableItem;
-    }
-    get isExpanded() {
-        return this.expandAllItems || this.expanded;
-    }
-    componentWillLoad() {
-        this.initializeNode();
-        this.setupEventListeners();
-    }
-    componentDidLoad() {
-        this.observeDisableAllItems();
-        this.observeExpandAllItems();
-        if (this.shouldExpandFromParent()) {
-            this.expandAllDescendants();
-        }
-        this.host['__stencil_instance'] = this;
-    }
-    shouldExpandFromParent() {
-        let parent = this.host.parentElement;
-        while (parent) {
-            if (parent.tagName === 'IFX-TREE-VIEW' &&
-                (parent.hasAttribute('expand-all-items') || parent.hasAttribute('data-expand-all-items'))) {
-                return true;
-            }
-            parent = parent.parentElement;
-        }
-        return false;
-    }
-    expandAllDescendants() {
-        this.expanded = true;
-        const children = this.findChildren();
-        for (const child of children) {
-            if (typeof child.expanded !== 'undefined') {
-                child.expanded = true;
-            }
-            if (typeof child.expandAllDescendants === 'function') {
-                child.expandAllDescendants();
-            }
-        }
-    }
-    observeDisableAllItems() {
-        let parent = this.host.parentElement;
-        while (parent) {
-            if (parent.tagName === 'IFX-TREE-VIEW') {
-                const observer = new MutationObserver(mutations => {
-                    for (const mutation of mutations) {
-                        if (mutation.type === 'attributes' &&
-                            mutation.attributeName === 'disable-all-items') {
-                            const disableAll = parent.disableAllItems;
-                            this.disableAllItems = !!disableAll || parent.hasAttribute('disable-all-items');
-                        }
-                    }
-                });
-                observer.observe(parent, { attributes: true });
-                const disableAll = parent.disableAllItems;
-                this.disableAllItems = !!disableAll || parent.hasAttribute('disable-all-items');
-                break;
-            }
-            parent = parent.parentElement;
-        }
-    }
-    observeExpandAllItems() {
-        let parent = this.host.parentElement;
-        while (parent) {
-            if (parent.tagName === 'IFX-TREE-VIEW' || parent.hasAttribute('data-expand-all-items')) {
-                const observer = new MutationObserver(mutations => {
-                    for (const mutation of mutations) {
-                        if (mutation.type === 'attributes' &&
-                            mutation.attributeName === 'data-expand-all-items') {
-                            this.expandAllItems = parent.hasAttribute('data-expand-all-items');
-                        }
-                    }
-                });
-                observer.observe(parent, { attributes: true });
-                this.expandAllItems = parent.hasAttribute('data-expand-all-items');
-                break;
-            }
-            parent = parent.parentElement;
-        }
-    }
-    initializeNode() {
-        this.expanded = this.initiallyExpanded;
-        this.hasChildren = this.findChildren().length > 0;
-        this.level = this.calculateNodeLevel();
-        this.host.setAttribute('data-level', this.level.toString());
-    }
-    setupEventListeners() {
-        this.host.addEventListener('internal-check-state-change', this.handleStateChange);
-    }
-    async updateCheckState(checked, fromParent = false) {
-        if (this.disabled)
-            return;
-        if (!fromParent && this.hasChildren) {
-            const affected = this.collectDescendantStates(checked);
-            this.setNodeState({ isChecked: checked, partialChecked: false }, false);
-            await this.updateChildrenSilently(checked);
-            this.ifxTreeViewItemCheckChange.emit({
-                checked,
-                indeterminate: false,
-                affectedChildItems: affected,
-            });
-            this.updateParentState();
-        }
-        else if (fromParent) {
-            this.setNodeState({ isChecked: checked, partialChecked: false }, false);
-        }
-        else {
-            this.setNodeState({ isChecked: checked, partialChecked: false });
-            await this.updateChildrenState(checked);
-            this.updateParentState();
-        }
-    }
-    async updateChildrenSilently(checked) {
-        const children = this.findChildren();
-        for (const child of children) {
-            const childInstance = child['__stencil_instance'];
-            if (childInstance) {
-                childInstance.setNodeState({ isChecked: checked, partialChecked: false }, false);
-                await childInstance.updateChildrenSilently(checked);
-            }
-        }
-    }
-    handleExpandedChange(newValue) {
-        this.ifxTreeViewItemExpandChange.emit(newValue);
-    }
-    handleDisableItemChange(newValue) {
-        this.ifxTreeViewItemDisableChange.emit(newValue);
-    }
-    setNodeState(state, emitEvent = true) {
-        this.isChecked = state.isChecked;
-        this.partialChecked = state.partialChecked;
-        if (emitEvent) {
-            this.ifxTreeViewItemCheckChange.emit({
-                checked: this.isChecked,
-                indeterminate: this.partialChecked,
-            });
-        }
-    }
-    collectDescendantStates(checked) {
-        const descendants = [];
-        const collect = (el) => {
-            var _a, _b;
-            let instance = null;
-            if (el === this.host) {
-                instance = this;
-            }
-            else if (el['__stencil_instance']) {
-                instance = el['__stencil_instance'];
-            }
-            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 : '';
-            descendants.push({
-                label,
-                checked,
-                indeterminate: false,
-            });
-            Array.from(el.children)
-                .forEach(child => {
-                if (child.tagName === 'IFX-TREE-VIEW-ITEM') {
-                    collect(child);
-                }
-            });
-        };
-        collect(this.host);
-        return descendants;
-    }
-    async updateChildrenState(checked) {
-        const children = this.findChildren();
-        for (const child of children) {
-            await child.componentOnReady();
-            child.dispatchEvent(new CustomEvent('internal-check-state-change', {
-                detail: { checked },
-                bubbles: false,
-                composed: true
-            }));
-        }
-    }
-    findSiblingNodes(parent) {
-        const parentEl = parent.parentElement;
-        if (!parentEl)
-            return [];
-        return Array.from(parentEl.querySelectorAll('ifx-tree-view-item')).map(el => el);
-    }
-    updateParentState() {
-        var _a;
-        const parent = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.closest('ifx-tree-view-item');
-        if (!parent)
-            return;
-        parent.componentOnReady().then(resolved => {
-            const parentNode = resolved;
-            if (!(parentNode === null || parentNode === void 0 ? void 0 : parentNode.updateParentState))
-                return;
-            const siblings = this.findSiblingNodes(parent);
-            const states = this.calculateSiblingStates(siblings);
-            parentNode.setNodeState({
-                isChecked: states.allChecked,
-                partialChecked: !states.allChecked && states.someChecked
-            });
-            parentNode.updateParentState();
-        });
-    }
-    calculateSiblingStates(siblings) {
-        return {
-            allChecked: siblings.every(sib => sib.isChecked),
-            someChecked: siblings.some(sib => {
-                const node = sib;
-                return node.isChecked || node.partialChecked;
-            })
-        };
-    }
-    render() {
-        return (h("div", { key: 'a626535eaa7807016da9b015daecc1c4ecba4283', class: {
-                'tree-item': true,
-                'tree-item--expanded': this.isExpanded,
-                'tree-item--has-children': this.hasChildren,
-                'tree-item--disabled': this.disabled,
-            }, role: "treeitem", "aria-expanded": this.isExpanded ? 'true' : 'false', "data-level": this.level, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.ariaLabel }, h("div", { key: 'e6e9bf260e0c1f5584826189ae44de0abbeed4e0', class: "tree-item__content" }, this.renderCheckbox(), this.renderHeader()), this.isExpanded && h("div", { key: 'e24cad37fc29633023d9e2b7216c2281056fc76e', class: "tree-item__children" }, h("slot", { key: '65d7afa55a28667bed348cafd784636256cd23d5' }))));
-    }
-    renderHeader() {
-        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()));
-    }
-    renderCheckbox() {
-        return (h("div", { class: "tree-item__checkbox-container", onClick: e => e.stopPropagation() }, h("ifx-checkbox", { size: 's', checked: this.isChecked, indeterminate: this.partialChecked, onIfxChange: this.handleCheckboxChange, disabled: this.disabled })));
-    }
-    renderControls() {
-        return [
-            this.hasChildren && (h("div", { class: "tree-item__chevron-container", onClick: this.toggleExpand }, h("ifx-icon", { class: `tree-item__chevron ${this.isExpanded ? 'chevron-down' : 'chevron-right'}`, icon: "chevron-right-16" }), h("div", { class: "tree-item__line" }))),
-            h("div", { class: "tree-item__label-icon-container", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown }, h("div", { class: "tree-item__icon-container" }, this.hasChildren ? (h(Fragment, null, h("ifx-icon", { class: { 'icon--hidden': this.isExpanded }, icon: "folder-16" }), h("ifx-icon", { class: { 'icon--hidden': !this.isExpanded }, icon: "folder-open-16" }))) : (h("ifx-icon", { icon: "file-16" }))), h("span", { class: "tree-item__label" }, this.label))
-        ];
-    }
-    static get is() { return "ifx-tree-view-item"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["tree-view-item.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["tree-view-item.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "label",
-                "reflect": false
-            },
-            "expanded": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "expanded",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "initiallyExpanded": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "initially-expanded",
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "disableItem": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "disable-item",
-                "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 states() {
-        return {
-            "hasChildren": {},
-            "isChecked": {},
-            "partialChecked": {},
-            "level": {},
-            "disableAllItems": {},
-            "expandAllItems": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "ifxTreeViewItemExpandChange",
-                "name": "ifxTreeViewItemExpandChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }, {
-                "method": "ifxTreeViewItemCheckChange",
-                "name": "ifxTreeViewItemCheckChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "TreeViewCheckChangeEvent",
-                    "resolved": "TreeViewCheckChangeEvent",
-                    "references": {
-                        "TreeViewCheckChangeEvent": {
-                            "location": "local",
-                            "path": "/home/runner/work/infineon-design-system-stencil/infineon-design-system-stencil/packages/components/src/components/tree-view/tree-view-item.tsx",
-                            "id": "src/components/tree-view/tree-view-item.tsx::TreeViewCheckChangeEvent"
-                        }
-                    }
-                }
-            }, {
-                "method": "ifxTreeViewItemDisableChange",
-                "name": "ifxTreeViewItemDisableChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "host"; }
-    static get watchers() {
-        return [{
-                "propName": "expanded",
-                "methodName": "handleExpandedChange"
-            }, {
-                "propName": "disableItem",
-                "methodName": "handleDisableItemChange"
-            }];
-    }
-}
-//# sourceMappingURL=tree-view-item.js.map