@digital-realty/ix-generic-tree 2.1.3 → 2.1.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.
package/dist/IxGenericTree.js
CHANGED
|
@@ -56,6 +56,7 @@ export class IxGenericTree extends LitElement {
|
|
|
56
56
|
.node=${node}
|
|
57
57
|
?showCheckbox=${this.showCheckboxes}
|
|
58
58
|
?filledIcons=${this.filledIcons}
|
|
59
|
+
?searchEnabled=${this.searchEnabled}
|
|
59
60
|
?selected=${this.selectedId === node.id}
|
|
60
61
|
?searched=${node.selected}
|
|
61
62
|
.searchText=${this.searchText}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxGenericTree.js","sourceRoot":"","sources":["../src/IxGenericTree.ts"],"names":[],"mappings":";AAAA,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAEtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,OAAO,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,mBAAc,GAAY,KAAK,CAAC;QAEhC,sBAAiB,GAAY,KAAK,CAAC;QAEnC,gBAAW,GAAY,KAAK,CAAC;QAE7B,kBAAa,GAAY,KAAK,CAAC;QAEhC,sBAAiB,GAAW,EAAE,CAAC;QAE/B,eAAU,GAAW,EAAE,CAAC;QAIxB,sBAAiB,GAAW,CAAC,CAAC;QAE9B,sBAAiB,GAAW,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"IxGenericTree.js","sourceRoot":"","sources":["../src/IxGenericTree.ts"],"names":[],"mappings":"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","sourcesContent":["import '@digital-realty/ix-textbox/ix-textbox.js';\nimport { html, LitElement, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport './ix-generic-tree-node.js';\nimport { IxGenericTreeNodeStyles } from './ix-generic-tree-styles.js';\nimport type { IGenericTreeNode } from './ix-generic-tree-types.js';\nimport { updateNodeCheckedStatus } from './ix-generic-tree-utils.js';\nimport { IxGenericTreeTestIds } from './IxGenericTreeTestIds.js';\n\nexport class IxGenericTree extends LitElement {\n static styles = [IxGenericTreeNodeStyles];\n\n @property({ type: Object }) rootNode!: IGenericTreeNode;\n\n @property({ type: Boolean }) showCheckboxes: boolean = false;\n\n @property({ type: Boolean }) disableCheckboxes: boolean = false;\n\n @property({ type: Boolean }) filledIcons: boolean = false;\n\n @property({ type: Boolean }) searchEnabled: boolean = false;\n\n @property({ type: String }) searchPlaceholder: string = '';\n\n @property({ type: String }) searchText: string = '';\n\n @property({ type: String }) selectedId?: string;\n\n @property({ type: Number }) searchResultCount: number = 0;\n\n @property({ type: Number }) searchResultIndex: number = 0;\n\n private onTreeNodeExpandToggle(e: CustomEvent) {\n const { node } = e.detail.message;\n node.expanded = !node.expanded;\n this.dispatchEvent(\n new CustomEvent('expand-toggle', {\n detail: {\n message: {\n ...e.detail.message,\n update: this.requestUpdate.bind(this),\n },\n },\n }),\n );\n this.requestUpdate();\n }\n\n private onTreeNodeCheckToggle(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('check-toggle', {\n detail: {\n message: {\n ...e.detail.message,\n rootNode: this.rootNode,\n },\n },\n }),\n );\n }\n\n private renderNodes(\n nodes: Array<IGenericTreeNode> = [],\n level: number = 0,\n ): Array<TemplateResult<1>> {\n return repeat(\n nodes,\n node => node.id,\n node =>\n html`<ix-generic-tree-node\n id=${node.id}\n ?expanded=${!!node.expanded}\n ?loading=${!!node.loading}\n ?disabled=${this.disableCheckboxes || !!node.disabled}\n .level=${level}\n .node=${node}\n ?showCheckbox=${this.showCheckboxes}\n ?filledIcons=${this.filledIcons}\n ?searchEnabled=${this.searchEnabled}\n ?selected=${this.selectedId === node.id}\n ?searched=${node.selected}\n .searchText=${this.searchText}\n @check-toggle=${this.onTreeNodeCheckToggle}\n @expand-toggle=${this.onTreeNodeExpandToggle}\n data-testid=\"${IxGenericTreeTestIds.NODE_ID(node.id)}\"\n >\n ${node.expanded\n ? this.renderNodes(node.children, level + 1)\n : nothing}\n </ix-generic-tree-node>`,\n ) as unknown as TemplateResult<1>[];\n }\n\n private renderTextSearch() {\n return this.searchEnabled\n ? html` <ix-textbox\n filled\n leading-icon=\"search\"\n has-leading-icon\n searchEnabled\n .searchResultCount=${this.searchResultCount}\n .searchResultIndex=${this.searchResultIndex}\n placeholder=${this.searchPlaceholder}\n .value=${this.searchText}\n @input=${(e: Event) => {\n const input = e.target as HTMLInputElement;\n this.dispatchEvent(\n new CustomEvent('search-text-change', {\n detail: { searchText: input.value },\n }),\n );\n }}\n data-testid=\"${IxGenericTreeTestIds.SEARCH_BOX}\"\n ></ix-textbox>`\n : nothing;\n }\n\n render() {\n return html`<div>\n ${this.renderTextSearch()} ${this.renderNodes(this.rootNode.children, 0)}\n </div>`;\n }\n}\n"]}
|
|
@@ -19,6 +19,7 @@ export class IxGenericTreeNode extends LitElement {
|
|
|
19
19
|
this.searchText = '';
|
|
20
20
|
this.level = 0;
|
|
21
21
|
this.filledIcons = false;
|
|
22
|
+
this.searchEnabled = false;
|
|
22
23
|
}
|
|
23
24
|
static { this.styles = [IxGenericTreeNodeStyles]; }
|
|
24
25
|
onCheck() {
|
|
@@ -143,7 +144,7 @@ export class IxGenericTreeNode extends LitElement {
|
|
|
143
144
|
</div>`;
|
|
144
145
|
}
|
|
145
146
|
setSubstringBold(label) {
|
|
146
|
-
if (!this.searchText)
|
|
147
|
+
if (!this.searchText || this.searchText.length < 2)
|
|
147
148
|
return label;
|
|
148
149
|
const sanitizedSearchText = this.searchText.toLowerCase().trim();
|
|
149
150
|
const startIndex = label.toLowerCase().indexOf(sanitizedSearchText);
|
|
@@ -154,6 +155,9 @@ export class IxGenericTreeNode extends LitElement {
|
|
|
154
155
|
return html `${label.substring(0, startIndex)}<b>${label.substring(startIndex, endIndex)}</b>${label.substring(endIndex)}`;
|
|
155
156
|
}
|
|
156
157
|
getBackgroundColor() {
|
|
158
|
+
if (!this.searchEnabled || this.searchText.trim() === '') {
|
|
159
|
+
return '';
|
|
160
|
+
}
|
|
157
161
|
if (this.selected) {
|
|
158
162
|
return 'node-item-selected';
|
|
159
163
|
}
|
|
@@ -214,4 +218,7 @@ __decorate([
|
|
|
214
218
|
__decorate([
|
|
215
219
|
property({ type: Boolean })
|
|
216
220
|
], IxGenericTreeNode.prototype, "filledIcons", void 0);
|
|
221
|
+
__decorate([
|
|
222
|
+
property({ type: Boolean })
|
|
223
|
+
], IxGenericTreeNode.prototype, "searchEnabled", void 0);
|
|
217
224
|
//# sourceMappingURL=IxGenericTreeNode.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IxGenericTreeNode.js","sourceRoot":"","sources":["../src/IxGenericTreeNode.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport '@digital-realty/ix-checkbox/ix-checkbox.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-progress/ix-progress.js';\n\nimport type { IGenericTreeNode } from './ix-generic-tree-types.js';\nimport { IxGenericTreeNodeStyles } from './ix-generic-tree-styles.js';\nimport { IxGenericTreeTestIds } from './IxGenericTreeTestIds.js';\n\nexport class IxGenericTreeNode extends LitElement {\n static readonly styles = [IxGenericTreeNodeStyles];\n\n @property({ type: Object }) node!: IGenericTreeNode;\n\n @property({ type: Boolean }) showCheckbox: boolean = false;\n\n @property({ type: Boolean, reflect: true }) expanded: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @property({ type: Boolean }) selected: boolean = false;\n\n @property({ type: Boolean }) searched: boolean = false;\n\n @property({ type: String }) searchText: string = '';\n\n @property({ type: Number }) level = 0;\n\n @property({ type: Boolean }) filledIcons = false;\n\n private onCheck() {\n this.node.isDirty = true;\n if (this.node.checked) {\n this.node.checked = false;\n this.node.indeterminate = false;\n } else {\n this.node.checked = true;\n this.node.indeterminate = false;\n }\n const event = new CustomEvent('check-toggle', {\n detail: {\n message: {\n node: this.node,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onNodeExpand(): void {\n if (!this.expandable) {\n return;\n }\n\n const event = new CustomEvent('expand-toggle', {\n detail: {\n message: {\n node: this.node,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private get expandable() {\n const childrenDataIsPresent: boolean =\n this.node.children !== undefined && this.node.children.length > 0;\n const hasChildrenToLoad: boolean =\n this.node.childrenCount !== undefined && this.node.childrenCount > 0;\n return childrenDataIsPresent || hasChildrenToLoad;\n }\n\n private arrowIcon() {\n const icon = this.expanded ? 'arrow_drop_down' : 'arrow_right';\n return html`<ix-icon-button\n @click=${() => this.onNodeExpand()}\n style=\"visibility: ${this.expandable ? 'visible' : 'hidden'}\"\n icon=${icon}\n test-id=\"tree-node-expand-toggle\"\n data-testid=${IxGenericTreeTestIds.NODE_EXPAND_TOGGLE(this.node.id)}\n >\n </ix-icon-button>`;\n }\n\n private checkbox() {\n if (!this.showCheckbox) return nothing;\n\n if (this.node.inherited) {\n return html`<div class=\"pl-2\">\n <ix-icon\n data-testid=\"${IxGenericTreeTestIds.CHECK_BOX_ID(this.node.id)}\"\n class=\"inherited\"\n disabled=${this.loading || this.disabled}\n >\n arrow_drop_up\n </ix-icon>\n </div>`;\n }\n\n return html`<div class=\"pl-2\" style=\"margin-top: 0.65rem\">\n <ix-checkbox\n .disabled=${this.loading || this.disabled}\n .checked=${this.node.checked}\n .indeterminate=${this.node.indeterminate}\n @click=${() => this.onCheck()}\n data-testid=\"${IxGenericTreeTestIds.CHECK_BOX_ID(this.node.id)}\"\n ></ix-checkbox>\n </div>`;\n }\n\n private nodeIcon() {\n const { icon } = this.node;\n return icon\n ? html`<div class=\"pl-4 mt-2 node-item-icon\">\n <ix-icon\n style=\"color: #092241; opacity: 0.6; font-size: 20px;\"\n ?filled=${this.filledIcons}\n >\n ${icon}\n </ix-icon>\n </div> `\n : nothing;\n }\n\n private label() {\n return html`\n <p\n class=\"label dlr-text-small\"\n data-testid=\"${IxGenericTreeTestIds.NODE_LABEL(this.node.id)}\"\n >\n ${this.setSubstringBold(this.node.label!)}\n </p>\n `;\n }\n\n private childCount() {\n const count =\n this.node.childrenCount === undefined ? 0 : this.node.childrenCount;\n return html`<p\n class=\"pl-2 child-count dlr-text-small\"\n data-testid=\"${IxGenericTreeTestIds.NODE_COUNT(this.node.id)}\"\n >\n ${count !== 0 ? count : nothing}\n </p>`;\n }\n\n private secondaryLabel() {\n return this.node.secondaryLabel\n ? html`<p class=\"secondary-label dlr-text-caption\">\n ${this.setSubstringBold(this.node.secondaryLabel!)}\n </p>`\n : nothing;\n }\n\n private loadingCircle() {\n return html`<div\n style=\"visibility: ${this.loading\n ? 'visible'\n : 'hidden'}; padding-left: 1rem;\"\n class=\"animate-pulse\"\n >\n <ix-progress .linear=${false} .indeterminate=${true}></ix-progress>\n </div>`;\n }\n\n private setSubstringBold(label: string) {\n if (!this.searchText) return label;\n\n const sanitizedSearchText = this.searchText.toLowerCase().trim();\n const startIndex = label.toLowerCase().indexOf(sanitizedSearchText);\n\n if (startIndex === -1) {\n return label;\n }\n\n const endIndex = startIndex + sanitizedSearchText.length;\n return html`${label.substring(0, startIndex)}<b>${label.substring(\n startIndex,\n endIndex,\n )}</b>${label.substring(endIndex)}`;\n }\n\n private getBackgroundColor(): string {\n if (this.selected) {\n return 'node-item-selected';\n }\n if (this.searched) {\n return 'node-item-searched';\n }\n return '';\n }\n\n render() {\n return html`\n <div style=\"padding-left: ${this.level > 0 ? '2.2rem' : '0'}\">\n <div class=\"node-item\">\n ${this.arrowIcon()} ${this.checkbox()} ${this.nodeIcon()}\n <div\n class=\"node-item-label ${this.getBackgroundColor()}\"\n @click=${this.onNodeExpand}\n @keydown=${this.onNodeExpand}\n >\n <div class=\"node-item-inner\">\n ${this.label()} ${this.childCount()}\n </div>\n ${this.secondaryLabel()}\n </div>\n ${this.loadingCircle()}\n </div>\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"IxGenericTreeNode.js","sourceRoot":"","sources":["../src/IxGenericTreeNode.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport '@digital-realty/ix-checkbox/ix-checkbox.js';\nimport '@digital-realty/ix-icon/ix-icon.js';\nimport '@digital-realty/ix-icon-button/ix-icon-button.js';\nimport '@digital-realty/ix-progress/ix-progress.js';\n\nimport type { IGenericTreeNode } from './ix-generic-tree-types.js';\nimport { IxGenericTreeNodeStyles } from './ix-generic-tree-styles.js';\nimport { IxGenericTreeTestIds } from './IxGenericTreeTestIds.js';\n\nexport class IxGenericTreeNode extends LitElement {\n static readonly styles = [IxGenericTreeNodeStyles];\n\n @property({ type: Object }) node!: IGenericTreeNode;\n\n @property({ type: Boolean }) showCheckbox: boolean = false;\n\n @property({ type: Boolean, reflect: true }) expanded: boolean = false;\n\n @property({ type: Boolean }) loading: boolean = false;\n\n @property({ type: Boolean }) disabled: boolean = false;\n\n @property({ type: Boolean }) selected: boolean = false;\n\n @property({ type: Boolean }) searched: boolean = false;\n\n @property({ type: String }) searchText: string = '';\n\n @property({ type: Number }) level = 0;\n\n @property({ type: Boolean }) filledIcons = false;\n\n @property({ type: Boolean }) searchEnabled = false;\n\n private onCheck() {\n this.node.isDirty = true;\n if (this.node.checked) {\n this.node.checked = false;\n this.node.indeterminate = false;\n } else {\n this.node.checked = true;\n this.node.indeterminate = false;\n }\n const event = new CustomEvent('check-toggle', {\n detail: {\n message: {\n node: this.node,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private onNodeExpand(): void {\n if (!this.expandable) {\n return;\n }\n\n const event = new CustomEvent('expand-toggle', {\n detail: {\n message: {\n node: this.node,\n },\n },\n });\n\n this.dispatchEvent(event);\n }\n\n private get expandable() {\n const childrenDataIsPresent: boolean =\n this.node.children !== undefined && this.node.children.length > 0;\n const hasChildrenToLoad: boolean =\n this.node.childrenCount !== undefined && this.node.childrenCount > 0;\n return childrenDataIsPresent || hasChildrenToLoad;\n }\n\n private arrowIcon() {\n const icon = this.expanded ? 'arrow_drop_down' : 'arrow_right';\n return html`<ix-icon-button\n @click=${() => this.onNodeExpand()}\n style=\"visibility: ${this.expandable ? 'visible' : 'hidden'}\"\n icon=${icon}\n test-id=\"tree-node-expand-toggle\"\n data-testid=${IxGenericTreeTestIds.NODE_EXPAND_TOGGLE(this.node.id)}\n >\n </ix-icon-button>`;\n }\n\n private checkbox() {\n if (!this.showCheckbox) return nothing;\n\n if (this.node.inherited) {\n return html`<div class=\"pl-2\">\n <ix-icon\n data-testid=\"${IxGenericTreeTestIds.CHECK_BOX_ID(this.node.id)}\"\n class=\"inherited\"\n disabled=${this.loading || this.disabled}\n >\n arrow_drop_up\n </ix-icon>\n </div>`;\n }\n\n return html`<div class=\"pl-2\" style=\"margin-top: 0.65rem\">\n <ix-checkbox\n .disabled=${this.loading || this.disabled}\n .checked=${this.node.checked}\n .indeterminate=${this.node.indeterminate}\n @click=${() => this.onCheck()}\n data-testid=\"${IxGenericTreeTestIds.CHECK_BOX_ID(this.node.id)}\"\n ></ix-checkbox>\n </div>`;\n }\n\n private nodeIcon() {\n const { icon } = this.node;\n return icon\n ? html`<div class=\"pl-4 mt-2 node-item-icon\">\n <ix-icon\n style=\"color: #092241; opacity: 0.6; font-size: 20px;\"\n ?filled=${this.filledIcons}\n >\n ${icon}\n </ix-icon>\n </div> `\n : nothing;\n }\n\n private label() {\n return html`\n <p\n class=\"label dlr-text-small\"\n data-testid=\"${IxGenericTreeTestIds.NODE_LABEL(this.node.id)}\"\n >\n ${this.setSubstringBold(this.node.label!)}\n </p>\n `;\n }\n\n private childCount() {\n const count =\n this.node.childrenCount === undefined ? 0 : this.node.childrenCount;\n return html`<p\n class=\"pl-2 child-count dlr-text-small\"\n data-testid=\"${IxGenericTreeTestIds.NODE_COUNT(this.node.id)}\"\n >\n ${count !== 0 ? count : nothing}\n </p>`;\n }\n\n private secondaryLabel() {\n return this.node.secondaryLabel\n ? html`<p class=\"secondary-label dlr-text-caption\">\n ${this.setSubstringBold(this.node.secondaryLabel!)}\n </p>`\n : nothing;\n }\n\n private loadingCircle() {\n return html`<div\n style=\"visibility: ${this.loading\n ? 'visible'\n : 'hidden'}; padding-left: 1rem;\"\n class=\"animate-pulse\"\n >\n <ix-progress .linear=${false} .indeterminate=${true}></ix-progress>\n </div>`;\n }\n\n private setSubstringBold(label: string) {\n if (!this.searchText || this.searchText.length < 2) return label;\n\n const sanitizedSearchText = this.searchText.toLowerCase().trim();\n const startIndex = label.toLowerCase().indexOf(sanitizedSearchText);\n\n if (startIndex === -1) {\n return label;\n }\n\n const endIndex = startIndex + sanitizedSearchText.length;\n return html`${label.substring(0, startIndex)}<b>${label.substring(\n startIndex,\n endIndex,\n )}</b>${label.substring(endIndex)}`;\n }\n\n private getBackgroundColor(): string {\n if (!this.searchEnabled || this.searchText.trim() === '') {\n return '';\n }\n if (this.selected) {\n return 'node-item-selected';\n }\n if (this.searched) {\n return 'node-item-searched';\n }\n return '';\n }\n\n render() {\n return html`\n <div style=\"padding-left: ${this.level > 0 ? '2.2rem' : '0'}\">\n <div class=\"node-item\">\n ${this.arrowIcon()} ${this.checkbox()} ${this.nodeIcon()}\n <div\n class=\"node-item-label ${this.getBackgroundColor()}\"\n @click=${this.onNodeExpand}\n @keydown=${this.onNodeExpand}\n >\n <div class=\"node-item-inner\">\n ${this.label()} ${this.childCount()}\n </div>\n ${this.secondaryLabel()}\n </div>\n ${this.loadingCircle()}\n </div>\n <slot></slot>\n </div>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-generic-tree following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "2.1.
|
|
6
|
+
"version": "2.1.5",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -32,11 +32,11 @@
|
|
|
32
32
|
"ts:watch": "tsc --watch --preserveWatchOutput"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@digital-realty/ix-checkbox": "^1.3.
|
|
36
|
-
"@digital-realty/ix-icon": "^1.2.
|
|
37
|
-
"@digital-realty/ix-icon-button": "^1.2.
|
|
38
|
-
"@digital-realty/ix-progress": "^1.3.
|
|
39
|
-
"@digital-realty/ix-textbox": "^2.3.
|
|
35
|
+
"@digital-realty/ix-checkbox": "^1.3.3",
|
|
36
|
+
"@digital-realty/ix-icon": "^1.2.2",
|
|
37
|
+
"@digital-realty/ix-icon-button": "^1.2.2",
|
|
38
|
+
"@digital-realty/ix-progress": "^1.3.2",
|
|
39
|
+
"@digital-realty/ix-textbox": "^2.3.3",
|
|
40
40
|
"lit": "^3.1.4"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
@@ -100,5 +100,5 @@
|
|
|
100
100
|
"README.md",
|
|
101
101
|
"LICENSE"
|
|
102
102
|
],
|
|
103
|
-
"gitHead": "
|
|
103
|
+
"gitHead": "bbcb2805555472c26b6590241ee4478c7d7c2302"
|
|
104
104
|
}
|