@digital-realty/ix-tree 2.0.4 → 2.0.5

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.
@@ -5,10 +5,6 @@ import '@digital-realty/theme';
5
5
  import { html, LitElement, nothing } from 'lit';
6
6
  import { property, state } from 'lit/decorators.js';
7
7
  import { IxTreeStyles } from './ix-tree-styles.js';
8
- // 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.
9
- // They need to remain in synchronization with the CSS variables defined in ix-tree-styles.ts.
10
- const TREE_NODE_SPACER_REM = 0.6;
11
- const TREE_NODE_ICON_SIZE_REM = TREE_NODE_SPACER_REM * 4;
12
8
  export class IxTreeNode extends LitElement {
13
9
  constructor() {
14
10
  super(...arguments);
@@ -31,6 +27,7 @@ export class IxTreeNode extends LitElement {
31
27
  <ix-icon-button
32
28
  @click=${() => this.onNodeToggle(this.node)}
33
29
  icon=${icon}
30
+ class="chevron"
34
31
  test-id="tree-node-expand-toggle"
35
32
  >
36
33
  </ix-icon-button>
@@ -84,7 +81,7 @@ export class IxTreeNode extends LitElement {
84
81
  this.dispatchEvent(event);
85
82
  }
86
83
  render() {
87
- const selectedClass = this.isSelected ? ' ix-tree-node__selected' : '';
84
+ const selectedClass = this.isSelected ? 'selected' : '';
88
85
  const icon = this.node.icon ? this.node.icon : 'account_box';
89
86
  return html `<div
90
87
  ?active-tree-node=${this.isActiveTreeNode}
@@ -94,27 +91,22 @@ export class IxTreeNode extends LitElement {
94
91
  role="treeitem"
95
92
  >
96
93
  <div
97
- class="ix-tree-node__wrapper ix-tree-node${selectedClass}"
98
- style="padding-left: ${this.level * TREE_NODE_ICON_SIZE_REM}rem"
94
+ class="wrapper ${selectedClass}"
95
+ style="padding-left: calc(var(--_tree-icon-size) * ${this.level})"
99
96
  >
100
- <div>${this.getIcon()}</div>
97
+ ${this.getIcon()}
101
98
  ${this.checkboxEnabled
102
99
  ? html `<ix-checkbox
103
100
  @click=${() => this.onNodeCheck(this.node)}
104
101
  label=""
105
- style="margin: 6px 12px 0px 12px"
102
+ class="item-checkbox"
106
103
  .checked=${this.node.checked}
107
104
  .indeterminate=${this.node.indeterminate}
108
105
  ></ix-checkbox>`
109
106
  : nothing}
110
- <ix-icon-button
111
- icon=${icon}
112
- appearance=${this.appearance}
113
- test-id=${`${this.node.id}-on-node-click-icon-button`}
114
- @click=${() => this.onNodeClick(this.node)}
115
- ></ix-icon-button>
107
+ <ix-icon class="icon">${icon}</ix-icon>
116
108
  <div
117
- class="ix-tree-node__label"
109
+ class="label"
118
110
  @click=${() => {
119
111
  this.checkboxEnabled
120
112
  ? this.onNodeToggle(this.node)
@@ -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 '@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"]}
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\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 class=\"chevron\"\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 ? '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=\"wrapper ${selectedClass}\"\n style=\"padding-left: calc(var(--_tree-icon-size) * ${this.level})\"\n >\n ${this.getIcon()}\n ${this.checkboxEnabled\n ? html`<ix-checkbox\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 : nothing}\n <ix-icon class=\"icon\">${icon}</ix-icon>\n <div\n class=\"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"]}
@@ -3,55 +3,43 @@ export const IxTreeStyles = css `
3
3
  :root,
4
4
  :host :root,
5
5
  :host {
6
- --tree-node-spacer: var(--ix-sys-spacer, 0.6rem);
7
- --tree-node-icon-size: calc(var(--tree-node-spacer) * 4);
8
- }
9
- @font-face {
10
- font-family: 'Material Icons';
11
- font-style: normal;
12
- font-weight: 400;
13
- src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf)
14
- format('truetype');
15
- }
16
- .material-icons {
17
- color: #09224199;
18
- direction: ltr;
19
- display: inline-block;
20
- font-family: 'Material Icons';
21
- font-size: 24px;
22
- font-style: normal;
23
- font-weight: normal;
24
- letter-spacing: normal;
25
- line-height: 1;
26
- text-transform: none;
27
- white-space: nowrap;
28
- word-wrap: normal;
29
- }
30
- .ix-tree-container {
31
- height: 100%;
32
- width: 100%;
33
- }
34
- .ix-tree-node__wrapper {
6
+ --_tree-icon-size: var(--ix-tree-icon-size, 2.4rem);
7
+ --_tree-icon-spacing: var(--ix-tree-icon-spacing, 0.3rem);
8
+ --md-icon-button-icon-color: var(
9
+ --ix-outline-color,
10
+ var(--ix-tree-icon-color) #6b7a8d
11
+ );
12
+ }
13
+ .wrapper {
35
14
  align-items: center;
36
15
  cursor: pointer;
37
16
  display: flex;
38
- padding: 0.1rem;
39
- border-left: 3px solid rgba(20, 86, 224, 0);
17
+ border-left: 3px solid transparent;
40
18
  }
41
- .ix-tree-node__icon-size {
42
- width: var(--tree-node-icon-size);
19
+ .icon {
20
+ display: flex;
21
+ color: var(--ix-outline-color, var(--ix-tree-icon-color) #6b7a8d);
22
+ margin-right: var(--_tree-icon-spacing, --ix-tree-icon-spacing);
23
+ font-size: var(--ix-tree-icon-size, 1.2rem);
43
24
  }
44
- .ix-tree-node__label {
45
- color: #092241;
46
- flex-grow: 0;
47
- padding: 0.25rem;
25
+ .label {
26
+ color: var(--ix-text-color, var(--ix-label-text-color, #092241));
27
+ flex-grow: 1;
48
28
  white-space: nowrap;
49
29
  text-overflow: ellipsis;
50
30
  overflow: hidden;
51
31
  }
52
- .ix-tree-node__selected {
53
- background-color: rgba(20, 86, 224, 0.1);
54
- border-left: 3px solid #1456e0;
32
+ .item-checkbox {
33
+ display: flex;
34
+ margin-right: var(--_tree-icon-spacing, --ix-tree-checkbox-spacing);
35
+ }
36
+ .selected {
37
+ background-color: var(
38
+ --ix-tree-active-background-color,
39
+ rgba(20, 86, 224, 0.1)
40
+ );
41
+ border-left: 3px solid
42
+ var(--ix-tree-active-border-color, var(--md-sys-color-primary));
55
43
  }
56
44
  `;
57
45
  //# sourceMappingURL=ix-tree-styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ix-tree-styles.js","sourceRoot":"","sources":["../src/ix-tree-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsD9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxTreeStyles = css`\n :root,\n :host :root,\n :host {\n --tree-node-spacer: var(--ix-sys-spacer, 0.6rem);\n --tree-node-icon-size: calc(var(--tree-node-spacer) * 4);\n }\n @font-face {\n font-family: 'Material Icons';\n font-style: normal;\n font-weight: 400;\n src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf)\n format('truetype');\n }\n .material-icons {\n color: #09224199;\n direction: ltr;\n display: inline-block;\n font-family: 'Material Icons';\n font-size: 24px;\n font-style: normal;\n font-weight: normal;\n letter-spacing: normal;\n line-height: 1;\n text-transform: none;\n white-space: nowrap;\n word-wrap: normal;\n }\n .ix-tree-container {\n height: 100%;\n width: 100%;\n }\n .ix-tree-node__wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n padding: 0.1rem;\n border-left: 3px solid rgba(20, 86, 224, 0);\n }\n .ix-tree-node__icon-size {\n width: var(--tree-node-icon-size);\n }\n .ix-tree-node__label {\n color: #092241;\n flex-grow: 0;\n padding: 0.25rem;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .ix-tree-node__selected {\n background-color: rgba(20, 86, 224, 0.1);\n border-left: 3px solid #1456e0;\n }\n`;\n"]}
1
+ {"version":3,"file":"ix-tree-styles.js","sourceRoot":"","sources":["../src/ix-tree-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0C9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxTreeStyles = css`\n :root,\n :host :root,\n :host {\n --_tree-icon-size: var(--ix-tree-icon-size, 2.4rem);\n --_tree-icon-spacing: var(--ix-tree-icon-spacing, 0.3rem);\n --md-icon-button-icon-color: var(\n --ix-outline-color,\n var(--ix-tree-icon-color) #6b7a8d\n );\n }\n .wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n border-left: 3px solid transparent;\n }\n .icon {\n display: flex;\n color: var(--ix-outline-color, var(--ix-tree-icon-color) #6b7a8d);\n margin-right: var(--_tree-icon-spacing, --ix-tree-icon-spacing);\n font-size: var(--ix-tree-icon-size, 1.2rem);\n }\n .label {\n color: var(--ix-text-color, var(--ix-label-text-color, #092241));\n flex-grow: 1;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .item-checkbox {\n display: flex;\n margin-right: var(--_tree-icon-spacing, --ix-tree-checkbox-spacing);\n }\n .selected {\n background-color: var(\n --ix-tree-active-background-color,\n rgba(20, 86, 224, 0.1)\n );\n border-left: 3px solid\n var(--ix-tree-active-border-color, var(--md-sys-color-primary));\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": "2.0.4",
6
+ "version": "2.0.5",
7
7
  "type": "module",
8
8
  "main": "dist/index.js",
9
9
  "module": "dist/index.js",
@@ -26,10 +26,10 @@
26
26
  "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
27
27
  },
28
28
  "dependencies": {
29
- "@digital-realty/ix-checkbox": "^1.1.11",
30
- "@digital-realty/ix-icon": "^1.0.4",
31
- "@digital-realty/ix-icon-button": "^1.0.24",
32
- "@digital-realty/theme": "^1.0.13",
29
+ "@digital-realty/ix-checkbox": "^1.1.25",
30
+ "@digital-realty/ix-icon": "^1.0.35",
31
+ "@digital-realty/ix-icon-button": "^1.0.35",
32
+ "@digital-realty/theme": "^1.0.26",
33
33
  "@lit-labs/react": "^2.1.0",
34
34
  "@material/web": "1.2.0",
35
35
  "lit": "^2.0.2",
@@ -101,5 +101,5 @@
101
101
  "README.md",
102
102
  "LICENSE"
103
103
  ],
104
- "gitHead": "43b0e609ef85f29e50a1872181cb8e685bcc13ec"
104
+ "gitHead": "dced04ebef5c8342344b1fd3df33b5e22a78725f"
105
105
  }