@digital-realty/ix-tree 1.0.16 → 1.0.17
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.js +0 -1
- package/dist/IxTreeNode.js.map +1 -1
- package/package.json +2 -2
package/dist/IxTreeNode.js
CHANGED
|
@@ -111,7 +111,6 @@ export class IxTreeNode extends LitElement {
|
|
|
111
111
|
icon=${icon}
|
|
112
112
|
appearance=${this.appearance}
|
|
113
113
|
test-id=${`${this.node.id}-on-node-click-icon-button`}
|
|
114
|
-
style=${this.hasChildren() ? '' : 'padding-left:2px;'}
|
|
115
114
|
@click=${() => this.onNodeClick(this.node)}
|
|
116
115
|
></ix-icon-button>
|
|
117
116
|
<div
|
package/dist/IxTreeNode.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxTreeNode.js","sourceRoot":"","sources":["../src/IxTreeNode.ts"],"names":[],"mappings":";AAAA,OAAO,kDAAkD,CAAC;AAC1D,OAAO,4CAA4C,CAAC;AACpD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,wIAAwI;AACxI,8FAA8F;AAC9F,MAAM,oBAAoB,GAAG,GAAG,CAAC;AACjC,MAAM,uBAAuB,GAAG,oBAAoB,GAAG,CAAC,CAAC;AAEzD,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAG+B,qBAAgB,GAAY,KAAK,CAAC;QAElC,eAAU,GAAY,KAAK,CAAC;QAE5B,eAAU,GAAY,KAAK,CAAC;QAE7B,UAAK,GAAW,CAAC,CAAC;QAIjB,oBAAe,GAAY,KAAK,CAAC;QAElC,eAAU,GAAe,SAAS,CAAC;QAE9C,yBAAoB,GAAY,KAAK,CAAC;
|
|
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 '@digital-realty/theme';\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';\n\n// TREE_NODE_SPACER_REM and TREE_NODE_ICON_SIZE_REM are used to calculate the left padding for each node in the tree based on its level.\n// They need to remain in synchronization with the CSS variables defined in ix-tree-styles.ts.\nconst TREE_NODE_SPACER_REM = 0.6;\nconst TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM * 4;\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 @state() private _hasScrolledToActive: boolean = false;\n\n private hasChildren() {\n return this.node.children !== undefined && this.node.children.length > 0;\n }\n\n private getIcon(): 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 @click=${() => this.onNodeToggle(this.node)}\n icon=${icon}\n test-id=\"tree-node-expand-toggle\"\n >\n </ix-icon-button>\n </div>`;\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 /* eslint-enable no-param-reassign */\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 protected render(): TemplateResult<1> {\n const selectedClass = this.isSelected ? ' ix-tree-node__selected' : '';\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 data-id=${this.node.id}\n role=\"treeitem\"\n >\n <div\n class=\"ix-tree-node__wrapper ix-tree-node${selectedClass}\"\n style=\"padding-left: ${this.level * TREE_NODE_ICON_SIZE_REM}rem\"\n >\n <div>${this.getIcon()}</div>\n ${this.checkboxEnabled\n ? html`<ix-checkbox\n @click=${() => this.onNodeCheck(this.node)}\n label=\"\"\n style=\"margin: 6px 12px 0px 12px\"\n .checked=${this.node.checked}\n .indeterminate=${this.node.indeterminate}\n ></ix-checkbox>`\n : nothing}\n <ix-icon-button\n icon=${icon}\n appearance=${this.appearance}\n test-id=${`${this.node.id}-on-node-click-icon-button`}\n @click=${() => this.onNodeClick(this.node)}\n ></ix-icon-button>\n <div\n class=\"ix-tree-node__label\"\n @click=${() => {\n this.checkboxEnabled\n ? this.onNodeToggle(this.node)\n : this.onNodeClick(this.node);\n }}\n @keyup=${() => {\n this.checkboxEnabled\n ? this.onNodeToggle(this.node)\n : this.onNodeClick(this.node);\n }}\n >\n ${this.node.label}\n </div>\n </div>\n <slot></slot>\n </div>`;\n }\n\n protected updated(): void {\n if (!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"]}
|
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": "1.0.
|
|
6
|
+
"version": "1.0.17",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"@digital-realty/ix-checkbox": "^1.1.9",
|
|
30
30
|
"@digital-realty/ix-icon": "*",
|
|
31
31
|
"@digital-realty/ix-icon-button": "^1.0.19",
|
|
32
|
-
"@digital-realty/theme": "^1.0.
|
|
32
|
+
"@digital-realty/theme": "^1.0.10",
|
|
33
33
|
"@lit-labs/react": "^2.1.0",
|
|
34
34
|
"@material/web": "^1.0.0",
|
|
35
35
|
"lit": "^2.0.2",
|