@messaia/cdk 18.1.0-rc28 → 18.1.0
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/base/base.module.mjs +9 -1
- package/esm2022/lib/base/components/dynamic-table-config-dialog/dynamic-table-config-dialog.comnponent.mjs +8 -6
- package/esm2022/lib/base/components/generic-list.component.mjs +3 -2
- package/esm2022/lib/table/components/dynamic-table/dynamic-table.component.mjs +6 -6
- package/esm2022/lib/table/components/filter-clear/filter-clear.component.mjs +36 -0
- package/esm2022/lib/table/components/filter-date/filter-date.component.mjs +146 -0
- package/esm2022/lib/table/components/filter-input/filter-input.component.mjs +198 -0
- package/esm2022/lib/table/components/filter-select/filter-select.component.mjs +3 -3
- package/esm2022/lib/table/table.module.mjs +4 -4
- package/fesm2022/messaia-cdk.mjs +26 -62
- package/fesm2022/messaia-cdk.mjs.map +1 -1
- package/lib/base/base.module.d.ts +14 -12
- package/lib/common/styles/utilities/_general.scss +34 -16
- package/lib/table/table.module.d.ts +6 -6
- package/package.json +1 -1
- package/esm2022/lib/table/components/filter-clear.component.mjs +0 -45
- package/esm2022/lib/table/components/filter-date.component.mjs +0 -166
- package/esm2022/lib/table/components/filter-input.component.mjs +0 -212
- /package/lib/table/components/{filter-clear.component.d.ts → filter-clear/filter-clear.component.d.ts} +0 -0
- /package/lib/table/components/{filter-date.component.d.ts → filter-date/filter-date.component.d.ts} +0 -0
- /package/lib/table/components/{filter-input.component.d.ts → filter-input/filter-input.component.d.ts} +0 -0
package/fesm2022/messaia-cdk.mjs
CHANGED
|
@@ -14,8 +14,12 @@ import * as i16 from '@angular/material/checkbox';
|
|
|
14
14
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
15
15
|
import * as i1$5 from '@angular/material/dialog';
|
|
16
16
|
import { MatDialogConfig, MatDialog, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
17
|
+
import * as i5 from '@angular/material/divider';
|
|
18
|
+
import { MatDividerModule } from '@angular/material/divider';
|
|
17
19
|
import * as i6 from '@angular/material/form-field';
|
|
18
20
|
import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
|
|
21
|
+
import * as i7 from '@angular/material/icon';
|
|
22
|
+
import { MatIconModule } from '@angular/material/icon';
|
|
19
23
|
import * as i15 from '@angular/material/progress-bar';
|
|
20
24
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
21
25
|
import * as i2$3 from '@angular/cdk/table';
|
|
@@ -24,8 +28,6 @@ import * as i24 from '@angular/material/chips';
|
|
|
24
28
|
import { MatChipsModule } from '@angular/material/chips';
|
|
25
29
|
import * as i21 from '@angular/material/datepicker';
|
|
26
30
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
27
|
-
import * as i7 from '@angular/material/icon';
|
|
28
|
-
import { MatIconModule } from '@angular/material/icon';
|
|
29
31
|
import * as i8 from '@angular/material/input';
|
|
30
32
|
import { MatInputModule, MatInput } from '@angular/material/input';
|
|
31
33
|
import * as i4$1 from '@angular/material/menu';
|
|
@@ -62,8 +64,6 @@ import * as i2$1 from '@angular/material/sidenav';
|
|
|
62
64
|
import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
|
|
63
65
|
import * as i1$2 from '@angular/router';
|
|
64
66
|
import { RouterModule, Router } from '@angular/router';
|
|
65
|
-
import * as i5 from '@angular/material/divider';
|
|
66
|
-
import { MatDividerModule } from '@angular/material/divider';
|
|
67
67
|
import * as i1$3 from 'angular-auth-oidc-client';
|
|
68
68
|
import { trigger, state, style, AUTO_STYLE, transition, group, query, animateChild, animate } from '@angular/animations';
|
|
69
69
|
import * as i3$2 from '@angular/cdk/a11y';
|
|
@@ -14076,31 +14076,17 @@ class FilterInputComponent {
|
|
|
14076
14076
|
useExisting: forwardRef((() => FilterInputComponent)),
|
|
14077
14077
|
multi: true
|
|
14078
14078
|
}
|
|
14079
|
-
], viewQueries: [{ propertyName: "_filter", first: true, predicate: ["filterElement"], descendants: true, static: true }], ngImport: i0, template:
|
|
14080
|
-
<mat-form-field [ngClass]="{'filter-not-empty': value}" flex>
|
|
14081
|
-
<input matInput #filterElement ngControl="filterElement" autocomplete="off" type="input" [(ngModel)]="value" (search)="$event.stopPropagation();" (keyup.enter)="handleSearch($event)"/>
|
|
14082
|
-
<span matPrefix *ngIf="!value && !focused"><mat-icon fontSet="material-symbols-outlined">manage_search</mat-icon></span>
|
|
14083
|
-
<button type="button" matSuffix mat-icon-button aria-label="Clear" *ngIf="value" (click)="$event.stopPropagation(); clearSearch()">
|
|
14084
|
-
<mat-icon fontSet="material-symbols-outlined">close</mat-icon>
|
|
14085
|
-
</button>
|
|
14086
|
-
</mat-form-field>`, isInline: true, styles: [".mdc-icon-button{padding:3px;width:30px;height:30px}.mdc-icon-button mat-icon{line-height:1.125;font-size:.8em}mat-icon{opacity:.6}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
|
|
14079
|
+
], viewQueries: [{ propertyName: "_filter", first: true, predicate: ["filterElement"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n <input matInput #filterElement ngControl=\"filterElement\" autocomplete=\"off\" type=\"input\" [(ngModel)]=\"value\" (search)=\"$event.stopPropagation();\" (keyup.enter)=\"handleSearch($event)\" />\r\n <span matPrefix *ngIf=\"!value && !focused\"><mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon></span>\r\n <button type=\"button\" matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"value\" (click)=\"$event.stopPropagation(); clearSearch()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </button>\r\n</mat-form-field>", styles: ["mat-icon{opacity:.6}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
|
|
14087
14080
|
}
|
|
14088
14081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterInputComponent, decorators: [{
|
|
14089
14082
|
type: Component,
|
|
14090
|
-
args: [{ selector: 'mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]',
|
|
14091
|
-
<mat-form-field [ngClass]="{'filter-not-empty': value}" flex>
|
|
14092
|
-
<input matInput #filterElement ngControl="filterElement" autocomplete="off" type="input" [(ngModel)]="value" (search)="$event.stopPropagation();" (keyup.enter)="handleSearch($event)"/>
|
|
14093
|
-
<span matPrefix *ngIf="!value && !focused"><mat-icon fontSet="material-symbols-outlined">manage_search</mat-icon></span>
|
|
14094
|
-
<button type="button" matSuffix mat-icon-button aria-label="Clear" *ngIf="value" (click)="$event.stopPropagation(); clearSearch()">
|
|
14095
|
-
<mat-icon fontSet="material-symbols-outlined">close</mat-icon>
|
|
14096
|
-
</button>
|
|
14097
|
-
</mat-form-field>`, providers: [
|
|
14083
|
+
args: [{ selector: 'mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]', providers: [
|
|
14098
14084
|
{
|
|
14099
14085
|
provide: NG_VALUE_ACCESSOR,
|
|
14100
14086
|
useExisting: forwardRef((() => FilterInputComponent)),
|
|
14101
14087
|
multi: true
|
|
14102
14088
|
}
|
|
14103
|
-
],
|
|
14089
|
+
], template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n <input matInput #filterElement ngControl=\"filterElement\" autocomplete=\"off\" type=\"input\" [(ngModel)]=\"value\" (search)=\"$event.stopPropagation();\" (keyup.enter)=\"handleSearch($event)\" />\r\n <span matPrefix *ngIf=\"!value && !focused\"><mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon></span>\r\n <button type=\"button\" matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"value\" (click)=\"$event.stopPropagation(); clearSearch()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </button>\r\n</mat-form-field>", styles: ["mat-icon{opacity:.6}\n"] }]
|
|
14104
14090
|
}], ctorParameters: () => [{ type: i1$4.MatTable }, { type: i2$3.CdkColumnDef }], propDecorators: { _filter: [{
|
|
14105
14091
|
type: ViewChild,
|
|
14106
14092
|
args: ['filterElement', { static: true }]
|
|
@@ -14412,7 +14398,7 @@ class FilterSelectComponent {
|
|
|
14412
14398
|
provide: MAT_SELECT_CONFIG,
|
|
14413
14399
|
useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
|
|
14414
14400
|
}
|
|
14415
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdFilterOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<mat-form-field [ngClass]=\"{'filter-not-empty': value}\" flex>\r\n <span matPrefix *ngIf=\"!value && value!=0 && !focused\" (click)=\"$event.stopPropagation();select.open()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n </span>\r\n <mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex #select>\r\n <mat-form-field *ngIf=\"filterable\" appearance=\"fill\" subscriptSizing=\"dynamic\" flex>\r\n <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (click)=\"$event.stopPropagation();\" (keyup)=\"handleFilter($event)\" flex>\r\n <mat-icon *ngIf=\"filterInput?.value\" (click)=\"$event.stopPropagation(); filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </mat-form-field>\r\n <mat-option *ngIf=\"!multiple\" class=\"tc-grey-500\" (click)=\"$event.stopPropagation();\"></mat-option>\r\n <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n <mat-option [value]=\"option[key]\" (click)=\"$event.stopPropagation();\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option.name, select, option {option} other {{{option[text]}}}}</span>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n</mat-form-field>", styles: [".mat-mdc-form-field mat-icon{opacity:.7}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i5$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
|
|
14401
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: VdFilterOptionDirective, descendants: true }], viewQueries: [{ propertyName: "selectEl", first: true, predicate: MatSelect, descendants: true }, { propertyName: "filterInput", first: true, predicate: ["filterInput"], descendants: true }], ngImport: i0, template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n <span matPrefix *ngIf=\"!value && value!=0 && !focused\" (click)=\"$event.stopPropagation();select.open()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n </span>\r\n <mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex #select>\r\n <mat-form-field *ngIf=\"filterable\" appearance=\"fill\" subscriptSizing=\"dynamic\" dense-3 flex>\r\n <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (click)=\"$event.stopPropagation();\" (keyup)=\"handleFilter($event)\" flex>\r\n <mat-icon *ngIf=\"filterInput?.value\" (click)=\"$event.stopPropagation(); filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </mat-form-field>\r\n <mat-option *ngIf=\"!multiple\" class=\"tc-grey-500\" (click)=\"$event.stopPropagation();\"></mat-option>\r\n <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n <mat-option [value]=\"option[key]\" (click)=\"$event.stopPropagation();\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option.name, select, option {option} other {{{option[text]}}}}</span>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n</mat-form-field>", styles: [".mat-mdc-form-field mat-icon{opacity:.7}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: i5$4.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
|
|
14416
14402
|
}
|
|
14417
14403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterSelectComponent, decorators: [{
|
|
14418
14404
|
type: Component,
|
|
@@ -14426,7 +14412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
14426
14412
|
provide: MAT_SELECT_CONFIG,
|
|
14427
14413
|
useValue: { overlayPanelClass: 'vd-select-filter-overlay' }
|
|
14428
14414
|
}
|
|
14429
|
-
], template: "<mat-form-field [ngClass]=\"{'filter-not-empty': value}\" flex>\r\n <span matPrefix *ngIf=\"!value && value!=0 && !focused\" (click)=\"$event.stopPropagation();select.open()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n </span>\r\n <mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex #select>\r\n <mat-form-field *ngIf=\"filterable\" appearance=\"fill\" subscriptSizing=\"dynamic\" flex>\r\n <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (click)=\"$event.stopPropagation();\" (keyup)=\"handleFilter($event)\" flex>\r\n <mat-icon *ngIf=\"filterInput?.value\" (click)=\"$event.stopPropagation(); filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </mat-form-field>\r\n <mat-option *ngIf=\"!multiple\" class=\"tc-grey-500\" (click)=\"$event.stopPropagation();\"></mat-option>\r\n <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n <mat-option [value]=\"option[key]\" (click)=\"$event.stopPropagation();\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option.name, select, option {option} other {{{option[text]}}}}</span>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n</mat-form-field>", styles: [".mat-mdc-form-field mat-icon{opacity:.7}\n"] }]
|
|
14415
|
+
], template: "<mat-form-field subscriptSizing=\"dynamic\" [ngClass]=\"{'filter-not-empty': value}\" dense-3 flex>\r\n <span matPrefix *ngIf=\"!value && value!=0 && !focused\" (click)=\"$event.stopPropagation();select.open()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n </span>\r\n <mat-select type=\"input\" [(ngModel)]=\"value\" [multiple]=\"multiple\" flex #select>\r\n <mat-form-field *ngIf=\"filterable\" appearance=\"fill\" subscriptSizing=\"dynamic\" dense-3 flex>\r\n <input matInput #filterInput type=\"text\" placeholder=\"Filter...\" class=\"vd-select-filter\" (click)=\"$event.stopPropagation();\" (keyup)=\"handleFilter($event)\" flex>\r\n <mat-icon *ngIf=\"filterInput?.value\" (click)=\"$event.stopPropagation(); filterInput!.value = ''; handleFilter($event);\" fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </mat-form-field>\r\n <mat-option *ngIf=\"!multiple\" class=\"tc-grey-500\" (click)=\"$event.stopPropagation();\"></mat-option>\r\n <ng-template let-option let-first=\"first\" ngFor [ngForOf]=\"filteredOptions\">\r\n <mat-option [value]=\"option[key]\" (click)=\"$event.stopPropagation();\">\r\n <span *ngIf=\"!optionTemplate?.templateRef\" i18n=\"@@selection\">{option.name, select, option {option} other {{{option[text]}}}}</span>\r\n <ng-template *ngIf=\"optionTemplate?.templateRef\" [ngTemplateOutlet]=\"optionTemplate!.templateRef\" [ngTemplateOutletContext]=\"{ option: option }\"></ng-template>\r\n </mat-option>\r\n </ng-template>\r\n </mat-select>\r\n</mat-form-field>", styles: [".mat-mdc-form-field mat-icon{opacity:.7}\n"] }]
|
|
14430
14416
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1$4.MatTable }, { type: i2$3.CdkColumnDef }], propDecorators: { optionTemplate: [{
|
|
14431
14417
|
type: ContentChild,
|
|
14432
14418
|
args: [VdFilterOptionDirective]
|
|
@@ -14763,20 +14749,11 @@ class FilterClearComponent {
|
|
|
14763
14749
|
}
|
|
14764
14750
|
}
|
|
14765
14751
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterClearComponent, deps: [{ token: i1$4.MatTable }], target: i0.ɵɵFactoryTarget.Component });
|
|
14766
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]", ngImport: i0, template:
|
|
14767
|
-
<button type="button" mat-icon-button (click)="clear()">
|
|
14768
|
-
<mat-icon fontSet="material-symbols-outlined">backspace</mat-icon>
|
|
14769
|
-
</button>`, isInline: true, dependencies: [{ kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
14752
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]", ngImport: i0, template: "<button type=\"button\" mat-icon-button (click)=\"clear()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">backspace</mat-icon>\r\n</button>", dependencies: [{ kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
14770
14753
|
}
|
|
14771
14754
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterClearComponent, decorators: [{
|
|
14772
14755
|
type: Component,
|
|
14773
|
-
args: [{
|
|
14774
|
-
selector: 'mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]',
|
|
14775
|
-
template: `
|
|
14776
|
-
<button type="button" mat-icon-button (click)="clear()">
|
|
14777
|
-
<mat-icon fontSet="material-symbols-outlined">backspace</mat-icon>
|
|
14778
|
-
</button>`,
|
|
14779
|
-
}]
|
|
14756
|
+
args: [{ selector: 'mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]', template: "<button type=\"button\" mat-icon-button (click)=\"clear()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">backspace</mat-icon>\r\n</button>" }]
|
|
14780
14757
|
}], ctorParameters: () => [{ type: i1$4.MatTable }] });
|
|
14781
14758
|
|
|
14782
14759
|
class FilterDateComponent {
|
|
@@ -14884,37 +14861,17 @@ class FilterDateComponent {
|
|
|
14884
14861
|
useExisting: forwardRef((() => FilterDateComponent)),
|
|
14885
14862
|
multi: true
|
|
14886
14863
|
}
|
|
14887
|
-
], ngImport: i0, template:
|
|
14888
|
-
<mat-form-field flex>
|
|
14889
|
-
<input matInput [matDatepicker]="picker" [ngModel]="value" (ngModelChange)="handleSearch($event)" (click)="$event.stopPropagation();picker.open()" (search)="handleSearch($event)" (keyup.enter)="handleSearch($event)" readonly>
|
|
14890
|
-
<span matPrefix *ngIf="!value && !focused" (click)="$event.stopPropagation();picker.open()">
|
|
14891
|
-
<mat-icon fontSet="material-symbols-outlined">manage_search</mat-icon>
|
|
14892
|
-
</span>
|
|
14893
|
-
<button type="button" mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="value" (click)="$event.stopPropagation();clearSearch()">
|
|
14894
|
-
<mat-icon fontSet="material-symbols-outlined">close</mat-icon>
|
|
14895
|
-
</button>
|
|
14896
|
-
<mat-datepicker #picker></mat-datepicker>
|
|
14897
|
-
</mat-form-field>`, isInline: true, styles: [".mdc-icon-button{padding:3px;width:30px;height:30px}.mdc-icon-button mat-icon{line-height:1.125;font-size:.8em}mat-icon{opacity:.7}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i21.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i21.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }] });
|
|
14864
|
+
], ngImport: i0, template: "<mat-form-field subscriptSizing=\"dynamic\" dense-3 flex>\r\n <input matInput [matDatepicker]=\"picker\" [ngModel]=\"value\" (ngModelChange)=\"handleSearch($event)\" (click)=\"$event.stopPropagation();picker.open()\" (search)=\"handleSearch($event)\" (keyup.enter)=\"handleSearch($event)\" readonly>\r\n <span matPrefix *ngIf=\"!value && !focused\" (click)=\"$event.stopPropagation();picker.open()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n </span>\r\n <button type=\"button\" mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"value\" (click)=\"$event.stopPropagation();clearSearch()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </button>\r\n <mat-datepicker #picker></mat-datepicker>\r\n</mat-form-field>", styles: ["mat-icon{opacity:.7}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i21.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i21.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }] });
|
|
14898
14865
|
}
|
|
14899
14866
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FilterDateComponent, decorators: [{
|
|
14900
14867
|
type: Component,
|
|
14901
|
-
args: [{ selector: 'mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]',
|
|
14902
|
-
<mat-form-field flex>
|
|
14903
|
-
<input matInput [matDatepicker]="picker" [ngModel]="value" (ngModelChange)="handleSearch($event)" (click)="$event.stopPropagation();picker.open()" (search)="handleSearch($event)" (keyup.enter)="handleSearch($event)" readonly>
|
|
14904
|
-
<span matPrefix *ngIf="!value && !focused" (click)="$event.stopPropagation();picker.open()">
|
|
14905
|
-
<mat-icon fontSet="material-symbols-outlined">manage_search</mat-icon>
|
|
14906
|
-
</span>
|
|
14907
|
-
<button type="button" mat-button matSuffix mat-icon-button aria-label="Clear" *ngIf="value" (click)="$event.stopPropagation();clearSearch()">
|
|
14908
|
-
<mat-icon fontSet="material-symbols-outlined">close</mat-icon>
|
|
14909
|
-
</button>
|
|
14910
|
-
<mat-datepicker #picker></mat-datepicker>
|
|
14911
|
-
</mat-form-field>`, providers: [
|
|
14868
|
+
args: [{ selector: 'mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]', providers: [
|
|
14912
14869
|
{
|
|
14913
14870
|
provide: NG_VALUE_ACCESSOR,
|
|
14914
14871
|
useExisting: forwardRef((() => FilterDateComponent)),
|
|
14915
14872
|
multi: true
|
|
14916
14873
|
}
|
|
14917
|
-
],
|
|
14874
|
+
], template: "<mat-form-field subscriptSizing=\"dynamic\" dense-3 flex>\r\n <input matInput [matDatepicker]=\"picker\" [ngModel]=\"value\" (ngModelChange)=\"handleSearch($event)\" (click)=\"$event.stopPropagation();picker.open()\" (search)=\"handleSearch($event)\" (keyup.enter)=\"handleSearch($event)\" readonly>\r\n <span matPrefix *ngIf=\"!value && !focused\" (click)=\"$event.stopPropagation();picker.open()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">manage_search</mat-icon>\r\n </span>\r\n <button type=\"button\" mat-button matSuffix mat-icon-button aria-label=\"Clear\" *ngIf=\"value\" (click)=\"$event.stopPropagation();clearSearch()\">\r\n <mat-icon fontSet=\"material-symbols-outlined\">close</mat-icon>\r\n </button>\r\n <mat-datepicker #picker></mat-datepicker>\r\n</mat-form-field>", styles: ["mat-icon{opacity:.7}\n"] }]
|
|
14918
14875
|
}], ctorParameters: () => [{ type: i1$4.MatTable }, { type: i2$3.CdkColumnDef }], propDecorators: { field: [{
|
|
14919
14876
|
type: Input
|
|
14920
14877
|
}], debounce: [{
|
|
@@ -15631,7 +15588,7 @@ class VdDynamicTableComponent {
|
|
|
15631
15588
|
this.changeDetector.detectChanges();
|
|
15632
15589
|
}
|
|
15633
15590
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VdDynamicTableComponent, deps: [{ token: DynamicBuilder }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
15634
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n\t<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async; trackBy:columnsTrackBy\">\r\n\t\t\t<!-- #region Column def -->\r\n\t\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t\t<ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n\t\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\" [matTooltip]=\"headerText\">{{headerText}}</span>\r\n\t\t\t\t\t</th>\r\n\t\t\t\t</ng-template>\r\n\t\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t\t<ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n\t\t\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t\t\t<!-- #region Checkbox column -->\r\n\t\t\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.enumMetadata; else noEnumMetadata\">\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.multiple; else elseTemplate\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngFor=\"let item of rowValue; let i = index\">\r\n\t\t\t\t\t\t\t\t\t\t\t<ng-template [ngIf]=\"i < 2\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n\t\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t\t\t<small *ngIf=\"i === 1 && rowValue?.length > 2\" [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<ng-template #template let-displayValue=\"displayValue\">\r\n\t\t\t\t\t\t\t\t\t\t\t<mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ displayValue }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</mat-chip-row>\r\n\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<ng-template #elseTemplate>\r\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"rowValue >= 0\" class=\"na\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-template #noEnumMetadata>\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.multiple; else elseTemplate\">\r\n\t\t\t\t\t\t\t\t\t\t<div *ngFor=\"let item of rowValue; let i = index; let last = last\">\r\n\t\t\t\t\t\t\t\t\t\t\t<small *ngIf=\"i<2\" i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small><small *ngIf=\"i==1 && rowValue?.length > 2\">, ...</small>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<ng-template #elseTemplate>\r\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"rowValue >= 0\" i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\r\n\t\t\t\t\t\t\t\t\t<!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!columnNameSegments.length; else notLastSegment\">\r\n\t\t\t\t\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t\t\t\t\t<mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t\t<input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.Select\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t\t<vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<ng-template #notLastSegment>\r\n\t\t\t\t\t\t\t\t\t\t<!-- If not the last segment, create a nested form group -->\r\n\t\t\t\t\t\t\t\t\t\t<ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n\t\t\t\t\t\t\t\t\t\t\t<!-- Recursive call to handle nested segments -->\r\n\t\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\r\n\t\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!formArray\">\r\n\t\t\t\t\t\t\t\t\t<mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.TextInput\">\r\n\t\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t<input matInput *ngIf=\"!formArray\" type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Select\">\r\n\t\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t<vd-select *ngIf=\"!formArray\" name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t\t\t\t<vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region icon -->\r\n\t\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Icon\" layout=\"row\" layout-align=\"start center\">\r\n\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.matIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\r\n\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.svgIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\r\n\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.fontIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region icon button -->\r\n\t\t\t\t\t\t\t<a mat-icon-button *ngSwitchCase=\"ColumnType.IconButton\" (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\r\n\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"rowValue??''\"></span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t</td>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\t\t</ng-container>\r\n\r\n\t\t<!-- #region Filter row -->\r\n\t\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n\t\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t\t<span *ngIf=\"(column.endpoint || column.enumType || column.options) else notSelectFilter\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t\t<ng-template #notSelectFilter>\r\n\t\t\t\t\t\t\t<span *ngIf=\"notSelectFilter && (column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) else notInputFilter\" filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t\t<ng-template #notInputFilter>\r\n\t\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date else notDateFilter\" filter-date></span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t\t<ng-template #notDateFilter>\r\n\t\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t</th>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Details column -->\r\n\t\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t\t<td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n\t\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n\t\t\t\t\t<ng-container *ngIf=\"templateRef && row === expandedRow\">\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</div>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Filter header -->\r\n\t\t<ng-container *ngIf=\"filterable\">\r\n\t\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t\t<!-- #region Detrails row -->\r\n\t\t<ng-container *ngIf=\"detailsTemplate || templateRef\">\r\n\t\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</table>\r\n</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n<code *ngIf=\"debugValue\">\r\n\t<pre>{{formValue | json}}</pre>\r\n</code>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media (max-width: 389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$1.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i15.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i18.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i19.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i24.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enumFilter", "enum", "enumMetadata", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "directive", type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: EnumPipe, name: "enum" }, { kind: "pipe", type: FormGroupPipe, name: "formGroup" }, { kind: "pipe", type: FuncPipe, name: "func" }, { kind: "pipe", type: PropertyPipe, name: "property" }, { kind: "pipe", type: JoinPipe, name: "join" }, { kind: "pipe", type: MapPipe, name: "map" }], animations: [
|
|
15591
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: { dataSource: "dataSource", data: "data", formArray: "formArray", debugValue: "debugValue", classType: "classType", context: "context", dataSourceFilter: "dataSourceFilter", static: "static", filterable: "filterable", sticky: "sticky", tableWidth: "tableWidth", useFilterOperator: "useFilterOperator", paginable: "paginable", selectable: "selectable", sortActive: "sortActive", sortDirection: "sortDirection", stickyHeader: "stickyHeader", stickyFilter: "stickyFilter", columnSets: "columnSets", rowNgClass: "rowNgClass", detailsTemplate: "detailsTemplate", readonly: "readonly", selectAllFilter: "selectAllFilter", columns: "columns", rowMenuItems: "rowMenuItems", rowAction: "rowAction", excludedColumns: "excludedColumns", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { rowClick: "rowClick" }, queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, static: true }, { propertyName: "detailsTemplateRef", predicate: ["detailsTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "rowContextMenuTriggers", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n\t<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async; trackBy:columnsTrackBy\">\r\n\t\t\t<!-- #region Column def -->\r\n\t\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t\t<ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n\t\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\" [matTooltip]=\"headerText\">{{headerText}}</span>\r\n\t\t\t\t\t</th>\r\n\t\t\t\t</ng-template>\r\n\t\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t\t<ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n\t\t\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t\t\t<!-- #region Checkbox column -->\r\n\t\t\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.enumMetadata; else noEnumMetadata\">\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.multiple; else elseTemplate\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngFor=\"let item of rowValue; let i = index\">\r\n\t\t\t\t\t\t\t\t\t\t\t<ng-template [ngIf]=\"i < 2\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n\t\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t\t\t<small *ngIf=\"i === 1 && rowValue?.length > 2\" [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<ng-template #template let-displayValue=\"displayValue\">\r\n\t\t\t\t\t\t\t\t\t\t\t<mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ displayValue }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</mat-chip-row>\r\n\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<ng-template #elseTemplate>\r\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"rowValue >= 0\" class=\"na\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-template #noEnumMetadata>\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.multiple; else elseTemplate\">\r\n\t\t\t\t\t\t\t\t\t\t<div *ngFor=\"let item of rowValue; let i = index; let last = last\">\r\n\t\t\t\t\t\t\t\t\t\t\t<small *ngIf=\"i<2\" i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small><small *ngIf=\"i==1 && rowValue?.length > 2\">, ...</small>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<ng-template #elseTemplate>\r\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"rowValue >= 0\" i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\r\n\t\t\t\t\t\t\t\t\t<!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!columnNameSegments.length; else notLastSegment\">\r\n\t\t\t\t\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t\t\t\t\t<mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t\t<input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.Select\" appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t\t<vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<ng-template #notLastSegment>\r\n\t\t\t\t\t\t\t\t\t\t<!-- If not the last segment, create a nested form group -->\r\n\t\t\t\t\t\t\t\t\t\t<ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n\t\t\t\t\t\t\t\t\t\t\t<!-- Recursive call to handle nested segments -->\r\n\t\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\r\n\t\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!formArray\">\r\n\t\t\t\t\t\t\t\t\t<mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.TextInput\">\r\n\t\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t<input matInput *ngIf=\"!formArray\" type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Select\">\r\n\t\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t<vd-select *ngIf=\"!formArray\" name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t\t\t\t<vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region icon -->\r\n\t\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Icon\" layout=\"row\" layout-align=\"start center\">\r\n\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.matIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\r\n\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.svgIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\r\n\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.fontIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region icon button -->\r\n\t\t\t\t\t\t\t<a mat-icon-button *ngSwitchCase=\"ColumnType.IconButton\" (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\r\n\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"rowValue??''\"></span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t</td>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\t\t</ng-container>\r\n\r\n\t\t<!-- #region Filter row -->\r\n\t\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n\t\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t\t<span *ngIf=\"(column.endpoint || column.enumType || column.options) else notSelectFilter\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t\t<ng-template #notSelectFilter>\r\n\t\t\t\t\t\t\t<span *ngIf=\"notSelectFilter && (column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) else notInputFilter\" filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t\t<ng-template #notInputFilter>\r\n\t\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date else notDateFilter\" filter-date></span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t\t<ng-template #notDateFilter>\r\n\t\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t</th>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Details column -->\r\n\t\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t\t<td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n\t\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n\t\t\t\t\t<ng-container *ngIf=\"templateRef && row === expandedRow\">\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</div>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Filter header -->\r\n\t\t<ng-container *ngIf=\"filterable\">\r\n\t\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t\t<!-- #region Detrails row -->\r\n\t\t<ng-container *ngIf=\"detailsTemplate || templateRef\">\r\n\t\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</table>\r\n</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n<code *ngIf=\"debugValue\">\r\n\t<pre>{{formValue | json}}</pre>\r\n</code>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media (max-width: 389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: VdDynamicMenuComponent, selector: "vd-dynamic-menu", inputs: ["items", "data", "index", "context", "contextMenu"] }, { kind: "directive", type: DisableControlDirective, selector: "[disableControl]", inputs: ["disableControl"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]", inputs: ["onlyNumber"] }, { kind: "component", type: VdSelectComponent, selector: "vd-select", inputs: ["triggerCssClass", "triggerMode"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$1.MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: i2$3.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2$3.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2$3.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2$3.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: i2$3.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: i15.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i18.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i19.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i24.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: FilterInputComponent, selector: "mat-header-cell[filter-input], [mat-header-cell][filter-input], [filter-input]", inputs: ["field", "operator", "onlyNumber", "debounce", "placeholder"] }, { kind: "component", type: FilterSelectComponent, selector: "mat-header-cell[filter-select], [mat-header-cell][filter-select], [filter-select]", inputs: ["endpoint", "params", "projection", "sortBy", "sorted", "enumFilter", "enum", "enumMetadata", "key", "text", "prefix", "multiple", "options", "filteredOptions", "filterable", "field", "placeholder", "cache"] }, { kind: "component", type: FilterClearComponent, selector: "mat-header-cell[filter-clear], [mat-header-cell][filter-clear], [filter-clear]" }, { kind: "component", type: FilterDateComponent, selector: "mat-header-cell[filter-date], [mat-header-cell][filter-date], [filter-date]", inputs: ["field", "debounce", "placeholder"] }, { kind: "directive", type: DataSourceFilterDirective, selector: "[dataSourceFilter]", inputs: ["dataSource", "dataSourceFilter"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.JsonPipe, name: "json" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: EnumPipe, name: "enum" }, { kind: "pipe", type: FormGroupPipe, name: "formGroup" }, { kind: "pipe", type: FuncPipe, name: "func" }, { kind: "pipe", type: PropertyPipe, name: "property" }, { kind: "pipe", type: JoinPipe, name: "join" }, { kind: "pipe", type: MapPipe, name: "map" }], animations: [
|
|
15635
15592
|
trigger('detailExpand', [
|
|
15636
15593
|
state('collapsed', style({ height: '0px', minHeight: '0' })),
|
|
15637
15594
|
state('expanded', style({ height: AUTO_STYLE })),
|
|
@@ -15647,7 +15604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
15647
15604
|
state('expanded', style({ height: AUTO_STYLE })),
|
|
15648
15605
|
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
15649
15606
|
]),
|
|
15650
|
-
], template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n\t<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async; trackBy:columnsTrackBy\">\r\n\t\t\t<!-- #region Column def -->\r\n\t\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t\t<ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n\t\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\" [matTooltip]=\"headerText\">{{headerText}}</span>\r\n\t\t\t\t\t</th>\r\n\t\t\t\t</ng-template>\r\n\t\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t\t<ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n\t\t\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t\t\t<!-- #region Checkbox column -->\r\n\t\t\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.enumMetadata; else noEnumMetadata\">\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.multiple; else elseTemplate\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngFor=\"let item of rowValue; let i = index\">\r\n\t\t\t\t\t\t\t\t\t\t\t<ng-template [ngIf]=\"i < 2\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n\t\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t\t\t<small *ngIf=\"i === 1 && rowValue?.length > 2\" [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<ng-template #template let-displayValue=\"displayValue\">\r\n\t\t\t\t\t\t\t\t\t\t\t<mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ displayValue }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</mat-chip-row>\r\n\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<ng-template #elseTemplate>\r\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"rowValue >= 0\" class=\"na\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-template #noEnumMetadata>\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.multiple; else elseTemplate\">\r\n\t\t\t\t\t\t\t\t\t\t<div *ngFor=\"let item of rowValue; let i = index; let last = last\">\r\n\t\t\t\t\t\t\t\t\t\t\t<small *ngIf=\"i<2\" i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small><small *ngIf=\"i==1 && rowValue?.length > 2\">, ...</small>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<ng-template #elseTemplate>\r\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"rowValue >= 0\" i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\r\n\t\t\t\t\t\t\t\t\t<!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!columnNameSegments.length; else notLastSegment\">\r\n\t\t\t\t\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t\t\t\t\t<mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t\t<input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.Select\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t\t<vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<ng-template #notLastSegment>\r\n\t\t\t\t\t\t\t\t\t\t<!-- If not the last segment, create a nested form group -->\r\n\t\t\t\t\t\t\t\t\t\t<ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n\t\t\t\t\t\t\t\t\t\t\t<!-- Recursive call to handle nested segments -->\r\n\t\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\r\n\t\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!formArray\">\r\n\t\t\t\t\t\t\t\t\t<mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.TextInput\">\r\n\t\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t<input matInput *ngIf=\"!formArray\" type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Select\">\r\n\t\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t<vd-select *ngIf=\"!formArray\" name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t\t\t\t<vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region icon -->\r\n\t\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Icon\" layout=\"row\" layout-align=\"start center\">\r\n\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.matIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\r\n\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.svgIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\r\n\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.fontIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region icon button -->\r\n\t\t\t\t\t\t\t<a mat-icon-button *ngSwitchCase=\"ColumnType.IconButton\" (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\r\n\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"rowValue??''\"></span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t</td>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\t\t</ng-container>\r\n\r\n\t\t<!-- #region Filter row -->\r\n\t\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n\t\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t\t<span *ngIf=\"(column.endpoint || column.enumType || column.options) else notSelectFilter\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t\t<ng-template #notSelectFilter>\r\n\t\t\t\t\t\t\t<span *ngIf=\"notSelectFilter && (column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) else notInputFilter\" filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t\t<ng-template #notInputFilter>\r\n\t\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date else notDateFilter\" filter-date></span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t\t<ng-template #notDateFilter>\r\n\t\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t</th>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Details column -->\r\n\t\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t\t<td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n\t\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n\t\t\t\t\t<ng-container *ngIf=\"templateRef && row === expandedRow\">\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</div>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Filter header -->\r\n\t\t<ng-container *ngIf=\"filterable\">\r\n\t\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t\t<!-- #region Detrails row -->\r\n\t\t<ng-container *ngIf=\"detailsTemplate || templateRef\">\r\n\t\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</table>\r\n</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n<code *ngIf=\"debugValue\">\r\n\t<pre>{{formValue | json}}</pre>\r\n</code>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media (max-width: 389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"] }]
|
|
15607
|
+
], template: "<div class=\"loading-progress\" *ngIf=\"!static\">\r\n\t<mat-progress-bar mode=\"indeterminate\" *ngIf=\"dataSource?.isLoading\"></mat-progress-bar>\r\n</div>\r\n\r\n<!-- #region Data table -->\r\n<div class=\"mat-table-container scrollbar-secondary\" [ngClass]=\"{'mat-table-sticky': sticky}\" #scrollContainer>\r\n\t<table mat-table #table [dataSource]=\"dataSource\" [dataSourceFilter]=\"dataSourceFilter\" [ngClass]=\"{'table-fixed': !sticky && !detailsTemplate && !templateRef, 'table-stick': sticky}\" [trackBy]=\"trackBy\" matSort matSortDisableClear [matSortActive]=\"sortActive||'id'\" [matSortDirection]=\"sortDirection\" multiTemplateDataRows>\r\n\t\t<ng-container *ngFor=\"let column of columns$ | async; trackBy:columnsTrackBy\">\r\n\t\t\t<!-- #region Column def -->\r\n\t\t\t<ng-container [cdkColumnDef]=\"column.name\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t\t<ng-template #header [ngTemplateOutlet]=\"header\" let-headerText=\"headerText\" [ngTemplateOutletContext]=\"{headerText: column.header | func:context}\">\r\n\t\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [mat-sort-header]=\"column.sortBy || column.name\" [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [disabled]=\"column.type == ColumnType.Checkbox || column.disabled\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\" [arrowPosition]=\"column.arrowBefore?'before':'after'\">\r\n\t\t\t\t\t\t<mat-checkbox *ngIf=\"column.type == ColumnType.Checkbox\" (change)=\"$event ? dataSource.toggleSelect($event, selectAllFilter) : null\" [disabled]=\"!dataSource.paginator?.length\" [checked]=\"dataSource.selectionModel.hasValue() && dataSource.isAllSelected()\" [indeterminate]=\"dataSource.selectionModel.hasValue() && !dataSource.isAllSelected()\"></mat-checkbox>\r\n\t\t\t\t\t\t<span *ngIf=\"column.type != ColumnType.Checkbox\" [matTooltip]=\"headerText\">{{headerText}}</span>\r\n\t\t\t\t\t</th>\r\n\t\t\t\t</ng-template>\r\n\t\t\t\t<td mat-cell *cdkCellDef=\"let row; let rowIndex = dataIndex\" [matTooltip]=\"column.tooltip?column.tooltip(row, undefined, context):null\" [matTooltipClass]=\"column.tooltipClass??''\" [hidden]=\"column.hidden\" [ngClass]=\"getRowClasses(column, row)\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\">\r\n\t\t\t\t\t<ng-template #rowVal [ngTemplateOutlet]=\"rowVal\" let-rowValue [ngTemplateOutletContext]=\"{$implicit: column?.content && column?.content(row, undefined, context)}\">\r\n\t\t\t\t\t\t<ng-container [ngSwitch]=\"column.type\">\r\n\t\t\t\t\t\t\t<!-- #region Checkbox column -->\r\n\t\t\t\t\t\t\t<mat-checkbox *ngSwitchCase=\"ColumnType.Checkbox\" (click)=\"$event.stopPropagation()\" (change)=\"$event ? dataSource.selectionModel.toggle(row) : null\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [checked]=\"dataSource.selectionModel.isSelected(row)\"></mat-checkbox>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Enum column -->\r\n\t\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Enum\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.enumMetadata; else noEnumMetadata\">\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.multiple; else elseTemplate\">\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngFor=\"let item of rowValue; let i = index\">\r\n\t\t\t\t\t\t\t\t\t\t\t<ng-template [ngIf]=\"i < 2\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<ng-template let-displayValue=\"displayValue\" [ngTemplateOutlet]=\"template\" [ngTemplateOutletContext]=\"{ displayValue: column.enumMetadata[item].display }\"></ng-template>\r\n\t\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t\t\t<small *ngIf=\"i === 1 && rowValue?.length > 2\" [matTooltip]=\"(rowValue | slice:2 | map:column.enumMetadata | map:'display') | join:'\\n'\" matTooltipClass=\"mat-tooltip-multiline\">...</small>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<ng-template #template let-displayValue=\"displayValue\">\r\n\t\t\t\t\t\t\t\t\t\t\t<mat-chip-row disableRipple=\"true\" selectable=\"false\" [matTooltip]=\"displayValue\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{{ displayValue }}</span>\r\n\t\t\t\t\t\t\t\t\t\t\t</mat-chip-row>\r\n\t\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<ng-template #elseTemplate>\r\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"rowValue >= 0\" class=\"na\" [innerHtml]=\"(column.enumMetadata[rowValue]||{}).display\"></span>\r\n\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-template #noEnumMetadata>\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.multiple; else elseTemplate\">\r\n\t\t\t\t\t\t\t\t\t\t<div *ngFor=\"let item of rowValue; let i = index; let last = last\">\r\n\t\t\t\t\t\t\t\t\t\t\t<small *ngIf=\"i<2\" i18n=\"@@selection\">{item | enum:column.enumType:column.enumPrefix, select, type {type} other {{{item | enum:column.enumType:column.enumPrefix}}}}</small><small *ngIf=\"i==1 && rowValue?.length > 2\">, ...</small>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<ng-template #elseTemplate>\r\n\t\t\t\t\t\t\t\t\t\t<span *ngIf=\"rowValue >= 0\" i18n=\"@@selection\">{rowValue | enum:column.enumType:column.enumPrefix, select, type {type} other {{{rowValue | enum:column.enumType:column.enumPrefix}}}}</span>\r\n\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<ng-template #recursiveContainer let-columnNameSegments=\"segments\" let-formGroup=\"formGroup\" let-parentFormGroup=\"parentFormGroup\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\r\n\t\t\t\t\t\t\t\t\t<!-- If the columnNameSegments array is empty, we're at the leaf node -->\r\n\t\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!columnNameSegments.length; else notLastSegment\">\r\n\t\t\t\t\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t\t\t\t\t<mat-slide-toggle [formControl]=\"formGroup\" (click)=\"$event.stopPropagation();\" (change)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):handleModelChange(column, parentFormGroup.value, parentFormGroup)\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" color=\"accent\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.TextInput\" appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t\t<input matInput [formControl]=\"formGroup\" type=\"{{column.inputType}}\" autocomplete=\"none\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" [min]=\"column.inputMin?column.inputMin(parentFormGroup.value, parentFormGroup, context):null\" [max]=\"column.inputMax?column.inputMax(parentFormGroup.value, parentFormGroup, context):null\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t\t\t\t\t<mat-form-field *ngSwitchCase=\"ColumnType.Select\" appearance=\"outline\" subscriptSizing=\"dynamic\" dense-3 layout=\"column\" layout-align=\"center start\" (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t\t\t<vd-select [formControl]=\"formGroup\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:parentFormGroup.value:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [disableControl]=\"readonly || (column.disabled || (column.disable && column.disable(parentFormGroup.value, parentFormGroup, context)))\" (selectionChange)=\"column.change?column.change(parentFormGroup.value, parentFormGroup, context):patch(parentFormGroup.value, [column.name], rowValue, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t<ng-template #notLastSegment>\r\n\t\t\t\t\t\t\t\t\t\t<!-- If not the last segment, create a nested form group -->\r\n\t\t\t\t\t\t\t\t\t\t<ng-container [formGroupName]=\"columnNameSegments[0]\">\r\n\t\t\t\t\t\t\t\t\t\t\t<!-- Recursive call to handle nested segments -->\r\n\t\t\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: columnNameSegments.slice(1), parentFormGroup:formGroup, formGroup: formGroup.get(columnNameSegments[0])}\"></ng-container>\r\n\t\t\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-template>\r\n\r\n\t\t\t\t\t\t\t<!-- #region Toggle column -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Toggle\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"!formArray\">\r\n\t\t\t\t\t\t\t\t\t<mat-slide-toggle [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);handleModelChange(column, row, undefined);\" (click)=\"$event.stopPropagation();\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" color=\"accent\"></mat-slide-toggle>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Date column -->\r\n\t\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Date\">{{rowValue | date:column.shortDate?'dd.MM.yyyy':'dd.MM.yyyy HH:mm:ss'}}</span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Text Input column -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.TextInput\">\r\n\t\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t<input matInput *ngIf=\"!formArray\" type=\"{{column.inputType}}\" autocomplete=\"none\" name=\"{{column.name}}{{rowIndex}}\" [ngModel]=\"row | property:column.name\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" [min]=\"column.inputMin?column.inputMin(row, undefined, context):null\" [max]=\"column.inputMax?column.inputMax(row, undefined, context):null\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);(column.change?column.change(row, undefined, context):patch(row, [column.name], $event, column.patchIncludes));\" [ngModelOptions]=\"{updateOn: 'blur'}\" (keydown.enter)=\"handleKeydownEnter($event)\">\r\n\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region VD-Select column -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Select\">\r\n\t\t\t\t\t\t\t\t<mat-form-field *ngIf=\"!formArray\" appearance=\"outline\" layout=\"column\" layout-align=\"center start\" subscriptSizing=\"dynamic\" dense-3 (click)=\"$event.stopPropagation();\">\r\n\t\t\t\t\t\t\t\t\t<vd-select *ngIf=\"!formArray\" name=\"{{column.name}}{{rowIndex}}\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column?.enumFilter | func:row:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [defaultOption]=\"column.defaultOption??true\" [ngModel]=\"row | property:column.name\" (ngModelChange)=\"setNestedProperty(row, column.name, $event);\" [disabled]=\"readonly || (column.disabled || (column.disable && column.disable(row, undefined, context)))\" (change)=\"column.change?column.change(row, undefined, context):patch(row, [column.name], $event.value, column.patchIncludes)\" (keydown.enter)=\"handleKeydownEnter($event)\"></vd-select>\r\n\t\t\t\t\t\t\t\t</mat-form-field>\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"formArray\" [formGroup]=\"$any(formArray.controls)[rowIndex] | formGroup\">\r\n\t\t\t\t\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"recursiveContainer\" [ngTemplateOutletContext]=\"{segments: column.name.split('.'), formGroup: formArray.controls[rowIndex]}\"></ng-container>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Action -->\r\n\t\t\t\t\t\t\t<ng-container *ngSwitchCase=\"ColumnType.Action\">\r\n\t\t\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t\t\t<div id=\"menu-{{row.id}}\" style=\"visibility: hidden; position: fixed;\" #contextMenuTrigger=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu.matMenu!\" *ngIf=\"menu?.matMenu && !row.locked && hasVisibleRowMenuItems(row, column)\"></div>\r\n\t\t\t\t\t\t\t\t\t<vd-dynamic-menu [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\" #menu></vd-dynamic-menu>\r\n\t\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Menu -->\r\n\t\t\t\t\t\t\t<ng-container *ngIf=\"column.menu\">\r\n\t\t\t\t\t\t\t\t<vd-dynamic-menu *ngSwitchCase=\"ColumnType.Menu\" [items]=\"[column.menu]\" [data]=\"row\" [context]=\"context\"></vd-dynamic-menu>\r\n\t\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region icon -->\r\n\t\t\t\t\t\t\t<span *ngSwitchCase=\"ColumnType.Icon\" layout=\"row\" layout-align=\"start center\">\r\n\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.matIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\">{{handleExpression(column.icon?.matIcon!, row)}}</mat-icon>\r\n\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.svgIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [svgIcon]=\"handleExpression(column.icon?.svgIcon!, row)!\"></mat-icon>\r\n\t\t\t\t\t\t\t\t<mat-icon *ngIf=\"column.icon?.fontIcon\" fontSet=\"{{column.icon?.fontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.icon?.cssClass??'', row)\" [fontIcon]=\"handleExpression(column.icon?.fontIcon!, row)!\"></mat-icon>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region icon button -->\r\n\t\t\t\t\t\t\t<a mat-icon-button *ngSwitchCase=\"ColumnType.IconButton\" (click)=\"$event.stopPropagation();column.iconButton?.event?column.iconButton?.event(row, context):null\">\r\n\t\t\t\t\t\t\t\t<mat-icon fontSet=\"{{column.iconButton?.iconFontSet || 'material-symbols-outlined'}}\" [class]=\"handleExpression(column.iconButton?.iconClass??'', row)\">{{handleExpression(column.iconButton?.icon??'radio_button_checked', row) || 'radio_button_checked'}}</mat-icon>\r\n\t\t\t\t\t\t\t</a>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t\t<!-- #region Other column types -->\r\n\t\t\t\t\t\t\t<span *ngSwitchDefault [innerHtml]=\"rowValue??''\"></span>\r\n\t\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t\t</ng-container>\r\n\t\t\t\t\t</ng-template>\r\n\t\t\t\t</td>\r\n\t\t\t</ng-container>\r\n\t\t\t<!-- #endregion -->\r\n\t\t</ng-container>\r\n\r\n\t\t<!-- #region Filter row -->\r\n\t\t<ng-container *ngIf=\"dataSource && filterable\">\r\n\t\t\t<ng-container *ngFor=\"let column of columns$ | async\">\r\n\t\t\t\t<ng-container cdkColumnDef=\"filter.{{column.filter || column.name}}\" [sticky]=\"column.sticky\" [stickyEnd]=\"column.stickyEnd\">\r\n\t\t\t\t\t<th mat-header-cell *cdkHeaderCellDef [hidden]=\"column.hidden\" [ngStyle]=\"{maxWidth:column.maxWidth?(column.maxWidth+(column.maxWidthUnit || 'px')):null,minWidth:column.minWidth?(column.minWidth+(column.minWidthUnit || 'px')):null,width:column.width?(column.width+(column.widthUnit || 'px')):null}\" [ngClass]=\"{'gt-xs': column.display == Grid.Xs, 'gt-sm': column.display == Grid.Sm, 'gt-md': column.display == Grid.Md, 'gt-lg': column.display == Grid.Lg, 'gt-xl': column.display == Grid.Xl, 'gt-xxl': column.display == Grid.Xxl, 'hidden': column.display == Grid.None}\">\r\n\t\t\t\t\t\t<!-- #region Select filter -->\r\n\t\t\t\t\t\t<span *ngIf=\"(column.endpoint || column.enumType || column.options) else notSelectFilter\" filter-select [endpoint]=\"column.endpoint\" [enum]=\"column.enumType\" [enumMetadata]=\"column.enumMetadata\" [enumFilter]=\"column.enumFilter | func:{}:context\" [prefix]=\"column.enumPrefix\" [options]=\"column.options\" [text]=\"column.filterOptionText || 'name'\"></span>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Text filter -->\r\n\t\t\t\t\t\t<ng-template #notSelectFilter>\r\n\t\t\t\t\t\t\t<span *ngIf=\"notSelectFilter && (column.type == ColumnType.Text || column.type == ColumnType.TextInput || column.type == ColumnType.Number) else notInputFilter\" filter-input [onlyNumber]=\"column.filterInputNumber??false\" [operator]=\"!useFilterOperator ? undefined : column.filterOperator\"></span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Date filter -->\r\n\t\t\t\t\t\t<ng-template #notInputFilter>\r\n\t\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Date else notDateFilter\" filter-date></span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\r\n\t\t\t\t\t\t<!-- #region Action filter (clear) -->\r\n\t\t\t\t\t\t<ng-template #notDateFilter>\r\n\t\t\t\t\t\t\t<span *ngIf=\"column.type == ColumnType.Action\" filter-clear></span>\r\n\t\t\t\t\t\t</ng-template>\r\n\t\t\t\t\t\t<!-- #endregion -->\r\n\t\t\t\t\t</th>\r\n\t\t\t\t</ng-container>\r\n\t\t\t</ng-container>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Details column -->\r\n\t\t<ng-container cdkColumnDef=\"expandedDetail\">\r\n\t\t\t<td mat-cell *matCellDef=\"let row; let index = index\" [attr.colspan]=\"(displayedColumns$ | async)?.length\">\r\n\t\t\t\t<div class=\"row-detail\" [@detailExpand]=\"row == expandedRow ? 'expanded' : 'collapsed'\" #detailsTemplate>\r\n\t\t\t\t\t<ng-container *ngIf=\"templateRef && row === expandedRow\">\r\n\t\t\t\t\t\t<ng-container *ngTemplateOutlet=\"templateRef; context:{row: row, index: index, context: context}\"></ng-container>\r\n\t\t\t\t\t</ng-container>\r\n\t\t\t\t</div>\r\n\t\t\t</td>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<!-- #region Filter header -->\r\n\t\t<ng-container *ngIf=\"filterable\">\r\n\t\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedFilterColumns$ | async\"></tr>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\r\n\t\t<tr mat-header-row *cdkHeaderRowDef=\"displayedColumns$ | async; sticky: stickyFilter\"></tr>\r\n\t\t<tr mat-row *cdkRowDef=\"let row; columns: displayedColumns$ | async; let index = dataIndex\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\" [class.expanded-row]=\"expandedRow === row\" (click)=\"handleRowClick(index, row)\" (contextmenu)=\"handleRowRightClick($event, row)\"></tr>\r\n\r\n\t\t<!-- #region Detrails row -->\r\n\t\t<ng-container *ngIf=\"detailsTemplate || templateRef\">\r\n\t\t\t<tr mat-row *cdkRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\" [ngClass]=\"rowNgClass?rowNgClass(row, context):null\"></tr>\r\n\t\t</ng-container>\r\n\t\t<!-- #endregion -->\r\n\t</table>\r\n</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Row shown when there is no matching data.-->\r\n<div class=\"mat-cell pad table-empty txt-italic\" *ngIf=\"!dataSource?.filteredData?.length && !dataSource?.total\" i18n=\"@@noResultsFound\">No results were found.</div>\r\n<!-- #endregion -->\r\n\r\n<!-- #region Debug value -->\r\n<code *ngIf=\"debugValue\">\r\n\t<pre>{{formValue | json}}</pre>\r\n</code>\r\n<!-- #endregion -->\r\n\r\n<div class=\"table-footer\" layout=\"row\">\r\n\t<ng-content select=\"[table-footer]\"></ng-content>\r\n\t<span flex></span>\r\n\t<mat-paginator *ngIf=\"paginable\" [pageSize]=\"pageSize\" [pageSizeOptions]=\"pageSizeOptions\" showFirstLastButtons=\"true\"></mat-paginator>\r\n</div>", styles: ["::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-form-field .mat-form-field-wrapper{width:100%}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip{height:24px;margin-top:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip .mdc-evolution-chip__action--primary{padding-left:9px;padding-right:9px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip:last-child{margin-bottom:2px}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .mat-mdc-table .mat-mdc-row .mat-mdc-cell .mat-mdc-chip *{font-size:.8rem}@media (max-width: 389px){::ng-deep .mat-mdc-table [gt-xs],::ng-deep .mat-mdc-table .gt-xs{display:none}::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 599px){::ng-deep .mat-mdc-table [gt-sm],::ng-deep .mat-mdc-table .gt-sm{display:none}::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 959px){::ng-deep .mat-mdc-table [gt-md],::ng-deep .mat-mdc-table .gt-md{display:none}::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1279px){::ng-deep .mat-mdc-table [gt-lg],::ng-deep .mat-mdc-table .gt-lg{display:none}::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1919px){::ng-deep .mat-mdc-table [gt-xl],::ng-deep .mat-mdc-table .gt-xl{display:none}::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}@media (max-width: 1979px){::ng-deep .mat-mdc-table [gt-xxl],::ng-deep .mat-mdc-table .gt-xxl{display:none}}.mat-table-container{width:100%;max-width:100%;overflow:auto}.mat-table-container .mat-mdc-header-cell,.mat-table-container .mat-mdc-footer-cell,.mat-table-container .mat-mdc-cell{min-width:80px;box-sizing:border-box}.mat-table-container .mat-mdc-header-row,.mat-table-container .mat-mdc-footer-row,.mat-table-container .mat-mdc-row{min-width:1920px}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-right{box-shadow:-3px 0 5px #0000001a}.mat-table-container.mat-table-sticky .mat-mdc-table-sticky-border-elem-left{box-shadow:3px 0 5px #0000001a}\n"] }]
|
|
15651
15608
|
}], ctorParameters: () => [{ type: DynamicBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { table: [{
|
|
15652
15609
|
type: ViewChild,
|
|
15653
15610
|
args: ['table']
|
|
@@ -19257,11 +19214,11 @@ class VdDynamicTableConfigDialogComponent extends BaseComponent {
|
|
|
19257
19214
|
this.genericList?.updateColumns();
|
|
19258
19215
|
}
|
|
19259
19216
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VdDynamicTableConfigDialogComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: i0.ChangeDetectorRef }, { token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: RxFormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
19260
|
-
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: VdDynamicTableConfigDialogComponent, selector: "vd-dynamic-table-config-dialog", usesInheritance: true, ngImport: i0, template: "<div
|
|
19217
|
+
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: VdDynamicTableConfigDialogComponent, selector: "vd-dynamic-table-config-dialog", usesInheritance: true, ngImport: i0, template: "<!-- Title bar with close button -->\r\n<div cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" class=\"pad-right-sm push-none\" layout=\"row\" layout-align=\"space-between center\" cdkDragHandle>\r\n <!-- Container for title and close button -->\r\n <!-- <div layout=\"row\" layout-align=\"space-between center\"> -->\r\n <!-- Dialog title -->\r\n <span mat-dialog-title class=\"pad-left-sm push-left-sm\" i18n=\"@@tableConfiguration\" flex>Table configuration</span>\r\n\r\n <!-- Close button -->\r\n <button mat-icon-button (click)=\"dialogRef.close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <!-- </div> -->\r\n</div>\r\n\r\n<!-- Form section -->\r\n<mat-divider></mat-divider>\r\n<form *ngIf=\"configForm\" [formGroup]=\"configForm\" class=\"pad-xs\">\r\n <div layout-gt-sm=\"row\" layout=\"column\">\r\n <mat-checkbox formControlName=\"sticky\">\r\n <span i18n=\"@@sticky\">Sticky</span>\r\n <span class=\"description\" i18n=\"@@tableStickyDescription\"> - Select to make the table headers fixed during scrolling.</span>\r\n </mat-checkbox>\r\n <mat-form-field layout-margin flex *ngIf=\"false\">\r\n <mat-label i18n=\"@@tableWidth\">Table width</mat-label>\r\n <input matInput type=\"number\" formControlName=\"tableWidth\" />\r\n </mat-form-field>\r\n </div>\r\n</form>\r\n\r\n<!-- Table configuration with actions -->\r\n<vd-dynamic-table [data]=\"columns\" [classType]=\"tableColumnConfigClassType\" [filterable]=\"true\" [useFilterOperator]=\"false\" [pageSize]=\"10\" [context]=\"this\">\r\n <div table-footer layout-padding class=\"push-xs\">\r\n <a mat-flat-button color=\"primary\" (click)=\"save()\" i18n=\"@@save\">Save</a>\r\n <a mat-flat-button (click)=\"apply()\" i18n=\"@@apply\">Apply</a>\r\n <a mat-flat-button (click)=\"dialogRef.close()\" i18n=\"@@close\">Close</a>\r\n </div>\r\n</vd-dynamic-table>", styles: [".mat-mdc-dialog-title{cursor:move}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$5.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "component", type: VdDynamicTableComponent, selector: "vd-dynamic-table", inputs: ["dataSource", "data", "formArray", "debugValue", "classType", "context", "dataSourceFilter", "static", "filterable", "sticky", "tableWidth", "useFilterOperator", "paginable", "selectable", "sortActive", "sortDirection", "stickyHeader", "stickyFilter", "columnSets", "rowNgClass", "detailsTemplate", "readonly", "selectAllFilter", "columns", "rowMenuItems", "rowAction", "excludedColumns", "pageSize", "pageSizeOptions"], outputs: ["rowClick"] }, { kind: "component", type: i5$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i5$5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i16.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }] });
|
|
19261
19218
|
}
|
|
19262
19219
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: VdDynamicTableConfigDialogComponent, decorators: [{
|
|
19263
19220
|
type: Component,
|
|
19264
|
-
args: [{ selector: 'vd-dynamic-table-config-dialog', template: "<div
|
|
19221
|
+
args: [{ selector: 'vd-dynamic-table-config-dialog', template: "<!-- Title bar with close button -->\r\n<div cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" class=\"pad-right-sm push-none\" layout=\"row\" layout-align=\"space-between center\" cdkDragHandle>\r\n <!-- Container for title and close button -->\r\n <!-- <div layout=\"row\" layout-align=\"space-between center\"> -->\r\n <!-- Dialog title -->\r\n <span mat-dialog-title class=\"pad-left-sm push-left-sm\" i18n=\"@@tableConfiguration\" flex>Table configuration</span>\r\n\r\n <!-- Close button -->\r\n <button mat-icon-button (click)=\"dialogRef.close()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n <!-- </div> -->\r\n</div>\r\n\r\n<!-- Form section -->\r\n<mat-divider></mat-divider>\r\n<form *ngIf=\"configForm\" [formGroup]=\"configForm\" class=\"pad-xs\">\r\n <div layout-gt-sm=\"row\" layout=\"column\">\r\n <mat-checkbox formControlName=\"sticky\">\r\n <span i18n=\"@@sticky\">Sticky</span>\r\n <span class=\"description\" i18n=\"@@tableStickyDescription\"> - Select to make the table headers fixed during scrolling.</span>\r\n </mat-checkbox>\r\n <mat-form-field layout-margin flex *ngIf=\"false\">\r\n <mat-label i18n=\"@@tableWidth\">Table width</mat-label>\r\n <input matInput type=\"number\" formControlName=\"tableWidth\" />\r\n </mat-form-field>\r\n </div>\r\n</form>\r\n\r\n<!-- Table configuration with actions -->\r\n<vd-dynamic-table [data]=\"columns\" [classType]=\"tableColumnConfigClassType\" [filterable]=\"true\" [useFilterOperator]=\"false\" [pageSize]=\"10\" [context]=\"this\">\r\n <div table-footer layout-padding class=\"push-xs\">\r\n <a mat-flat-button color=\"primary\" (click)=\"save()\" i18n=\"@@save\">Save</a>\r\n <a mat-flat-button (click)=\"apply()\" i18n=\"@@apply\">Apply</a>\r\n <a mat-flat-button (click)=\"dialogRef.close()\" i18n=\"@@close\">Close</a>\r\n </div>\r\n</vd-dynamic-table>", styles: [".mat-mdc-dialog-title{cursor:move}\n"] }]
|
|
19265
19222
|
}], ctorParameters: () => [{ type: i1$2.ActivatedRoute }, { type: i0.ChangeDetectorRef }, { type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
|
|
19266
19223
|
type: Inject,
|
|
19267
19224
|
args: [MAT_DIALOG_DATA]
|
|
@@ -20702,7 +20659,8 @@ class GenericListComponent extends BaseComponent {
|
|
|
20702
20659
|
*/
|
|
20703
20660
|
openConfigDialog() {
|
|
20704
20661
|
this.dialog.open(VdDynamicTableConfigDialogComponent, {
|
|
20705
|
-
width: '
|
|
20662
|
+
width: '1080px',
|
|
20663
|
+
height: '830px',
|
|
20706
20664
|
data: this,
|
|
20707
20665
|
disableClose: true,
|
|
20708
20666
|
panelClass: ['flat-dialog', 'dialog-full-screen', 'dialog-resizable']
|
|
@@ -23712,9 +23670,13 @@ const DECLARATIONS$2 = [
|
|
|
23712
23670
|
class MaterialModule {
|
|
23713
23671
|
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
23714
23672
|
/** @nocollapse */ static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.7", ngImport: i0, type: MaterialModule, exports: [MatButtonModule,
|
|
23673
|
+
MatIconModule,
|
|
23674
|
+
MatDividerModule,
|
|
23715
23675
|
MatProgressBarModule,
|
|
23716
23676
|
DragDropModule] });
|
|
23717
23677
|
/** @nocollapse */ static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MaterialModule, imports: [MatButtonModule,
|
|
23678
|
+
MatIconModule,
|
|
23679
|
+
MatDividerModule,
|
|
23718
23680
|
MatProgressBarModule,
|
|
23719
23681
|
DragDropModule] });
|
|
23720
23682
|
}
|
|
@@ -23723,6 +23685,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
23723
23685
|
args: [{
|
|
23724
23686
|
exports: [
|
|
23725
23687
|
MatButtonModule,
|
|
23688
|
+
MatIconModule,
|
|
23689
|
+
MatDividerModule,
|
|
23726
23690
|
MatProgressBarModule,
|
|
23727
23691
|
DragDropModule
|
|
23728
23692
|
]
|