@digital-realty/ix-tree 3.3.4 → 3.3.6
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/IxTreeNode.d.ts +1 -0
- package/dist/IxTreeNode.js +12 -1
- package/dist/IxTreeNode.js.map +1 -1
- package/dist/ix-tree.min.js +2 -2
- package/package.json +6 -6
package/dist/IxTreeNode.d.ts
CHANGED
package/dist/IxTreeNode.js
CHANGED
|
@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
3
3
|
import '@digital-realty/ix-checkbox/ix-checkbox.js';
|
|
4
4
|
import { html, LitElement, nothing } from 'lit';
|
|
5
|
-
import { property, state } from 'lit/decorators.js';
|
|
5
|
+
import { property, state, query } from 'lit/decorators.js';
|
|
6
6
|
import { IxTreeStyles } from './ix-tree-styles.js';
|
|
7
7
|
import { IxTreeTestIds as TestIds } from './constants/IxTreeTestIds.js';
|
|
8
8
|
export class IxTreeNode extends LitElement {
|
|
@@ -121,6 +121,7 @@ export class IxTreeNode extends LitElement {
|
|
|
121
121
|
const cursorClass = isDisabled ? 'cursor-default' : 'cursor-pointer';
|
|
122
122
|
const icon = this.node.icon ? this.node.icon : 'account_box';
|
|
123
123
|
return html `<div
|
|
124
|
+
class="tree-node-container"
|
|
124
125
|
?active-tree-node=${this.isActiveTreeNode}
|
|
125
126
|
aria-expanded=${!!this.node.expanded}
|
|
126
127
|
aria-selected=${this.isSelected}
|
|
@@ -161,6 +162,13 @@ export class IxTreeNode extends LitElement {
|
|
|
161
162
|
el === null || el === void 0 ? void 0 : el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
162
163
|
this._hasScrolledToActive = true;
|
|
163
164
|
}
|
|
165
|
+
if (this.isSelected) {
|
|
166
|
+
this.dispatchEvent(new CustomEvent('selected-node-ref', {
|
|
167
|
+
detail: this._treeNodeContainer,
|
|
168
|
+
bubbles: true,
|
|
169
|
+
composed: true,
|
|
170
|
+
}));
|
|
171
|
+
}
|
|
164
172
|
}
|
|
165
173
|
}
|
|
166
174
|
IxTreeNode.styles = [IxTreeStyles];
|
|
@@ -206,4 +214,7 @@ __decorate([
|
|
|
206
214
|
__decorate([
|
|
207
215
|
state()
|
|
208
216
|
], IxTreeNode.prototype, "_hasScrolledToActive", void 0);
|
|
217
|
+
__decorate([
|
|
218
|
+
query('.tree-node-container')
|
|
219
|
+
], IxTreeNode.prototype, "_treeNodeContainer", void 0);
|
|
209
220
|
//# sourceMappingURL=IxTreeNode.js.map
|
package/dist/IxTreeNode.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxTreeNode.js","sourceRoot":"","sources":["../src/IxTreeNode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-checkbox/ix-checkbox.js';\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { IIxTreeNode } from './IIxTreeNode.js';\nimport { IxTreeStyles } from './ix-tree-styles.js';\nimport { Appearance } from './IxTree.js';\nimport { IxTreeTestIds as TestIds } from './constants/IxTreeTestIds.js';\n\nexport class IxTreeNode extends LitElement {\n static readonly styles = [IxTreeStyles];\n\n @property({ type: Boolean }) isActiveTreeNode: boolean = false;\n\n @property({ type: Boolean }) isExpanded: boolean = false;\n\n @property({ type: Boolean }) isSelected: boolean = false;\n\n @property({ type: Number }) level: number = 0;\n\n @property({ type: Object }) node!: IIxTreeNode;\n\n @property({ type: Boolean }) checkboxEnabled: boolean = false;\n\n @property({ type: String }) appearance: Appearance = 'default';\n\n @property({ type: Boolean }) hasIcon: boolean = false;\n\n @property({ type: Boolean }) removeChevron: boolean = false;\n\n @property({ type: Boolean }) allowMultiLine: boolean = false;\n\n @property({ type: Boolean }) scrollToActive: boolean = false;\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @property({ type: Boolean }) selectNodeOnClick: boolean = false;\n\n @state() private _hasScrolledToActive: boolean = false;\n\n private hasChildren() {\n return this.node.children !== undefined && this.node.children.length > 0;\n }\n\n private getChevron(): TemplateResult<1> | typeof nothing {\n const icon = this.isExpanded ? 'arrow_drop_down' : 'arrow_right';\n return html`<div\n style=${`${this.hasChildren() ? '' : 'visibility:hidden'}`}\n >\n <ix-icon-button\n data-testid=\"${TestIds.CHEVRON_TOGGLE(this.node.id)}\"\n @click=${() => this.onNodeToggle(this.node)}\n icon=${icon}\n class=\"chevron\"\n test-id=\"tree-node-expand-toggle\"\n >\n </ix-icon-button>\n </div>`;\n }\n\n private renderCheckbox() {\n if (this.node.disabled) {\n return html` <ix-icon class=\"inherited\">arrow_drop_up</ix-icon>`;\n }\n\n return html`<ix-checkbox\n data-testid=\"${TestIds.CHECKBOX(this.node.id)}\"\n @click=${() => this.onNodeCheck(this.node)}\n label=\"\"\n class=\"item-checkbox\"\n .checked=${this.node.checked}\n .indeterminate=${this.node.indeterminate}\n ></ix-checkbox>`;\n }\n\n private onNodeClick(node: IIxTreeNode): void {\n const event = new CustomEvent('on-tree-node-click', {\n detail: {\n message: {\n node,\n id: node.id,\n label: node.label,\n parentId: node.parentId,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onNodeToggle(node: IIxTreeNode): void {\n const event = new CustomEvent('on-tree-node-toggle', {\n detail: {\n message: {\n node,\n id: node.id,\n label: node.label,\n parentId: node.parentId,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onNodeCheck(node: IIxTreeNode): void {\n /* eslint-disable no-param-reassign */\n if (node.checked) {\n node.checked = false;\n node.indeterminate = false;\n } else {\n node.checked = true;\n node.indeterminate = false;\n }\n const event = new CustomEvent('on-tree-node-check', {\n detail: {\n message: {\n node,\n id: node.id,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private handleNodeClick(node: IIxTreeNode): void {\n if (this.disabled || node.disabled) {\n return;\n }\n\n if (this.selectNodeOnClick) {\n this.onNodeCheck(node);\n return;\n }\n\n if (this.checkboxEnabled) {\n this.onNodeToggle(node);\n } else {\n this.onNodeClick(node);\n }\n }\n\n protected render(): TemplateResult<1> {\n const selectedClass = this.isSelected ? 'selected' : '';\n const isDisabled = this.disabled || this.node.disabled;\n const disabledClass = isDisabled ? 'disabled' : '';\n const cursorClass = isDisabled ? 'cursor-default' : 'cursor-pointer';\n const icon = this.node.icon ? this.node.icon : 'account_box';\n\n return html`<div\n ?active-tree-node=${this.isActiveTreeNode}\n aria-expanded=${!!this.node.expanded}\n aria-selected=${this.isSelected}\n aria-disabled=${isDisabled}\n data-id=${this.node.id}\n role=\"treeitem\"\n data-testid=\"${TestIds.CONTAINER(this.node.id)}\"\n >\n <div\n class=\"wrapper ${selectedClass} ${cursorClass} ${disabledClass}\"\n style=\"padding-left: calc(var(--ix-tree-icon-size) * ${this.level})\"\n >\n ${!this.removeChevron ? this.getChevron() : nothing}\n ${this.checkboxEnabled ? this.renderCheckbox() : nothing}\n ${this.hasIcon\n ? html`<ix-icon class=\"icon\" data-testid=${TestIds.ICON(this.node.id)}\n >${icon}</ix-icon\n >`\n : nothing}\n <div\n data-testid=\"${TestIds.LABEL(this.node.id)}\"\n class=\"label ${this.allowMultiLine\n ? 'label-multi-line'\n : 'label-single-line'}\"\n @click=${() => this.handleNodeClick(this.node)}\n @keyup=${() => this.handleNodeClick(this.node)}\n >\n ${this.node.label}\n </div>\n </div>\n <slot></slot>\n </div>`;\n }\n\n protected updated(): void {\n if (this.scrollToActive && !this._hasScrolledToActive) {\n const el = this.shadowRoot?.querySelector('[active-tree-node]');\n el?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n this._hasScrolledToActive = true;\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IxTreeNode.js","sourceRoot":"","sources":["../src/IxTreeNode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-checkbox/ix-checkbox.js';\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { property, state, query } from 'lit/decorators.js';\n\nimport { IIxTreeNode } from './IIxTreeNode.js';\nimport { IxTreeStyles } from './ix-tree-styles.js';\nimport { Appearance } from './IxTree.js';\nimport { IxTreeTestIds as TestIds } from './constants/IxTreeTestIds.js';\n\nexport class IxTreeNode extends LitElement {\n static readonly styles = [IxTreeStyles];\n\n @property({ type: Boolean }) isActiveTreeNode: boolean = false;\n\n @property({ type: Boolean }) isExpanded: boolean = false;\n\n @property({ type: Boolean }) isSelected: boolean = false;\n\n @property({ type: Number }) level: number = 0;\n\n @property({ type: Object }) node!: IIxTreeNode;\n\n @property({ type: Boolean }) checkboxEnabled: boolean = false;\n\n @property({ type: String }) appearance: Appearance = 'default';\n\n @property({ type: Boolean }) hasIcon: boolean = false;\n\n @property({ type: Boolean }) removeChevron: boolean = false;\n\n @property({ type: Boolean }) allowMultiLine: boolean = false;\n\n @property({ type: Boolean }) scrollToActive: boolean = false;\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @property({ type: Boolean }) selectNodeOnClick: boolean = false;\n\n @state() private _hasScrolledToActive: boolean = false;\n\n @query('.tree-node-container') private _treeNodeContainer!: HTMLElement;\n\n private hasChildren() {\n return this.node.children !== undefined && this.node.children.length > 0;\n }\n\n private getChevron(): TemplateResult<1> | typeof nothing {\n const icon = this.isExpanded ? 'arrow_drop_down' : 'arrow_right';\n return html`<div\n style=${`${this.hasChildren() ? '' : 'visibility:hidden'}`}\n >\n <ix-icon-button\n data-testid=\"${TestIds.CHEVRON_TOGGLE(this.node.id)}\"\n @click=${() => this.onNodeToggle(this.node)}\n icon=${icon}\n class=\"chevron\"\n test-id=\"tree-node-expand-toggle\"\n >\n </ix-icon-button>\n </div>`;\n }\n\n private renderCheckbox() {\n if (this.node.disabled) {\n return html` <ix-icon class=\"inherited\">arrow_drop_up</ix-icon>`;\n }\n\n return html`<ix-checkbox\n data-testid=\"${TestIds.CHECKBOX(this.node.id)}\"\n @click=${() => this.onNodeCheck(this.node)}\n label=\"\"\n class=\"item-checkbox\"\n .checked=${this.node.checked}\n .indeterminate=${this.node.indeterminate}\n ></ix-checkbox>`;\n }\n\n private onNodeClick(node: IIxTreeNode): void {\n const event = new CustomEvent('on-tree-node-click', {\n detail: {\n message: {\n node,\n id: node.id,\n label: node.label,\n parentId: node.parentId,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onNodeToggle(node: IIxTreeNode): void {\n const event = new CustomEvent('on-tree-node-toggle', {\n detail: {\n message: {\n node,\n id: node.id,\n label: node.label,\n parentId: node.parentId,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onNodeCheck(node: IIxTreeNode): void {\n /* eslint-disable no-param-reassign */\n if (node.checked) {\n node.checked = false;\n node.indeterminate = false;\n } else {\n node.checked = true;\n node.indeterminate = false;\n }\n const event = new CustomEvent('on-tree-node-check', {\n detail: {\n message: {\n node,\n id: node.id,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private handleNodeClick(node: IIxTreeNode): void {\n if (this.disabled || node.disabled) {\n return;\n }\n\n if (this.selectNodeOnClick) {\n this.onNodeCheck(node);\n return;\n }\n\n if (this.checkboxEnabled) {\n this.onNodeToggle(node);\n } else {\n this.onNodeClick(node);\n }\n }\n\n protected render(): TemplateResult<1> {\n const selectedClass = this.isSelected ? 'selected' : '';\n const isDisabled = this.disabled || this.node.disabled;\n const disabledClass = isDisabled ? 'disabled' : '';\n const cursorClass = isDisabled ? 'cursor-default' : 'cursor-pointer';\n const icon = this.node.icon ? this.node.icon : 'account_box';\n\n return html`<div\n class=\"tree-node-container\"\n ?active-tree-node=${this.isActiveTreeNode}\n aria-expanded=${!!this.node.expanded}\n aria-selected=${this.isSelected}\n aria-disabled=${isDisabled}\n data-id=${this.node.id}\n role=\"treeitem\"\n data-testid=\"${TestIds.CONTAINER(this.node.id)}\"\n >\n <div\n class=\"wrapper ${selectedClass} ${cursorClass} ${disabledClass}\"\n style=\"padding-left: calc(var(--ix-tree-icon-size) * ${this.level})\"\n >\n ${!this.removeChevron ? this.getChevron() : nothing}\n ${this.checkboxEnabled ? this.renderCheckbox() : nothing}\n ${this.hasIcon\n ? html`<ix-icon class=\"icon\" data-testid=${TestIds.ICON(this.node.id)}\n >${icon}</ix-icon\n >`\n : nothing}\n <div\n data-testid=\"${TestIds.LABEL(this.node.id)}\"\n class=\"label ${this.allowMultiLine\n ? 'label-multi-line'\n : 'label-single-line'}\"\n @click=${() => this.handleNodeClick(this.node)}\n @keyup=${() => this.handleNodeClick(this.node)}\n >\n ${this.node.label}\n </div>\n </div>\n <slot></slot>\n </div>`;\n }\n\n protected updated(): void {\n if (this.scrollToActive && !this._hasScrolledToActive) {\n const el = this.shadowRoot?.querySelector('[active-tree-node]');\n el?.scrollIntoView({ behavior: 'smooth', block: 'start' });\n this._hasScrolledToActive = true;\n }\n if (this.isSelected) {\n this.dispatchEvent(\n new CustomEvent('selected-node-ref', {\n detail: this._treeNodeContainer,\n bubbles: true,\n composed: true,\n })\n );\n }\n }\n}\n"]}
|
package/dist/ix-tree.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import"@digital-realty/ix-icon/ix-icon.js";import{css,LitElement,html,nothing}from"lit";import{property,state}from"lit/decorators.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-checkbox/ix-checkbox.js";function findChildNodeById(e,t){if(e.id===t)return e;if(e.children)for(var o of e.children){o=findChildNodeById(o,t);if(o)return o}return null}function updateNodeCheckedStatus(e,o,i=!0){!function t(o,i=!1){o.checked=i,o.indeterminate=!1,o.children&&o.children.forEach(e=>{e.disabled=o.checked,t(e,i)})}(e,e.checked),function e(t){t.parentId&&(t=findChildNodeById(o,t.parentId))&&t.children&&(t.children.every(e=>e.checked)&&i?(t.checked=!0,t.indeterminate=!1):t.children.some(e=>e.checked)||t.children.some(e=>e.indeterminate)?(t.checked=!1,t.indeterminate=!0):(t.checked=!1,t.indeterminate=!1),e(t))}(e)}let IxTreeStyles=css`:host{--ix-tree-icon-spacing:0.7rem;--ix-tree-icon-size:1.2rem}md-checkbox{--md-checkbox-outline-color:var(
|
|
1
|
+
import{__decorate}from"tslib";import"@digital-realty/ix-icon/ix-icon.js";import{css,LitElement,html,nothing}from"lit";import{property,state,query}from"lit/decorators.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-checkbox/ix-checkbox.js";function findChildNodeById(e,t){if(e.id===t)return e;if(e.children)for(var o of e.children){o=findChildNodeById(o,t);if(o)return o}return null}function updateNodeCheckedStatus(e,o,i=!0){!function t(o,i=!1){o.checked=i,o.indeterminate=!1,o.children&&o.children.forEach(e=>{e.disabled=o.checked,t(e,i)})}(e,e.checked),function e(t){t.parentId&&(t=findChildNodeById(o,t.parentId))&&t.children&&(t.children.every(e=>e.checked)&&i?(t.checked=!0,t.indeterminate=!1):t.children.some(e=>e.checked)||t.children.some(e=>e.indeterminate)?(t.checked=!1,t.indeterminate=!0):(t.checked=!1,t.indeterminate=!1),e(t))}(e)}let IxTreeStyles=css`:host{--ix-tree-icon-spacing:0.7rem;--ix-tree-icon-size:1.2rem}md-checkbox{--md-checkbox-outline-color:var(
|
|
2
2
|
--ix-tree-node-outline-colour,
|
|
3
3
|
rgb(91, 107, 124)
|
|
4
4
|
)}md-checkbox[indeterminate]{--md-checkbox-selected-container-color:var(
|
|
@@ -7,4 +7,4 @@ import{__decorate}from"tslib";import"@digital-realty/ix-icon/ix-icon.js";import{
|
|
|
7
7
|
);--md-checkbox-selected-hover-container-color:var(
|
|
8
8
|
--ix-tree-indeterminate-node-background-color,
|
|
9
9
|
#53657a
|
|
10
|
-
)}.inherited{display:flex;cursor:default;background:var(--ix-tree-inherited-node-background-color,#53657a);margin-right:var(--ix-tree-icon-spacing,.7rem);height:var(--ix-tree-inherited-node-height,18px);width:var(--ix-tree-inherited-node-width,18px);border-radius:var(--ix-tree-inherited-node-border-radius,2px);color:var(--ix-tree-inherited-node-icon-color,#fff);--ix-icon-font-size:var(--ix-tree-inherited-node-icon-font-size, 18px)}.wrapper{align-items:center;display:flex;border-left:var(--ix-tree-indent-width,3px) solid transparent}.icon{display:flex;color:var(--md-icon-button-icon-color);margin-right:var(--ix-tree-icon-spacing,.7rem);font-size:var(--ix-tree-icon-size,1.2rem)}.label{color:var(--ix-tree-label-text-color,var(--clr-on-surface,#092241));flex-grow:1;padding-top:8px;padding-bottom:8px}.label-single-line{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.label-multi-line{overflow-wrap:break-word}.item-checkbox{display:flex;margin-right:var(--ix-tree-icon-spacing,.7rem)}.selected{background-color:var(--ix-tree-active-background-color,var(--clr-primary-subtle,#1456e01a));border-left:3px solid var(--ix-tree-active-border-color,var(--clr-primary,#1456e0))}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.disabled{opacity:.5;pointer-events:none}.disabled .label{color:var(--ix-tree-disabled-text-color,#999)}`;class IxTreeTestIds{}IxTreeTestIds.CHEVRON_TOGGLE=e=>"ix-tree-chevron-"+e,IxTreeTestIds.CHECKBOX=e=>"ix-tree-checkbox-"+e,IxTreeTestIds.ICON=e=>"ix-tree-icon-"+e,IxTreeTestIds.LABEL=e=>"ix-tree-label-"+e,IxTreeTestIds.NODE=e=>"ix-tree-node-"+e,IxTreeTestIds.CONTAINER=e=>"ix-tree-container-"+e;class IxTreeNode extends LitElement{constructor(){super(...arguments),this.isActiveTreeNode=!1,this.isExpanded=!1,this.isSelected=!1,this.level=0,this.checkboxEnabled=!1,this.appearance="default",this.hasIcon=!1,this.removeChevron=!1,this.allowMultiLine=!1,this.scrollToActive=!1,this.disabled=!1,this.selectNodeOnClick=!1,this._hasScrolledToActive=!1}hasChildren(){return void 0!==this.node.children&&0<this.node.children.length}getChevron(){var e=this.isExpanded?"arrow_drop_down":"arrow_right";return html`<div style="${this.hasChildren()?"":"visibility:hidden"}"><ix-icon-button data-testid="${IxTreeTestIds.CHEVRON_TOGGLE(this.node.id)}" @click="${()=>this.onNodeToggle(this.node)}" icon="${e}" class="chevron" test-id="tree-node-expand-toggle"></ix-icon-button></div>`}renderCheckbox(){return this.node.disabled?html`<ix-icon class="inherited">arrow_drop_up</ix-icon>`:html`<ix-checkbox data-testid="${IxTreeTestIds.CHECKBOX(this.node.id)}" @click="${()=>this.onNodeCheck(this.node)}" label="" class="item-checkbox" .checked="${this.node.checked}" .indeterminate="${this.node.indeterminate}"></ix-checkbox>`}onNodeClick(e){e=new CustomEvent("on-tree-node-click",{detail:{message:{node:e,id:e.id,label:e.label,parentId:e.parentId}}});this.dispatchEvent(e)}onNodeToggle(e){e=new CustomEvent("on-tree-node-toggle",{detail:{message:{node:e,id:e.id,label:e.label,parentId:e.parentId}}});this.dispatchEvent(e)}onNodeCheck(e){e.checked?e.checked=!1:e.checked=!0,e.indeterminate=!1;e=new CustomEvent("on-tree-node-check",{detail:{message:{node:e,id:e.id}}});this.dispatchEvent(e)}handleNodeClick(e){this.disabled||e.disabled||(this.selectNodeOnClick?this.onNodeCheck(e):this.checkboxEnabled?this.onNodeToggle(e):this.onNodeClick(e))}render(){var e=this.isSelected?"selected":"",t=this.disabled||this.node.disabled,o=t?"disabled":"",i=t?"cursor-default":"cursor-pointer",d=this.node.icon||"account_box";return html`<div ?active-tree-node="${this.isActiveTreeNode}" aria-expanded="${!!this.node.expanded}" aria-selected="${this.isSelected}" aria-disabled="${t}" data-id="${this.node.id}" role="treeitem" data-testid="${IxTreeTestIds.CONTAINER(this.node.id)}"><div class="wrapper ${e} ${i} ${o}" style="padding-left:calc(var(--ix-tree-icon-size) * ${this.level})">${this.removeChevron?nothing:this.getChevron()} ${this.checkboxEnabled?this.renderCheckbox():nothing} ${this.hasIcon?html`<ix-icon class="icon" data-testid="${IxTreeTestIds.ICON(this.node.id)}">${d}</ix-icon>`:nothing}<div data-testid="${IxTreeTestIds.LABEL(this.node.id)}" class="label ${this.allowMultiLine?"label-multi-line":"label-single-line"}" @click="${()=>this.handleNodeClick(this.node)}" @keyup="${()=>this.handleNodeClick(this.node)}">${this.node.label}</div></div><slot></slot></div>`}updated(){var e;this.scrollToActive&&!this._hasScrolledToActive&&(null!=(e=null==(e=this.shadowRoot)?void 0:e.querySelector("[active-tree-node]"))&&e.scrollIntoView({behavior:"smooth",block:"start"}),this._hasScrolledToActive=!0)}}IxTreeNode.styles=[IxTreeStyles],__decorate([property({type:Boolean})],IxTreeNode.prototype,"isActiveTreeNode",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"isExpanded",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"isSelected",void 0),__decorate([property({type:Number})],IxTreeNode.prototype,"level",void 0),__decorate([property({type:Object})],IxTreeNode.prototype,"node",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"checkboxEnabled",void 0),__decorate([property({type:String})],IxTreeNode.prototype,"appearance",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"hasIcon",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"removeChevron",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"allowMultiLine",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"scrollToActive",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"disabled",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"selectNodeOnClick",void 0),__decorate([state()],IxTreeNode.prototype,"_hasScrolledToActive",void 0),customElements.define("ix-tree-node",IxTreeNode);class IxTree extends LitElement{constructor(){super(...arguments),this.ariaLabel="tree",this.selectedNodeId="",this.checkboxesEnabled=!1,this.appearance="default",this.hasIcons=!1,this.removeChevron=!1,this.allowMultiLine=!1,this.rollup=!0,this.selectNodeOnClick=!1,this._activeItemId="",this._selectedNodeId=""}connectedCallback(){super.connectedCallback(),this._activeItemId=this.selectedNodeId,this._selectedNodeId=this.selectedNodeId,this._rootNode=this.rootNode}onTreeNodeClick(e){this.dispatchEvent(new CustomEvent("on-tree-node-selected",{detail:{message:e.detail.message}})),this._selectedNodeId=e.detail.message.id}dispatchTreeNodeExpandToggle(e){this.dispatchEvent(new CustomEvent("on-tree-node-expand-toggle",{detail:{message:e.detail.message}}))}onTreeNodeToggle(e){var t={...this._rootNode},o=e.detail.message.node;o.expanded=!o.expanded,this.rootNode=t,this._activeItemId=o.id,this.dispatchTreeNodeExpandToggle(e),this.requestUpdate()}onTreeNodeCheck(e){var t=e.detail.message.node;updateNodeCheckedStatus(t,this._rootNode,this.rollup),this._rootNode=structuredClone(this._rootNode),this.rootNode=this._rootNode,this.dispatchEvent(new CustomEvent("on-tree-node-checked",{detail:{message:e.detail.message}}))}renderNodes(e=[],t=0){var o,i=[];for(o of e){var d=html`<ix-tree-node .level="${t}" .node="${o}" .appearance="${this.appearance}" .selectNodeOnClick="${this.selectNodeOnClick}" ?isActiveTreeNode="${this._activeItemId===o.id}" ?isExpanded="${!!o.expanded}" ?isSelected="${this._selectedNodeId===o.id}" ?checkboxEnabled="${this.checkboxesEnabled}" ?hasIcon="${this.hasIcons}" ?removeChevron="${this.removeChevron}" ?allowMultiLine="${this.allowMultiLine}" ?disabled="${!!o.disabled}" @on-tree-node-click="${this.onTreeNodeClick}" @on-tree-node-toggle="${this.onTreeNodeToggle}" @on-tree-node-check="${this.onTreeNodeCheck}" data-testid="${IxTreeTestIds.NODE(o.id)}">${o.expanded?this.renderNodes(o.children,t+1):nothing}</ix-tree-node>`;i.push(d)}return i}expandActiveTreeNode(){var t=findChildNodeById(this._rootNode,this._activeItemId)||this._rootNode;let o=0;if(t.parentId){let e=findChildNodeById(this._rootNode,t.parentId);for(;e&&o<1e3&&(e.expanded=!0,e.parentId);)e=findChildNodeById(this._rootNode,e.parentId),o+=1}}render(){return this.expandActiveTreeNode(),html`<div aria-label="${this.ariaLabel}" class="ix-tree-container" role="tree">${this.renderNodes(this._rootNode.children,0)}</div>`}}IxTree.styles=[IxTreeStyles],__decorate([property({type:String})],IxTree.prototype,"ariaLabel",void 0),__decorate([property({type:Object})],IxTree.prototype,"rootNode",void 0),__decorate([property({type:String})],IxTree.prototype,"selectedNodeId",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"checkboxesEnabled",void 0),__decorate([property({type:String})],IxTree.prototype,"appearance",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"hasIcons",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"removeChevron",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"allowMultiLine",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"rollup",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"selectNodeOnClick",void 0),__decorate([state()],IxTree.prototype,"_activeItemId",void 0),__decorate([state()],IxTree.prototype,"_rootNode",void 0),__decorate([state()],IxTree.prototype,"_selectedNodeId",void 0),customElements.define("ix-tree",IxTree);
|
|
10
|
+
)}.inherited{display:flex;cursor:default;background:var(--ix-tree-inherited-node-background-color,#53657a);margin-right:var(--ix-tree-icon-spacing,.7rem);height:var(--ix-tree-inherited-node-height,18px);width:var(--ix-tree-inherited-node-width,18px);border-radius:var(--ix-tree-inherited-node-border-radius,2px);color:var(--ix-tree-inherited-node-icon-color,#fff);--ix-icon-font-size:var(--ix-tree-inherited-node-icon-font-size, 18px)}.wrapper{align-items:center;display:flex;border-left:var(--ix-tree-indent-width,3px) solid transparent}.icon{display:flex;color:var(--md-icon-button-icon-color);margin-right:var(--ix-tree-icon-spacing,.7rem);font-size:var(--ix-tree-icon-size,1.2rem)}.label{color:var(--ix-tree-label-text-color,var(--clr-on-surface,#092241));flex-grow:1;padding-top:8px;padding-bottom:8px}.label-single-line{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.label-multi-line{overflow-wrap:break-word}.item-checkbox{display:flex;margin-right:var(--ix-tree-icon-spacing,.7rem)}.selected{background-color:var(--ix-tree-active-background-color,var(--clr-primary-subtle,#1456e01a));border-left:3px solid var(--ix-tree-active-border-color,var(--clr-primary,#1456e0))}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.disabled{opacity:.5;pointer-events:none}.disabled .label{color:var(--ix-tree-disabled-text-color,#999)}`;class IxTreeTestIds{}IxTreeTestIds.CHEVRON_TOGGLE=e=>"ix-tree-chevron-"+e,IxTreeTestIds.CHECKBOX=e=>"ix-tree-checkbox-"+e,IxTreeTestIds.ICON=e=>"ix-tree-icon-"+e,IxTreeTestIds.LABEL=e=>"ix-tree-label-"+e,IxTreeTestIds.NODE=e=>"ix-tree-node-"+e,IxTreeTestIds.CONTAINER=e=>"ix-tree-container-"+e;class IxTreeNode extends LitElement{constructor(){super(...arguments),this.isActiveTreeNode=!1,this.isExpanded=!1,this.isSelected=!1,this.level=0,this.checkboxEnabled=!1,this.appearance="default",this.hasIcon=!1,this.removeChevron=!1,this.allowMultiLine=!1,this.scrollToActive=!1,this.disabled=!1,this.selectNodeOnClick=!1,this._hasScrolledToActive=!1}hasChildren(){return void 0!==this.node.children&&0<this.node.children.length}getChevron(){var e=this.isExpanded?"arrow_drop_down":"arrow_right";return html`<div style="${this.hasChildren()?"":"visibility:hidden"}"><ix-icon-button data-testid="${IxTreeTestIds.CHEVRON_TOGGLE(this.node.id)}" @click="${()=>this.onNodeToggle(this.node)}" icon="${e}" class="chevron" test-id="tree-node-expand-toggle"></ix-icon-button></div>`}renderCheckbox(){return this.node.disabled?html`<ix-icon class="inherited">arrow_drop_up</ix-icon>`:html`<ix-checkbox data-testid="${IxTreeTestIds.CHECKBOX(this.node.id)}" @click="${()=>this.onNodeCheck(this.node)}" label="" class="item-checkbox" .checked="${this.node.checked}" .indeterminate="${this.node.indeterminate}"></ix-checkbox>`}onNodeClick(e){e=new CustomEvent("on-tree-node-click",{detail:{message:{node:e,id:e.id,label:e.label,parentId:e.parentId}}});this.dispatchEvent(e)}onNodeToggle(e){e=new CustomEvent("on-tree-node-toggle",{detail:{message:{node:e,id:e.id,label:e.label,parentId:e.parentId}}});this.dispatchEvent(e)}onNodeCheck(e){e.checked?e.checked=!1:e.checked=!0,e.indeterminate=!1;e=new CustomEvent("on-tree-node-check",{detail:{message:{node:e,id:e.id}}});this.dispatchEvent(e)}handleNodeClick(e){this.disabled||e.disabled||(this.selectNodeOnClick?this.onNodeCheck(e):this.checkboxEnabled?this.onNodeToggle(e):this.onNodeClick(e))}render(){var e=this.isSelected?"selected":"",t=this.disabled||this.node.disabled,o=t?"disabled":"",i=t?"cursor-default":"cursor-pointer",d=this.node.icon||"account_box";return html`<div class="tree-node-container" ?active-tree-node="${this.isActiveTreeNode}" aria-expanded="${!!this.node.expanded}" aria-selected="${this.isSelected}" aria-disabled="${t}" data-id="${this.node.id}" role="treeitem" data-testid="${IxTreeTestIds.CONTAINER(this.node.id)}"><div class="wrapper ${e} ${i} ${o}" style="padding-left:calc(var(--ix-tree-icon-size) * ${this.level})">${this.removeChevron?nothing:this.getChevron()} ${this.checkboxEnabled?this.renderCheckbox():nothing} ${this.hasIcon?html`<ix-icon class="icon" data-testid="${IxTreeTestIds.ICON(this.node.id)}">${d}</ix-icon>`:nothing}<div data-testid="${IxTreeTestIds.LABEL(this.node.id)}" class="label ${this.allowMultiLine?"label-multi-line":"label-single-line"}" @click="${()=>this.handleNodeClick(this.node)}" @keyup="${()=>this.handleNodeClick(this.node)}">${this.node.label}</div></div><slot></slot></div>`}updated(){var e;this.scrollToActive&&!this._hasScrolledToActive&&(null!=(e=null==(e=this.shadowRoot)?void 0:e.querySelector("[active-tree-node]"))&&e.scrollIntoView({behavior:"smooth",block:"start"}),this._hasScrolledToActive=!0),this.isSelected&&this.dispatchEvent(new CustomEvent("selected-node-ref",{detail:this._treeNodeContainer,bubbles:!0,composed:!0}))}}IxTreeNode.styles=[IxTreeStyles],__decorate([property({type:Boolean})],IxTreeNode.prototype,"isActiveTreeNode",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"isExpanded",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"isSelected",void 0),__decorate([property({type:Number})],IxTreeNode.prototype,"level",void 0),__decorate([property({type:Object})],IxTreeNode.prototype,"node",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"checkboxEnabled",void 0),__decorate([property({type:String})],IxTreeNode.prototype,"appearance",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"hasIcon",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"removeChevron",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"allowMultiLine",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"scrollToActive",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"disabled",void 0),__decorate([property({type:Boolean})],IxTreeNode.prototype,"selectNodeOnClick",void 0),__decorate([state()],IxTreeNode.prototype,"_hasScrolledToActive",void 0),__decorate([query(".tree-node-container")],IxTreeNode.prototype,"_treeNodeContainer",void 0),customElements.define("ix-tree-node",IxTreeNode);class IxTree extends LitElement{constructor(){super(...arguments),this.ariaLabel="tree",this.selectedNodeId="",this.checkboxesEnabled=!1,this.appearance="default",this.hasIcons=!1,this.removeChevron=!1,this.allowMultiLine=!1,this.rollup=!0,this.selectNodeOnClick=!1,this._activeItemId="",this._selectedNodeId=""}connectedCallback(){super.connectedCallback(),this._activeItemId=this.selectedNodeId,this._selectedNodeId=this.selectedNodeId,this._rootNode=this.rootNode}onTreeNodeClick(e){this.dispatchEvent(new CustomEvent("on-tree-node-selected",{detail:{message:e.detail.message}})),this._selectedNodeId=e.detail.message.id}dispatchTreeNodeExpandToggle(e){this.dispatchEvent(new CustomEvent("on-tree-node-expand-toggle",{detail:{message:e.detail.message}}))}onTreeNodeToggle(e){var t={...this._rootNode},o=e.detail.message.node;o.expanded=!o.expanded,this.rootNode=t,this._activeItemId=o.id,this.dispatchTreeNodeExpandToggle(e),this.requestUpdate()}onTreeNodeCheck(e){var t=e.detail.message.node;updateNodeCheckedStatus(t,this._rootNode,this.rollup),this._rootNode=structuredClone(this._rootNode),this.rootNode=this._rootNode,this.dispatchEvent(new CustomEvent("on-tree-node-checked",{detail:{message:e.detail.message}}))}renderNodes(e=[],t=0){var o,i=[];for(o of e){var d=html`<ix-tree-node .level="${t}" .node="${o}" .appearance="${this.appearance}" .selectNodeOnClick="${this.selectNodeOnClick}" ?isActiveTreeNode="${this._activeItemId===o.id}" ?isExpanded="${!!o.expanded}" ?isSelected="${this._selectedNodeId===o.id}" ?checkboxEnabled="${this.checkboxesEnabled}" ?hasIcon="${this.hasIcons}" ?removeChevron="${this.removeChevron}" ?allowMultiLine="${this.allowMultiLine}" ?disabled="${!!o.disabled}" @on-tree-node-click="${this.onTreeNodeClick}" @on-tree-node-toggle="${this.onTreeNodeToggle}" @on-tree-node-check="${this.onTreeNodeCheck}" data-testid="${IxTreeTestIds.NODE(o.id)}">${o.expanded?this.renderNodes(o.children,t+1):nothing}</ix-tree-node>`;i.push(d)}return i}expandActiveTreeNode(){var t=findChildNodeById(this._rootNode,this._activeItemId)||this._rootNode;let o=0;if(t.parentId){let e=findChildNodeById(this._rootNode,t.parentId);for(;e&&o<1e3&&(e.expanded=!0,e.parentId);)e=findChildNodeById(this._rootNode,e.parentId),o+=1}}render(){return this.expandActiveTreeNode(),html`<div aria-label="${this.ariaLabel}" class="ix-tree-container" role="tree">${this.renderNodes(this._rootNode.children,0)}</div>`}}IxTree.styles=[IxTreeStyles],__decorate([property({type:String})],IxTree.prototype,"ariaLabel",void 0),__decorate([property({type:Object})],IxTree.prototype,"rootNode",void 0),__decorate([property({type:String})],IxTree.prototype,"selectedNodeId",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"checkboxesEnabled",void 0),__decorate([property({type:String})],IxTree.prototype,"appearance",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"hasIcons",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"removeChevron",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"allowMultiLine",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"rollup",void 0),__decorate([property({type:Boolean})],IxTree.prototype,"selectNodeOnClick",void 0),__decorate([state()],IxTree.prototype,"_activeItemId",void 0),__decorate([state()],IxTree.prototype,"_rootNode",void 0),__decorate([state()],IxTree.prototype,"_selectedNodeId",void 0),customElements.define("ix-tree",IxTree);
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-tree following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "3.3.
|
|
6
|
+
"version": "3.3.6",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
"ts:watch": "tsc --watch --preserveWatchOutput"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@digital-realty/ix-checkbox": "^1.3.
|
|
32
|
-
"@digital-realty/ix-icon": "^1.2.
|
|
33
|
-
"@digital-realty/ix-icon-button": "^1.2.
|
|
31
|
+
"@digital-realty/ix-checkbox": "^1.3.4",
|
|
32
|
+
"@digital-realty/ix-icon": "^1.2.3",
|
|
33
|
+
"@digital-realty/ix-icon-button": "^1.2.3",
|
|
34
34
|
"@lit-labs/react": "^2.1.0",
|
|
35
|
-
"@material/web": "
|
|
35
|
+
"@material/web": "2.4.0",
|
|
36
36
|
"lit": "^3.2.1",
|
|
37
37
|
"react": "^18.2.0"
|
|
38
38
|
},
|
|
@@ -104,5 +104,5 @@
|
|
|
104
104
|
"README.md",
|
|
105
105
|
"LICENSE"
|
|
106
106
|
],
|
|
107
|
-
"gitHead": "
|
|
107
|
+
"gitHead": "36d89e383e58b8b6bab4c26e956298524e9a69a8"
|
|
108
108
|
}
|