@digital-realty/ix-tree 1.0.7 → 1.0.8
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/IxTree.js +1 -1
- package/dist/IxTree.js.map +1 -1
- package/dist/IxTreeNode.js +4 -4
- package/dist/IxTreeNode.js.map +1 -1
- package/package.json +2 -2
package/dist/IxTree.js
CHANGED
|
@@ -52,7 +52,7 @@ export class IxTree extends LitElement {
|
|
|
52
52
|
for (const node of nodes) {
|
|
53
53
|
const renderedNode = html `<ix-tree-node
|
|
54
54
|
.isActiveTreeNode=${this._activeItemId === node.id}
|
|
55
|
-
.isExpanded=${node.expanded}
|
|
55
|
+
.isExpanded=${!!node.expanded}
|
|
56
56
|
.isSelected=${this._selectedNodeId === node.id}
|
|
57
57
|
.level=${level}
|
|
58
58
|
.node=${node}
|
package/dist/IxTree.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxTree.js","sourceRoot":"","sources":["../src/IxTree.ts"],"names":[],"mappings":";AAAA,OAAO,oCAAoC,CAAC;AAC5C,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAE3B,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAWc,cAAS,GAAW,MAAM,CAAC;QAI3B,mBAAc,GAAW,EAAE,CAAC;QAEX,sBAAiB,GAAY,KAAK,CAAC;QAEvD,kBAAa,GAAW,EAAE,CAAC;QAI3B,oBAAe,GAAW,EAAE,CAAC;IAmGxC,CAAC;IAvHC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,iBAAiB;QAC3D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,iBAAiB;QAC7D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;IACjC,CAAC;IAgBO,eAAe,CAAC,CAAc;QACpC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,uBAAuB,EAAE;YACvC,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;aAC1B;SACF,CAAC,CACH,CAAC;QAEF,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;IAC7C,CAAC;IAEO,gBAAgB,CAAC,CAAc;QACrC,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC1C,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC;QAC7B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,eAAe,CAAC,CAAc;QACpC,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QAClC,uBAAuB,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,sBAAsB,EAAE;YACtC,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;aAC1B;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,WAAW,CACjB,QAA4B,EAAE,EAC9B,QAAgB,CAAC;QAEjB,MAAM,YAAY,GAA6B,EAAE,CAAC;QAElD,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,MAAM,YAAY,GAAG,IAAI,CAAA;4BACH,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE;sBACpC,IAAI,CAAC,QAAQ;
|
|
1
|
+
{"version":3,"file":"IxTree.js","sourceRoot":"","sources":["../src/IxTree.ts"],"names":[],"mappings":";AAAA,OAAO,oCAAoC,CAAC;AAC5C,OAAO,uBAAuB,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,iBAAiB,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAE3B,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAWc,cAAS,GAAW,MAAM,CAAC;QAI3B,mBAAc,GAAW,EAAE,CAAC;QAEX,sBAAiB,GAAY,KAAK,CAAC;QAEvD,kBAAa,GAAW,EAAE,CAAC;QAI3B,oBAAe,GAAW,EAAE,CAAC;IAmGxC,CAAC;IAvHC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,iBAAiB;QAC3D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,iBAAiB;QAC7D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;IACjC,CAAC;IAgBO,eAAe,CAAC,CAAc;QACpC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,uBAAuB,EAAE;YACvC,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;aAC1B;SACF,CAAC,CACH,CAAC;QAEF,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC;IAC7C,CAAC;IAEO,gBAAgB,CAAC,CAAc;QACrC,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC1C,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC;QAC7B,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,eAAe,CAAC,CAAc;QACpC,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;QAClC,uBAAuB,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;QAC9C,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,sBAAsB,EAAE;YACtC,MAAM,EAAE;gBACN,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO;aAC1B;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,WAAW,CACjB,QAA4B,EAAE,EAC9B,QAAgB,CAAC;QAEjB,MAAM,YAAY,GAA6B,EAAE,CAAC;QAElD,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,MAAM,YAAY,GAAG,IAAI,CAAA;4BACH,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE;sBACpC,CAAC,CAAC,IAAI,CAAC,QAAQ;sBACf,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,EAAE;iBACrC,KAAK;gBACN,IAAI;2BACO,IAAI,CAAC,iBAAiB;8BACnB,IAAI,CAAC,eAAe;+BACnB,IAAI,CAAC,gBAAgB;8BACtB,IAAI,CAAC,eAAe;;UAExC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO;sBACxD,CAAC;YACjB,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACjC;QAED,OAAO,YAAY,CAAC;IACtB,CAAC;IAED;;OAEG;IACK,oBAAoB;QAC1B,MAAM,YAAY,GAChB,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC;QAE1E,IAAI,SAAS,GAAG,CAAC,CAAC;QAClB,MAAM,cAAc,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE;YAC1B,OAAO;SACR;QACD,IAAI,IAAI,GAAuB,iBAAiB,CAC9C,IAAI,CAAC,SAAS,EACd,YAAY,CAAC,QAAQ,CACtB,CAAC;QACF,OAAO,IAAI,IAAI,SAAS,GAAG,cAAc,EAAE;YACzC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;gBAClB,MAAM;aACP;YACD,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;YACxD,SAAS,IAAI,CAAC,CAAC;SAChB;IACH,CAAC;IAES,MAAM;QACd,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAE5B,OAAO,IAAI,CAAA;mBACI,IAAI,CAAC,SAAS;;;;QAIzB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;WACzC,CAAC;IACV,CAAC;;AAxHe,aAAM,GAAG,CAAC,YAAY,CAAC,CAAC;AAU5B;IAAX,QAAQ,EAAE;yCAA4B;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAwB;AAEvC;IAAX,QAAQ,EAAE;8CAA6B;AAEX;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAAoC;AAEvD;IAAR,KAAK,EAAE;6CAA4B;AAE3B;IAAR,KAAK,EAAE;yCAAyB;AAExB;IAAR,KAAK,EAAE;+CAA8B","sourcesContent":["import '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/theme';\nimport { nothing, html, LitElement, TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\nimport { findChildNodeById, updateNodeCheckedStatus } from './tree-utils.js';\nimport { IIxTreeNode } from './IIxTreeNode.js';\nimport { IxTreeStyles } from './ix-tree-styles.js';\nimport './ix-tree-node.js';\n\nexport class IxTree extends LitElement {\n static readonly styles = [IxTreeStyles];\n\n connectedCallback() {\n super.connectedCallback();\n\n this._activeItemId = this.selectedNodeId; // store in state\n this._selectedNodeId = this.selectedNodeId; // store in state\n this._rootNode = this.rootNode;\n }\n\n @property() ariaLabel: string = 'tree';\n\n @property({ type: Object }) rootNode!: IIxTreeNode;\n\n @property() selectedNodeId: string = '';\n\n @property({ type: Boolean }) checkboxesEnabled: boolean = false;\n\n @state() _activeItemId: string = '';\n\n @state() _rootNode!: IIxTreeNode;\n\n @state() _selectedNodeId: string = '';\n\n private onTreeNodeClick(e: CustomEvent): void {\n this.dispatchEvent(\n new CustomEvent('on-tree-node-selected', {\n detail: {\n message: e.detail.message,\n },\n })\n );\n\n this._selectedNodeId = e.detail.message.id;\n }\n\n private onTreeNodeToggle(e: CustomEvent): void {\n const newRootNode = { ...this._rootNode };\n const { node } = e.detail.message;\n node.expanded = !node.expanded;\n this._rootNode = newRootNode;\n this._activeItemId = node.id;\n this.requestUpdate();\n }\n\n private onTreeNodeCheck(e: CustomEvent): void {\n const { node } = e.detail.message;\n updateNodeCheckedStatus(node, this._rootNode);\n this._rootNode = structuredClone(this._rootNode);\n this.dispatchEvent(\n new CustomEvent('on-tree-node-checked', {\n detail: {\n message: e.detail.message,\n },\n })\n );\n }\n\n private renderNodes(\n nodes: Array<IIxTreeNode> = [],\n level: number = 0\n ): Array<TemplateResult<1>> {\n const rendredNodes: Array<TemplateResult<1>> = [];\n\n for (const node of nodes) {\n const renderedNode = html`<ix-tree-node\n .isActiveTreeNode=${this._activeItemId === node.id}\n .isExpanded=${!!node.expanded}\n .isSelected=${this._selectedNodeId === node.id}\n .level=${level}\n .node=${node}\n .checkboxEnabled=${this.checkboxesEnabled}\n @on-tree-node-click=${this.onTreeNodeClick}\n @on-tree-node-toggle=${this.onTreeNodeToggle}\n @on-tree-node-check=${this.onTreeNodeCheck}\n >\n ${node.expanded ? this.renderNodes(node.children, level + 1) : nothing}\n </ix-tree-node>`;\n rendredNodes.push(renderedNode);\n }\n\n return rendredNodes;\n }\n\n /**\n * Expand the active tree node and all of its parent nodes.\n */\n private expandActiveTreeNode(): void {\n const nodeToSelect =\n findChildNodeById(this._rootNode, this._activeItemId) || this._rootNode;\n\n let iteration = 0;\n const MAX_ITERATIONS = 1000;\n if (!nodeToSelect.parentId) {\n return;\n }\n let node: IIxTreeNode | null = findChildNodeById(\n this._rootNode,\n nodeToSelect.parentId\n );\n while (node && iteration < MAX_ITERATIONS) {\n node.expanded = true;\n if (!node.parentId) {\n break;\n }\n node = findChildNodeById(this._rootNode, node.parentId);\n iteration += 1;\n }\n }\n\n protected render(): TemplateResult<1> {\n this.expandActiveTreeNode();\n\n return html`<div\n aria-label=${this.ariaLabel}\n class=\"ix-tree-container\"\n role=\"tree\"\n >\n ${this.renderNodes(this._rootNode.children, 0)}\n </div>`;\n }\n}\n"]}
|
package/dist/IxTreeNode.js
CHANGED
|
@@ -132,16 +132,16 @@ export class IxTreeNode extends LitElement {
|
|
|
132
132
|
}
|
|
133
133
|
IxTreeNode.styles = [IxTreeStyles];
|
|
134
134
|
__decorate([
|
|
135
|
-
property()
|
|
135
|
+
property({ type: Boolean })
|
|
136
136
|
], IxTreeNode.prototype, "isActiveTreeNode", void 0);
|
|
137
137
|
__decorate([
|
|
138
|
-
property()
|
|
138
|
+
property({ type: Boolean })
|
|
139
139
|
], IxTreeNode.prototype, "isExpanded", void 0);
|
|
140
140
|
__decorate([
|
|
141
|
-
property()
|
|
141
|
+
property({ type: Boolean })
|
|
142
142
|
], IxTreeNode.prototype, "isSelected", void 0);
|
|
143
143
|
__decorate([
|
|
144
|
-
property()
|
|
144
|
+
property({ type: Number })
|
|
145
145
|
], IxTreeNode.prototype, "level", void 0);
|
|
146
146
|
__decorate([
|
|
147
147
|
property({ type: Object })
|
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;AAEnD,wIAAwI;AACxI,8FAA8F;AAC9F,MAAM,oBAAoB,GAAG,GAAG,CAAC;AACjC,MAAM,uBAAuB,GAAG,oBAAoB,GAAG,CAAC,CAAC;AAEzD,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;
|
|
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';\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.7;\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 @state() _hasScrolledToActive: boolean = false;\n\n private getIcon(\n node: IIxTreeNode,\n isExpanded: boolean\n ): TemplateResult<1> | typeof nothing {\n if (!node.children || node.children.length === 0) {\n // This node does not have children; no icon is needed.\n return nothing;\n }\n\n const icon = isExpanded ? 'arrow_drop_down' : 'arrow_right';\n return html`<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 }\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 class=\"ix-tree-node__icon-size\">\n ${this.getIcon(this.node, this.isExpanded)}\n </div>\n <ix-icon-button\n icon=${icon}\n test-id=${`${this.node.id}-on-node-click-icon-button`}\n @click=${() => this.onNodeClick(this.node)}\n ></ix-icon-button>\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 <div\n class=\"ix-tree-node__label\"\n @click=${() => this.onNodeClick(this.node)}\n @keyup=${() => this.onNodeClick(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._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.8",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -100,5 +100,5 @@
|
|
|
100
100
|
"README.md",
|
|
101
101
|
"LICENSE"
|
|
102
102
|
],
|
|
103
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "ea7982253f0455f299de9875ecb1d60c2780cc6f"
|
|
104
104
|
}
|