@infineon/infineon-design-system-stencil 33.6.0--canary.1869.c23cba9972ad3dccb9a212db72d65909942f6b2a.0 → 33.6.0--canary.1869.c66212efcec90fc42d894d575bc57ad0bb3052ab.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 +2 -3
- package/dist/cjs/ifx-tree-view-item.cjs.entry.js.map +1 -1
- package/dist/cjs/ifx-tree-view.cjs.entry.js +2 -3
- package/dist/cjs/ifx-tree-view.cjs.entry.js.map +1 -1
- package/dist/collection/components/tree-view/tree-view-item.js +4 -6
- package/dist/collection/components/tree-view/tree-view-item.js.map +1 -1
- package/dist/collection/components/tree-view/tree-view.js +4 -6
- package/dist/collection/components/tree-view/tree-view.js.map +1 -1
- package/dist/components/ifx-tree-view-item.js +2 -3
- package/dist/components/ifx-tree-view-item.js.map +1 -1
- package/dist/components/ifx-tree-view.js +2 -3
- package/dist/components/ifx-tree-view.js.map +1 -1
- package/dist/esm/ifx-tree-view-item.entry.js +2 -3
- package/dist/esm/ifx-tree-view-item.entry.js.map +1 -1
- package/dist/esm/ifx-tree-view.entry.js +2 -3
- package/dist/esm/ifx-tree-view.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-4b1bb769.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-4b1bb769.entry.js.map +1 -0
- package/dist/infineon-design-system-stencil/p-d5c7d113.entry.js +2 -0
- package/dist/infineon-design-system-stencil/p-d5c7d113.entry.js.map +1 -0
- package/dist/types/components/tree-view/tree-view-item.d.ts +1 -1
- package/dist/types/components/tree-view/tree-view.d.ts +1 -1
- package/dist/types/components.d.ts +4 -4
- package/package.json +1 -1
- package/dist/infineon-design-system-stencil/p-19f2f7d6.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-19f2f7d6.entry.js.map +0 -1
- package/dist/infineon-design-system-stencil/p-4304900a.entry.js +0 -2
- package/dist/infineon-design-system-stencil/p-4304900a.entry.js.map +0 -1
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,c as t,h as i,F as n,g as s}from"./p-b7a462e5.js";const r='.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}';const a=r;const o=class{constructor(i){e(this,i);this.ifxTreeViewItemExpandChange=t(this,"ifxTreeViewItemExpandChange",7);this.ifxTreeViewItemCheckChange=t(this,"ifxTreeViewItemCheckChange",7);this.ifxTreeViewItemDisableChange=t(this,"ifxTreeViewItemDisableChange",7);this.expanded=false;this.initiallyExpanded=false;this.disableItem=false;this.ariaLabel="Tree Item";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((e=>e instanceof HTMLElement&&e.tagName==="IFX-TREE-VIEW-ITEM"));this.calculateNodeLevel=()=>{let e=0,t=this.host.parentElement;while(t){if(t.tagName==="IFX-TREE-VIEW-ITEM")e++;t=t.parentElement}return e};this.handleStateChange=e=>{if(this.disabled)return;e.stopPropagation();this.updateCheckState(e.detail.checked)};this.handleCheckboxChange=e=>{var t,i;if(this.disabled)return;this.updateCheckState((i=(t=e.detail)===null||t===void 0?void 0:t.checked)!==null&&i!==void 0?i:!this.isChecked)};this.handleHeaderClick=({target:e})=>{if(this.disabled)return;if(!e.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=e=>{var t,i,n,s,r,a;const o=Array.from(((t=this.host.closest("ifx-tree-view"))===null||t===void 0?void 0:t.querySelectorAll("ifx-tree-view-item"))||[]);const h=o.filter((e=>{var t,i;let n=(t=e.parentElement)===null||t===void 0?void 0:t.closest("ifx-tree-view-item");while(n){const e=n;if(!(e.expandAllItems||e.expanded)){return false}n=(i=n.parentElement)===null||i===void 0?void 0:i.closest("ifx-tree-view-item")}return true}));const l=h.findIndex((e=>e===this.host));function c(e){e===null||e===void 0?void 0:e.focus()}switch(e.key){case"ArrowDown":{e.preventDefault();let t=l+1;while(t<h.length){const e=h[t];if(!e.disabled){c((i=e.shadowRoot)===null||i===void 0?void 0:i.querySelector(".tree-item__label-icon-container"));break}t++}break}case"ArrowUp":{e.preventDefault();let t=l-1;while(t>=0){const e=h[t];if(!e.disabled){c((n=e.shadowRoot)===null||n===void 0?void 0:n.querySelector(".tree-item__label-icon-container"));break}t--}break}case"ArrowRight":{e.preventDefault();if(!this.isExpanded&&this.hasChildren){this.expanded=true}else if(this.isExpanded&&this.hasChildren){const e=this.host.querySelector("ifx-tree-view-item");if(e&&!e.disabled){c((s=e.shadowRoot)===null||s===void 0?void 0:s.querySelector(".tree-item__label-icon-container"))}}break}case"ArrowLeft":{e.preventDefault();if(this.isExpanded&&this.hasChildren){this.expanded=false}else{const e=(r=this.host.parentElement)===null||r===void 0?void 0:r.closest("ifx-tree-view-item");if(e&&!e.disabled){c((a=e.shadowRoot)===null||a===void 0?void 0:a.querySelector(".tree-item__label-icon-container"))}}break}case" ":case"Enter":{e.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()}}shouldExpandFromParent(){let e=this.host.parentElement;while(e){if(e.tagName==="IFX-TREE-VIEW"&&(e.hasAttribute("expand-all-items")||e.hasAttribute("data-expand-all-items"))){return true}e=e.parentElement}return false}expandAllDescendants(){this.expanded=true;const e=this.findChildren();for(const t of e){if(typeof t.expanded!=="undefined"){t.expanded=true}if(typeof t.expandAllDescendants==="function"){t.expandAllDescendants()}}}observeDisableAllItems(){let e=this.host.parentElement;while(e){if(e.tagName==="IFX-TREE-VIEW"){const t=new MutationObserver((t=>{for(const i of t){if(i.type==="attributes"&&i.attributeName==="disable-all-items"){const t=e.disableAllItems;this.disableAllItems=!!t||e.hasAttribute("disable-all-items")}}}));t.observe(e,{attributes:true});const i=e.disableAllItems;this.disableAllItems=!!i||e.hasAttribute("disable-all-items");break}e=e.parentElement}}observeExpandAllItems(){let e=this.host.parentElement;while(e){if(e.tagName==="IFX-TREE-VIEW"||e.hasAttribute("data-expand-all-items")){const t=new MutationObserver((t=>{for(const i of t){if(i.type==="attributes"&&i.attributeName==="data-expand-all-items"){this.expandAllItems=e.hasAttribute("data-expand-all-items")}}}));t.observe(e,{attributes:true});this.expandAllItems=e.hasAttribute("data-expand-all-items");break}e=e.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(e){if(this.disabled)return;this.setNodeState({isChecked:e,partialChecked:false});await this.updateChildrenState(e);this.updateParentState()}handleExpandedChange(e){this.ifxTreeViewItemExpandChange.emit(e)}handleDisableItemChange(e){this.ifxTreeViewItemDisableChange.emit(e)}setNodeState(e){this.isChecked=e.isChecked;this.partialChecked=e.partialChecked;this.ifxTreeViewItemCheckChange.emit({checked:this.isChecked,indeterminate:this.partialChecked})}async updateChildrenState(e){const t=this.findChildren();for(const i of t){await i.componentOnReady();i.dispatchEvent(new CustomEvent("internal-check-state-change",{detail:{checked:e},bubbles:false,composed:true}))}}findSiblingNodes(e){const t=e.parentElement;if(!t)return[];return Array.from(t.querySelectorAll("ifx-tree-view-item")).map((e=>e))}updateParentState(){var e;const t=(e=this.host.parentElement)===null||e===void 0?void 0:e.closest("ifx-tree-view-item");if(!t)return;t.componentOnReady().then((e=>{const i=e;if(!(i===null||i===void 0?void 0:i.updateParentState))return;const n=this.findSiblingNodes(t);const s=this.calculateSiblingStates(n);i.setNodeState({isChecked:s.allChecked,partialChecked:!s.allChecked&&s.someChecked});i.updateParentState()}))}calculateSiblingStates(e){return{allChecked:e.every((e=>e.isChecked)),someChecked:e.some((e=>{const t=e;return t.isChecked||t.partialChecked}))}}render(){return i("div",{key:"65ba2eeeaa7ff90c1d3d5ee625baa1f0c0e544fa",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},i("div",{key:"0b0f15544f9a9895882e60c712ddec3c4bf64c06",class:"tree-item__content"},this.renderCheckbox(),this.renderHeader()),this.isExpanded&&i("div",{key:"9473f80a1c8b29035e49a6ab2c89e27896bf6725",class:"tree-item__children"},i("slot",{key:"b822aa9540bc6b1aac6344809ad39b3c1efeaf07"})))}renderHeader(){return i("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 i("div",{class:"tree-item__checkbox-container",onClick:e=>e.stopPropagation()},i("ifx-checkbox",{size:"s",checked:this.isChecked,indeterminate:this.partialChecked,onIfxChange:this.handleCheckboxChange,disabled:this.disabled}))}renderControls(){return[this.hasChildren&&i("div",{class:"tree-item__chevron-container",onClick:this.toggleExpand},i("ifx-icon",{class:`tree-item__chevron ${this.isExpanded?"chevron-down":"chevron-right"}`,icon:"chevron-right-16"}),i("div",{class:"tree-item__line"})),i("div",{class:"tree-item__label-icon-container",tabIndex:this.disabled?-1:0,onKeyDown:this.handleKeyDown},i("div",{class:"tree-item__icon-container"},this.hasChildren?i(n,null,i("ifx-icon",{class:{"icon--hidden":this.isExpanded},icon:"folder-16"}),i("ifx-icon",{class:{"icon--hidden":!this.isExpanded},icon:"folder-open-16"})):i("ifx-icon",{icon:"file-16"})),i("span",{class:"tree-item__label"},this.label))]}get host(){return s(this)}static get watchers(){return{expanded:["handleExpandedChange"],disableItem:["handleDisableItemChange"]}}};o.style=a;export{o as ifx_tree_view_item};
|
2
|
-
//# sourceMappingURL=p-19f2f7d6.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["treeViewItemCss","IfxTreeViewItemStyle0","TreeViewItem","constructor","hostRef","this","expanded","initiallyExpanded","disableItem","ariaLabel","hasChildren","isChecked","partialChecked","level","disableAllItems","expandAllItems","findChildren","Array","from","host","children","filter","child","HTMLElement","tagName","calculateNodeLevel","parent","parentElement","handleStateChange","event","disabled","stopPropagation","updateCheckState","detail","checked","handleCheckboxChange","_b","_a","handleHeaderClick","target","closest","toggleExpand","handleKeyDown","allItems","querySelectorAll","visibleItems","item","parentCmp","currentIndex","findIndex","el","focusLabelIcon","focus","key","preventDefault","nextIndex","length","next","shadowRoot","querySelector","prevIndex","prev","_c","isExpanded","firstChild","_d","_e","_f","componentWillLoad","initializeNode","setupEventListeners","componentDidLoad","observeDisableAllItems","observeExpandAllItems","shouldExpandFromParent","expandAllDescendants","hasAttribute","observer","MutationObserver","mutations","mutation","type","attributeName","disableAll","observe","attributes","setAttribute","toString","addEventListener","setNodeState","updateChildrenState","updateParentState","handleExpandedChange","newValue","ifxTreeViewItemExpandChange","emit","handleDisableItemChange","ifxTreeViewItemDisableChange","state","ifxTreeViewItemCheckChange","indeterminate","componentOnReady","dispatchEvent","CustomEvent","bubbles","composed","findSiblingNodes","parentEl","map","then","resolved","parentNode","siblings","states","calculateSiblingStates","allChecked","someChecked","every","sib","some","node","render","h","class","role","undefined","renderCheckbox","renderHeader","style","paddingLeft","onClick","tabIndex","renderControls","e","size","onIfxChange","icon","onKeyDown","Fragment","label"],"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 = 'Tree Item';\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"],"mappings":"gEAAA,MAAMA,EAAkB,g/DACxB,MAAAC,EAAeD,E,MCaFE,EAAY,MALzB,WAAAC,CAAAC,G,qOAQ0CC,KAAAC,SAAoB,MACpDD,KAAAE,kBAA6B,MAC7BF,KAAAG,YAAuB,MACvBH,KAAAI,UAAoB,YAMXJ,KAAAK,YAAuB,MACvBL,KAAAM,UAAqB,MACrBN,KAAAO,eAA0B,MAC1BP,KAAAQ,MAAgB,EAChBR,KAAAS,gBAA2B,MAC3BT,KAAAU,eAA0B,MAUnCV,KAAAW,aAAe,IAAMC,MAAMC,KAAKb,KAAKc,KAAKC,UAC/CC,QAAQC,GACPA,aAAiBC,aAAeD,EAAME,UAAY,uBAG9CnB,KAAAoB,mBAAqB,KAC3B,IAAIZ,EAAQ,EAAGa,EAASrB,KAAKc,KAAKQ,cAClC,MAAOD,EAAQ,CACb,GAAIA,EAAOF,UAAY,qBAAsBX,IAC7Ca,EAASA,EAAOC,a,CAElB,OAAOd,CAAK,EAoGNR,KAAAuB,kBAAqBC,IAC3B,GAAIxB,KAAKyB,SAAU,OACnBD,EAAME,kBACN1B,KAAK2B,iBAAiBH,EAAMI,OAAOC,QAAQ,EAGrC7B,KAAA8B,qBAAwBN,I,QAC9B,GAAIxB,KAAKyB,SAAU,OACnBzB,KAAK2B,kBAAiBI,GAAAC,EAAAR,EAAMI,UAAM,MAAAI,SAAA,SAAAA,EAAEH,WAAO,MAAAE,SAAA,EAAAA,GAAK/B,KAAKM,UAAU,EAGzDN,KAAAiC,kBAAoB,EAAGC,aAC7B,GAAIlC,KAAKyB,SAAU,OACnB,IAAMS,EAAuBC,QAAQ,iEAAkE,CACrGnC,KAAK2B,kBAAkB3B,KAAKM,U,GA4ExBN,KAAAoC,aAAe,KACrB,GAAIpC,KAAKyB,SAAU,OACnBzB,KAAKK,cAAgBL,KAAKC,UAAYD,KAAKC,SAAS,EAG9CD,KAAAqC,cAAiBb,I,gBAEvB,MAAMc,EAAW1B,MAAMC,OACrBmB,EAAAhC,KAAKc,KACFqB,QAAQ,oBAAgB,MAAAH,SAAA,SAAAA,EACvBO,iBAAiB,wBAAyB,IAGhD,MAAMC,EAAeF,EAAStB,QAAOyB,I,QACnC,IAAIpB,GAASW,EAAAS,EAAKnB,iBAAa,MAAAU,SAAA,SAAAA,EAAEG,QAAQ,sBACzC,MAAOd,EAAQ,CACb,MAAMqB,EAAYrB,EAClB,KAAMqB,EAAUhC,gBAAkBgC,EAAUzC,UAAW,CACrD,OAAO,K,CAEToB,GAASU,EAAAV,EAAOC,iBAAa,MAAAS,SAAA,SAAAA,EAAEI,QAAQ,qB,CAEzC,OAAO,IAAI,IAGb,MAAMQ,EAAeH,EAAaI,WAAUC,GAAMA,IAAO7C,KAAKc,OAE9D,SAASgC,EAAeD,GACrBA,IAAyB,MAAzBA,SAAE,SAAFA,EAA2BE,O,CAG9B,OAAQvB,EAAMwB,KACZ,IAAK,YAAa,CAChBxB,EAAMyB,iBACN,IAAIC,EAAYP,EAAe,EAC/B,MAAOO,EAAYV,EAAaW,OAAQ,CACtC,MAAMC,EAAOZ,EAAaU,GAC1B,IAAKE,EAAK3B,SAAU,CAClBqB,GAAef,EAAAqB,EAAKC,cAAU,MAAAtB,SAAA,SAAAA,EAAEuB,cAAc,qCAC9C,K,CAEFJ,G,CAEF,K,CAEF,IAAK,UAAW,CACd1B,EAAMyB,iBACN,IAAIM,EAAYZ,EAAe,EAC/B,MAAOY,GAAa,EAAG,CACrB,MAAMC,EAAOhB,EAAae,GAC1B,IAAKC,EAAK/B,SAAU,CAClBqB,GAAeW,EAAAD,EAAKH,cAAU,MAAAI,SAAA,SAAAA,EAAEH,cAAc,qCAC9C,K,CAEFC,G,CAEF,K,CAEF,IAAK,aAAc,CACjB/B,EAAMyB,iBACN,IAAKjD,KAAK0D,YAAc1D,KAAKK,YAAa,CACxCL,KAAKC,SAAW,I,MACX,GAAID,KAAK0D,YAAc1D,KAAKK,YAAa,CAC9C,MAAMsD,EAAa3D,KAAKc,KAAKwC,cAAc,sBAC3C,GAAIK,IAAgBA,EAAmBlC,SAAU,CAC/CqB,GAAec,EAACD,EAA2BN,cAAU,MAAAO,SAAA,SAAAA,EAAEN,cAAc,oC,EAGzE,K,CAEF,IAAK,YAAa,CAChB9B,EAAMyB,iBACN,GAAIjD,KAAK0D,YAAc1D,KAAKK,YAAa,CACvCL,KAAKC,SAAW,K,KACX,CACL,MAAMoB,GAASwC,EAAA7D,KAAKc,KAAKQ,iBAAa,MAAAuC,SAAA,SAAAA,EAAE1B,QAAQ,sBAChD,GAAId,IAAYA,EAAeI,SAAU,CACvCqB,GAAegB,EAACzC,EAAuBgC,cAAU,MAAAS,SAAA,SAAAA,EAAER,cAAc,oC,EAGrE,K,CAEF,IAAK,IACL,IAAK,QAAS,CACZ9B,EAAMyB,iBACNjD,KAAK2B,kBAAkB3B,KAAKM,WAC5B,K,IAvSN,YAAYmB,GACV,OAAOzB,KAAKS,iBAAmBT,KAAKG,W,CAGtC,cAAYuD,GACV,OAAO1D,KAAKU,gBAAkBV,KAAKC,Q,CAiBrC,iBAAA8D,GACE/D,KAAKgE,iBACLhE,KAAKiE,qB,CAGP,gBAAAC,GACElE,KAAKmE,yBACLnE,KAAKoE,wBACL,GAAIpE,KAAKqE,yBAA0B,CACjCrE,KAAKsE,sB,EAID,sBAAAD,GACN,IAAIhD,EAASrB,KAAKc,KAAKQ,cACvB,MAAOD,EAAQ,CACb,GACEA,EAAOF,UAAY,kBAClBE,EAAOkD,aAAa,qBAAuBlD,EAAOkD,aAAa,0BAChE,CACA,OAAO,I,CAETlD,EAASA,EAAOC,a,CAElB,OAAO,K,CAGD,oBAAAgD,GACNtE,KAAKC,SAAW,KAChB,MAAMc,EAAWf,KAAKW,eACtB,IAAK,MAAMM,KAASF,EAAU,CAC5B,UAAYE,EAAchB,WAAa,YAAa,CACjDgB,EAAchB,SAAW,I,CAE5B,UAAYgB,EAAcqD,uBAAyB,WAAY,CAC5DrD,EAAcqD,sB,GAKb,sBAAAH,GACN,IAAI9C,EAASrB,KAAKc,KAAKQ,cACvB,MAAOD,EAAQ,CACb,GAAIA,EAAOF,UAAY,gBAAiB,CACtC,MAAMqD,EAAW,IAAIC,kBAAiBC,IACpC,IAAK,MAAMC,KAAYD,EAAW,CAChC,GACEC,EAASC,OAAS,cAClBD,EAASE,gBAAkB,oBAC3B,CACA,MAAMC,EAAczD,EAAeZ,gBACnCT,KAAKS,kBAAoBqE,GAAczD,EAAOkD,aAAa,oB,MAIjEC,EAASO,QAAQ1D,EAAQ,CAAE2D,WAAY,OACvC,MAAMF,EAAczD,EAAeZ,gBACnCT,KAAKS,kBAAoBqE,GAAczD,EAAOkD,aAAa,qBAC3D,K,CAEFlD,EAASA,EAAOC,a,EAIZ,qBAAA8C,GACN,IAAI/C,EAASrB,KAAKc,KAAKQ,cACvB,MAAOD,EAAQ,CACb,GAAIA,EAAOF,UAAY,iBAAmBE,EAAOkD,aAAa,yBAA0B,CACtF,MAAMC,EAAW,IAAIC,kBAAiBC,IACpC,IAAK,MAAMC,KAAYD,EAAW,CAChC,GACEC,EAASC,OAAS,cAClBD,EAASE,gBAAkB,wBAC3B,CACA7E,KAAKU,eAAiBW,EAAOkD,aAAa,wB,MAIhDC,EAASO,QAAQ1D,EAAQ,CAAE2D,WAAY,OACvChF,KAAKU,eAAiBW,EAAOkD,aAAa,yBAC1C,K,CAEFlD,EAASA,EAAOC,a,EAIZ,cAAA0C,GACNhE,KAAKC,SAAWD,KAAKE,kBACrBF,KAAKK,YAAcL,KAAKW,eAAewC,OAAS,EAChDnD,KAAKQ,MAAQR,KAAKoB,qBAClBpB,KAAKc,KAAKmE,aAAa,aAAcjF,KAAKQ,MAAM0E,W,CAG1C,mBAAAjB,GACNjE,KAAKc,KAAKqE,iBAAiB,8BAA+BnF,KAAKuB,kB,CAqBzD,sBAAMI,CAAiBE,GAC7B,GAAI7B,KAAKyB,SAAU,OACnBzB,KAAKoF,aAAa,CAAE9E,UAAWuB,EAAStB,eAAgB,cAClDP,KAAKqF,oBAAoBxD,GAC/B7B,KAAKsF,mB,CAIP,oBAAAC,CAAqBC,GACnBxF,KAAKyF,4BAA4BC,KAAKF,E,CAIxC,uBAAAG,CAAwBH,GACtBxF,KAAK4F,6BAA6BF,KAAKF,E,CAGjC,YAAAJ,CAAaS,GACnB7F,KAAKM,UAAYuF,EAAMvF,UACvBN,KAAKO,eAAiBsF,EAAMtF,eAC5BP,KAAK8F,2BAA2BJ,KAAK,CACnC7D,QAAS7B,KAAKM,UACdyF,cAAe/F,KAAKO,gB,CAIhB,yBAAM8E,CAAoBxD,GAChC,MAAMd,EAAWf,KAAKW,eACtB,IAAK,MAAMM,KAASF,EAAU,OACrBE,EAAqC+E,mBAC5C/E,EAAMgF,cAAc,IAAIC,YAAY,8BAA+B,CACjEtE,OAAQ,CAAEC,WACVsE,QAAS,MACTC,SAAU,O,EAKR,gBAAAC,CAAiBhF,GACvB,MAAMiF,EAAWjF,EAAOC,cACxB,IAAKgF,EAAU,MAAO,GACtB,OAAO1F,MAAMC,KACXyF,EAAS/D,iBAAiB,uBAC1BgE,KAAI1D,GAAMA,G,CAGN,iBAAAyC,G,MACN,MAAMjE,GAASW,EAAAhC,KAAKc,KAAKQ,iBAAa,MAAAU,SAAA,SAAAA,EAAEG,QAAQ,sBAChD,IAAKd,EAAQ,OACbA,EAAO2E,mBAAmBQ,MAAKC,IAC7B,MAAMC,EAAaD,EACnB,KAAKC,IAAU,MAAVA,SAAU,SAAVA,EAAYpB,mBAAmB,OACpC,MAAMqB,EAAW3G,KAAKqG,iBAAiBhF,GACvC,MAAMuF,EAAS5G,KAAK6G,uBAAuBF,GAC3CD,EAAWtB,aAAa,CACtB9E,UAAWsG,EAAOE,WAClBvG,gBAAiBqG,EAAOE,YAAcF,EAAOG,cAE/CL,EAAWpB,mBAAmB,G,CAI1B,sBAAAuB,CAAuBF,GAC7B,MAAO,CACLG,WAAYH,EAASK,OAAMC,GAAQA,EAAgC3G,YACnEyG,YAAaJ,EAASO,MAAKD,IACzB,MAAME,EAAOF,EACb,OAAOE,EAAK7G,WAAa6G,EAAK5G,cAAc,I,CAgGlD,MAAA6G,GACE,OACEC,EAAA,OAAArE,IAAA,2CACEsE,MAAO,CACL,YAAa,KACb,sBAAuBtH,KAAK0D,WAC5B,0BAA2B1D,KAAKK,YAChC,sBAAuBL,KAAKyB,UAE9B8F,KAAK,WAAU,gBACAvH,KAAK0D,WAAa,OAAS,QAAO,aACrC1D,KAAKQ,MAAK,gBACPR,KAAKyB,SAAW,OAAS+F,UAAS,aACrCxH,KAAKI,WAEjBiH,EAAA,OAAArE,IAAA,2CAAKsE,MAAM,sBACRtH,KAAKyH,iBACLzH,KAAK0H,gBAEP1H,KAAK0D,YAAc2D,EAAA,OAAArE,IAAA,2CAAKsE,MAAM,uBAAsBD,EAAA,QAAArE,IAAA,8C,CAKnD,YAAA0E,GACN,OACEL,EAAA,OACEC,MAAM,oBACNK,MAAO,CAAEC,YAAa,GAAG5H,KAAKQ,MAAQ,GAAK,QAC3CqH,QAAS7H,KAAKiC,kBACd6F,UAAW,EAAC,gBACG9H,KAAKyB,SAAW,OAAS+F,WAEvCxH,KAAK+H,iB,CAKJ,cAAAN,GACN,OACEJ,EAAA,OAAKC,MAAM,gCAAgCO,QAASG,GAAKA,EAAEtG,mBACzD2F,EAAA,gBACEY,KAAK,IACLpG,QAAS7B,KAAKM,UACdyF,cAAe/F,KAAKO,eACpB2H,YAAalI,KAAK8B,qBAClBL,SAAUzB,KAAKyB,W,CAMf,cAAAsG,GACN,MAAO,CACL/H,KAAKK,aACHgH,EAAA,OAAKC,MAAM,+BAA+BO,QAAS7H,KAAKoC,cACtDiF,EAAA,YAAUC,MAAO,sBAAsBtH,KAAK0D,WAAa,eAAiB,kBAChEyE,KAAK,qBACfd,EAAA,OAAKC,MAAM,qBAGfD,EAAA,OACEC,MAAM,kCACNQ,SAAU9H,KAAKyB,UAAY,EAAI,EAC/B2G,UAAWpI,KAAKqC,eAEhBgF,EAAA,OAAKC,MAAM,6BAEPtH,KAAKK,YACHgH,EAACgB,EAAQ,KACPhB,EAAA,YAAUC,MAAO,CAAC,eAAgBtH,KAAK0D,YAAayE,KAAK,cACzDd,EAAA,YAAUC,MAAO,CAAC,gBAAiBtH,KAAK0D,YAAayE,KAAK,oBAG5Dd,EAAA,YAAUc,KAAK,aAIrBd,EAAA,QAAMC,MAAM,oBAAoBtH,KAAKsI,Q","ignoreList":[]}
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import{r as e,c as a,h as t}from"./p-b7a462e5.js";const l=':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}';const s=l;const i=class{constructor(t){e(this,t);this.ifxTreeViewExpandAllChange=a(this,"ifxTreeViewExpandAllChange",7);this.ifxTreeViewDisableAllChange=a(this,"ifxTreeViewDisableAllChange",7);this.disableAllItems=false;this.expandAllItems=false;this.ariaLabel="Tree View"}handleExpandAllItemsChange(e){this.ifxTreeViewExpandAllChange.emit(e)}handleDisableAllItemsChange(e){this.ifxTreeViewDisableAllChange.emit(e)}render(){return t("div",{key:"80685b84144c9e87bb01449f28b512e331884cf3",class:{"tree-view":true,"tree-view--disabled":this.disableAllItems},role:"tree","aria-label":this.ariaLabel},this.label&&this.label.trim()!==""&&t("div",{key:"8f4cf624d49def348e24c569436d3665f6777404",class:"tree-view__label"},this.label),t("slot",{key:"b36f590b814b3e7e1d46f91c046c1af37c469e1b",ref:e=>{if(e){if(this.disableAllItems){e.setAttribute("data-disable-all-items","true")}else{e.removeAttribute("data-disable-all-items")}if(this.expandAllItems){e.setAttribute("data-expand-all-items","true")}else{e.removeAttribute("data-expand-all-items")}}}}))}static get watchers(){return{expandAllItems:["handleExpandAllItemsChange"],disableAllItems:["handleDisableAllItemsChange"]}}};i.style=s;export{i as ifx_tree_view};
|
2
|
-
//# sourceMappingURL=p-4304900a.entry.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["treeViewCss","IfxTreeViewStyle0","TreeView","constructor","hostRef","this","disableAllItems","expandAllItems","ariaLabel","handleExpandAllItemsChange","newValue","ifxTreeViewExpandAllChange","emit","handleDisableAllItemsChange","ifxTreeViewDisableAllChange","render","h","key","class","role","label","trim","ref","el","setAttribute","removeAttribute"],"sources":["src/components/tree-view/tree-view.scss?tag=ifx-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n display: block;\n}\n\n.tree-view {\n font-family: var(--ifx-font-family, sans-serif);\n font-size: 14px;\n color: var(--ifx-color-text, #1a1a1a);\n\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n overflow-x: auto;\n overflow-y: hidden;\n\n &__label {\n font: tokens.$ifxHeadingHeading06;\n margin-bottom: tokens.$ifxSpace100;\n }\n}\n","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 = 'Tree View';\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 render() {\n return (\n <div\n class={{\n 'tree-view': true,\n 'tree-view--disabled': this.disableAllItems,\n }}\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={el => {\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 }}></slot>\n </div>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,wSACpB,MAAAC,EAAeD,E,MCMFE,EAAQ,MALrB,WAAAC,CAAAC,G,0JAOUC,KAAAC,gBAA2B,MAC3BD,KAAAE,eAA0B,MAC1BF,KAAAG,UAAoB,W,CAM5B,0BAAAC,CAA2BC,GACzBL,KAAKM,2BAA2BC,KAAKF,E,CAIvC,2BAAAG,CAA4BH,GAC1BL,KAAKS,4BAA4BF,KAAKF,E,CAGxC,MAAAK,GACE,OACEC,EAAA,OAAAC,IAAA,2CACEC,MAAO,CACL,YAAa,KACb,sBAAuBb,KAAKC,iBAE9Ba,KAAK,OAAM,aACCd,KAAKG,WAEhBH,KAAKe,OAASf,KAAKe,MAAMC,SAAW,IAAML,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oBAAoBb,KAAKe,OAC/EJ,EAAA,QAAAC,IAAA,2CAAMK,IAAKC,IACT,GAAIA,EAAI,CACN,GAAIlB,KAAKC,gBAAiB,CACxBiB,EAAGC,aAAa,yBAA0B,O,KACrC,CACLD,EAAGE,gBAAgB,yB,CAErB,GAAIpB,KAAKE,eAAgB,CACvBgB,EAAGC,aAAa,wBAAyB,O,KACpC,CACLD,EAAGE,gBAAgB,wB","ignoreList":[]}
|