@progressio_resources/gravity-design-system 2.2.0 → 2.2.2
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/esm2022/lib/components/gravity-table/gravity-table.component.mjs +50 -60
- package/esm2022/lib/components/gravity-text-field/gravity-text-field.component.mjs +7 -2
- package/esm2022/lib/components/gravity-tree-view/gravity-tree-view.component.mjs +11 -4
- package/esm2022/lib/components/gravity-tree-view/node/node.component.mjs +3 -3
- package/esm2022/lib/components/gravity-tree-view/service/tree-service.mjs +7 -140
- package/esm2022/lib/vendor/gravity-tooltip/gravity-tooltip.directive.mjs +1 -3
- package/fesm2022/progressio_resources-gravity-design-system.mjs +71 -205
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-table/gravity-table.component.d.ts +3 -4
- package/lib/components/gravity-text-field/gravity-text-field.component.d.ts +3 -2
- package/lib/components/gravity-tree-view/gravity-tree-view.component.d.ts +4 -2
- package/lib/components/gravity-tree-view/service/tree-service.d.ts +3 -18
- package/lib/vendor/gravity-tooltip/gravity-tooltip.directive.d.ts +0 -1
- package/package.json +1 -1
- package/src/lib/styles/components/_tables.scss +9 -9
- package/src/lib/styles/overwrite/pretty-checkbox/_core.scss +0 -1
- package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_general.scss +2 -2
- package/src/lib/styles/overwrite/pretty-checkbox/elements/switch/_mixin.scss +1 -1
- package/src/lib/vendor/gravity-tooltip/gravity-tooltip.directive.ts +0 -3
|
@@ -151,6 +151,11 @@ class GravityTextFieldComponent {
|
|
|
151
151
|
ngOnInit() {
|
|
152
152
|
this.inputValue = this.customInputValue ? this.customInputValue : '';
|
|
153
153
|
}
|
|
154
|
+
ngOnChanges(changes) {
|
|
155
|
+
if (changes['customInputValue']) {
|
|
156
|
+
this.inputValue = changes['customInputValue'].currentValue;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
154
159
|
getPlaceholder() {
|
|
155
160
|
if (this.customPlaceholder && this.customPlaceholder != '') {
|
|
156
161
|
return this.customPlaceholder;
|
|
@@ -205,7 +210,7 @@ class GravityTextFieldComponent {
|
|
|
205
210
|
}
|
|
206
211
|
}
|
|
207
212
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
208
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { autocomplete: "autocomplete", clickOnIconName: "clickOnIconName", currentLang: "currentLang", customPlaceholder: "customPlaceholder", customInputValue: "customInputValue", cypressTag: "cypressTag", iconColor: "iconColor", iconNames: "iconNames", iconsSizes: "iconsSizes", iconPlacement: "iconPlacement", inputContentType: "inputContentType", label: "label", placeholderType: "placeholderType", prefix: "prefix", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType", textFieldType: "textFieldType", validations: "validations" }, outputs: { iconResponse: "clickIcon", textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "textAreaElement", first: true, predicate: ["textAreaElement"], descendants: true }], ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-input-field {{textFieldType}} {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <span class=\"hr-label md-regular prefix\">{{prefix}}</span>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n\n #inputElement\n\n *ngIf=\"textFieldType == 'input'\">\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 200\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n rows=\"1\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(name)\" class=\"placement-{{iconPlacement}}\"\n [class.pointer]=\"!!clickOnIconName\" [customIconColorVariable]=\"getIconColor(i)\"\n [hoverIcon]=\"!!clickOnIconName\" [iconName]=\"name\" *ngFor=\"let name of iconNames; let i = index\"\n [size]=\"iconsSizes[i]\"></gravity-icon>\n</ng-template>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.75rem 1rem}.gravity-input-field .prefix{color:var(--text-field-input-field-input-color)}.gravity-input-field.input{height:3rem;max-height:3rem;min-height:1.5rem}.gravity-input-field.textarea{min-height:3rem}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon ::ng-deep svg-icon{pointer-events:none}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-input-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-input-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--text-field-input-field-background-color) inset!important;-webkit-text-fill-color:var(--text-field-input-field-input-color)!important}.gravity-input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);font-family:var(--font-family);line-height:1;max-height:5rem;max-width:100%;min-height:1rem;outline:none;padding:0;width:100%}.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-input-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-input-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-input-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon", "size"] }] }); }
|
|
213
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: { autocomplete: "autocomplete", clickOnIconName: "clickOnIconName", currentLang: "currentLang", customPlaceholder: "customPlaceholder", customInputValue: "customInputValue", cypressTag: "cypressTag", iconColor: "iconColor", iconNames: "iconNames", iconsSizes: "iconsSizes", iconPlacement: "iconPlacement", inputContentType: "inputContentType", label: "label", placeholderType: "placeholderType", prefix: "prefix", required: "required", state: "state", supportTextContent: "supportTextContent", supportTextType: "supportTextType", textFieldType: "textFieldType", validations: "validations" }, outputs: { iconResponse: "clickIcon", textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "textAreaElement", first: true, predicate: ["textAreaElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<label class=\"hr-body-text sm-regular {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\" *ngIf=\"label\">\n {{label}}\n <ng-container *ngIf=\"required\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Requerido <span class=\"text-negative\">*</span></ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Required <span class=\"text-negative\">*</span></ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'readonly'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- S\u00F3lo lectura</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Readonly</ng-container>\n </ng-container>\n <ng-container *ngIf=\"state == 'disabled'\">\n <ng-container *ngIf=\"currentLang == 'es'\">- Deshabilitado</ng-container>\n <ng-container *ngIf=\"currentLang == 'en'\">- Disabled</ng-container>\n </ng-container>\n</label>\n<div class=\"gravity-input-field {{textFieldType}} {{state}}\" [class.empty]=\"inputValue == '' && !focusInput\"\n [class.focused]=\"focusInput\" [class.full-input]=\"inputValue != '' && !focusInput\">\n <ng-container *ngIf=\"iconPlacement == 'left'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n <span class=\"hr-label md-regular prefix\">{{prefix}}</span>\n <input [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [autocomplete]=\"autocomplete\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 100\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [type]=\"inputContentType\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n\n #inputElement\n\n *ngIf=\"textFieldType == 'input'\">\n <textarea [attr.data-cy]=\"cypressTag\"\n [attr.disabled]=\"state == 'disabled' ? true : null\"\n [attr.readonly]=\"state == 'readonly' ? true : null\"\n [maxLength]=\"validations?.maxLength ? validations?.maxLength : 200\"\n [minLength]=\"validations?.minLength ? validations?.minLength : 0\"\n [placeholder]=\"getPlaceholder()\"\n [value]=\"inputValue\"\n\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\"\n (keyup)=\"onInputKeyup()\"\n\n class=\"hr-label md-regular\"\n rows=\"1\"\n\n #textAreaElement\n\n *ngIf=\"textFieldType == 'textarea'\"></textarea>\n <ng-container *ngIf=\"iconPlacement == 'right'\">\n <ng-container *ngTemplateOutlet=\"icons\"></ng-container>\n </ng-container>\n</div>\n<p class=\"hr-body-text sm-regular support-text text-{{supportTextType}}\" *ngIf=\"supportTextContent\">\n {{supportTextContent}}\n</p>\n\n<ng-template #icons>\n <gravity-icon (click)=\"$event.stopPropagation(); handleIconClick(name)\" class=\"placement-{{iconPlacement}}\"\n [class.pointer]=\"!!clickOnIconName\" [customIconColorVariable]=\"getIconColor(i)\"\n [hoverIcon]=\"!!clickOnIconName\" [iconName]=\"name\" *ngFor=\"let name of iconNames; let i = index\"\n [size]=\"iconsSizes[i]\"></gravity-icon>\n</ng-template>\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:50%}.text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}:host{display:block}label{color:var(--text-field-label-color);margin-inline:1rem}label.empty.enabled{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.empty.disabled{--text-field-label-color: var(--label-text-empty-disabled-primary)}label.full-input.enabled{--text-field-label-color: var(--label-text-full-enabled-primary)}label.full-input.disabled{--text-field-label-color: var(--label-text-full-disabled-primary)}label.full-input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label.focused{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field{align-items:center;background-color:var(--text-field-input-field-background-color);border:1px solid var(--text-field-input-field-border-color);border-radius:.625rem;display:flex;padding:.75rem 1rem}.gravity-input-field .prefix{color:var(--text-field-input-field-input-color)}.gravity-input-field.input{height:3rem;max-height:3rem;min-height:1.5rem}.gravity-input-field.textarea{min-height:3rem}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon ::ng-deep svg-icon{pointer-events:none}.gravity-input-field gravity-icon.placement-left{margin-right:.5rem}.gravity-input-field gravity-icon.placement-right{margin-left:.5rem}.gravity-input-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);line-height:0;outline:none;padding:0;width:100%}.gravity-input-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--text-field-input-field-background-color) inset!important;-webkit-text-fill-color:var(--text-field-input-field-input-color)!important}.gravity-input-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field textarea{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-input-color);font-family:var(--font-family);line-height:1;max-height:5rem;max-width:100%;min-height:1rem;outline:none;padding:0;width:100%}.gravity-input-field textarea::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-input-field.empty.enabled{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-enabled-primary)}.gravity-input-field.empty.enabled:hover{--text-field-input-field-background-color: var(--bg-field-empty-enabled-hover-primary)}.gravity-input-field.empty.disabled{--text-field-input-field-background-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-border-color: var(--bg-field-empty-disabled-primary);--text-field-input-field-input-color: var(--placeholder-empty-disabled-primary);--text-field-input-field-placeholder-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.empty.disabled gravity-icon{--icon-color: var(--placeholder-empty-disabled-primary)}.gravity-input-field.full-input.enabled{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-input-color: var(--input-text-full-enabled-primary)}.gravity-input-field.full-input.enabled:hover{--text-field-input-field-background-color: var(--bg-field-full-enabled-hover-primary)}.gravity-input-field.full-input.disabled{--text-field-input-field-background-color: var(--bg-field-full-disabled-primary);--text-field-input-field-border-color: var(--bg-field-full-disabled-primary);--text-field-input-field-input-color: var(--input-text-full-disabled-primary)}.gravity-input-field.full-input.disabled gravity-icon{--icon-color: var(--input-text-full-disabled-primary)}.gravity-input-field.readonly{--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-input-color: var(--input-text-full-read-only-primary)}.gravity-input-field.readonly gravity-icon{--icon-color: var(--input-text-full-read-only-primary)}.gravity-input-field.focused:not(.readonly){--text-field-input-field-background-color: var(--bg-field-full-enabled-pressed-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-input-color: var(--placeholder-full-enabled-pressed-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "hoverIcon", "size"] }] }); }
|
|
209
214
|
}
|
|
210
215
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTextFieldComponent, decorators: [{
|
|
211
216
|
type: Component,
|
|
@@ -669,8 +674,6 @@ class GravityTooltipDirective {
|
|
|
669
674
|
this.destroyTooltip();
|
|
670
675
|
}, this.options['hideDelayAfterClick']);
|
|
671
676
|
}
|
|
672
|
-
ngOnInit() {
|
|
673
|
-
}
|
|
674
677
|
ngOnChanges(changes) {
|
|
675
678
|
this.initOptions = this.renameProperties(this.initOptions);
|
|
676
679
|
let changedOptions = this.getProperties(changes);
|
|
@@ -1539,7 +1542,6 @@ class GravityTableComponent {
|
|
|
1539
1542
|
this.renderer = renderer;
|
|
1540
1543
|
this.tableDensity = "standard";
|
|
1541
1544
|
this.tableSizeInput = "auto";
|
|
1542
|
-
this.firstTime = true;
|
|
1543
1545
|
this.tableElement = null;
|
|
1544
1546
|
this.tableSize = 'xl';
|
|
1545
1547
|
let milliseconds = new Date().getTime();
|
|
@@ -1549,11 +1551,7 @@ class GravityTableComponent {
|
|
|
1549
1551
|
ngAfterViewInit() {
|
|
1550
1552
|
this.tableElement = this.tableContainer?.nativeElement?.childNodes[0];
|
|
1551
1553
|
this.renderer.setAttribute(this.tableElement, 'table-id', this.tableId);
|
|
1552
|
-
|
|
1553
|
-
this.initializeTable(tableHeaders);
|
|
1554
|
-
this.adjustTableDensity(this.tableDensity);
|
|
1555
|
-
this.adjustButtonsSize();
|
|
1556
|
-
this.onResize();
|
|
1554
|
+
this.initializeComponent();
|
|
1557
1555
|
}
|
|
1558
1556
|
ngOnChanges(changes) {
|
|
1559
1557
|
if (this.tableElement) {
|
|
@@ -1566,15 +1564,6 @@ class GravityTableComponent {
|
|
|
1566
1564
|
}
|
|
1567
1565
|
}
|
|
1568
1566
|
}
|
|
1569
|
-
ngAfterContentChecked() {
|
|
1570
|
-
if (this.tableElement) {
|
|
1571
|
-
let tableHeaders = this.getTableHeaders();
|
|
1572
|
-
this.initializeTable(tableHeaders);
|
|
1573
|
-
this.adjustTableDensity(this.tableDensity);
|
|
1574
|
-
this.adjustButtonsSize();
|
|
1575
|
-
this.onResize();
|
|
1576
|
-
}
|
|
1577
|
-
}
|
|
1578
1567
|
getTableHeaders() {
|
|
1579
1568
|
let tableHeaderItems = document.querySelectorAll('thead tr th');
|
|
1580
1569
|
let tableHeaders = [];
|
|
@@ -1583,51 +1572,55 @@ class GravityTableComponent {
|
|
|
1583
1572
|
});
|
|
1584
1573
|
return tableHeaders;
|
|
1585
1574
|
}
|
|
1575
|
+
initializeComponent() {
|
|
1576
|
+
let tableHeaders = this.getTableHeaders();
|
|
1577
|
+
this.initializeTable(tableHeaders);
|
|
1578
|
+
this.adjustTableDensity(this.tableDensity);
|
|
1579
|
+
this.adjustButtonsSize();
|
|
1580
|
+
this.onResize();
|
|
1581
|
+
}
|
|
1586
1582
|
initializeTable(tableHeaders) {
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
let
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
|
|
1605
|
-
menuToggle.
|
|
1606
|
-
menuToggle.addEventListener("click", () => {
|
|
1607
|
-
if (menuToggle.classList.contains('open')) {
|
|
1608
|
-
this.renderer.removeClass(menuToggle, 'open');
|
|
1609
|
-
this.renderer.removeClass(menuToggle.parentElement.lastElementChild, 'open');
|
|
1610
|
-
}
|
|
1611
|
-
else {
|
|
1612
|
-
this.renderer.addClass(menuToggle, 'open');
|
|
1613
|
-
this.renderer.addClass(menuToggle.parentElement.lastElementChild, 'open');
|
|
1614
|
-
}
|
|
1615
|
-
});
|
|
1616
|
-
mobileMenuTrigger.appendChild(menuToggle);
|
|
1617
|
-
let panel = document.createElement('div');
|
|
1618
|
-
this.renderer.addClass(panel, 'panel');
|
|
1619
|
-
let closeButtonFromNodeList = closeButtons.item(index);
|
|
1620
|
-
let closeButtonRemoved = closeButtonFromNodeList.parentNode.removeChild(closeButtonFromNodeList);
|
|
1621
|
-
this.renderer.setAttribute(closeButtonRemoved, 'cloned-button', 'true');
|
|
1622
|
-
closeButtonRemoved.addEventListener("click", () => {
|
|
1583
|
+
//Set corresponding tableHeader as an attribute of each td
|
|
1584
|
+
let tableBody = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr td');
|
|
1585
|
+
tableBody.forEach((tableBodyRow, index) => {
|
|
1586
|
+
this.renderer.setAttribute(tableBodyRow, 'header-name', tableHeaders[index % tableHeaders.length]);
|
|
1587
|
+
});
|
|
1588
|
+
//Creates a copy of mobile-menu-trigger element for each tr
|
|
1589
|
+
let tableBodyRows = document.querySelectorAll('table[table-id="' + this.tableId + '"] tbody tr');
|
|
1590
|
+
let closeButtons = document.querySelectorAll('gravity-button[id-reference="close-button"]');
|
|
1591
|
+
tableBodyRows.forEach((tr, index) => {
|
|
1592
|
+
let mobileMenuTrigger = document.createElement('div');
|
|
1593
|
+
this.renderer.addClass(mobileMenuTrigger, 'mobile-menu-trigger');
|
|
1594
|
+
this.renderer.setAttribute(mobileMenuTrigger, 'cloned-node', 'true');
|
|
1595
|
+
let menuToggle = document.createElement('div');
|
|
1596
|
+
this.renderer.addClass(menuToggle, 'menu-toggle');
|
|
1597
|
+
menuToggle.appendChild(document.createElement('span'));
|
|
1598
|
+
menuToggle.appendChild(document.createElement('span'));
|
|
1599
|
+
menuToggle.appendChild(document.createElement('span'));
|
|
1600
|
+
menuToggle.addEventListener("click", () => {
|
|
1601
|
+
if (menuToggle.classList.contains('open')) {
|
|
1623
1602
|
this.renderer.removeClass(menuToggle, 'open');
|
|
1624
1603
|
this.renderer.removeClass(menuToggle.parentElement.lastElementChild, 'open');
|
|
1625
|
-
}
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
|
|
1604
|
+
}
|
|
1605
|
+
else {
|
|
1606
|
+
this.renderer.addClass(menuToggle, 'open');
|
|
1607
|
+
this.renderer.addClass(menuToggle.parentElement.lastElementChild, 'open');
|
|
1608
|
+
}
|
|
1629
1609
|
});
|
|
1630
|
-
|
|
1610
|
+
mobileMenuTrigger.appendChild(menuToggle);
|
|
1611
|
+
let panel = document.createElement('div');
|
|
1612
|
+
this.renderer.addClass(panel, 'panel');
|
|
1613
|
+
let closeButtonFromNodeList = closeButtons.item(index);
|
|
1614
|
+
let closeButtonRemoved = closeButtonFromNodeList.parentNode.removeChild(closeButtonFromNodeList);
|
|
1615
|
+
this.renderer.setAttribute(closeButtonRemoved, 'cloned-button', 'true');
|
|
1616
|
+
closeButtonRemoved.addEventListener("click", () => {
|
|
1617
|
+
this.renderer.removeClass(menuToggle, 'open');
|
|
1618
|
+
this.renderer.removeClass(menuToggle.parentElement.lastElementChild, 'open');
|
|
1619
|
+
});
|
|
1620
|
+
panel.append(closeButtonRemoved);
|
|
1621
|
+
mobileMenuTrigger.appendChild(panel);
|
|
1622
|
+
tr.insertBefore(mobileMenuTrigger, tr.firstChild);
|
|
1623
|
+
});
|
|
1631
1624
|
}
|
|
1632
1625
|
adjustTableDensity(densityValue) {
|
|
1633
1626
|
this.renderer.removeClass(this.tableElement, 'standard-table');
|
|
@@ -1712,7 +1705,7 @@ class GravityTableComponent {
|
|
|
1712
1705
|
}
|
|
1713
1706
|
if (this.tableSize == 'lg' || this.tableSize == 'xl') {
|
|
1714
1707
|
let nodeListIndex = nodesList.length - 1;
|
|
1715
|
-
while (nodesList.length
|
|
1708
|
+
while (nodesList.length > 1) {
|
|
1716
1709
|
let item = nodesList.item(nodeListIndex);
|
|
1717
1710
|
let closeButtonNode = item.parentNode.querySelectorAll('gravity-button[id-reference="close-button"]').item(0);
|
|
1718
1711
|
if (item != closeButtonNode) {
|
|
@@ -1725,11 +1718,11 @@ class GravityTableComponent {
|
|
|
1725
1718
|
}
|
|
1726
1719
|
}
|
|
1727
1720
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1728
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTableComponent, selector: "gravity-table", inputs: { tableDensity: "tableDensity", tableSizeInput: "tableSizeInput" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n
|
|
1721
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTableComponent, selector: "gravity-table", inputs: { tableDensity: "tableDensity", tableSizeInput: "tableSizeInput" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "tableContainer", first: true, predicate: ["tableContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}.table-container{overflow-x:auto}\n"], dependencies: [{ kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "customState", "iconName", "isLoading", "showContent", "size", "type"] }] }); }
|
|
1729
1722
|
}
|
|
1730
1723
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTableComponent, decorators: [{
|
|
1731
1724
|
type: Component,
|
|
1732
|
-
args: [{ selector: 'gravity-table', template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n
|
|
1725
|
+
args: [{ selector: 'gravity-table', template: "<div class=\"table-container {{tableSize}}\" #tableContainer>\n <ng-content></ng-content>\n</div>\n\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n<gravity-button id-reference=\"close-button\" [iconName]=\"'unsuccess'\" [type]=\"'tertiary'\" [size]=\"'sm'\">Close menu</gravity-button>\n", styles: [":host{display:block;margin-block:1rem}.table-container{overflow-x:auto}\n"] }]
|
|
1733
1726
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { tableDensity: [{
|
|
1734
1727
|
type: Input
|
|
1735
1728
|
}], tableSizeInput: [{
|
|
@@ -1751,12 +1744,13 @@ var NodeSelectedState;
|
|
|
1751
1744
|
|
|
1752
1745
|
class TreeService {
|
|
1753
1746
|
constructor() {
|
|
1754
|
-
this.
|
|
1747
|
+
this.filterValue = '';
|
|
1755
1748
|
this.selectedItems = [];
|
|
1749
|
+
this.filterChangeSubject = new BehaviorSubject(this.filterValue);
|
|
1756
1750
|
this.selectedItemsSubject = new BehaviorSubject(this.selectedItems);
|
|
1757
1751
|
this.selectedStates = [];
|
|
1758
1752
|
this.filterChangeSubjectSubscription = this.filterChangeSubject.pipe(debounceTime(300), distinctUntilChanged()).subscribe(() => {
|
|
1759
|
-
this.filterTraverse(this.treeState,
|
|
1753
|
+
this.filterTraverse(this.treeState, this.filterValue);
|
|
1760
1754
|
});
|
|
1761
1755
|
}
|
|
1762
1756
|
ngOnDestroy() {
|
|
@@ -1932,74 +1926,6 @@ class TreeService {
|
|
|
1932
1926
|
selected: false
|
|
1933
1927
|
};
|
|
1934
1928
|
}
|
|
1935
|
-
deleteById(id) {
|
|
1936
|
-
let result = this.getNodeState(this.treeState, id, TreeService.findById);
|
|
1937
|
-
if (result) {
|
|
1938
|
-
this.deleteByState(result);
|
|
1939
|
-
}
|
|
1940
|
-
}
|
|
1941
|
-
deleteByState(state) {
|
|
1942
|
-
this.delete(state);
|
|
1943
|
-
this.childStateChanged(state);
|
|
1944
|
-
this.filterTraverse(this.treeState, '');
|
|
1945
|
-
}
|
|
1946
|
-
delete(state) {
|
|
1947
|
-
while (state.children.length > 0) {
|
|
1948
|
-
let result = state.children.pop();
|
|
1949
|
-
if (result) {
|
|
1950
|
-
this.delete(result);
|
|
1951
|
-
}
|
|
1952
|
-
}
|
|
1953
|
-
this.removeSelected(state.nodeItem.item);
|
|
1954
|
-
TreeService.remove(state);
|
|
1955
|
-
if (!state.parent) {
|
|
1956
|
-
TreeService.deleteRoot(state, this.treeState, this.nodeItems);
|
|
1957
|
-
}
|
|
1958
|
-
}
|
|
1959
|
-
toggleExpandedTraverse(nodeStates, value) {
|
|
1960
|
-
for (let state of nodeStates) {
|
|
1961
|
-
state.expanded = value;
|
|
1962
|
-
this.toggleExpandedTraverse(state.children, value);
|
|
1963
|
-
}
|
|
1964
|
-
}
|
|
1965
|
-
static deleteRoot(state, nodeStates, nodeItems) {
|
|
1966
|
-
let itemIndex = nodeItems.indexOf(state.nodeItem);
|
|
1967
|
-
if (itemIndex !== -1) {
|
|
1968
|
-
nodeItems.splice(itemIndex, 1);
|
|
1969
|
-
}
|
|
1970
|
-
let index = nodeStates.indexOf(state);
|
|
1971
|
-
if (index !== -1) {
|
|
1972
|
-
nodeStates.splice(index, 1);
|
|
1973
|
-
}
|
|
1974
|
-
}
|
|
1975
|
-
addNewNode(nodeState, parent) {
|
|
1976
|
-
nodeState.parent = parent;
|
|
1977
|
-
parent.children.push(nodeState);
|
|
1978
|
-
if (parent.nodeItem.children) {
|
|
1979
|
-
parent.nodeItem.children.push(nodeState.nodeItem);
|
|
1980
|
-
}
|
|
1981
|
-
this.childStateChanged(parent);
|
|
1982
|
-
this.filterTraverse(this.treeState, '');
|
|
1983
|
-
}
|
|
1984
|
-
static remove(state) {
|
|
1985
|
-
if (state.parent) {
|
|
1986
|
-
state.parent.hasFilteredChildren = false;
|
|
1987
|
-
if (state.parent.nodeItem.children) {
|
|
1988
|
-
let itemIndex = state.parent.nodeItem.children.indexOf(state.nodeItem);
|
|
1989
|
-
if (itemIndex !== -1) {
|
|
1990
|
-
state.parent.nodeItem.children.splice(itemIndex, 1);
|
|
1991
|
-
}
|
|
1992
|
-
}
|
|
1993
|
-
let index = state.parent.children.indexOf(state);
|
|
1994
|
-
if (index !== -1) {
|
|
1995
|
-
state.parent.children.splice(index, 1);
|
|
1996
|
-
}
|
|
1997
|
-
let filteredIndex = state.parent.filteredChildren.indexOf(state);
|
|
1998
|
-
if (filteredIndex !== -1) {
|
|
1999
|
-
state.parent.filteredChildren.splice(filteredIndex, 1);
|
|
2000
|
-
}
|
|
2001
|
-
}
|
|
2002
|
-
}
|
|
2003
1929
|
allChildrenSelected(state) {
|
|
2004
1930
|
if (state.nodeItem.children) {
|
|
2005
1931
|
return state.children.every(it => it.selectedState === NodeSelectedState.checked) && state.children.length === state.nodeItem.children.length;
|
|
@@ -2008,12 +1934,6 @@ class TreeService {
|
|
|
2008
1934
|
return state.children.every(it => it.selectedState === NodeSelectedState.checked);
|
|
2009
1935
|
}
|
|
2010
1936
|
}
|
|
2011
|
-
toggleExpandedTraverseAsc(nodeState, value) {
|
|
2012
|
-
nodeState.expanded = value;
|
|
2013
|
-
if (nodeState.parent) {
|
|
2014
|
-
this.toggleExpandedTraverseAsc(nodeState.parent, value);
|
|
2015
|
-
}
|
|
2016
|
-
}
|
|
2017
1937
|
anyActiveSelected(state) {
|
|
2018
1938
|
let result = state.children.filter(it => !it.disabled && it.selected).length > 0;
|
|
2019
1939
|
for (const child of state.children) {
|
|
@@ -2023,69 +1943,9 @@ class TreeService {
|
|
|
2023
1943
|
}
|
|
2024
1944
|
return result;
|
|
2025
1945
|
}
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
getNodeState(nodeStates, arg, compare) {
|
|
2030
|
-
let nodeState = nodeStates.find((it) => compare(it, arg));
|
|
2031
|
-
if (nodeState) {
|
|
2032
|
-
return nodeState;
|
|
2033
|
-
}
|
|
2034
|
-
else {
|
|
2035
|
-
for (let state of nodeStates) {
|
|
2036
|
-
let children = this.getNodeState(state.children, arg, compare);
|
|
2037
|
-
if (children) {
|
|
2038
|
-
return children;
|
|
2039
|
-
}
|
|
2040
|
-
}
|
|
2041
|
-
}
|
|
2042
|
-
}
|
|
2043
|
-
toggleExpanded(value) {
|
|
2044
|
-
this.toggleExpandedTraverse(this.treeState, value);
|
|
2045
|
-
}
|
|
2046
|
-
addNodeById(nodeState, id) {
|
|
2047
|
-
let result = this.getNodeState(this.treeState, id, TreeService.findById);
|
|
2048
|
-
if (result) {
|
|
2049
|
-
if (!result.children) {
|
|
2050
|
-
result.children = [];
|
|
2051
|
-
}
|
|
2052
|
-
this.addNewNode(nodeState, result);
|
|
2053
|
-
if (result.nodeItem.item) {
|
|
2054
|
-
this.removeSelected(result.nodeItem.item);
|
|
2055
|
-
}
|
|
2056
|
-
}
|
|
2057
|
-
}
|
|
2058
|
-
editItemById(id, item) {
|
|
2059
|
-
const nodeState = this.getNodeState(this.treeState, id, TreeService.findById);
|
|
2060
|
-
if (nodeState && nodeState.nodeItem) {
|
|
2061
|
-
if (this.selectedItems.includes(nodeState.nodeItem.item)) {
|
|
2062
|
-
this.removeSelected(nodeState.nodeItem.item);
|
|
2063
|
-
this.selectedItems.push(item);
|
|
2064
|
-
this.selectedItemsSubject.next(this.selectedItems);
|
|
2065
|
-
}
|
|
2066
|
-
nodeState.nodeItem.item = item;
|
|
2067
|
-
}
|
|
2068
|
-
}
|
|
2069
|
-
expandById(id) {
|
|
2070
|
-
const result = this.getNodeState(this.treeState, id, TreeService.findById);
|
|
2071
|
-
if (result) {
|
|
2072
|
-
this.toggleExpandedTraverseAsc(result, true);
|
|
2073
|
-
}
|
|
2074
|
-
}
|
|
2075
|
-
collapseById(id) {
|
|
2076
|
-
const result = this.getNodeState(this.treeState, id, TreeService.findById);
|
|
2077
|
-
if (result) {
|
|
2078
|
-
result.expanded = false;
|
|
2079
|
-
}
|
|
2080
|
-
}
|
|
2081
|
-
getParentById(id) {
|
|
2082
|
-
const result = this.getNodeState(this.treeState, id, TreeService.findById);
|
|
2083
|
-
if (result) {
|
|
2084
|
-
return result.parent.nodeItem;
|
|
2085
|
-
}
|
|
2086
|
-
}
|
|
2087
|
-
forceFilterTraverse() {
|
|
2088
|
-
this.filterTraverse(this.treeState, '');
|
|
1946
|
+
filterChanged(value) {
|
|
1947
|
+
this.filterValue = value;
|
|
1948
|
+
this.filterChangeSubject.next(value);
|
|
2089
1949
|
}
|
|
2090
1950
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2091
1951
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TreeService }); }
|
|
@@ -2140,11 +2000,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2140
2000
|
|
|
2141
2001
|
class NodeComponent {
|
|
2142
2002
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2143
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "tree-node", inputs: { nodeState: "nodeState" }, ngImport: i0, template: "<div class=\"node-container\">\n <div class=\"node-content\">\n <node-toggle [state]=\"nodeState\"></node-toggle>\n <node-checkbox [state]=\"nodeState\"></node-checkbox>\n <node-name [state]=\"nodeState\"></node-name>\n </div>\n <div class=\"collapsible-wrapper\" *ngIf=\"nodeState.nodeItem.children\"\n [class.collapsed]=\"!nodeState.expanded && nodeState.nodeItem.children.length > 0 && nodeState.filteredChildren.length > 0\">\n <div class=\"collapsible\">\n <tree-node class=\"node-offset\" [nodeState]=\"child\"\n *ngFor=\"let child of nodeState.filteredChildren\"></tree-node>\n </div>\n </div>\n</div>\n", styles: [".node-container{display:flex;flex:1 1 auto;flex-direction:column}.node-container .node-content{display:inline-flex;padding-
|
|
2003
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NodeComponent, selector: "tree-node", inputs: { nodeState: "nodeState" }, ngImport: i0, template: "<div class=\"node-container\">\n <div class=\"node-content\">\n <node-toggle [state]=\"nodeState\"></node-toggle>\n <node-checkbox [state]=\"nodeState\"></node-checkbox>\n <node-name [state]=\"nodeState\"></node-name>\n </div>\n <div class=\"collapsible-wrapper\" *ngIf=\"nodeState.nodeItem.children\"\n [class.collapsed]=\"!nodeState.expanded && nodeState.nodeItem.children.length > 0 && nodeState.filteredChildren.length > 0\">\n <div class=\"collapsible\">\n <tree-node class=\"node-offset\" [nodeState]=\"child\"\n *ngFor=\"let child of nodeState.filteredChildren\"></tree-node>\n </div>\n </div>\n</div>\n", styles: [".node-container{display:flex;flex:1 1 auto;flex-direction:column}.node-container .node-content{display:inline-flex;padding-block:.3rem}.node-container node-toggle,.node-container node-checkbox{display:inline-flex;align-items:center}.node-container .collapsible-wrapper{display:flex;overflow:hidden}.node-container .collapsible-wrapper .collapsible{margin-bottom:0;max-height:1000000px}.node-container .collapsible-wrapper .collapsible tree-node.node-offset{display:flex;margin-left:1.25rem}.node-container .collapsible-wrapper.collapsed>.collapsible{margin-bottom:-20000px;visibility:hidden;max-height:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NodeComponent, selector: "tree-node", inputs: ["nodeState"] }, { kind: "component", type: NodeToggleComponent, selector: "node-toggle", inputs: ["state"] }, { kind: "component", type: NodeCheckboxComponent, selector: "node-checkbox", inputs: ["state"] }, { kind: "component", type: NodeNameComponent, selector: "node-name", inputs: ["state"] }] }); }
|
|
2144
2004
|
}
|
|
2145
2005
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NodeComponent, decorators: [{
|
|
2146
2006
|
type: Component,
|
|
2147
|
-
args: [{ selector: 'tree-node', template: "<div class=\"node-container\">\n <div class=\"node-content\">\n <node-toggle [state]=\"nodeState\"></node-toggle>\n <node-checkbox [state]=\"nodeState\"></node-checkbox>\n <node-name [state]=\"nodeState\"></node-name>\n </div>\n <div class=\"collapsible-wrapper\" *ngIf=\"nodeState.nodeItem.children\"\n [class.collapsed]=\"!nodeState.expanded && nodeState.nodeItem.children.length > 0 && nodeState.filteredChildren.length > 0\">\n <div class=\"collapsible\">\n <tree-node class=\"node-offset\" [nodeState]=\"child\"\n *ngFor=\"let child of nodeState.filteredChildren\"></tree-node>\n </div>\n </div>\n</div>\n", styles: [".node-container{display:flex;flex:1 1 auto;flex-direction:column}.node-container .node-content{display:inline-flex;padding-
|
|
2007
|
+
args: [{ selector: 'tree-node', template: "<div class=\"node-container\">\n <div class=\"node-content\">\n <node-toggle [state]=\"nodeState\"></node-toggle>\n <node-checkbox [state]=\"nodeState\"></node-checkbox>\n <node-name [state]=\"nodeState\"></node-name>\n </div>\n <div class=\"collapsible-wrapper\" *ngIf=\"nodeState.nodeItem.children\"\n [class.collapsed]=\"!nodeState.expanded && nodeState.nodeItem.children.length > 0 && nodeState.filteredChildren.length > 0\">\n <div class=\"collapsible\">\n <tree-node class=\"node-offset\" [nodeState]=\"child\"\n *ngFor=\"let child of nodeState.filteredChildren\"></tree-node>\n </div>\n </div>\n</div>\n", styles: [".node-container{display:flex;flex:1 1 auto;flex-direction:column}.node-container .node-content{display:inline-flex;padding-block:.3rem}.node-container node-toggle,.node-container node-checkbox{display:inline-flex;align-items:center}.node-container .collapsible-wrapper{display:flex;overflow:hidden}.node-container .collapsible-wrapper .collapsible{margin-bottom:0;max-height:1000000px}.node-container .collapsible-wrapper .collapsible tree-node.node-offset{display:flex;margin-left:1.25rem}.node-container .collapsible-wrapper.collapsed>.collapsible{margin-bottom:-20000px;visibility:hidden;max-height:0}\n"] }]
|
|
2148
2008
|
}], propDecorators: { nodeState: [{
|
|
2149
2009
|
type: Input
|
|
2150
2010
|
}] } });
|
|
@@ -2152,6 +2012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
2152
2012
|
class GravityTreeViewComponent {
|
|
2153
2013
|
constructor(treeService) {
|
|
2154
2014
|
this.treeService = treeService;
|
|
2015
|
+
this.showFilterInput = false;
|
|
2155
2016
|
this.selectedItems = new EventEmitter();
|
|
2156
2017
|
this.treeServiceSubscription = treeService.connect().subscribe((items) => {
|
|
2157
2018
|
const subscription = timer(0).subscribe(() => {
|
|
@@ -2190,16 +2051,21 @@ class GravityTreeViewComponent {
|
|
|
2190
2051
|
});
|
|
2191
2052
|
return treeStructure;
|
|
2192
2053
|
}
|
|
2054
|
+
changeFilter(newValue) {
|
|
2055
|
+
this.treeService.filterChanged(newValue.toLowerCase());
|
|
2056
|
+
}
|
|
2193
2057
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTreeViewComponent, deps: [{ token: TreeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2194
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTreeViewComponent, selector: "gravity-tree-view", inputs: { callbacks: "callbacks", nodeItems: "nodeItems" }, outputs: { selectedItems: "selectedItems" }, providers: [TreeService], usesOnChanges: true, ngImport: i0, template: "<tree-node [nodeState]=\"state\" *ngFor=\"let state of treeService.treeState\"></tree-node>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: NodeComponent, selector: "tree-node", inputs: ["nodeState"] }] }); }
|
|
2058
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityTreeViewComponent, selector: "gravity-tree-view", inputs: { callbacks: "callbacks", nodeItems: "nodeItems", showFilterInput: "showFilterInput" }, outputs: { selectedItems: "selectedItems" }, providers: [TreeService], usesOnChanges: true, ngImport: i0, template: "<gravity-text-field [label]=\"'Change filter'\" *ngIf=\"showFilterInput\"\n (response)=\"changeFilter($event)\"></gravity-text-field>\n<tree-node [nodeState]=\"state\" *ngFor=\"let state of treeService.treeState\"></tree-node>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: ["autocomplete", "clickOnIconName", "currentLang", "customPlaceholder", "customInputValue", "cypressTag", "iconColor", "iconNames", "iconsSizes", "iconPlacement", "inputContentType", "label", "placeholderType", "prefix", "required", "state", "supportTextContent", "supportTextType", "textFieldType", "validations"], outputs: ["clickIcon", "response"] }, { kind: "component", type: NodeComponent, selector: "tree-node", inputs: ["nodeState"] }] }); }
|
|
2195
2059
|
}
|
|
2196
2060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityTreeViewComponent, decorators: [{
|
|
2197
2061
|
type: Component,
|
|
2198
|
-
args: [{ selector: 'gravity-tree-view', providers: [TreeService], template: "<tree-node [nodeState]=\"state\" *ngFor=\"let state of treeService.treeState\"></tree-node>\n" }]
|
|
2062
|
+
args: [{ selector: 'gravity-tree-view', providers: [TreeService], template: "<gravity-text-field [label]=\"'Change filter'\" *ngIf=\"showFilterInput\"\n (response)=\"changeFilter($event)\"></gravity-text-field>\n<tree-node [nodeState]=\"state\" *ngFor=\"let state of treeService.treeState\"></tree-node>\n" }]
|
|
2199
2063
|
}], ctorParameters: function () { return [{ type: TreeService }]; }, propDecorators: { callbacks: [{
|
|
2200
2064
|
type: Input
|
|
2201
2065
|
}], nodeItems: [{
|
|
2202
2066
|
type: Input
|
|
2067
|
+
}], showFilterInput: [{
|
|
2068
|
+
type: Input
|
|
2203
2069
|
}], selectedItems: [{
|
|
2204
2070
|
type: Output
|
|
2205
2071
|
}] } });
|