@cauca-911/datagrid 21.3.2 → 22.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +20 -20
- package/README.md +4 -4
- package/fesm2022/cauca-911-datagrid.mjs +472 -506
- package/fesm2022/cauca-911-datagrid.mjs.map +1 -1
- package/package.json +7 -6
- package/types/cauca-911-datagrid.d.ts +150 -145
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ViewChild, HostBinding,
|
|
2
|
+
import { input, ViewChild, HostBinding, Optional, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, output, Injectable, InjectionToken, linkedSignal, ContentChild, ContentChildren, Inject, QueryList, inject, effect, TemplateRef, EventEmitter, DestroyRef, makeEnvironmentProviders, provideAppInitializer, forwardRef, computed, model } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/table';
|
|
4
4
|
import { MatColumnDef, MatCellDef, MatHeaderCellDef, MatFooterCellDef, MatTable, MatHeaderRowDef, MatFooterRowDef, MatNoDataRow, MatRowDef, MatTableDataSource, MatHeaderCell, MatFooterCell, MatRow, MatHeaderRow, MatFooterRow, MatCell } from '@angular/material/table';
|
|
5
5
|
import { CDK_DRAG_CONFIG, moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
|
|
@@ -28,7 +28,7 @@ import { MatMenuModule } from '@angular/material/menu';
|
|
|
28
28
|
import { NgTemplateOutlet, NgStyle, NgClass, DatePipe } from '@angular/common';
|
|
29
29
|
import * as i1$5 from '@angular/material/progress-spinner';
|
|
30
30
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
31
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
31
|
+
import { outputToObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
32
32
|
import { Router, ActivatedRoute, NavigationEnd, RouterLink } from '@angular/router';
|
|
33
33
|
import { ODataDataSource } from 'odata-data-source';
|
|
34
34
|
import * as i1$6 from '@angular/common/http';
|
|
@@ -44,17 +44,24 @@ class DataGridRowDropEvent {
|
|
|
44
44
|
class BaseGridColumnComponent {
|
|
45
45
|
constructor(table) {
|
|
46
46
|
this.table = table;
|
|
47
|
-
this.prop = ''
|
|
48
|
-
|
|
49
|
-
this.
|
|
50
|
-
|
|
51
|
-
this.
|
|
47
|
+
this.prop = input('', /* @ts-ignore */
|
|
48
|
+
...(ngDevMode ? [{ debugName: "prop" }] : /* istanbul ignore next */ []));
|
|
49
|
+
this.showLabel = input(true, /* @ts-ignore */
|
|
50
|
+
...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
|
|
51
|
+
this.label = input(undefined, /* @ts-ignore */
|
|
52
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
53
|
+
this.isInColumnChooser = input(true, /* @ts-ignore */
|
|
54
|
+
...(ngDevMode ? [{ debugName: "isInColumnChooser" }] : /* istanbul ignore next */ []));
|
|
55
|
+
this.width = input('', /* @ts-ignore */
|
|
56
|
+
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
57
|
+
this.showToolTip = input(false, /* @ts-ignore */
|
|
58
|
+
...(ngDevMode ? [{ debugName: "showToolTip" }] : /* istanbul ignore next */ []));
|
|
52
59
|
this.selected = true;
|
|
53
60
|
}
|
|
54
61
|
ngOnInit() {
|
|
55
62
|
if (this.columnDef) {
|
|
56
63
|
if (!this.columnDef.name) {
|
|
57
|
-
this.columnDef.name = this.prop;
|
|
64
|
+
this.columnDef.name = this.prop();
|
|
58
65
|
}
|
|
59
66
|
this.columnDef.cell = this.cellDef;
|
|
60
67
|
this.columnDef.headerCell = this.headerCellDef;
|
|
@@ -69,29 +76,18 @@ class BaseGridColumnComponent {
|
|
|
69
76
|
capitalize(value) {
|
|
70
77
|
return value.charAt(0).toUpperCase() + value.slice(1);
|
|
71
78
|
}
|
|
72
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
73
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
79
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseGridColumnComponent, deps: [{ token: i1.MatTable, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
80
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: BaseGridColumnComponent, isStandalone: true, selector: "ng-component", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isInColumnChooser: { classPropertyName: "isInColumnChooser", publicName: "isInColumnChooser", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showToolTip: { classPropertyName: "showToolTip", publicName: "showToolTip", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.ariaHidden": "this.ariaHidden", "class": "this.classes" } }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true, static: true }, { propertyName: "cellDef", first: true, predicate: MatCellDef, descendants: true, static: true }, { propertyName: "headerCellDef", first: true, predicate: MatHeaderCellDef, descendants: true, static: true }, { propertyName: "footerCellDef", first: true, predicate: MatFooterCellDef, descendants: true, static: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
74
81
|
}
|
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseGridColumnComponent, decorators: [{
|
|
76
83
|
type: Component,
|
|
77
84
|
args: [{ template: '',
|
|
85
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
78
86
|
encapsulation: ViewEncapsulation.None
|
|
79
87
|
}]
|
|
80
88
|
}], ctorParameters: () => [{ type: i1.MatTable, decorators: [{
|
|
81
89
|
type: Optional
|
|
82
|
-
}] }], propDecorators: { prop: [{
|
|
83
|
-
type: Input
|
|
84
|
-
}], showLabel: [{
|
|
85
|
-
type: Input
|
|
86
|
-
}], label: [{
|
|
87
|
-
type: Input
|
|
88
|
-
}], isInColumnChooser: [{
|
|
89
|
-
type: Input
|
|
90
|
-
}], width: [{
|
|
91
|
-
type: Input
|
|
92
|
-
}], showToolTip: [{
|
|
93
|
-
type: Input
|
|
94
|
-
}], ariaHidden: [{
|
|
90
|
+
}] }], propDecorators: { prop: [{ type: i0.Input, args: [{ isSignal: true, alias: "prop", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isInColumnChooser: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInColumnChooser", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showToolTip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolTip", required: false }] }], ariaHidden: [{
|
|
95
91
|
type: HostBinding,
|
|
96
92
|
args: ['attr.ariaHidden']
|
|
97
93
|
}], classes: [{
|
|
@@ -114,13 +110,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
114
110
|
class DataGridHeaderComponent {
|
|
115
111
|
constructor() {
|
|
116
112
|
this.filterControl = new FormControl('');
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
this.
|
|
121
|
-
|
|
122
|
-
this.
|
|
123
|
-
|
|
113
|
+
/** Written from the debounced valueChanges subscription and by OdataGridComponent when it
|
|
114
|
+
* restores persisted state, so it is a signal: neither is a change-detection trigger
|
|
115
|
+
* under zoneless (ADR-0004). */
|
|
116
|
+
this.showClearButton = signal(false, /* @ts-ignore */
|
|
117
|
+
...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
|
|
118
|
+
this.showAddButton = input(false, /* @ts-ignore */
|
|
119
|
+
...(ngDevMode ? [{ debugName: "showAddButton" }] : /* istanbul ignore next */ []));
|
|
120
|
+
this.showRefreshButton = input(false, /* @ts-ignore */
|
|
121
|
+
...(ngDevMode ? [{ debugName: "showRefreshButton" }] : /* istanbul ignore next */ []));
|
|
122
|
+
this.addButtonLabel = input('', /* @ts-ignore */
|
|
123
|
+
...(ngDevMode ? [{ debugName: "addButtonLabel" }] : /* istanbul ignore next */ []));
|
|
124
|
+
this.searchPlaceholder = input('', /* @ts-ignore */
|
|
125
|
+
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
126
|
+
this.disableAddButton = input(false, /* @ts-ignore */
|
|
127
|
+
...(ngDevMode ? [{ debugName: "disableAddButton" }] : /* istanbul ignore next */ []));
|
|
128
|
+
this.filterChange = output();
|
|
129
|
+
this.addButtonClick = output();
|
|
130
|
+
this.refreshRequest = output();
|
|
124
131
|
this._onDestroy = new Subject();
|
|
125
132
|
}
|
|
126
133
|
ngOnInit() {
|
|
@@ -128,7 +135,7 @@ class DataGridHeaderComponent {
|
|
|
128
135
|
.pipe(debounceTime(500), takeUntil(this._onDestroy))
|
|
129
136
|
.subscribe((filter) => {
|
|
130
137
|
this.filterChange.emit(filter);
|
|
131
|
-
this.showClearButton
|
|
138
|
+
this.showClearButton.set(!!filter);
|
|
132
139
|
});
|
|
133
140
|
}
|
|
134
141
|
ngOnDestroy() {
|
|
@@ -142,27 +149,15 @@ class DataGridHeaderComponent {
|
|
|
142
149
|
this.filterControl.setValue('');
|
|
143
150
|
}
|
|
144
151
|
onAddButtonClick() {
|
|
145
|
-
this.addButtonClick.emit(
|
|
152
|
+
this.addButtonClick.emit();
|
|
146
153
|
}
|
|
147
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
148
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
154
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
155
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridHeaderComponent, isStandalone: true, selector: "cauca-data-grid-header", inputs: { showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange", addButtonClick: "addButtonClick", refreshRequest: "refreshRequest" }, ngImport: i0, template: "<div class=\"grid-header\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n @if (showClearButton()) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\r\n <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\r\n <input matInput [formControl]=\"filterControl\" [placeholder]=\"searchPlaceholder()\">\r\n <mat-icon matSuffix>search</mat-icon>\r\n </mat-form-field>\r\n\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n\r\n @if (showRefreshButton()) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\r\n\r\n @if (showAddButton()) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel()\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\r\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
149
156
|
}
|
|
150
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
157
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridHeaderComponent, decorators: [{
|
|
151
158
|
type: Component,
|
|
152
|
-
args: [{ selector: 'cauca-data-grid-header', imports: [MatFormFieldModule, IconButtonComponent, RaisedButtonComponent, MatInputModule, ReactiveFormsModule, TranslatePipe, MatIcon], template: "<div class=\"grid-header\">\n\n <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\n @if (showClearButton) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\n <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\n <input matInput [formControl]=\"filterControl\">\n <mat-icon matSuffix>search</mat-icon>\n </mat-form-field>\n\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n\n @if (showRefreshButton) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\n\n @if (showAddButton) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"] }]
|
|
153
|
-
}], propDecorators: { showAddButton: [{
|
|
154
|
-
type: Input
|
|
155
|
-
}], showRefreshButton: [{
|
|
156
|
-
type: Input
|
|
157
|
-
}], addButtonLabel: [{
|
|
158
|
-
type: Input
|
|
159
|
-
}], filterChange: [{
|
|
160
|
-
type: Output
|
|
161
|
-
}], addButtonClick: [{
|
|
162
|
-
type: Output
|
|
163
|
-
}], refreshRequest: [{
|
|
164
|
-
type: Output
|
|
165
|
-
}], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }] } });
|
|
159
|
+
args: [{ selector: 'cauca-data-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatFormFieldModule, IconButtonComponent, RaisedButtonComponent, MatInputModule, ReactiveFormsModule, TranslatePipe, MatIcon], template: "<div class=\"grid-header\">\r\n\r\n <mat-form-field appearance=\"outline\" class=\"full-width-field grid-search-box\" subscriptSizing=\"dynamic\">\r\n @if (showClearButton()) { <cauca-icon-button matPrefix (buttonClick)=\"clearSearchValue()\" icon=\"close\" /> }\r\n <mat-label>{{ 'dataGrid.keywordsLabel' | translate}}</mat-label>\r\n <input matInput [formControl]=\"filterControl\" [placeholder]=\"searchPlaceholder()\">\r\n <mat-icon matSuffix>search</mat-icon>\r\n </mat-form-field>\r\n\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n\r\n @if (showRefreshButton()) { <cauca-icon-button (buttonClick)=\"onRefresh()\" icon=\"refresh\" class=\"grid-refresh-button\" /> }\r\n\r\n @if (showAddButton()) { <cauca-raised-button icon=\"add\" color=\"primary\" [label]=\"addButtonLabel()\" [translateLabel]=\"false\" class=\"grid-new-button\" [isDisabled]=\"disableAddButton()\" (buttonClick)=\"onAddButtonClick()\" /> }\r\n</div>", styles: [".grid-header{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:nowrap;align-content:normal;padding:0 16px}.grid-search-box{display:block;flex-grow:1;flex-basis:0;min-width:0;align-self:auto}.grid-refresh-button,.grid-new-button{flex-shrink:0}@media(max-width:500px){.grid-header{gap:8px}}.grid-new-button{display:block;flex-basis:auto;align-self:auto}.grid-new-button>mat-icon{color:inherit}\n"] }]
|
|
160
|
+
}], propDecorators: { showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], refreshRequest: [{ type: i0.Output, args: ["refreshRequest"] }] } });
|
|
166
161
|
|
|
167
162
|
var Density;
|
|
168
163
|
(function (Density) {
|
|
@@ -211,10 +206,10 @@ class MatPaginatorLocalizationService extends MatPaginatorIntl {
|
|
|
211
206
|
this.changes.next();
|
|
212
207
|
});
|
|
213
208
|
}
|
|
214
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
215
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
209
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatPaginatorLocalizationService, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
210
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatPaginatorLocalizationService, providedIn: 'root' }); }
|
|
216
211
|
}
|
|
217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
212
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MatPaginatorLocalizationService, decorators: [{
|
|
218
213
|
type: Injectable,
|
|
219
214
|
args: [{
|
|
220
215
|
providedIn: 'root'
|
|
@@ -267,10 +262,10 @@ class PreferenceService {
|
|
|
267
262
|
this.gridConfiguration.push(newConfiguration);
|
|
268
263
|
return newConfiguration;
|
|
269
264
|
}
|
|
270
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
271
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
265
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PreferenceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
266
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PreferenceService, providedIn: 'root' }); }
|
|
272
267
|
}
|
|
273
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
268
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PreferenceService, decorators: [{
|
|
274
269
|
type: Injectable,
|
|
275
270
|
args: [{
|
|
276
271
|
providedIn: 'root'
|
|
@@ -292,19 +287,41 @@ class BaseDataGridComponent {
|
|
|
292
287
|
}
|
|
293
288
|
constructor(translateService, preferenceService) {
|
|
294
289
|
this.preferenceService = preferenceService;
|
|
295
|
-
this.
|
|
296
|
-
|
|
297
|
-
this.
|
|
298
|
-
|
|
299
|
-
this.
|
|
300
|
-
|
|
301
|
-
this.
|
|
302
|
-
|
|
303
|
-
this.
|
|
304
|
-
|
|
305
|
-
this.
|
|
290
|
+
this.resourceName = input.required(/* @ts-ignore */
|
|
291
|
+
...(ngDevMode ? [{ debugName: "resourceName" }] : /* istanbul ignore next */ []));
|
|
292
|
+
this.displayedColumns = input([], /* @ts-ignore */
|
|
293
|
+
...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
|
|
294
|
+
this.showAddButton = input(false, /* @ts-ignore */
|
|
295
|
+
...(ngDevMode ? [{ debugName: "showAddButton" }] : /* istanbul ignore next */ []));
|
|
296
|
+
this.disableAddButton = input(false, /* @ts-ignore */
|
|
297
|
+
...(ngDevMode ? [{ debugName: "disableAddButton" }] : /* istanbul ignore next */ []));
|
|
298
|
+
this.addButtonLabel = input('', /* @ts-ignore */
|
|
299
|
+
...(ngDevMode ? [{ debugName: "addButtonLabel" }] : /* istanbul ignore next */ []));
|
|
300
|
+
this.searchPlaceholder = input('', /* @ts-ignore */
|
|
301
|
+
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
302
|
+
this.searchableColumns = input(/* @ts-ignore */
|
|
303
|
+
...(ngDevMode ? [undefined, { debugName: "searchableColumns" }] : /* istanbul ignore next */ []));
|
|
304
|
+
this.showTableOptions = input(false, /* @ts-ignore */
|
|
305
|
+
...(ngDevMode ? [{ debugName: "showTableOptions" }] : /* istanbul ignore next */ []));
|
|
306
|
+
this.showColumnViewer = input(true, /* @ts-ignore */
|
|
307
|
+
...(ngDevMode ? [{ debugName: "showColumnViewer" }] : /* istanbul ignore next */ []));
|
|
308
|
+
this.showPaginator = input(false, /* @ts-ignore */
|
|
309
|
+
...(ngDevMode ? [{ debugName: "showPaginator" }] : /* istanbul ignore next */ []));
|
|
310
|
+
this.hidePageSize = input(false, /* @ts-ignore */
|
|
311
|
+
...(ngDevMode ? [{ debugName: "hidePageSize" }] : /* istanbul ignore next */ []));
|
|
312
|
+
this.showExpandButton = input(false, /* @ts-ignore */
|
|
313
|
+
...(ngDevMode ? [{ debugName: "showExpandButton" }] : /* istanbul ignore next */ []));
|
|
314
|
+
this.addButtonClick = output();
|
|
315
|
+
this.expandedElement = signal(null, /* @ts-ignore */
|
|
316
|
+
...(ngDevMode ? [{ debugName: "expandedElement" }] : /* istanbul ignore next */ []));
|
|
306
317
|
this.defaultAddButtonLabel = '';
|
|
307
|
-
|
|
318
|
+
/**
|
|
319
|
+
* Derived from the column inputs, but overwritten when the user picks columns in the table
|
|
320
|
+
* options — which is exactly what linkedSignal models. It replaces the ngOnChanges mirroring
|
|
321
|
+
* this class used to do (ADR-0003).
|
|
322
|
+
*/
|
|
323
|
+
this.allDisplayedColumns = linkedSignal(() => this.computeDisplayedColumns(), /* @ts-ignore */
|
|
324
|
+
...(ngDevMode ? [{ debugName: "allDisplayedColumns" }] : /* istanbul ignore next */ []));
|
|
308
325
|
this.sort = null;
|
|
309
326
|
this.defaultAddButtonLabel = translateService.instant('dataGrid.defaultAddButtonLabel');
|
|
310
327
|
}
|
|
@@ -314,20 +331,15 @@ class BaseDataGridComponent {
|
|
|
314
331
|
if (this.table && this.regularColumns && this.rowDefs && this.columnDefs) {
|
|
315
332
|
this.applyColumns();
|
|
316
333
|
}
|
|
317
|
-
if (this.showTableOptions) {
|
|
334
|
+
if (this.showTableOptions()) {
|
|
318
335
|
this.preferenceService.preference.subscribe((preference) => {
|
|
319
336
|
this.preference = preference;
|
|
320
337
|
});
|
|
321
338
|
}
|
|
322
339
|
else {
|
|
323
|
-
this.showColumnsWhenTableOptionsIsFalse();
|
|
324
340
|
this.preference = new Preference();
|
|
325
341
|
}
|
|
326
342
|
}
|
|
327
|
-
ngOnChanges(changes) {
|
|
328
|
-
this.updateDataWhenNeeded(changes);
|
|
329
|
-
this.updateColumnsWhenNeeded(changes);
|
|
330
|
-
}
|
|
331
343
|
onExpand(element) {
|
|
332
344
|
if (this.expandedElement() === element) {
|
|
333
345
|
this.expandedElement.set(null);
|
|
@@ -347,13 +359,17 @@ class BaseDataGridComponent {
|
|
|
347
359
|
onDensityChanged(density) {
|
|
348
360
|
this.preferenceService.setPreferenceDensity(density);
|
|
349
361
|
}
|
|
362
|
+
/** The set of columns to render, before the user's own column selection is applied. */
|
|
363
|
+
computeDisplayedColumns() {
|
|
364
|
+
return [...this.displayedColumns()];
|
|
365
|
+
}
|
|
350
366
|
setUpPaginator(_paginator, _showPaginator) {
|
|
351
367
|
// nothing
|
|
352
368
|
}
|
|
353
369
|
onColumnsChanged(columns) {
|
|
354
370
|
this.allDisplayedColumns.set([...columns]);
|
|
355
371
|
const columnsToSave = this.removeMandatoryColumns([...columns]);
|
|
356
|
-
this.preferenceService.addOrUpdateGridPreference(this.resourceName, columnsToSave).subscribe();
|
|
372
|
+
this.preferenceService.addOrUpdateGridPreference(this.resourceName(), columnsToSave).subscribe();
|
|
357
373
|
}
|
|
358
374
|
applyColumns() {
|
|
359
375
|
this.regularColumns.forEach(dynColumn => this.table.addColumnDef(dynColumn.columnDef));
|
|
@@ -364,11 +380,6 @@ class BaseDataGridComponent {
|
|
|
364
380
|
this.sort.register({ id: columnDef.name, start: 'desc', disableClear: false });
|
|
365
381
|
});
|
|
366
382
|
}
|
|
367
|
-
updateColumnsWhenNeeded(changes) {
|
|
368
|
-
if (changes.displayedColumns) {
|
|
369
|
-
this.allDisplayedColumns.set([...this.displayedColumns]);
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
383
|
removeMandatoryColumns(columns) {
|
|
373
384
|
let index = columns.indexOf("");
|
|
374
385
|
if (index > -1) {
|
|
@@ -392,33 +403,17 @@ class BaseDataGridComponent {
|
|
|
392
403
|
}
|
|
393
404
|
return columns;
|
|
394
405
|
}
|
|
395
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
396
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
406
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseDataGridComponent, deps: [{ token: i1$3.TranslateService }, { token: PREFERENCE_SERVICE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
407
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: BaseDataGridComponent, isStandalone: true, selector: "ng-component", inputs: { resourceName: { classPropertyName: "resourceName", publicName: "resourceName", isSignal: true, isRequired: true, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, showAddButton: { classPropertyName: "showAddButton", publicName: "showAddButton", isSignal: true, isRequired: false, transformFunction: null }, disableAddButton: { classPropertyName: "disableAddButton", publicName: "disableAddButton", isSignal: true, isRequired: false, transformFunction: null }, addButtonLabel: { classPropertyName: "addButtonLabel", publicName: "addButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchableColumns: { classPropertyName: "searchableColumns", publicName: "searchableColumns", isSignal: true, isRequired: false, transformFunction: null }, showTableOptions: { classPropertyName: "showTableOptions", publicName: "showTableOptions", isSignal: true, isRequired: false, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, showExpandButton: { classPropertyName: "showExpandButton", publicName: "showExpandButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addButtonClick: "addButtonClick" }, queries: [{ propertyName: "headerRowDef", first: true, predicate: MatHeaderRowDef, descendants: true }, { propertyName: "footerRowDef", first: true, predicate: MatFooterRowDef, descendants: true }, { propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "regularColumns", predicate: BaseGridColumnComponent }, { propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "rowDefs", predicate: MatRowDef }], viewQueries: [{ propertyName: "header", first: true, predicate: DataGridHeaderComponent, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
397
408
|
}
|
|
398
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
409
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: BaseDataGridComponent, decorators: [{
|
|
399
410
|
type: Component,
|
|
400
|
-
args: [{
|
|
411
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush,
|
|
412
|
+
template: '' }]
|
|
401
413
|
}], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: undefined, decorators: [{
|
|
402
414
|
type: Inject,
|
|
403
415
|
args: [PREFERENCE_SERVICE_TOKEN]
|
|
404
|
-
}] }], propDecorators: { resourceName: [{
|
|
405
|
-
type: Input,
|
|
406
|
-
args: [{ required: true }]
|
|
407
|
-
}], displayedColumns: [{
|
|
408
|
-
type: Input
|
|
409
|
-
}], showAddButton: [{
|
|
410
|
-
type: Input
|
|
411
|
-
}], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], addButtonLabel: [{
|
|
412
|
-
type: Input
|
|
413
|
-
}], searchableColumns: [{
|
|
414
|
-
type: Input
|
|
415
|
-
}], showTableOptions: [{
|
|
416
|
-
type: Input
|
|
417
|
-
}], showColumnViewer: [{
|
|
418
|
-
type: Input
|
|
419
|
-
}], addButtonClick: [{
|
|
420
|
-
type: Output
|
|
421
|
-
}], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], showExpandButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandButton", required: false }] }], header: [{
|
|
416
|
+
}] }], propDecorators: { resourceName: [{ type: i0.Input, args: [{ isSignal: true, alias: "resourceName", required: true }] }], displayedColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], showAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAddButton", required: false }] }], disableAddButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableAddButton", required: false }] }], addButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addButtonLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchableColumns", required: false }] }], showTableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableOptions", required: false }] }], showColumnViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnViewer", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], showExpandButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpandButton", required: false }] }], addButtonClick: [{ type: i0.Output, args: ["addButtonClick"] }], header: [{
|
|
422
417
|
type: ViewChild,
|
|
423
418
|
args: [DataGridHeaderComponent]
|
|
424
419
|
}], table: [{
|
|
@@ -449,10 +444,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
449
444
|
|
|
450
445
|
class ButtonPopoverComponent {
|
|
451
446
|
constructor() {
|
|
452
|
-
this.buttonLabel = input(null,
|
|
453
|
-
|
|
454
|
-
this.
|
|
455
|
-
|
|
447
|
+
this.buttonLabel = input(null, /* @ts-ignore */
|
|
448
|
+
...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
|
|
449
|
+
this.buttonIcon = input('', /* @ts-ignore */
|
|
450
|
+
...(ngDevMode ? [{ debugName: "buttonIcon" }] : /* istanbul ignore next */ []));
|
|
451
|
+
this.color = input('primary', /* @ts-ignore */
|
|
452
|
+
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
453
|
+
this.isActive = signal(false, /* @ts-ignore */
|
|
454
|
+
...(ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []));
|
|
456
455
|
}
|
|
457
456
|
;
|
|
458
457
|
toggle() {
|
|
@@ -463,20 +462,24 @@ class ButtonPopoverComponent {
|
|
|
463
462
|
this.isActive.set(false);
|
|
464
463
|
}
|
|
465
464
|
}
|
|
466
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
467
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
465
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ButtonPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
466
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: ButtonPopoverComponent, isStandalone: true, selector: "cauca-button-popover", inputs: { buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonIcon: { classPropertyName: "buttonIcon", publicName: "buttonIcon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<cauca-basic-button [icon]=\"buttonIcon()\" [color]=\"color()\" [label]=\"buttonLabel()\" [translateLabel]=\"false\" (buttonClick)=\"toggle()\" cdkOverlayOrigin #popoverTrigger=\"cdkOverlayOrigin\" />\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"popoverTrigger\"\r\n [cdkConnectedOverlayOpen]=\"isActive()\"\r\n [cdkConnectedOverlayHasBackdrop]=\"isActive()\"\r\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop-cs'\"\r\n (backdropClick)=\"toggle()\">\r\n <ng-content></ng-content>\r\n</ng-template>", styles: [".popover{background-color:#fff;border:1px solid #DDD;pointer-events:none;opacity:0;position:absolute;transition:all .5s ease 0s}.active{opacity:1;pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: BasicButtonComponent, selector: "cauca-basic-button" }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
468
467
|
}
|
|
469
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
468
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ButtonPopoverComponent, decorators: [{
|
|
470
469
|
type: Component,
|
|
471
|
-
args: [{ selector: 'cauca-button-popover', imports: [CdkConnectedOverlay, BasicButtonComponent, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cauca-basic-button [icon]=\"buttonIcon()\" [color]=\"color()\" [label]=\"buttonLabel()\" [translateLabel]=\"false\" (buttonClick)=\"toggle()\" cdkOverlayOrigin #popoverTrigger=\"cdkOverlayOrigin\" />\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"popoverTrigger\"\n [cdkConnectedOverlayOpen]=\"isActive()\"\n [cdkConnectedOverlayHasBackdrop]=\"isActive()\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop-cs'\"\n (backdropClick)=\"toggle()\">\n <ng-content></ng-content>\n</ng-template>", styles: [".popover{background-color:#fff;border:1px solid #DDD;pointer-events:none;opacity:0;position:absolute;transition:all .5s ease 0s}.active{opacity:1;pointer-events:auto}\n"] }]
|
|
470
|
+
args: [{ selector: 'cauca-button-popover', imports: [CdkConnectedOverlay, BasicButtonComponent, CdkOverlayOrigin], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cauca-basic-button [icon]=\"buttonIcon()\" [color]=\"color()\" [label]=\"buttonLabel()\" [translateLabel]=\"false\" (buttonClick)=\"toggle()\" cdkOverlayOrigin #popoverTrigger=\"cdkOverlayOrigin\" />\r\n\r\n<ng-template\r\n cdkConnectedOverlay\r\n [cdkConnectedOverlayOrigin]=\"popoverTrigger\"\r\n [cdkConnectedOverlayOpen]=\"isActive()\"\r\n [cdkConnectedOverlayHasBackdrop]=\"isActive()\"\r\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop-cs'\"\r\n (backdropClick)=\"toggle()\">\r\n <ng-content></ng-content>\r\n</ng-template>", styles: [".popover{background-color:#fff;border:1px solid #DDD;pointer-events:none;opacity:0;position:absolute;transition:all .5s ease 0s}.active{opacity:1;pointer-events:auto}\n"] }]
|
|
472
471
|
}], propDecorators: { buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], buttonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonIcon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
473
472
|
|
|
474
473
|
class DataGridTableOptionsComponent {
|
|
475
474
|
constructor() {
|
|
476
|
-
this.
|
|
477
|
-
|
|
478
|
-
this.
|
|
479
|
-
|
|
475
|
+
this.gridName = input.required(/* @ts-ignore */
|
|
476
|
+
...(ngDevMode ? [{ debugName: "gridName" }] : /* istanbul ignore next */ []));
|
|
477
|
+
this.showColumnViewer = input(true, /* @ts-ignore */
|
|
478
|
+
...(ngDevMode ? [{ debugName: "showColumnViewer" }] : /* istanbul ignore next */ []));
|
|
479
|
+
this.allColumns = input(new QueryList(), /* @ts-ignore */
|
|
480
|
+
...(ngDevMode ? [{ debugName: "allColumns" }] : /* istanbul ignore next */ []));
|
|
481
|
+
this.densityChanged = output();
|
|
482
|
+
this.columnsChanged = output();
|
|
480
483
|
this.columnsSearch = '';
|
|
481
484
|
this.preferenceService = inject(PREFERENCE_SERVICE_TOKEN);
|
|
482
485
|
}
|
|
@@ -484,7 +487,7 @@ class DataGridTableOptionsComponent {
|
|
|
484
487
|
return Density;
|
|
485
488
|
}
|
|
486
489
|
get columns() {
|
|
487
|
-
return this.allColumns.filter(c => c.prop !== 'buttons' && c.prop !== 'menu' && c.prop !== '' && c.isInColumnChooser);
|
|
490
|
+
return this.allColumns().filter(c => c.prop() !== 'buttons' && c.prop() !== 'menu' && c.prop() !== '' && c.isInColumnChooser());
|
|
488
491
|
}
|
|
489
492
|
get currentDensityIcon() {
|
|
490
493
|
const currentDensity = this.preferenceService.getPreference()?.gridDensity;
|
|
@@ -497,7 +500,7 @@ class DataGridTableOptionsComponent {
|
|
|
497
500
|
return 'density_medium';
|
|
498
501
|
}
|
|
499
502
|
ngOnInit() {
|
|
500
|
-
this.preferenceService.getPreferenceForGrid(this.gridName).subscribe({
|
|
503
|
+
this.preferenceService.getPreferenceForGrid(this.gridName()).subscribe({
|
|
501
504
|
next: configuration => {
|
|
502
505
|
if (configuration?.visibleColumns) {
|
|
503
506
|
this.selectOnlyUserColumns(configuration.visibleColumns);
|
|
@@ -518,78 +521,80 @@ class DataGridTableOptionsComponent {
|
|
|
518
521
|
this.densityChanged.emit(newDensity);
|
|
519
522
|
}
|
|
520
523
|
onColumnsChanged() {
|
|
521
|
-
const newColumns = this.allColumns.filter(column => column.selected);
|
|
522
|
-
this.columnsChanged.emit(newColumns.map((column) => column.prop));
|
|
524
|
+
const newColumns = this.allColumns().filter(column => column.selected);
|
|
525
|
+
this.columnsChanged.emit(newColumns.map((column) => column.prop()));
|
|
523
526
|
}
|
|
524
527
|
resetColumns() {
|
|
525
|
-
this.allColumns.forEach((column => column.selected = true));
|
|
526
|
-
this.columnsChanged.emit(this.allColumns.map((column) => column.prop));
|
|
528
|
+
this.allColumns().forEach((column => column.selected = true));
|
|
529
|
+
this.columnsChanged.emit(this.allColumns().map((column) => column.prop()));
|
|
527
530
|
}
|
|
528
531
|
selectOnlyUserColumns(configurationVisibleColumns) {
|
|
529
|
-
this.allColumns.forEach((column => {
|
|
530
|
-
const index = configurationVisibleColumns.findIndex(c => c === column.prop);
|
|
531
|
-
if (index === -1 && column.prop !== 'buttons' && column.prop !== 'menu' && column.prop !== '') {
|
|
532
|
+
this.allColumns().forEach((column => {
|
|
533
|
+
const index = configurationVisibleColumns.findIndex(c => c === column.prop());
|
|
534
|
+
if (index === -1 && column.prop() !== 'buttons' && column.prop() !== 'menu' && column.prop() !== '') {
|
|
532
535
|
column.selected = false;
|
|
533
536
|
}
|
|
534
537
|
}));
|
|
535
538
|
}
|
|
536
539
|
selectAllColumns() {
|
|
537
|
-
this.allColumns.forEach((column => {
|
|
540
|
+
this.allColumns().forEach((column => {
|
|
538
541
|
column.selected = true;
|
|
539
542
|
}));
|
|
540
543
|
}
|
|
541
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
542
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
544
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridTableOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
545
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridTableOptionsComponent, isStandalone: true, selector: "cauca-data-grid-table-options", inputs: { gridName: { classPropertyName: "gridName", publicName: "gridName", isSignal: true, isRequired: true, transformFunction: null }, showColumnViewer: { classPropertyName: "showColumnViewer", publicName: "showColumnViewer", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { densityChanged: "densityChanged", columnsChanged: "columnsChanged" }, viewQueries: [{ propertyName: "columnViewer", first: true, predicate: ButtonPopoverComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"table-options-bar\">\r\n <div class=\"table-options\">\r\n @if (showColumnViewer()) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\r\n <mat-card>\r\n <mat-card-content>\r\n <div class=\"columns\">\r\n @for (column of columns; track column) {\r\n <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onColumnsChanged()\">\r\n {{column.label()}}\r\n </mat-checkbox>\r\n }\r\n </div>\r\n </mat-card-content>\r\n <mat-card-actions>\r\n <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\r\n <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\r\n </mat-card-actions>\r\n </mat-card>\r\n </cauca-button-popover> }\r\n <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\r\n </div>\r\n\r\n <ng-content select=\"[customFilter]\"> </ng-content>\r\n</div>\r\n\r\n<mat-menu #densityMenu=\"matMenu\">\r\n <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\r\n <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\r\n <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\r\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$4.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1$4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: ButtonPopoverComponent, selector: "cauca-button-popover", inputs: ["buttonLabel", "buttonIcon", "color"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: StrokedButtonComponent, selector: "cauca-stroked-button" }, { kind: "component", type: RaisedButtonComponent, selector: "cauca-raised-button" }, { kind: "component", type: BasicButtonComponent, selector: "cauca-basic-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
543
546
|
}
|
|
544
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridTableOptionsComponent, decorators: [{
|
|
545
548
|
type: Component,
|
|
546
|
-
args: [{ selector: 'cauca-data-grid-table-options', imports: [MatCardModule, ButtonPopoverComponent, MatCheckboxModule, StrokedButtonComponent, RaisedButtonComponent, BasicButtonComponent, MatMenuModule, FormsModule, TranslatePipe, MenuItemComponent], template: "<div class=\"table-options-bar\">\n <div class=\"table-options\">\n @if (showColumnViewer) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\n <mat-card>\n <mat-card-content>\n <div class=\"columns\">\n @for (column of columns; track column) {\n <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\n (change)=\"onColumnsChanged()\">\n {{column.label}}\n </mat-checkbox>\n }\n </div>\n </mat-card-content>\n <mat-card-actions>\n <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\n <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\n </mat-card-actions>\n </mat-card>\n </cauca-button-popover> }\n <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\n </div>\n\n <ng-content select=\"[customFilter]\"> </ng-content>\n</div>\n\n<mat-menu #densityMenu=\"matMenu\">\n <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\n <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\n <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"] }]
|
|
547
|
-
}], propDecorators: { gridName: [{
|
|
548
|
-
type: Input,
|
|
549
|
-
args: [{ required: true }]
|
|
550
|
-
}], showColumnViewer: [{
|
|
551
|
-
type: Input
|
|
552
|
-
}], densityChanged: [{
|
|
553
|
-
type: Output
|
|
554
|
-
}], allColumns: [{
|
|
555
|
-
type: Input
|
|
556
|
-
}], columnsChanged: [{
|
|
557
|
-
type: Output
|
|
558
|
-
}], columnViewer: [{
|
|
549
|
+
args: [{ selector: 'cauca-data-grid-table-options', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCardModule, ButtonPopoverComponent, MatCheckboxModule, StrokedButtonComponent, RaisedButtonComponent, BasicButtonComponent, MatMenuModule, FormsModule, TranslatePipe, MenuItemComponent], template: "<div class=\"table-options-bar\">\r\n <div class=\"table-options\">\r\n @if (showColumnViewer()) { <cauca-button-popover [buttonLabel]=\"'dataGrid.columns' | translate\" buttonIcon=\"view_column\">\r\n <mat-card>\r\n <mat-card-content>\r\n <div class=\"columns\">\r\n @for (column of columns; track column) {\r\n <mat-checkbox color=\"primary\" [(ngModel)]=\"column.selected\"\r\n (change)=\"onColumnsChanged()\">\r\n {{column.label()}}\r\n </mat-checkbox>\r\n }\r\n </div>\r\n </mat-card-content>\r\n <mat-card-actions>\r\n <cauca-stroked-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.reset\" [translateLabel]=\"true\" />\r\n <cauca-raised-button [small]=\"true\" color=\"primary\" (buttonClick)=\"resetColumns()\" label=\"dataGrid.columnChooser.showAll\" [translateLabel]=\"true\" />\r\n </mat-card-actions>\r\n </mat-card>\r\n </cauca-button-popover> }\r\n <cauca-basic-button color=\"primary\" [matMenuTriggerFor]=\"densityMenu\" class=\"open-menu-button\" [icon]=\"currentDensityIcon\" label=\"dataGrid.density.title\" [translateLabel]=\"true\" />\r\n </div>\r\n\r\n <ng-content select=\"[customFilter]\"> </ng-content>\r\n</div>\r\n\r\n<mat-menu #densityMenu=\"matMenu\">\r\n <cauca-menu-item label=\"dataGrid.density.compact\" [translateLabel]=\"true\" icon=\"density_small\" (buttonClick)=\"changeDensity(density.Compact)\" class=\"density-compact\" />\r\n <cauca-menu-item label=\"dataGrid.density.standard\" [translateLabel]=\"true\" icon=\"density_medium\" (buttonClick)=\"changeDensity(density.Standard)\" class=\"density-standard\" />\r\n <cauca-menu-item label=\"dataGrid.density.comfortable\" [translateLabel]=\"true\" icon=\"density_large\" (buttonClick)=\"changeDensity(density.Comfortable)\" class=\"density-comfortable\" />\r\n</mat-menu>", styles: [".table-options-bar{display:flex;padding:8px 16px;align-items:center;align-self:stretch}.table-options{flex:1 0 0;display:flex;gap:8px;align-items:center;align-content:normal;text-transform:capitalize}.columns{display:flex;flex-direction:column;max-height:650px}mat-card{box-shadow:0 8px 10px 1px #00000024}mat-card>mat-card-actions{gap:32px;padding:16px;justify-content:space-between}.column-viewer-header{display:flex;flex-direction:row-reverse;padding:4px 4px 0px px 0px}.mat-mdc-icon-button.mat-mdc-button-base{height:24px}mat-card-content{padding:0 8px}.button-small{height:32px;line-height:18px}.small-icon-button{height:24px;width:24px;padding:0}.small-icon-button>span{height:24px!important;width:24px!important}.small-icon-button>.mat-mdc-icon-button .mat-mdc-button-touch-target{display:none;height:24px!important;width:24px!important}.small-icon{font-size:18px;height:unset;width:unset}\n"] }]
|
|
550
|
+
}], propDecorators: { gridName: [{ type: i0.Input, args: [{ isSignal: true, alias: "gridName", required: true }] }], showColumnViewer: [{ type: i0.Input, args: [{ isSignal: true, alias: "showColumnViewer", required: false }] }], allColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "allColumns", required: false }] }], densityChanged: [{ type: i0.Output, args: ["densityChanged"] }], columnsChanged: [{ type: i0.Output, args: ["columnsChanged"] }], columnViewer: [{
|
|
559
551
|
type: ViewChild,
|
|
560
552
|
args: [ButtonPopoverComponent, { static: true }]
|
|
561
553
|
}] } });
|
|
562
554
|
|
|
563
555
|
class DataGridProgressSpinerComponent {
|
|
564
556
|
constructor() {
|
|
565
|
-
this.isLoading = input(false,
|
|
566
|
-
|
|
557
|
+
this.isLoading = input(false, /* @ts-ignore */
|
|
558
|
+
...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
|
|
559
|
+
this.useBackground = input(true, /* @ts-ignore */
|
|
560
|
+
...(ngDevMode ? [{ debugName: "useBackground" }] : /* istanbul ignore next */ []));
|
|
567
561
|
}
|
|
568
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
569
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
562
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridProgressSpinerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
563
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridProgressSpinerComponent, isStandalone: true, selector: "cauca-data-grid-progress-spiner", inputs: { isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, useBackground: { classPropertyName: "useBackground", publicName: "useBackground", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isLoading()) {\r\n <div class=\"spiner-container\" [class.use-background]=\"useBackground()\">\r\n <mat-progress-spinner\r\n color=\"primary\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </div>\r\n}", styles: [".spiner-container{display:flex;justify-content:center;align-items:center}.use-background{background:#fff}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
570
564
|
}
|
|
571
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
565
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridProgressSpinerComponent, decorators: [{
|
|
572
566
|
type: Component,
|
|
573
|
-
args: [{ selector: 'cauca-data-grid-progress-spiner', imports: [MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isLoading()) {\n <div class=\"spiner-container\" [class.use-background]=\"useBackground()\">\n <mat-progress-spinner\n color=\"primary\"\n mode=\"indeterminate\">\n </mat-progress-spinner>\n </div>\n}", styles: [".spiner-container{display:flex;justify-content:center;align-items:center}.use-background{background:#fff}\n"] }]
|
|
567
|
+
args: [{ selector: 'cauca-data-grid-progress-spiner', imports: [MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isLoading()) {\r\n <div class=\"spiner-container\" [class.use-background]=\"useBackground()\">\r\n <mat-progress-spinner\r\n color=\"primary\"\r\n mode=\"indeterminate\">\r\n </mat-progress-spinner>\r\n </div>\r\n}", styles: [".spiner-container{display:flex;justify-content:center;align-items:center}.use-background{background:#fff}\n"] }]
|
|
574
568
|
}], propDecorators: { isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], useBackground: [{ type: i0.Input, args: [{ isSignal: true, alias: "useBackground", required: false }] }] } });
|
|
575
569
|
|
|
576
570
|
class DataGridComponent extends BaseDataGridComponent {
|
|
577
571
|
constructor(translateService) {
|
|
578
572
|
super(translateService, inject(PREFERENCE_SERVICE_TOKEN));
|
|
579
|
-
this.data = []
|
|
580
|
-
|
|
581
|
-
this.
|
|
582
|
-
|
|
583
|
-
this.
|
|
584
|
-
|
|
585
|
-
this.
|
|
586
|
-
|
|
587
|
-
this.
|
|
588
|
-
|
|
573
|
+
this.data = input([], /* @ts-ignore */
|
|
574
|
+
...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
575
|
+
this.showLoadingError = input(false, /* @ts-ignore */
|
|
576
|
+
...(ngDevMode ? [{ debugName: "showLoadingError" }] : /* istanbul ignore next */ []));
|
|
577
|
+
this.isLoading = input(false, /* @ts-ignore */
|
|
578
|
+
...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
|
|
579
|
+
this.allowReordering = input(false, /* @ts-ignore */
|
|
580
|
+
...(ngDevMode ? [{ debugName: "allowReordering" }] : /* istanbul ignore next */ []));
|
|
581
|
+
this.filterPredicate = input(/* @ts-ignore */
|
|
582
|
+
...(ngDevMode ? [undefined, { debugName: "filterPredicate" }] : /* istanbul ignore next */ []));
|
|
583
|
+
this.showFooter = input(false, /* @ts-ignore */
|
|
584
|
+
...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
|
|
585
|
+
this.showHeader = input(true, /* @ts-ignore */
|
|
586
|
+
...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
|
|
587
|
+
this.headerColor = input(undefined, /* @ts-ignore */
|
|
588
|
+
...(ngDevMode ? [{ debugName: "headerColor" }] : /* istanbul ignore next */ []));
|
|
589
|
+
this.showRefreshButton = input(false, /* @ts-ignore */
|
|
590
|
+
...(ngDevMode ? [{ debugName: "showRefreshButton" }] : /* istanbul ignore next */ []));
|
|
591
|
+
this.rowDrop = output();
|
|
589
592
|
this.refreshData = output();
|
|
590
593
|
this.dragDisabled = true;
|
|
591
594
|
this.currentFilter = '';
|
|
592
595
|
this.dataSource = new MatTableDataSource([]);
|
|
596
|
+
// Replaces the ngOnChanges hook that mirrored the `data` input into the datasource.
|
|
597
|
+
effect(() => this.setData(this.data()));
|
|
593
598
|
}
|
|
594
599
|
onRefreshData() {
|
|
595
600
|
this.dataSource.data = [];
|
|
@@ -636,49 +641,21 @@ class DataGridComponent extends BaseDataGridComponent {
|
|
|
636
641
|
setUpPaginator(paginator, showPaginator) {
|
|
637
642
|
this.dataSource.paginator = paginator && showPaginator ? paginator : null;
|
|
638
643
|
}
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
this.allDisplayedColumns.set(['position', ...this.displayedColumns]);
|
|
642
|
-
}
|
|
643
|
-
else {
|
|
644
|
-
this.allDisplayedColumns.set([...this.displayedColumns]);
|
|
645
|
-
}
|
|
646
|
-
if (this.showExpandButton() && !this.allDisplayedColumns().includes('expand')) {
|
|
647
|
-
this.allDisplayedColumns.set(['expand', ...this.displayedColumns]);
|
|
648
|
-
}
|
|
649
|
-
}
|
|
650
|
-
updateColumnsWhenNeeded(changes) {
|
|
651
|
-
if (changes.displayedColumns || changes.allowReordering) {
|
|
652
|
-
if (this.allowReordering && !this.allDisplayedColumns().includes('position')) {
|
|
653
|
-
this.allDisplayedColumns.set(['position', ...this.allDisplayedColumns()]);
|
|
654
|
-
}
|
|
655
|
-
else {
|
|
656
|
-
this.allDisplayedColumns.set([...this.allDisplayedColumns()]);
|
|
657
|
-
}
|
|
658
|
-
}
|
|
659
|
-
if (this.showExpandButton() && !this.allDisplayedColumns().includes('expand')) {
|
|
660
|
-
this.allDisplayedColumns.set(['expand', ...this.displayedColumns]);
|
|
661
|
-
}
|
|
644
|
+
computeDisplayedColumns() {
|
|
645
|
+
return this.decorateColumns(this.displayedColumns());
|
|
662
646
|
}
|
|
663
647
|
onColumnsChanged(columns) {
|
|
664
648
|
super.onColumnsChanged(columns);
|
|
665
|
-
|
|
666
|
-
this.allDisplayedColumns.set(['position', ...columns]);
|
|
667
|
-
}
|
|
668
|
-
else {
|
|
669
|
-
this.allDisplayedColumns.set([...columns]);
|
|
670
|
-
}
|
|
671
|
-
if (this.showExpandButton() && !this.allDisplayedColumns().includes('expand')) {
|
|
672
|
-
this.allDisplayedColumns.set(['expand', ...this.displayedColumns]);
|
|
673
|
-
}
|
|
649
|
+
this.allDisplayedColumns.set(this.decorateColumns(columns));
|
|
674
650
|
}
|
|
675
651
|
setUpFilterPredicate() {
|
|
676
|
-
|
|
677
|
-
|
|
652
|
+
const filterPredicate = this.filterPredicate();
|
|
653
|
+
if (filterPredicate) {
|
|
654
|
+
this.dataSource.filterPredicate = filterPredicate;
|
|
678
655
|
}
|
|
679
|
-
else if (this.searchableColumns?.length > 0) {
|
|
656
|
+
else if (this.searchableColumns()?.length > 0) {
|
|
680
657
|
this.dataSource.filterPredicate = (data, filter) => {
|
|
681
|
-
return this.searchableColumns.some((column) => {
|
|
658
|
+
return this.searchableColumns().some((column) => {
|
|
682
659
|
const value = data[column];
|
|
683
660
|
return value?.toString().toLowerCaseAndWithoutDiacritics().includes(filter);
|
|
684
661
|
});
|
|
@@ -689,22 +666,29 @@ class DataGridComponent extends BaseDataGridComponent {
|
|
|
689
666
|
// eslint-disable-next-line no-self-assign
|
|
690
667
|
this.dataSource.filter = this.dataSource.filter;
|
|
691
668
|
}
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
669
|
+
/** `position` and `expand` are grid-owned columns, not part of the caller's list. */
|
|
670
|
+
decorateColumns(columns) {
|
|
671
|
+
let decorated = [...columns];
|
|
672
|
+
if (this.allowReordering() && !decorated.includes('position')) {
|
|
673
|
+
decorated = ['position', ...decorated];
|
|
674
|
+
}
|
|
675
|
+
if (this.showExpandButton() && !decorated.includes('expand')) {
|
|
676
|
+
decorated = ['expand', ...decorated];
|
|
695
677
|
}
|
|
678
|
+
return decorated;
|
|
696
679
|
}
|
|
697
|
-
|
|
698
|
-
if (Array.isArray(data)) {
|
|
699
|
-
|
|
700
|
-
setTimeout(() => {
|
|
701
|
-
this.table.setNoDataRow(this.noDataRow);
|
|
702
|
-
this.table.renderRows();
|
|
703
|
-
}, 0);
|
|
680
|
+
setData(data) {
|
|
681
|
+
if (!Array.isArray(data)) {
|
|
682
|
+
return;
|
|
704
683
|
}
|
|
684
|
+
this.dataSource.data = data;
|
|
685
|
+
setTimeout(() => {
|
|
686
|
+
this.table?.setNoDataRow(this.noDataRow);
|
|
687
|
+
this.table?.renderRows();
|
|
688
|
+
}, 0);
|
|
705
689
|
}
|
|
706
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
707
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
690
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridComponent, deps: [{ token: i1$3.TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
691
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridComponent, isStandalone: true, selector: "cauca-data-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, showLoadingError: { classPropertyName: "showLoadingError", publicName: "showLoadingError", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, allowReordering: { classPropertyName: "allowReordering", publicName: "allowReordering", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, headerColor: { classPropertyName: "headerColor", publicName: "headerColor", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowDrop: "rowDrop", refreshData: "refreshData" }, queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content\r\n select=\"[customFilter]\"\r\n ngProjectAs=\"[customFilter]\">\r\n </ng-content>\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\r\n (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n @if (allowReordering()) {\r\n <ng-container matColumnDef=\"position\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\r\n <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n\r\n <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\r\n [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n @if (showFooter()) {\r\n <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\r\n }\r\n\r\n @if (!isLoading()) {\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n @if (!showLoadingError() && !isLoading()) {\r\n <td class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </td>\r\n }\r\n @if (showLoadingError()) {\r\n <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </td>\r\n }\r\n </tr>\r\n }\r\n\r\n</table>\r\n\r\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading()\" />\r\n\r\n@if (showPaginator()) {\r\n <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}tr.mat-mdc-row:hover{background:#f5f5f5}.mat-column-position{cursor:move;width:40px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;background:#fff;opacity:1;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;width:100%}.cdk-drag-preview tr,.cdk-drag-preview .mat-column-name{width:100%}.reorder-icon{vertical-align:middle;padding:0;color:#707070}.icon-text{display:flex;align-items:center;gap:8px}.cdk-drag-placeholder{background:gray;opacity:.5}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.error-message{color:red;mat-icon-color:red}.mat-column-expand{width:72px}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: // still needed
|
|
708
692
|
// Material Table structure:
|
|
709
693
|
MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type:
|
|
710
694
|
// Drag and Drop:
|
|
@@ -712,9 +696,9 @@ class DataGridComponent extends BaseDataGridComponent {
|
|
|
712
696
|
// Material extras:
|
|
713
697
|
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type:
|
|
714
698
|
// Custom Components:
|
|
715
|
-
DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "addButtonLabel", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
699
|
+
DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "addButtonLabel", "searchPlaceholder", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
716
700
|
}
|
|
717
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
701
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridComponent, decorators: [{
|
|
718
702
|
type: Component,
|
|
719
703
|
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'cauca-data-grid', imports: [
|
|
720
704
|
NgTemplateOutlet, // still needed
|
|
@@ -736,25 +720,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
736
720
|
DataGridProgressSpinerComponent,
|
|
737
721
|
IconButtonComponent,
|
|
738
722
|
StatusMessageComponent
|
|
739
|
-
], template: "@if (showHeader()) {\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton\" [addButtonLabel]=\"addButtonLabel || defaultAddButtonLabel\"\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\">\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n </cauca-data-grid-header>\n}\n\n@if (showTableOptions) {\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer\" [gridName]=\"resourceName\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\n <ng-content\n select=\"[customFilter]\"\n ngProjectAs=\"[customFilter]\">\n </ng-content>\n </cauca-data-grid-table-options>\n}\n\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\n (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\n\n @if (showExpandButton()) {\n <ng-container matColumnDef=\"expand\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"align-commands\">\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n }\n\n @if (allowReordering) {\n <ng-container matColumnDef=\"position\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\n <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n }\n\n <ng-content></ng-content>\n\n <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\n\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\n [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\n [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\n\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\n <div class=\"grid-element-detail\">\n @if (row === expandedElement()) {\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\n }\n </div>\n </div>\n </td>\n </ng-container>\n\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\n\n @if (showFooter()) {\n <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\n }\n\n @if (!isLoading) {\n <tr class=\"mat-row\" *matNoDataRow>\n @if (!showLoadingError && !isLoading) {\n <td class=\"mat-cell data-grid-message\"\n [attr.colspan]=\"allDisplayedColumns().length\">\n <cauca-status-message type=\"noData\" />\n </td>\n }\n @if (showLoadingError) {\n <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\n <cauca-status-message type=\"error\" />\n </td>\n }\n </tr>\n }\n\n</table>\n\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading\" />\n\n@if (showPaginator()) {\n <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}tr.mat-mdc-row:hover{background:#f5f5f5}.mat-column-position{cursor:move;width:40px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;background:#fff;opacity:1;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;width:100%}.cdk-drag-preview tr,.cdk-drag-preview .mat-column-name{width:100%}.reorder-icon{vertical-align:middle;padding:0;color:#707070}.icon-text{display:flex;align-items:center;gap:8px}.cdk-drag-placeholder{background:gray;opacity:.5}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.error-message{color:red;mat-icon-color:red}.mat-column-expand{width:72px}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
|
|
740
|
-
}], ctorParameters: () => [{ type: i1$3.TranslateService }], propDecorators: { data: [{
|
|
741
|
-
type: Input
|
|
742
|
-
}], showLoadingError: [{
|
|
743
|
-
type: Input
|
|
744
|
-
}], isLoading: [{
|
|
745
|
-
type: Input
|
|
746
|
-
}], allowReordering: [{
|
|
747
|
-
type: Input
|
|
748
|
-
}], searchableColumns: [{
|
|
749
|
-
type: Input
|
|
750
|
-
}], filterPredicate: [{
|
|
751
|
-
type: Input
|
|
752
|
-
}], rowDrop: [{
|
|
753
|
-
type: Output
|
|
754
|
-
}], rowDetailTemplate: [{
|
|
723
|
+
], template: "@if (showHeader()) {\r\n <cauca-data-grid-header [disableAddButton]=\"disableAddButton()\" [showAddButton]=\"showAddButton()\" [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"onRefreshData()\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content\r\n select=\"[customFilter]\"\r\n ngProjectAs=\"[customFilter]\">\r\n </ng-content>\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<table matSort mat-table [dataSource]=\"dataSource\" cdkDropList [cdkDropListData]=\"dataSource\"\r\n (cdkDropListDropped)=\"rowDropped($event)\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n @if (allowReordering()) {\r\n <ng-container matColumnDef=\"position\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell (mousedown)=\"dragDisabled = false\" (mouseup)=\"dragDisabled = true\" *matCellDef=\"let group\">\r\n <mat-icon class=\"reorder-icon\" cdkDragHandle>drag_indicator</mat-icon>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n\r\n <tr class=\"grid-header\" [style.background-color]=\"headerColor()\" mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns();\" cdkDrag [cdkDragData]=\"row\"\r\n [cdkDragDisabled]=\"dragDisabled\" (cdkDragReleased)=\"dragDisabled = true\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\" [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"></tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n @if (showFooter()) {\r\n <tr mat-footer-row *matFooterRowDef=\"allDisplayedColumns(); sticky: false\"></tr>\r\n }\r\n\r\n @if (!isLoading()) {\r\n <tr class=\"mat-row\" *matNoDataRow>\r\n @if (!showLoadingError() && !isLoading()) {\r\n <td class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </td>\r\n }\r\n @if (showLoadingError()) {\r\n <td class=\"mat-cell data-grid-message error-message\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </td>\r\n }\r\n </tr>\r\n }\r\n\r\n</table>\r\n\r\n<cauca-data-grid-progress-spiner [isLoading]=\"isLoading()\" />\r\n\r\n@if (showPaginator()) {\r\n <mat-paginator #paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n}", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}tr.mat-mdc-row:hover{background:#f5f5f5}.mat-column-position{cursor:move;width:40px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;background:#fff;opacity:1;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;width:100%}.cdk-drag-preview tr,.cdk-drag-preview .mat-column-name{width:100%}.reorder-icon{vertical-align:middle;padding:0;color:#707070}.icon-text{display:flex;align-items:center;gap:8px}.cdk-drag-placeholder{background:gray;opacity:.5}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.error-message{color:red;mat-icon-color:red}.mat-column-expand{width:72px}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
|
|
724
|
+
}], ctorParameters: () => [{ type: i1$3.TranslateService }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], showLoadingError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLoadingError", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], allowReordering: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowReordering", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], headerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerColor", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], refreshData: [{ type: i0.Output, args: ["refreshData"] }], rowDetailTemplate: [{
|
|
755
725
|
type: ContentChild,
|
|
756
726
|
args: [TemplateRef]
|
|
757
|
-
}]
|
|
727
|
+
}] } });
|
|
758
728
|
|
|
759
729
|
class OdataListingService {
|
|
760
730
|
get data() {
|
|
@@ -763,8 +733,10 @@ class OdataListingService {
|
|
|
763
733
|
constructor(httpClient) {
|
|
764
734
|
this.httpClient = httpClient;
|
|
765
735
|
this.dataSource = null;
|
|
766
|
-
this.error = signal(false,
|
|
767
|
-
|
|
736
|
+
this.error = signal(false, /* @ts-ignore */
|
|
737
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
738
|
+
this.loading = signal(false, /* @ts-ignore */
|
|
739
|
+
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
768
740
|
this.errorSubscription = null;
|
|
769
741
|
this.loadingSubscription = null;
|
|
770
742
|
}
|
|
@@ -812,10 +784,10 @@ class OdataListingService {
|
|
|
812
784
|
this.errorSubscription?.unsubscribe();
|
|
813
785
|
this.loadingSubscription?.unsubscribe();
|
|
814
786
|
}
|
|
815
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
816
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
787
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OdataListingService, deps: [{ token: i1$6.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
788
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OdataListingService, providedIn: 'root' }); }
|
|
817
789
|
}
|
|
818
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
790
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OdataListingService, decorators: [{
|
|
819
791
|
type: Injectable,
|
|
820
792
|
args: [{
|
|
821
793
|
providedIn: 'root',
|
|
@@ -918,16 +890,28 @@ class OdataGridComponent extends BaseDataGridComponent {
|
|
|
918
890
|
constructor(translateService, listing) {
|
|
919
891
|
super(translateService, inject(PREFERENCE_SERVICE_TOKEN));
|
|
920
892
|
this.listing = listing;
|
|
921
|
-
this.showTableHeader = input(true,
|
|
893
|
+
this.showTableHeader = input(true, /* @ts-ignore */
|
|
894
|
+
...(ngDevMode ? [{ debugName: "showTableHeader" }] : /* istanbul ignore next */ []));
|
|
922
895
|
/** Master switch: when true, the grid's filter/sort/page are synced with the URL query params and restored when returning from a detail page. Off by default. */
|
|
923
|
-
this.persistState = input(false,
|
|
896
|
+
this.persistState = input(false, /* @ts-ignore */
|
|
897
|
+
...(ngDevMode ? [{ debugName: "persistState" }] : /* istanbul ignore next */ []));
|
|
924
898
|
/** Optional prefix for the persisted query params, so two independent grids on the same route don't collide (e.g. "alerts" -> "alertsFilter"). */
|
|
925
|
-
this.stateKey = input('',
|
|
926
|
-
|
|
927
|
-
this.
|
|
899
|
+
this.stateKey = input('', /* @ts-ignore */
|
|
900
|
+
...(ngDevMode ? [{ debugName: "stateKey" }] : /* istanbul ignore next */ []));
|
|
901
|
+
this.baseSort = input(/* @ts-ignore */
|
|
902
|
+
...(ngDevMode ? [undefined, { debugName: "baseSort" }] : /* istanbul ignore next */ []));
|
|
903
|
+
this.filterPredicate = input(/* @ts-ignore */
|
|
904
|
+
...(ngDevMode ? [undefined, { debugName: "filterPredicate" }] : /* istanbul ignore next */ []));
|
|
905
|
+
this.showHeader = input(true, /* @ts-ignore */
|
|
906
|
+
...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
|
|
907
|
+
this.selectedRowId = input(/* @ts-ignore */
|
|
908
|
+
...(ngDevMode ? [undefined, { debugName: "selectedRowId" }] : /* istanbul ignore next */ []));
|
|
909
|
+
this.idField = input('id', /* @ts-ignore */
|
|
910
|
+
...(ngDevMode ? [{ debugName: "idField" }] : /* istanbul ignore next */ []));
|
|
911
|
+
this.showRefreshButton = input(false, /* @ts-ignore */
|
|
912
|
+
...(ngDevMode ? [{ debugName: "showRefreshButton" }] : /* istanbul ignore next */ []));
|
|
928
913
|
this.itemClick = new EventEmitter();
|
|
929
|
-
this.refreshRequested =
|
|
930
|
-
this.showRefreshButton = false;
|
|
914
|
+
this.refreshRequested = output();
|
|
931
915
|
this.baseUrl = inject(CaucaCoreService).getConfig().apiUrl;
|
|
932
916
|
this.router = inject(Router, { optional: true });
|
|
933
917
|
this.route = inject(ActivatedRoute, { optional: true });
|
|
@@ -943,9 +927,9 @@ class OdataGridComponent extends BaseDataGridComponent {
|
|
|
943
927
|
}
|
|
944
928
|
if (this.pendingRestoredFilter !== undefined) {
|
|
945
929
|
this.header.filterControl.setValue(this.pendingRestoredFilter, { emitEvent: false });
|
|
946
|
-
this.header.showClearButton
|
|
930
|
+
this.header.showClearButton.set(!!this.pendingRestoredFilter);
|
|
947
931
|
}
|
|
948
|
-
this.header.filterChange
|
|
932
|
+
outputToObservable(this.header.filterChange)
|
|
949
933
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
950
934
|
.subscribe(() => this.writeCurrentUrlState());
|
|
951
935
|
if (this.restoredState && this.hasRestoredState(this.restoredState)) {
|
|
@@ -961,36 +945,35 @@ class OdataGridComponent extends BaseDataGridComponent {
|
|
|
961
945
|
this.listing.refresh();
|
|
962
946
|
this.refreshRequested.emit();
|
|
963
947
|
}
|
|
964
|
-
ngOnChanges(changes) {
|
|
965
|
-
this.updateColumnsWhenNeeded(changes);
|
|
966
|
-
}
|
|
967
948
|
getData() {
|
|
968
949
|
return this.listing.data;
|
|
969
950
|
}
|
|
970
951
|
applyFilter(filter) {
|
|
971
|
-
|
|
952
|
+
const filterPredicate = this.filterPredicate();
|
|
953
|
+
if (filterPredicate) {
|
|
972
954
|
if (this.paginator) {
|
|
973
955
|
this.paginator.firstPage();
|
|
974
956
|
}
|
|
975
|
-
this.listing.updateFilters(
|
|
957
|
+
this.listing.updateFilters(filterPredicate(toLowerCaseAndWithoutDiacritics(filter)));
|
|
976
958
|
}
|
|
977
959
|
}
|
|
978
960
|
refreshFilter() {
|
|
979
|
-
|
|
980
|
-
|
|
961
|
+
const filterPredicate = this.filterPredicate();
|
|
962
|
+
if (filterPredicate) {
|
|
963
|
+
this.listing.updateFilters(filterPredicate(toLowerCaseAndWithoutDiacritics(this.header?.filterControl?.value)));
|
|
981
964
|
}
|
|
982
965
|
}
|
|
983
966
|
setUpFilterPredicate() {
|
|
984
|
-
let filters = this.filterPredicate?.('') ?? [];
|
|
967
|
+
let filters = this.filterPredicate()?.('') ?? [];
|
|
985
968
|
if (this.canPersistState()) {
|
|
986
969
|
filters = this.restoreStateBeforeInitialLoad() ?? filters;
|
|
987
970
|
}
|
|
988
971
|
this.listing.initialize({
|
|
989
972
|
baseUrl: this.baseUrl,
|
|
990
|
-
resourceName: this.resourceName,
|
|
973
|
+
resourceName: this.resourceName(),
|
|
991
974
|
paginator: this.paginator,
|
|
992
975
|
sort: this.sort,
|
|
993
|
-
initialSort: this.baseSort,
|
|
976
|
+
initialSort: this.baseSort(),
|
|
994
977
|
filters,
|
|
995
978
|
});
|
|
996
979
|
if (this.canPersistState()) {
|
|
@@ -1000,33 +983,20 @@ class OdataGridComponent extends BaseDataGridComponent {
|
|
|
1000
983
|
setUpSort(sort) {
|
|
1001
984
|
this.sort = sort;
|
|
1002
985
|
}
|
|
1003
|
-
updateColumnsWhenNeeded(changes) {
|
|
1004
|
-
if (changes.displayedColumns || changes.showExpandButton) {
|
|
1005
|
-
let columns = [...this.displayedColumns];
|
|
1006
|
-
if (this.showExpandButton()) {
|
|
1007
|
-
columns = ['expand', ...columns];
|
|
1008
|
-
}
|
|
1009
|
-
this.allDisplayedColumns.set([...columns]);
|
|
1010
|
-
}
|
|
1011
|
-
}
|
|
1012
986
|
forceReloadFilter() {
|
|
1013
987
|
this.listing.forceReloadFilter();
|
|
1014
988
|
}
|
|
1015
|
-
|
|
1016
|
-
|
|
989
|
+
computeDisplayedColumns() {
|
|
990
|
+
return this.decorateColumns(this.displayedColumns());
|
|
1017
991
|
}
|
|
1018
992
|
onColumnsChanged(columns) {
|
|
1019
|
-
|
|
1020
|
-
columns = ['expand', ...columns];
|
|
1021
|
-
}
|
|
1022
|
-
super.onColumnsChanged(columns);
|
|
993
|
+
super.onColumnsChanged(this.decorateColumns(columns));
|
|
1023
994
|
}
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
this.allDisplayedColumns.set([...columns]);
|
|
995
|
+
/** `expand` is a grid-owned column, not part of the caller's list. */
|
|
996
|
+
decorateColumns(columns) {
|
|
997
|
+
return this.showExpandButton() && !columns.includes('expand')
|
|
998
|
+
? ['expand', ...columns]
|
|
999
|
+
: [...columns];
|
|
1030
1000
|
}
|
|
1031
1001
|
canPersistState() {
|
|
1032
1002
|
return this.persistState() && !!this.router && !!this.route;
|
|
@@ -1037,10 +1007,11 @@ class OdataGridComponent extends BaseDataGridComponent {
|
|
|
1037
1007
|
this.applySortAndPage(restoredState);
|
|
1038
1008
|
this.pendingRestoredFilter = restoredState.filter;
|
|
1039
1009
|
this.restoredState = restoredState;
|
|
1040
|
-
|
|
1010
|
+
const filterPredicate = this.filterPredicate();
|
|
1011
|
+
if (restoredState.filter === undefined || !filterPredicate) {
|
|
1041
1012
|
return undefined;
|
|
1042
1013
|
}
|
|
1043
|
-
return
|
|
1014
|
+
return filterPredicate(toLowerCaseAndWithoutDiacritics(restoredState.filter));
|
|
1044
1015
|
}
|
|
1045
1016
|
setUpUrlStatePersistence() {
|
|
1046
1017
|
this.lastWrittenParams = toQueryParams(fromQueryParams(this.route.snapshot.queryParamMap, this.stateKey()), this.stateKey());
|
|
@@ -1104,9 +1075,9 @@ class OdataGridComponent extends BaseDataGridComponent {
|
|
|
1104
1075
|
this.applySortAndPage(state);
|
|
1105
1076
|
if (this.header) {
|
|
1106
1077
|
this.header.filterControl.setValue(state.filter ?? '', { emitEvent: false });
|
|
1107
|
-
this.header.showClearButton
|
|
1078
|
+
this.header.showClearButton.set(!!state.filter);
|
|
1108
1079
|
}
|
|
1109
|
-
if (this.filterPredicate) {
|
|
1080
|
+
if (this.filterPredicate()) {
|
|
1110
1081
|
this.refreshFilter();
|
|
1111
1082
|
}
|
|
1112
1083
|
else {
|
|
@@ -1116,18 +1087,18 @@ class OdataGridComponent extends BaseDataGridComponent {
|
|
|
1116
1087
|
hasRestoredState(state) {
|
|
1117
1088
|
return state.filter !== undefined || state.sort !== undefined || state.pageIndex !== undefined || state.pageSize !== undefined;
|
|
1118
1089
|
}
|
|
1119
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1120
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1090
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OdataGridComponent, deps: [{ token: i1$3.TranslateService }, { token: OdataListingService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1091
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: OdataGridComponent, isStandalone: true, selector: "cauca-odata-grid", inputs: { showTableHeader: { classPropertyName: "showTableHeader", publicName: "showTableHeader", isSignal: true, isRequired: false, transformFunction: null }, persistState: { classPropertyName: "persistState", publicName: "persistState", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, baseSort: { classPropertyName: "baseSort", publicName: "baseSort", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRowId: { classPropertyName: "selectedRowId", publicName: "selectedRowId", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, showRefreshButton: { classPropertyName: "showRefreshButton", publicName: "showRefreshButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", refreshRequested: "refreshRequested" }, providers: [OdataListingService], queries: [{ propertyName: "rowDetailTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showAddButton]=\"showAddButton()\"\r\n [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<div class=\"relative\">\r\n <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n @if(showTableHeader()) {\r\n <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n }\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\r\n [class.showClick]=\"itemClick.observers.length > 0\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\"\r\n [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\r\n [class.selected]=\"selectedRowId() === row[idField()]\"\r\n (click)=\"itemClick.emit(row)\"\r\n onkeypress=\"itemClick.emit(row)\">\r\n </tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n <ng-container *matNoDataRow>\r\n @if(listing.loading() === false) {\r\n <ng-container>\r\n <tr class=\"mat-row\">\r\n @if (listing.error() === false) {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </th>\r\n } @else {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </th>\r\n }\r\n </tr>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n </table>\r\n\r\n <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\r\n\r\n</div>\r\n\r\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}.relative{position:relative}.mat-column-expand{width:72px}cauca-data-grid-progress-spiner{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;z-index:101}tr.mat-mdc-row{transition:background-color .2s ease-out .1s}tr.mat-mdc-row:hover{background:#f5f5f5}tr.mat-mdc-row.selected{background:#249edb14}tr.mat-mdc-row.selected:hover{background:#249edb1a}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.showClick{cursor:pointer}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type:
|
|
1121
1092
|
// Material table structure:
|
|
1122
1093
|
MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type:
|
|
1123
1094
|
// Material extras
|
|
1124
1095
|
MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type:
|
|
1125
1096
|
// custom components
|
|
1126
|
-
DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "addButtonLabel", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1097
|
+
DataGridHeaderComponent, selector: "cauca-data-grid-header", inputs: ["showAddButton", "showRefreshButton", "addButtonLabel", "searchPlaceholder", "disableAddButton"], outputs: ["filterChange", "addButtonClick", "refreshRequest"] }, { kind: "component", type: DataGridTableOptionsComponent, selector: "cauca-data-grid-table-options", inputs: ["gridName", "showColumnViewer", "allColumns"], outputs: ["densityChanged", "columnsChanged"] }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "component", type: DataGridProgressSpinerComponent, selector: "cauca-data-grid-progress-spiner", inputs: ["isLoading", "useBackground"] }, { kind: "component", type: StatusMessageComponent, selector: "cauca-status-message", inputs: ["type", "textKey", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1127
1098
|
}
|
|
1128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1099
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: OdataGridComponent, decorators: [{
|
|
1129
1100
|
type: Component,
|
|
1130
|
-
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'cauca-odata-grid', providers: [OdataListingService], imports: [
|
|
1101
|
+
args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'cauca-odata-grid', providers: [OdataListingService], outputs: ['itemClick'], imports: [
|
|
1131
1102
|
NgTemplateOutlet,
|
|
1132
1103
|
// Material table structure:
|
|
1133
1104
|
MatTable, MatColumnDef,
|
|
@@ -1142,24 +1113,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
1142
1113
|
IconButtonComponent,
|
|
1143
1114
|
DataGridProgressSpinerComponent,
|
|
1144
1115
|
StatusMessageComponent,
|
|
1145
|
-
], template: "@if (showHeader) {\n <cauca-data-grid-header\n [disableAddButton]=\"disableAddButton()\"\n [showRefreshButton]=\"showRefreshButton\" (refreshRequest)=\"refreshData()\"\n [showAddButton]=\"showAddButton\"\n [addButtonLabel]=\"addButtonLabel || defaultAddButtonLabel\"\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\n </cauca-data-grid-header>\n}\n\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\n\n@if (showTableOptions) {\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer\" [gridName]=\"resourceName\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\n <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\n </cauca-data-grid-table-options>\n}\n\n<div class=\"relative\">\n <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\n @if (showExpandButton()) {\n <ng-container matColumnDef=\"expand\">\n <th mat-header-cell *matHeaderCellDef></th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"align-commands\">\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\n </div>\n </td>\n </ng-container>\n }\n\n <ng-content></ng-content>\n @if(showTableHeader()) {\n <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\n }\n\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\n [class.showClick]=\"itemClick.observers.length > 0\"\n [class.compact]=\"preference.gridDensity === density.Compact\"\n [class.standard]=\"preference.gridDensity === density.Standard\"\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\n [class.selected]=\"selectedRowId === row[idField]\"\n (click)=\"itemClick.emit(row)\"\n onkeypress=\"itemClick.emit(row)\">\n </tr>\n\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\n <div class=\"grid-element-detail\">\n @if (row === expandedElement()) {\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\n }\n </div>\n </div>\n </td>\n </ng-container>\n\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\n\n <ng-container *matNoDataRow>\n @if(listing.loading() === false) {\n <ng-container>\n <tr class=\"mat-row\">\n @if (listing.error() === false) {\n <th class=\"mat-cell data-grid-message\"\n [attr.colspan]=\"allDisplayedColumns().length\">\n <cauca-status-message type=\"noData\" />\n </th>\n } @else {\n <th class=\"mat-cell data-grid-message\"\n [attr.colspan]=\"allDisplayedColumns().length\">\n <cauca-status-message type=\"error\" />\n </th>\n }\n </tr>\n </ng-container>\n }\n </ng-container>\n </table>\n\n <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\n\n</div>\n\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}.relative{position:relative}.mat-column-expand{width:72px}cauca-data-grid-progress-spiner{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;z-index:101}tr.mat-mdc-row{transition:background-color .2s ease-out .1s}tr.mat-mdc-row:hover{background:#f5f5f5}tr.mat-mdc-row.selected{background:#249edb14}tr.mat-mdc-row.selected:hover{background:#249edb1a}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.showClick{cursor:pointer}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
|
|
1146
|
-
}], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: OdataListingService }], propDecorators: { showTableHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableHeader", required: false }] }], persistState: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistState", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], baseSort: [{
|
|
1147
|
-
type: Input
|
|
1148
|
-
}], filterPredicate: [{
|
|
1149
|
-
type: Input
|
|
1150
|
-
}], showHeader: [{
|
|
1151
|
-
type: Input
|
|
1152
|
-
}], selectedRowId: [{
|
|
1153
|
-
type: Input
|
|
1154
|
-
}], idField: [{
|
|
1155
|
-
type: Input
|
|
1156
|
-
}], itemClick: [{
|
|
1157
|
-
type: Output
|
|
1158
|
-
}], refreshRequested: [{
|
|
1159
|
-
type: Output
|
|
1160
|
-
}], showRefreshButton: [{
|
|
1161
|
-
type: Input
|
|
1162
|
-
}], rowDetailTemplate: [{
|
|
1116
|
+
], template: "@if (showHeader()) {\r\n <cauca-data-grid-header\r\n [disableAddButton]=\"disableAddButton()\"\r\n [showRefreshButton]=\"showRefreshButton()\" (refreshRequest)=\"refreshData()\"\r\n [showAddButton]=\"showAddButton()\"\r\n [addButtonLabel]=\"addButtonLabel() || defaultAddButtonLabel\"\r\n [searchPlaceholder]=\"searchPlaceholder()\"\r\n (addButtonClick)=\"addButtonClick.emit($event)\" (filterChange)=\"applyFilter($event)\">\r\n <ng-content select=\"[filterRow]\" ngProjectAs=\"[filterRow]\" />\r\n </cauca-data-grid-header>\r\n}\r\n\r\n<ng-content select=\"[customHeader]\" ngProjectAs=\"[customHeader]\" />\r\n\r\n@if (showTableOptions()) {\r\n <cauca-data-grid-table-options [showColumnViewer]=\"showColumnViewer()\" [gridName]=\"resourceName()\" (densityChanged)=\"onDensityChanged($event)\" (columnsChanged)=\"onColumnsChanged($event)\" [allColumns]=\"regularColumns\">\r\n <ng-content select=\"[customFilter]\" ngProjectAs=\"[customFilter]\" />\r\n </cauca-data-grid-table-options>\r\n}\r\n\r\n<div class=\"relative\">\r\n <table mat-table [dataSource]=\"listing.dataSource\" aria-describedby=\"Data Grid\" multiTemplateDataRows>\r\n @if (showExpandButton()) {\r\n <ng-container matColumnDef=\"expand\">\r\n <th mat-header-cell *matHeaderCellDef></th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n <cauca-icon-button (buttonClick)=\"onExpand(row)\" color=\"primary\" class=\"button-icon\" [icon]=\"row === expandedElement() ? 'keyboard_arrow_up' : 'keyboard_arrow_down'\" />\r\n </div>\r\n </td>\r\n </ng-container>\r\n }\r\n\r\n <ng-content></ng-content>\r\n @if(showTableHeader()) {\r\n <tr mat-header-row *matHeaderRowDef=\"allDisplayedColumns(); sticky: true\"></tr>\r\n }\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: allDisplayedColumns()\"\r\n [class.showClick]=\"itemClick.observers.length > 0\"\r\n [class.compact]=\"preference.gridDensity === density.Compact\"\r\n [class.standard]=\"preference.gridDensity === density.Standard\"\r\n [class.comfortable]=\"preference.gridDensity === density.Comfortable\"\r\n [class.selected]=\"selectedRowId() === row[idField()]\"\r\n (click)=\"itemClick.emit(row)\"\r\n onkeypress=\"itemClick.emit(row)\">\r\n </tr>\r\n\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let row\" [attr.colspan]=\"allDisplayedColumns().length\">\r\n <div class=\"grid-element-detail-wrapper\" [class.grid-element-detail-wrapper-expanded]=\"row === expandedElement()\">\r\n <div class=\"grid-element-detail\">\r\n @if (row === expandedElement()) {\r\n <template [ngTemplateOutlet]=\"rowDetailTemplate\" [ngTemplateOutletContext]=\"{ row: expandedElement() }\"></template>\r\n }\r\n </div>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"grid-detail-row\"></tr>\r\n\r\n <ng-container *matNoDataRow>\r\n @if(listing.loading() === false) {\r\n <ng-container>\r\n <tr class=\"mat-row\">\r\n @if (listing.error() === false) {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"noData\" />\r\n </th>\r\n } @else {\r\n <th class=\"mat-cell data-grid-message\"\r\n [attr.colspan]=\"allDisplayedColumns().length\">\r\n <cauca-status-message type=\"error\" />\r\n </th>\r\n }\r\n </tr>\r\n </ng-container>\r\n }\r\n </ng-container>\r\n </table>\r\n\r\n <cauca-data-grid-progress-spiner [useBackground]=\"false\" [isLoading]=\"listing.loading()\" />\r\n\r\n</div>\r\n\r\n<mat-paginator [hidePageSize]=\"hidePageSize()\" [pageSizeOptions]=\"[5, 10, 25, 50]\" [pageSize]=\"10\" />\r\n", styles: ["table{width:100%;table-layout:fixed;--mat-table-header-container-height: 52px;--mat-table-footer-container-height: 48px;--mat-table-row-item-container-height: 48px;--mat-table-header-container-height: 56px}.relative{position:relative}.mat-column-expand{width:72px}cauca-data-grid-progress-spiner{left:50%;top:50%;transform:translate(-50%,-50%);position:absolute;z-index:101}tr.mat-mdc-row{transition:background-color .2s ease-out .1s}tr.mat-mdc-row:hover{background:#f5f5f5}tr.mat-mdc-row.selected{background:#249edb14}tr.mat-mdc-row.selected:hover{background:#249edb1a}cauca-data-grid-header{margin:16px}.compact{line-height:48px!important}.standard{line-height:56px!important}.comfortable{line-height:62px!important}.showClick{cursor:pointer}tr.grid-detail-row{height:0}.grid-element-row td{border-bottom-width:0;background-color:#fafafa}.mat-column-expandedDetail{background-color:#fafafa}.grid-element-detail-wrapper{overflow:hidden;display:grid;grid-template-rows:0fr;grid-template-columns:100%;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1)}.grid-element-detail-wrapper-expanded{grid-template-rows:1fr}.grid-element-detail{display:flex;min-height:0}\n"] }]
|
|
1117
|
+
}], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: OdataListingService }], propDecorators: { showTableHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTableHeader", required: false }] }], persistState: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistState", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], baseSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseSort", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], selectedRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowId", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], showRefreshButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRefreshButton", required: false }] }], refreshRequested: [{ type: i0.Output, args: ["refreshRequested"] }], rowDetailTemplate: [{
|
|
1163
1118
|
type: ContentChild,
|
|
1164
1119
|
args: [TemplateRef]
|
|
1165
1120
|
}], paginator: [{
|
|
@@ -1222,10 +1177,10 @@ class GridStateRestorationService {
|
|
|
1222
1177
|
});
|
|
1223
1178
|
return params;
|
|
1224
1179
|
}
|
|
1225
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1226
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1180
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: GridStateRestorationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1181
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: GridStateRestorationService, providedIn: 'root' }); }
|
|
1227
1182
|
}
|
|
1228
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: GridStateRestorationService, decorators: [{
|
|
1229
1184
|
type: Injectable,
|
|
1230
1185
|
args: [{
|
|
1231
1186
|
providedIn: 'root',
|
|
@@ -1251,17 +1206,17 @@ class ColorDataGridColumnComponent extends BaseGridColumnComponent {
|
|
|
1251
1206
|
this.odata = odata;
|
|
1252
1207
|
this.grid = grid;
|
|
1253
1208
|
}
|
|
1254
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1255
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1209
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColorDataGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1210
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ColorDataGridColumnComponent, isStandalone: true, selector: "cauca-color-data-grid-column", providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => ColorDataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (row[prop()]) {\r\n <div class=\"color-capsule\" [style.backgroundColor]=\"row[prop()]\"></div>\r\n }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-color{width:100px}.color-capsule{width:100%;height:25px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1256
1211
|
}
|
|
1257
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1212
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColorDataGridColumnComponent, decorators: [{
|
|
1258
1213
|
type: Component,
|
|
1259
1214
|
args: [{ selector: 'cauca-color-data-grid-column', standalone: true, imports: [
|
|
1260
1215
|
MatColumnDef,
|
|
1261
1216
|
MatHeaderCell, MatHeaderCellDef, NgStyle,
|
|
1262
1217
|
MatCell, MatCellDef,
|
|
1263
1218
|
MatFooterCellDef, MatFooterCellDef
|
|
1264
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.
|
|
1219
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => ColorDataGridColumnComponent) }], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (row[prop()]) {\r\n <div class=\"color-capsule\" [style.backgroundColor]=\"row[prop()]\"></div>\r\n }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-column-color{width:100px}.color-capsule{width:100%;height:25px;border-radius:4px;border:1px solid rgba(0,0,0,.12)}\n"] }]
|
|
1265
1220
|
}], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
|
|
1266
1221
|
type: Optional
|
|
1267
1222
|
}] }, { type: DataGridComponent, decorators: [{
|
|
@@ -1270,37 +1225,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
1270
1225
|
|
|
1271
1226
|
class CheckIconComponent {
|
|
1272
1227
|
constructor() {
|
|
1273
|
-
this.checkIcon = input('check',
|
|
1274
|
-
|
|
1275
|
-
this.
|
|
1276
|
-
|
|
1277
|
-
this.
|
|
1278
|
-
|
|
1279
|
-
this.
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1228
|
+
this.checkIcon = input('check', /* @ts-ignore */
|
|
1229
|
+
...(ngDevMode ? [{ debugName: "checkIcon" }] : /* istanbul ignore next */ []));
|
|
1230
|
+
this.uncheckIcon = input('block', /* @ts-ignore */
|
|
1231
|
+
...(ngDevMode ? [{ debugName: "uncheckIcon" }] : /* istanbul ignore next */ []));
|
|
1232
|
+
this.isChecked = input(false, /* @ts-ignore */
|
|
1233
|
+
...(ngDevMode ? [{ debugName: "isChecked" }] : /* istanbul ignore next */ []));
|
|
1234
|
+
this.icon = computed(() => (this.isChecked() ? this.checkIcon() : this.uncheckIcon()), /* @ts-ignore */
|
|
1235
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1236
|
+
this.checkMark = computed(() => this.isChecked() && this.checkIcon() === 'check', /* @ts-ignore */
|
|
1237
|
+
...(ngDevMode ? [{ debugName: "checkMark" }] : /* istanbul ignore next */ []));
|
|
1238
|
+
this.check = computed(() => this.isChecked() && this.checkIcon() !== 'check', /* @ts-ignore */
|
|
1239
|
+
...(ngDevMode ? [{ debugName: "check" }] : /* istanbul ignore next */ []));
|
|
1240
|
+
this.uncheck = computed(() => !this.isChecked(), /* @ts-ignore */
|
|
1241
|
+
...(ngDevMode ? [{ debugName: "uncheck" }] : /* istanbul ignore next */ []));
|
|
1242
|
+
}
|
|
1243
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1244
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: CheckIconComponent, isStandalone: true, selector: "cauca-check-icon", inputs: { checkIcon: { classPropertyName: "checkIcon", publicName: "checkIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckIcon: { classPropertyName: "uncheckIcon", publicName: "uncheckIcon", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
1245
|
+
<mat-icon
|
|
1246
|
+
class="check-icon"
|
|
1247
|
+
[class.check-mark]="checkMark()"
|
|
1248
|
+
[class.check]="check()"
|
|
1249
|
+
[class.uncheck]="uncheck()"
|
|
1250
|
+
aria-hidden="false"
|
|
1251
|
+
aria-label="State icon"
|
|
1252
|
+
[fontIcon]="icon()" />
|
|
1291
1253
|
`, isInline: true, styles: [".check-mark{color:#2e7d32}.check{color:#006496}.uncheck{color:#12101461}.check-icon{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1292
1254
|
}
|
|
1293
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1255
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CheckIconComponent, decorators: [{
|
|
1294
1256
|
type: Component,
|
|
1295
|
-
args: [{ selector: 'cauca-check-icon', template: `
|
|
1296
|
-
<mat-icon
|
|
1297
|
-
class="check-icon"
|
|
1298
|
-
[class.check-mark]="checkMark()"
|
|
1299
|
-
[class.check]="check()"
|
|
1300
|
-
[class.uncheck]="uncheck()"
|
|
1301
|
-
aria-hidden="false"
|
|
1302
|
-
aria-label="State icon"
|
|
1303
|
-
[fontIcon]="icon()" />
|
|
1257
|
+
args: [{ selector: 'cauca-check-icon', template: `
|
|
1258
|
+
<mat-icon
|
|
1259
|
+
class="check-icon"
|
|
1260
|
+
[class.check-mark]="checkMark()"
|
|
1261
|
+
[class.check]="check()"
|
|
1262
|
+
[class.uncheck]="uncheck()"
|
|
1263
|
+
aria-hidden="false"
|
|
1264
|
+
aria-label="State icon"
|
|
1265
|
+
[fontIcon]="icon()" />
|
|
1304
1266
|
`, imports: [MatIcon], changeDetection: ChangeDetectionStrategy.OnPush, styles: [".check-mark{color:#2e7d32}.check{color:#006496}.uncheck{color:#12101461}.check-icon{vertical-align:middle}\n"] }]
|
|
1305
1267
|
}], propDecorators: { checkIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkIcon", required: false }] }], uncheckIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "uncheckIcon", required: false }] }], isChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChecked", required: false }] }] } });
|
|
1306
1268
|
|
|
@@ -1309,193 +1271,183 @@ class DataGridCheckColumnComponent extends BaseGridColumnComponent {
|
|
|
1309
1271
|
super((grid ?? odata)?.table);
|
|
1310
1272
|
this.odata = odata;
|
|
1311
1273
|
this.grid = grid;
|
|
1312
|
-
this.checkIcon = 'check'
|
|
1313
|
-
|
|
1274
|
+
this.checkIcon = input('check', /* @ts-ignore */
|
|
1275
|
+
...(ngDevMode ? [{ debugName: "checkIcon" }] : /* istanbul ignore next */ []));
|
|
1276
|
+
this.uncheckIcon = input('block', /* @ts-ignore */
|
|
1277
|
+
...(ngDevMode ? [{ debugName: "uncheckIcon" }] : /* istanbul ignore next */ []));
|
|
1314
1278
|
}
|
|
1315
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1316
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1279
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridCheckColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1280
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: DataGridCheckColumnComponent, isStandalone: true, selector: "cauca-data-grid-check-column", inputs: { checkIcon: { classPropertyName: "checkIcon", publicName: "checkIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckIcon: { classPropertyName: "uncheckIcon", publicName: "uncheckIcon", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCheckColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width(), 'text-align': 'center'}\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <cauca-check-icon [checkIcon]=\"checkIcon()\" [uncheckIcon]=\"uncheckIcon()\" [isChecked]=\"row[prop()]\" />\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{width:120px;min-width:120px;text-align:center}\n"], dependencies: [{ kind: "component", type: CheckIconComponent, selector: "cauca-check-icon", inputs: ["checkIcon", "uncheckIcon", "isChecked"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1317
1281
|
}
|
|
1318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1282
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridCheckColumnComponent, decorators: [{
|
|
1319
1283
|
type: Component,
|
|
1320
|
-
args: [{ selector: 'cauca-data-grid-check-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCheckColumnComponent) }], imports: [CheckIconComponent, MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatCell, MatCellDef, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop }}\">\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width, 'text-align': 'center'}\">\n {{ label ?? capitalize(prop) }}\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <cauca-check-icon [checkIcon]=\"checkIcon\" [uncheckIcon]=\"uncheckIcon\" [isChecked]=\"row[prop]\" />\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["th,td{width:120px;min-width:120px;text-align:center}\n"] }]
|
|
1284
|
+
args: [{ selector: 'cauca-data-grid-check-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCheckColumnComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [CheckIconComponent, MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatCell, MatCellDef, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width(), 'text-align': 'center'}\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <cauca-check-icon [checkIcon]=\"checkIcon()\" [uncheckIcon]=\"uncheckIcon()\" [isChecked]=\"row[prop()]\" />\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{width:120px;min-width:120px;text-align:center}\n"] }]
|
|
1321
1285
|
}], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
|
|
1322
1286
|
type: Optional
|
|
1323
1287
|
}] }, { type: DataGridComponent, decorators: [{
|
|
1324
1288
|
type: Optional
|
|
1325
|
-
}] }], propDecorators: { checkIcon: [{
|
|
1326
|
-
type: Input
|
|
1327
|
-
}], uncheckIcon: [{
|
|
1328
|
-
type: Input
|
|
1329
|
-
}] } });
|
|
1289
|
+
}] }], propDecorators: { checkIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkIcon", required: false }] }], uncheckIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "uncheckIcon", required: false }] }] } });
|
|
1330
1290
|
|
|
1331
1291
|
class DataGridColumnComponent extends BaseGridColumnComponent {
|
|
1332
1292
|
constructor(odata, grid) {
|
|
1333
1293
|
super((grid ?? odata)?.table);
|
|
1334
|
-
this.
|
|
1335
|
-
|
|
1336
|
-
this.summaryLabel = input('',
|
|
1337
|
-
|
|
1294
|
+
this.summaryType = input('none', /* @ts-ignore */
|
|
1295
|
+
...(ngDevMode ? [{ debugName: "summaryType" }] : /* istanbul ignore next */ []));
|
|
1296
|
+
this.summaryLabel = input('', /* @ts-ignore */
|
|
1297
|
+
...(ngDevMode ? [{ debugName: "summaryLabel" }] : /* istanbul ignore next */ []));
|
|
1298
|
+
this.format = input('none', /* @ts-ignore */
|
|
1299
|
+
...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
|
|
1338
1300
|
this.isInitialized = false;
|
|
1339
1301
|
this.grid = null;
|
|
1340
1302
|
this.grid = grid ?? odata;
|
|
1341
1303
|
this.isInitialized = true;
|
|
1342
1304
|
}
|
|
1343
1305
|
calculateSummary() {
|
|
1344
|
-
|
|
1306
|
+
const rows = this.grid?.data?.();
|
|
1307
|
+
if (this.isInitialized && rows) {
|
|
1345
1308
|
if (this.summaryType() === 'sum') {
|
|
1346
|
-
return this.summaryLabel() +
|
|
1309
|
+
return this.summaryLabel() + rows.reduce((acc, row) => acc + row[this.prop()], 0) + this.summaryLabel();
|
|
1347
1310
|
}
|
|
1348
1311
|
if (this.summaryType() === 'count') {
|
|
1349
|
-
return
|
|
1312
|
+
return rows.length + this.summaryLabel();
|
|
1350
1313
|
}
|
|
1351
1314
|
}
|
|
1352
1315
|
return '';
|
|
1353
1316
|
}
|
|
1354
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1355
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1317
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1318
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridColumnComponent, isStandalone: true, selector: "cauca-data-grid-column", inputs: { summaryType: { classPropertyName: "summaryType", publicName: "summaryType", isSignal: true, isRequired: false, transformFunction: null }, summaryLabel: { classPropertyName: "summaryLabel", publicName: "summaryLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (showToolTip()) {<span [matTooltip]=\"row[prop()]\" >{{ row[prop()] }}</span>}\r\n @else { <span>{{ row[prop()] }}</span>}\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (isInitialized) {\r\n {{calculateSummary()}}\r\n }\r\n </td>\r\n\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1356
1319
|
}
|
|
1357
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1320
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridColumnComponent, decorators: [{
|
|
1358
1321
|
type: Component,
|
|
1359
|
-
args: [{ selector: 'cauca-data-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.
|
|
1322
|
+
args: [{ selector: 'cauca-data-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatCell, MatCellDef, MatTooltip, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (showToolTip()) {<span [matTooltip]=\"row[prop()]\" >{{ row[prop()] }}</span>}\r\n @else { <span>{{ row[prop()] }}</span>}\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (isInitialized) {\r\n {{calculateSummary()}}\r\n }\r\n </td>\r\n\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
1360
1323
|
}], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
|
|
1361
1324
|
type: Optional
|
|
1362
1325
|
}] }, { type: DataGridComponent, decorators: [{
|
|
1363
1326
|
type: Optional
|
|
1364
|
-
}] }], propDecorators: {
|
|
1365
|
-
type: Input
|
|
1366
|
-
}], summaryType: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryType", required: false }] }], summaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryLabel", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }] } });
|
|
1327
|
+
}] }], propDecorators: { summaryType: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryType", required: false }] }], summaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryLabel", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }] } });
|
|
1367
1328
|
|
|
1368
1329
|
class DataGridCommandIconColumnComponent extends BaseGridColumnComponent {
|
|
1369
1330
|
constructor(odata, grid) {
|
|
1370
1331
|
super((grid ?? odata)?.table);
|
|
1371
1332
|
this.odata = odata;
|
|
1372
1333
|
this.grid = grid;
|
|
1373
|
-
this.checkColor = '#F8B132'
|
|
1374
|
-
|
|
1375
|
-
this.
|
|
1376
|
-
|
|
1377
|
-
this.
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1334
|
+
this.checkColor = input('#F8B132', /* @ts-ignore */
|
|
1335
|
+
...(ngDevMode ? [{ debugName: "checkColor" }] : /* istanbul ignore next */ []));
|
|
1336
|
+
this.checkIcon = input('star', /* @ts-ignore */
|
|
1337
|
+
...(ngDevMode ? [{ debugName: "checkIcon" }] : /* istanbul ignore next */ []));
|
|
1338
|
+
this.uncheckIcon = input('star_outline', /* @ts-ignore */
|
|
1339
|
+
...(ngDevMode ? [{ debugName: "uncheckIcon" }] : /* istanbul ignore next */ []));
|
|
1340
|
+
this.uncheckColor = input('default', /* @ts-ignore */
|
|
1341
|
+
...(ngDevMode ? [{ debugName: "uncheckColor" }] : /* istanbul ignore next */ []));
|
|
1342
|
+
this.commandClick = output();
|
|
1343
|
+
}
|
|
1344
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridCommandIconColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1345
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridCommandIconColumnComponent, isStandalone: true, selector: "cauca-data-grid-command-icon-column", inputs: { checkColor: { classPropertyName: "checkColor", publicName: "checkColor", isSignal: true, isRequired: false, transformFunction: null }, checkIcon: { classPropertyName: "checkIcon", publicName: "checkIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckIcon: { classPropertyName: "uncheckIcon", publicName: "uncheckIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckColor: { classPropertyName: "uncheckColor", publicName: "uncheckColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commandClick: "commandClick" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandIconColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n <div>\r\n @if (label()) {\r\n {{ label() }}\r\n } @else {\r\n <mat-icon [style.color]=\"uncheckColor()\" aria-hidden=\"false\" aria-label=\"State icon\" [fontIcon]=\"uncheckIcon()\" />\r\n }\r\n </div>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div>\r\n <cauca-icon-button (buttonClick)=\"commandClick.emit(row)\" [icon]=\"row[prop()] ? checkIcon() : uncheckIcon()\" [color]=\"row[prop()] ? checkColor() : uncheckColor()\" />\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["td{width:50px;min-width:50px;padding-left:0;padding-right:0}td>div{display:flex;justify-content:center}th{padding-left:23px;padding-right:0;width:70px;min-width:70px}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1381
1346
|
}
|
|
1382
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1347
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridCommandIconColumnComponent, decorators: [{
|
|
1383
1348
|
type: Component,
|
|
1384
|
-
args: [{ selector: 'cauca-data-grid-command-icon-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandIconColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatSortHeader, MatHeaderCellDef, MatIcon, MatCell, MatCellDef, IconButtonComponent, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop }}\">\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\n <div>\n @if (label) {\n {{ label }}\n } @else {\n <mat-icon [style.color]=\"uncheckColor\" aria-hidden=\"false\" aria-label=\"State icon\" [fontIcon]=\"uncheckIcon\" />\n }\n </div>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <div>\n <cauca-icon-button (buttonClick)=\"commandClick.emit(row)\" [icon]=\"row[prop] ? checkIcon : uncheckIcon\" [color]=\"row[prop] ? checkColor : uncheckColor\" />\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["td{width:50px;min-width:50px;padding-left:0;padding-right:0}td>div{display:flex;justify-content:center}th{padding-left:23px;padding-right:0;width:70px;min-width:70px}\n"] }]
|
|
1349
|
+
args: [{ selector: 'cauca-data-grid-command-icon-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandIconColumnComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatColumnDef, MatHeaderCell, MatSortHeader, MatHeaderCellDef, MatIcon, MatCell, MatCellDef, IconButtonComponent, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n <th mat-header-cell mat-sort-header *matHeaderCellDef>\r\n <div>\r\n @if (label()) {\r\n {{ label() }}\r\n } @else {\r\n <mat-icon [style.color]=\"uncheckColor()\" aria-hidden=\"false\" aria-label=\"State icon\" [fontIcon]=\"uncheckIcon()\" />\r\n }\r\n </div>\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div>\r\n <cauca-icon-button (buttonClick)=\"commandClick.emit(row)\" [icon]=\"row[prop()] ? checkIcon() : uncheckIcon()\" [color]=\"row[prop()] ? checkColor() : uncheckColor()\" />\r\n </div>\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["td{width:50px;min-width:50px;padding-left:0;padding-right:0}td>div{display:flex;justify-content:center}th{padding-left:23px;padding-right:0;width:70px;min-width:70px}\n"] }]
|
|
1385
1350
|
}], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
|
|
1386
1351
|
type: Optional
|
|
1387
1352
|
}] }, { type: DataGridComponent, decorators: [{
|
|
1388
1353
|
type: Optional
|
|
1389
|
-
}] }], propDecorators: { checkColor: [{
|
|
1390
|
-
type: Input
|
|
1391
|
-
}], checkIcon: [{
|
|
1392
|
-
type: Input
|
|
1393
|
-
}], uncheckIcon: [{
|
|
1394
|
-
type: Input
|
|
1395
|
-
}], uncheckColor: [{
|
|
1396
|
-
type: Input
|
|
1397
|
-
}], commandClick: [{
|
|
1398
|
-
type: Output
|
|
1399
|
-
}] } });
|
|
1354
|
+
}] }], propDecorators: { checkColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkColor", required: false }] }], checkIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkIcon", required: false }] }], uncheckIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "uncheckIcon", required: false }] }], uncheckColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "uncheckColor", required: false }] }], commandClick: [{ type: i0.Output, args: ["commandClick"] }] } });
|
|
1400
1355
|
|
|
1401
1356
|
class DataGridCommandsColumnComponent extends BaseGridColumnComponent {
|
|
1402
1357
|
constructor(odata, grid) {
|
|
1403
1358
|
super((grid ?? odata)?.table);
|
|
1404
1359
|
this.odata = odata;
|
|
1405
1360
|
this.grid = grid;
|
|
1406
|
-
this.canDelete = false
|
|
1407
|
-
|
|
1408
|
-
this.
|
|
1409
|
-
|
|
1410
|
-
this.
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1361
|
+
this.canDelete = input(false, /* @ts-ignore */
|
|
1362
|
+
...(ngDevMode ? [{ debugName: "canDelete" }] : /* istanbul ignore next */ []));
|
|
1363
|
+
this.canEdit = input(false, /* @ts-ignore */
|
|
1364
|
+
...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
|
|
1365
|
+
this.canDuplicate = input(false, /* @ts-ignore */
|
|
1366
|
+
...(ngDevMode ? [{ debugName: "canDuplicate" }] : /* istanbul ignore next */ []));
|
|
1367
|
+
this.editLinkField = input(/* @ts-ignore */
|
|
1368
|
+
...(ngDevMode ? [undefined, { debugName: "editLinkField" }] : /* istanbul ignore next */ []));
|
|
1369
|
+
this.deleteClick = output();
|
|
1370
|
+
this.editClick = output();
|
|
1371
|
+
this.duplicateClick = output();
|
|
1372
|
+
}
|
|
1373
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridCommandsColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1374
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridCommandsColumnComponent, isStandalone: true, selector: "cauca-data-grid-commands-column", inputs: { canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDuplicate: { classPropertyName: "canDuplicate", publicName: "canDuplicate", isSignal: true, isRequired: false, transformFunction: null }, editLinkField: { classPropertyName: "editLinkField", publicName: "editLinkField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteClick: "deleteClick", editClick: "editClick", duplicateClick: "duplicateClick" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandsColumnComponent) }], queries: [{ propertyName: "menuTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"buttons\">\r\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\"> {{ label() }} </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n\r\n <div class=\"align-commands\">\r\n\r\n @if (canEdit()) { <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"edit\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" /> }\r\n\r\n @if (canDuplicate()) { <cauca-icon-button color=\"grey\" icon=\"content_copy\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" /> }\r\n\r\n @if (canDelete()) { <cauca-icon-button colorOnHover=\"var(--warn)\" color=\"grey\" icon=\"close\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" /> }\r\n\r\n <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n </div>\r\n\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: [".mat-column-buttons{width:128px}.align-commands{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1415
1375
|
}
|
|
1416
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1376
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridCommandsColumnComponent, decorators: [{
|
|
1417
1377
|
type: Component,
|
|
1418
|
-
args: [{ selector: 'cauca-data-grid-commands-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandsColumnComponent) }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.
|
|
1378
|
+
args: [{ selector: 'cauca-data-grid-commands-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridCommandsColumnComponent) }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, IconButtonComponent, NgTemplateOutlet, MatFooterCell, MatFooterCellDef, NgStyle, RouterLink], template: "<ng-container matColumnDef=\"buttons\">\r\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\"> {{ label() }} </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n\r\n <div class=\"align-commands\">\r\n\r\n @if (canEdit()) { <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"edit\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" /> }\r\n\r\n @if (canDuplicate()) { <cauca-icon-button color=\"grey\" icon=\"content_copy\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" /> }\r\n\r\n @if (canDelete()) { <cauca-icon-button colorOnHover=\"var(--warn)\" color=\"grey\" icon=\"close\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" /> }\r\n\r\n <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n </div>\r\n\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: [".mat-column-buttons{width:128px}.align-commands{display:flex;align-items:center}\n"] }]
|
|
1419
1379
|
}], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
|
|
1420
1380
|
type: Optional
|
|
1421
1381
|
}] }, { type: DataGridComponent, decorators: [{
|
|
1422
1382
|
type: Optional
|
|
1423
|
-
}] }], propDecorators: { canDelete: [{
|
|
1424
|
-
type: Input
|
|
1425
|
-
}], canEdit: [{
|
|
1426
|
-
type: Input
|
|
1427
|
-
}], canDuplicate: [{
|
|
1428
|
-
type: Input
|
|
1429
|
-
}], editLinkField: [{
|
|
1430
|
-
type: Input
|
|
1431
|
-
}], menuTemplate: [{
|
|
1383
|
+
}] }], propDecorators: { canDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDelete", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canDuplicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDuplicate", required: false }] }], editLinkField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editLinkField", required: false }] }], menuTemplate: [{
|
|
1432
1384
|
type: ContentChild,
|
|
1433
1385
|
args: [TemplateRef]
|
|
1434
|
-
}], deleteClick: [{
|
|
1435
|
-
type: Output
|
|
1436
|
-
}], editClick: [{
|
|
1437
|
-
type: Output
|
|
1438
|
-
}], duplicateClick: [{
|
|
1439
|
-
type: Output
|
|
1440
|
-
}] } });
|
|
1386
|
+
}], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], editClick: [{ type: i0.Output, args: ["editClick"] }], duplicateClick: [{ type: i0.Output, args: ["duplicateClick"] }] } });
|
|
1441
1387
|
|
|
1442
1388
|
class DataGridIconColumnComponent extends BaseGridColumnComponent {
|
|
1443
1389
|
constructor(odata, grid) {
|
|
1444
1390
|
super((grid ?? odata)?.table);
|
|
1445
1391
|
this.odata = odata;
|
|
1446
1392
|
this.grid = grid;
|
|
1447
|
-
this.alignRight = false
|
|
1448
|
-
|
|
1449
|
-
this.
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1393
|
+
this.alignRight = input(false, /* @ts-ignore */
|
|
1394
|
+
...(ngDevMode ? [{ debugName: "alignRight" }] : /* istanbul ignore next */ []));
|
|
1395
|
+
this.useMatIcon = input(false, /* @ts-ignore */
|
|
1396
|
+
...(ngDevMode ? [{ debugName: "useMatIcon" }] : /* istanbul ignore next */ []));
|
|
1397
|
+
this.icon = input('', /* @ts-ignore */
|
|
1398
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
1399
|
+
}
|
|
1400
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridIconColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1401
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridIconColumnComponent, isStandalone: true, selector: "cauca-data-grid-icon-column", inputs: { alignRight: { classPropertyName: "alignRight", publicName: "alignRight", isSignal: true, isRequired: false, transformFunction: null }, useMatIcon: { classPropertyName: "useMatIcon", publicName: "useMatIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridIconColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n <th mat-header-cell *matHeaderCellDef> {{ showLabel() ? label() ?? capitalize(prop()) : '' }} </th>\r\n <td [ngClass]=\"alignRight() ? 'td-right' : ''\" mat-cell *matCellDef=\"let row\">\r\n @if (useMatIcon()) { <mat-icon>{{icon()}}</mat-icon> }\r\n @else { <cauca-icon [icon]=\"row[prop()]\" /> }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{width:180px;min-width:50px;padding:14px;text-align:center}.td-right{text-align:right}cauca-icon{font-size:32px}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: IconComponent, selector: "cauca-icon", inputs: ["icon"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1453
1402
|
}
|
|
1454
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridIconColumnComponent, decorators: [{
|
|
1455
1404
|
type: Component,
|
|
1456
|
-
args: [{ selector: 'cauca-data-grid-icon-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridIconColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, IconComponent, MatFooterCell, MatFooterCellDef, NgClass, MatIcon], template: "<ng-container matColumnDef=\"{{ prop }}\">\n <th mat-header-cell *matHeaderCellDef> {{ showLabel ? label ?? capitalize(prop) : '' }} </th>\n <td [ngClass]=\"alignRight ? 'td-right' : ''\" mat-cell *matCellDef=\"let row\">\n @if (useMatIcon) { <mat-icon>{{icon}}</mat-icon> }\n @else { <cauca-icon [icon]=\"row[prop]\" /> }\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["th,td{width:180px;min-width:50px;padding:14px;text-align:center}.td-right{text-align:right}cauca-icon{font-size:32px}\n"] }]
|
|
1405
|
+
args: [{ selector: 'cauca-data-grid-icon-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridIconColumnComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, IconComponent, MatFooterCell, MatFooterCellDef, NgClass, MatIcon], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n <th mat-header-cell *matHeaderCellDef> {{ showLabel() ? label() ?? capitalize(prop()) : '' }} </th>\r\n <td [ngClass]=\"alignRight() ? 'td-right' : ''\" mat-cell *matCellDef=\"let row\">\r\n @if (useMatIcon()) { <mat-icon>{{icon()}}</mat-icon> }\r\n @else { <cauca-icon [icon]=\"row[prop()]\" /> }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{width:180px;min-width:50px;padding:14px;text-align:center}.td-right{text-align:right}cauca-icon{font-size:32px}\n"] }]
|
|
1457
1406
|
}], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
|
|
1458
1407
|
type: Optional
|
|
1459
1408
|
}] }, { type: DataGridComponent, decorators: [{
|
|
1460
1409
|
type: Optional
|
|
1461
|
-
}] }], propDecorators: { alignRight: [{
|
|
1462
|
-
type: Input
|
|
1463
|
-
}], useMatIcon: [{
|
|
1464
|
-
type: Input
|
|
1465
|
-
}], icon: [{
|
|
1466
|
-
type: Input
|
|
1467
|
-
}] } });
|
|
1410
|
+
}] }], propDecorators: { alignRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignRight", required: false }] }], useMatIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "useMatIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
|
|
1468
1411
|
|
|
1469
1412
|
class DataGridMenuColumnComponent extends BaseGridColumnComponent {
|
|
1470
1413
|
constructor(odata, grid) {
|
|
1471
1414
|
super((grid ?? odata)?.table);
|
|
1472
1415
|
this.odata = odata;
|
|
1473
1416
|
this.grid = grid;
|
|
1474
|
-
this.canDelete = model(false,
|
|
1475
|
-
|
|
1476
|
-
this.
|
|
1477
|
-
|
|
1478
|
-
this.
|
|
1479
|
-
|
|
1480
|
-
this.
|
|
1417
|
+
this.canDelete = model(false, /* @ts-ignore */
|
|
1418
|
+
...(ngDevMode ? [{ debugName: "canDelete" }] : /* istanbul ignore next */ []));
|
|
1419
|
+
this.canDeleteByRow = input(null, /* @ts-ignore */
|
|
1420
|
+
...(ngDevMode ? [{ debugName: "canDeleteByRow" }] : /* istanbul ignore next */ []));
|
|
1421
|
+
this.canEdit = input(false, /* @ts-ignore */
|
|
1422
|
+
...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
|
|
1423
|
+
this.canDuplicate = model(false, /* @ts-ignore */
|
|
1424
|
+
...(ngDevMode ? [{ debugName: "canDuplicate" }] : /* istanbul ignore next */ []));
|
|
1425
|
+
this.canDuplicateByRow = input(null, /* @ts-ignore */
|
|
1426
|
+
...(ngDevMode ? [{ debugName: "canDuplicateByRow" }] : /* istanbul ignore next */ []));
|
|
1427
|
+
this.editLinkField = input(/* @ts-ignore */
|
|
1428
|
+
...(ngDevMode ? [undefined, { debugName: "editLinkField" }] : /* istanbul ignore next */ []));
|
|
1429
|
+
this.duplicateLinkField = input(/* @ts-ignore */
|
|
1430
|
+
...(ngDevMode ? [undefined, { debugName: "duplicateLinkField" }] : /* istanbul ignore next */ []));
|
|
1481
1431
|
this.deleteClick = output();
|
|
1482
1432
|
this.editClick = output();
|
|
1483
1433
|
this.duplicateClick = output();
|
|
1484
1434
|
}
|
|
1485
1435
|
menuOpened(row) {
|
|
1486
|
-
|
|
1487
|
-
|
|
1436
|
+
const canDeleteByRow = this.canDeleteByRow();
|
|
1437
|
+
if (canDeleteByRow) {
|
|
1438
|
+
this.canDelete.set(canDeleteByRow(row));
|
|
1488
1439
|
}
|
|
1489
|
-
|
|
1490
|
-
|
|
1440
|
+
const canDuplicateByRow = this.canDuplicateByRow();
|
|
1441
|
+
if (canDuplicateByRow) {
|
|
1442
|
+
this.canDuplicate.set(canDuplicateByRow(row));
|
|
1491
1443
|
}
|
|
1492
1444
|
}
|
|
1493
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1494
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1445
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridMenuColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1446
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataGridMenuColumnComponent, isStandalone: true, selector: "cauca-data-grid-menu-column", inputs: { canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null }, canDeleteByRow: { classPropertyName: "canDeleteByRow", publicName: "canDeleteByRow", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDuplicate: { classPropertyName: "canDuplicate", publicName: "canDuplicate", isSignal: true, isRequired: false, transformFunction: null }, canDuplicateByRow: { classPropertyName: "canDuplicateByRow", publicName: "canDuplicateByRow", isSignal: true, isRequired: false, transformFunction: null }, editLinkField: { classPropertyName: "editLinkField", publicName: "editLinkField", isSignal: true, isRequired: false, transformFunction: null }, duplicateLinkField: { classPropertyName: "duplicateLinkField", publicName: "duplicateLinkField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { canDelete: "canDeleteChange", canDuplicate: "canDuplicateChange", deleteClick: "deleteClick", editClick: "editClick", duplicateClick: "duplicateClick" }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridMenuColumnComponent) }], queries: [{ propertyName: "menuTemplate", first: true, predicate: TemplateRef, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"menu\">\r\n <th mat-header-cell *matHeaderCellDef> {{ label() }} </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n\r\n <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"more_horiz\" [matMenuTriggerFor]=\"actionMenu\" (menuOpened)=\"menuOpened(row)\" />\r\n\r\n <mat-menu #actionMenu=\"matMenu\" class=\"grid-menu\">\r\n @if (canEdit()) {\r\n <cauca-menu-item colorOnHover=\"var(--primary)\" icon=\"edit\" label=\"edit\" [translateLabel]=\"true\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" />\r\n }\r\n\r\n @if (canDuplicate()) {\r\n <cauca-menu-item icon=\"content_copy\" label=\"duplicate\" [translateLabel]=\"true\" [routerLink]=\"duplicateLinkField() ? [row[duplicateLinkField()]] : null\" [queryParams]=\"{ duplicate: true }\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" />\r\n }\r\n\r\n @if (canDelete()) {\r\n <cauca-menu-item colorOnHover=\"var(--warn)\" icon=\"close\" label=\"delete\" [translateLabel]=\"true\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" />\r\n }\r\n <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n </mat-menu>\r\n\r\n </div>\r\n\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: [".mat-column-menu{width:80px}.align-commands{display:flex;align-items:center}.grid-menu{max-width:none}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: IconButtonComponent, selector: "cauca-icon-button" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i3$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: MenuItemComponent, selector: "cauca-menu-item", inputs: ["translateLabel", "trigger"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1495
1447
|
}
|
|
1496
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1448
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataGridMenuColumnComponent, decorators: [{
|
|
1497
1449
|
type: Component,
|
|
1498
|
-
args: [{ selector: 'cauca-data-grid-menu-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridMenuColumnComponent) }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.
|
|
1450
|
+
args: [{ selector: 'cauca-data-grid-menu-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DataGridMenuColumnComponent) }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1499
1451
|
MatColumnDef,
|
|
1500
1452
|
MatHeaderCell,
|
|
1501
1453
|
MatHeaderCellDef,
|
|
@@ -1508,28 +1460,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
1508
1460
|
MatFooterCell,
|
|
1509
1461
|
MatFooterCellDef,
|
|
1510
1462
|
RouterLink
|
|
1511
|
-
], template: "<ng-container matColumnDef=\"menu\">\n <th mat-header-cell *matHeaderCellDef> {{ label }} </th>\n <td mat-cell *matCellDef=\"let row\">\n <div class=\"align-commands\">\n\n <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"more_horiz\" [matMenuTriggerFor]=\"actionMenu\" (menuOpened)=\"menuOpened(row)\" />\n\n <mat-menu #actionMenu=\"matMenu\" class=\"grid-menu\">\n @if (canEdit()) {\n <cauca-menu-item colorOnHover=\"var(--primary)\" icon=\"edit\" label=\"edit\" [translateLabel]=\"true\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" />\n }\n\n @if (canDuplicate()) {\n <cauca-menu-item icon=\"content_copy\" label=\"duplicate\" [translateLabel]=\"true\" [routerLink]=\"duplicateLinkField() ? [row[duplicateLinkField()]] : null\" [queryParams]=\"{ duplicate: true }\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" />\n }\n\n @if (canDelete()) {\n <cauca-menu-item colorOnHover=\"var(--warn)\" icon=\"close\" label=\"delete\" [translateLabel]=\"true\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" />\n }\n <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\n\n </mat-menu>\n\n </div>\n\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: [".mat-column-menu{width:80px}.align-commands{display:flex;align-items:center}.grid-menu{max-width:none}\n"] }]
|
|
1463
|
+
], template: "<ng-container matColumnDef=\"menu\">\r\n <th mat-header-cell *matHeaderCellDef> {{ label() }} </th>\r\n <td mat-cell *matCellDef=\"let row\">\r\n <div class=\"align-commands\">\r\n\r\n <cauca-icon-button colorOnHover=\"var(--primary)\" color=\"grey\" icon=\"more_horiz\" [matMenuTriggerFor]=\"actionMenu\" (menuOpened)=\"menuOpened(row)\" />\r\n\r\n <mat-menu #actionMenu=\"matMenu\" class=\"grid-menu\">\r\n @if (canEdit()) {\r\n <cauca-menu-item colorOnHover=\"var(--primary)\" icon=\"edit\" label=\"edit\" [translateLabel]=\"true\" [routerLink]=\"editLinkField() ? [row[editLinkField()]] : null\" (buttonClick)=\"editClick?.emit(row)\" class=\"edit-button\" />\r\n }\r\n\r\n @if (canDuplicate()) {\r\n <cauca-menu-item icon=\"content_copy\" label=\"duplicate\" [translateLabel]=\"true\" [routerLink]=\"duplicateLinkField() ? [row[duplicateLinkField()]] : null\" [queryParams]=\"{ duplicate: true }\" (buttonClick)=\"duplicateClick?.emit(row)\" class=\"duplicate-button\" />\r\n }\r\n\r\n @if (canDelete()) {\r\n <cauca-menu-item colorOnHover=\"var(--warn)\" icon=\"close\" label=\"delete\" [translateLabel]=\"true\" (buttonClick)=\"deleteClick?.emit(row)\" class=\"delete-button\" />\r\n }\r\n <template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{row:row}\"></template>\r\n\r\n </mat-menu>\r\n\r\n </div>\r\n\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: [".mat-column-menu{width:80px}.align-commands{display:flex;align-items:center}.grid-menu{max-width:none}\n"] }]
|
|
1512
1464
|
}], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
|
|
1513
1465
|
type: Optional
|
|
1514
1466
|
}] }, { type: DataGridComponent, decorators: [{
|
|
1515
1467
|
type: Optional
|
|
1516
|
-
}] }], propDecorators: { canDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDelete", required: false }] }, { type: i0.Output, args: ["canDeleteChange"] }], canDeleteByRow: [{
|
|
1517
|
-
type: Input
|
|
1518
|
-
}], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canDuplicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDuplicate", required: false }] }, { type: i0.Output, args: ["canDuplicateChange"] }], canDuplicateByRow: [{
|
|
1519
|
-
type: Input
|
|
1520
|
-
}], editLinkField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editLinkField", required: false }] }], duplicateLinkField: [{ type: i0.Input, args: [{ isSignal: true, alias: "duplicateLinkField", required: false }] }], menuTemplate: [{
|
|
1468
|
+
}] }], propDecorators: { canDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDelete", required: false }] }, { type: i0.Output, args: ["canDeleteChange"] }], canDeleteByRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDeleteByRow", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canDuplicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDuplicate", required: false }] }, { type: i0.Output, args: ["canDuplicateChange"] }], canDuplicateByRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDuplicateByRow", required: false }] }], editLinkField: [{ type: i0.Input, args: [{ isSignal: true, alias: "editLinkField", required: false }] }], duplicateLinkField: [{ type: i0.Input, args: [{ isSignal: true, alias: "duplicateLinkField", required: false }] }], menuTemplate: [{
|
|
1521
1469
|
type: ContentChild,
|
|
1522
1470
|
args: [TemplateRef]
|
|
1523
1471
|
}], deleteClick: [{ type: i0.Output, args: ["deleteClick"] }], editClick: [{ type: i0.Output, args: ["editClick"] }], duplicateClick: [{ type: i0.Output, args: ["duplicateClick"] }] } });
|
|
1524
1472
|
|
|
1525
1473
|
class TimeLabelComponent {
|
|
1526
1474
|
constructor() {
|
|
1527
|
-
this.date = input.required(
|
|
1528
|
-
|
|
1529
|
-
this.
|
|
1530
|
-
|
|
1531
|
-
this.
|
|
1532
|
-
|
|
1475
|
+
this.date = input.required(/* @ts-ignore */
|
|
1476
|
+
...(ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []));
|
|
1477
|
+
this.minLimit = input(null, /* @ts-ignore */
|
|
1478
|
+
...(ngDevMode ? [{ debugName: "minLimit" }] : /* istanbul ignore next */ []));
|
|
1479
|
+
this.maxLimit = input(null, /* @ts-ignore */
|
|
1480
|
+
...(ngDevMode ? [{ debugName: "maxLimit" }] : /* istanbul ignore next */ []));
|
|
1481
|
+
this.showTime = input(true, /* @ts-ignore */
|
|
1482
|
+
...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
|
|
1483
|
+
this.showSecond = input(false, /* @ts-ignore */
|
|
1484
|
+
...(ngDevMode ? [{ debugName: "showSecond" }] : /* istanbul ignore next */ []));
|
|
1485
|
+
this.dateMask = computed(() => this.showTime() ? `dd/MM/yyyy${this.timeFormat()}` : 'dd/MM/yyyy', /* @ts-ignore */
|
|
1486
|
+
...(ngDevMode ? [{ debugName: "dateMask" }] : /* istanbul ignore next */ []));
|
|
1533
1487
|
this.displayDate = computed(() => {
|
|
1534
1488
|
if (!this.date() && this.maxLimit()) {
|
|
1535
1489
|
const maxLimit = dayjs(this.maxLimit()).add(-1, 'second').toDate();
|
|
@@ -1550,13 +1504,15 @@ class TimeLabelComponent {
|
|
|
1550
1504
|
else {
|
|
1551
1505
|
return date;
|
|
1552
1506
|
}
|
|
1553
|
-
},
|
|
1554
|
-
|
|
1507
|
+
}, /* @ts-ignore */
|
|
1508
|
+
...(ngDevMode ? [{ debugName: "displayDate" }] : /* istanbul ignore next */ []));
|
|
1509
|
+
this.timeFormat = computed(() => this.showSecond() ? ' HH:mm:ss' : ' HH:mm', /* @ts-ignore */
|
|
1510
|
+
...(ngDevMode ? [{ debugName: "timeFormat" }] : /* istanbul ignore next */ []));
|
|
1555
1511
|
}
|
|
1556
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1557
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
1512
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TimeLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1513
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: TimeLabelComponent, isStandalone: true, selector: "cauca-time-label", inputs: { date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, minLimit: { classPropertyName: "minLimit", publicName: "minLimit", isSignal: true, isRequired: false, transformFunction: null }, maxLimit: { classPropertyName: "maxLimit", publicName: "maxLimit", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, showSecond: { classPropertyName: "showSecond", publicName: "showSecond", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span [matTooltip]=\"displayDate() | date:dateMask()\">{{ displayDate() | date:dateMask() }}</span>", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1558
1514
|
}
|
|
1559
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1515
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TimeLabelComponent, decorators: [{
|
|
1560
1516
|
type: Component,
|
|
1561
1517
|
args: [{ selector: 'cauca-time-label', imports: [DatePipe, MatTooltip], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [matTooltip]=\"displayDate() | date:dateMask()\">{{ displayDate() | date:dateMask() }}</span>" }]
|
|
1562
1518
|
}], propDecorators: { date: [{ type: i0.Input, args: [{ isSignal: true, alias: "date", required: true }] }], minLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLimit", required: false }] }], maxLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLimit", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], showSecond: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSecond", required: false }] }] } });
|
|
@@ -1566,23 +1522,27 @@ class DateGridColumnComponent extends BaseGridColumnComponent {
|
|
|
1566
1522
|
super((grid ?? odata)?.table);
|
|
1567
1523
|
this.odata = odata;
|
|
1568
1524
|
this.grid = grid;
|
|
1569
|
-
this.showWithTime = input(false,
|
|
1570
|
-
|
|
1571
|
-
this.
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
|
|
1575
|
-
|
|
1525
|
+
this.showWithTime = input(false, /* @ts-ignore */
|
|
1526
|
+
...(ngDevMode ? [{ debugName: "showWithTime" }] : /* istanbul ignore next */ []));
|
|
1527
|
+
this.showSecond = input(false, /* @ts-ignore */
|
|
1528
|
+
...(ngDevMode ? [{ debugName: "showSecond" }] : /* istanbul ignore next */ []));
|
|
1529
|
+
this.maxDate = input(null, /* @ts-ignore */
|
|
1530
|
+
...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
|
|
1531
|
+
this.minDate = input(null, /* @ts-ignore */
|
|
1532
|
+
...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
|
|
1533
|
+
}
|
|
1534
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DateGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1535
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: DateGridColumnComponent, isStandalone: true, selector: "cauca-date-grid-column", inputs: { showWithTime: { classPropertyName: "showWithTime", publicName: "showWithTime", isSignal: true, isRequired: false, transformFunction: null }, showSecond: { classPropertyName: "showSecond", publicName: "showSecond", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DateGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width()}\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n <cauca-time-label [date]=\"row[prop()]\" [showTime]=\"showWithTime()\" [showSecond]=\"showSecond()\" [minLimit]=\"minDate()\" [maxLimit]=\"maxDate()\" />\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>\r\n\r\n", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: TimeLabelComponent, selector: "cauca-time-label", inputs: ["date", "minLimit", "maxLimit", "showTime", "showSecond"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1576
1536
|
}
|
|
1577
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1537
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DateGridColumnComponent, decorators: [{
|
|
1578
1538
|
type: Component,
|
|
1579
|
-
args: [{ selector: 'cauca-date-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.
|
|
1539
|
+
args: [{ selector: 'cauca-date-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => DateGridColumnComponent) }], imports: [
|
|
1580
1540
|
MatColumnDef,
|
|
1581
1541
|
MatHeaderCell, MatHeaderCellDef, MatSortHeader, NgStyle,
|
|
1582
1542
|
MatCell, MatCellDef,
|
|
1583
1543
|
TimeLabelComponent,
|
|
1584
1544
|
MatFooterCell, MatFooterCellDef,
|
|
1585
|
-
], template: "<ng-container matColumnDef=\"{{ prop }}\">\n\n <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width}\">\n {{ label ?? capitalize(prop) }}\n </th>\n\n <td mat-cell *matCellDef=\"let row\">\n <cauca-time-label [date]=\"row[prop]\" [showTime]=\"showWithTime()\" [showSecond]=\"showSecond()\" [minLimit]=\"minDate()\" [maxLimit]=\"maxDate()\" />\n </td>\n\n <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>\n\n", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
1545
|
+
], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width()}\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n <cauca-time-label [date]=\"row[prop()]\" [showTime]=\"showWithTime()\" [showSecond]=\"showSecond()\" [minLimit]=\"minDate()\" [maxLimit]=\"maxDate()\" />\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>\r\n\r\n", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
1586
1546
|
}], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
|
|
1587
1547
|
type: Optional
|
|
1588
1548
|
}] }, { type: DataGridComponent, decorators: [{
|
|
@@ -1594,41 +1554,45 @@ class SortableDataGridCheckColumnComponent extends BaseGridColumnComponent {
|
|
|
1594
1554
|
super((grid ?? odata)?.table);
|
|
1595
1555
|
this.odata = odata;
|
|
1596
1556
|
this.grid = grid;
|
|
1597
|
-
this.checkIcon = 'check'
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
|
|
1601
|
-
|
|
1557
|
+
this.checkIcon = input('check', /* @ts-ignore */
|
|
1558
|
+
...(ngDevMode ? [{ debugName: "checkIcon" }] : /* istanbul ignore next */ []));
|
|
1559
|
+
this.uncheckIcon = input('block', /* @ts-ignore */
|
|
1560
|
+
...(ngDevMode ? [{ debugName: "uncheckIcon" }] : /* istanbul ignore next */ []));
|
|
1561
|
+
this.sortProp = input('', /* @ts-ignore */
|
|
1562
|
+
...(ngDevMode ? [{ debugName: "sortProp" }] : /* istanbul ignore next */ []));
|
|
1563
|
+
}
|
|
1564
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SortableDataGridCheckColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1565
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: SortableDataGridCheckColumnComponent, isStandalone: true, selector: "cauca-sortable-data-grid-check-column", inputs: { checkIcon: { classPropertyName: "checkIcon", publicName: "checkIcon", isSignal: true, isRequired: false, transformFunction: null }, uncheckIcon: { classPropertyName: "uncheckIcon", publicName: "uncheckIcon", isSignal: true, isRequired: false, transformFunction: null }, sortProp: { classPropertyName: "sortProp", publicName: "sortProp", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridCheckColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"sortProp() || prop()\" [ngStyle]=\"{'width': width()}\" [matTooltip]=\"label() ?? capitalize(prop())\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{'width': width()}\">\r\n <cauca-check-icon [checkIcon]=\"checkIcon()\" [uncheckIcon]=\"uncheckIcon()\" [isChecked]=\"row[prop()]\" />\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["::ng-deep .mat-column-isVisible>div,::ng-deep .mat-column-isRecurrent>div{justify-content:center}cauca-check-icon{display:flex;margin-right:18px;justify-content:center}th,td{width:120px;min-width:120px;text-align:center}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "component", type: CheckIconComponent, selector: "cauca-check-icon", inputs: ["checkIcon", "uncheckIcon", "isChecked"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1602
1566
|
}
|
|
1603
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1567
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SortableDataGridCheckColumnComponent, decorators: [{
|
|
1604
1568
|
type: Component,
|
|
1605
|
-
args: [{ selector: 'cauca-sortable-data-grid-check-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridCheckColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatSortHeader, NgStyle, MatTooltip, MatCell, MatCellDef, CheckIconComponent, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width}\" [matTooltip]=\"label ?? capitalize(prop)\">\n {{ label ?? capitalize(prop) }}\n </th>\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{'width': width}\">\n <cauca-check-icon [checkIcon]=\"checkIcon\" [uncheckIcon]=\"uncheckIcon\" [isChecked]=\"row[prop]\" />\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n</ng-container>", styles: ["::ng-deep .mat-column-isVisible>div,::ng-deep .mat-column-isRecurrent>div{justify-content:center}cauca-check-icon{display:flex;margin-right:18px;justify-content:center}th,td{width:120px;min-width:120px;text-align:center}\n"] }]
|
|
1569
|
+
args: [{ selector: 'cauca-sortable-data-grid-check-column', providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridCheckColumnComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatSortHeader, NgStyle, MatTooltip, MatCell, MatCellDef, CheckIconComponent, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"sortProp() || prop()\" [ngStyle]=\"{'width': width()}\" [matTooltip]=\"label() ?? capitalize(prop())\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n <td mat-cell *matCellDef=\"let row\" [ngStyle]=\"{'width': width()}\">\r\n <cauca-check-icon [checkIcon]=\"checkIcon()\" [uncheckIcon]=\"uncheckIcon()\" [isChecked]=\"row[prop()]\" />\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["::ng-deep .mat-column-isVisible>div,::ng-deep .mat-column-isRecurrent>div{justify-content:center}cauca-check-icon{display:flex;margin-right:18px;justify-content:center}th,td{width:120px;min-width:120px;text-align:center}\n"] }]
|
|
1606
1570
|
}], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
|
|
1607
1571
|
type: Optional
|
|
1608
1572
|
}] }, { type: DataGridComponent, decorators: [{
|
|
1609
1573
|
type: Optional
|
|
1610
|
-
}] }], propDecorators: { checkIcon: [{
|
|
1611
|
-
type: Input
|
|
1612
|
-
}], uncheckIcon: [{
|
|
1613
|
-
type: Input
|
|
1614
|
-
}] } });
|
|
1574
|
+
}] }], propDecorators: { checkIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkIcon", required: false }] }], uncheckIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "uncheckIcon", required: false }] }], sortProp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortProp", required: false }] }] } });
|
|
1615
1575
|
|
|
1616
1576
|
class ColumnLabelComponent {
|
|
1617
1577
|
constructor() {
|
|
1618
|
-
this.value = input(null,
|
|
1619
|
-
|
|
1620
|
-
this.
|
|
1578
|
+
this.value = input(null, /* @ts-ignore */
|
|
1579
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1580
|
+
this.format = input('none', /* @ts-ignore */
|
|
1581
|
+
...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
|
|
1582
|
+
this.showToolTip = input(false, /* @ts-ignore */
|
|
1583
|
+
...(ngDevMode ? [{ debugName: "showToolTip" }] : /* istanbul ignore next */ []));
|
|
1621
1584
|
this.displayValue = computed(() => {
|
|
1622
1585
|
if (this.format() === 'phone') {
|
|
1623
1586
|
return this.value()?.toString().replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
|
|
1624
1587
|
}
|
|
1625
1588
|
return this.value();
|
|
1626
|
-
},
|
|
1589
|
+
}, /* @ts-ignore */
|
|
1590
|
+
...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
1627
1591
|
}
|
|
1628
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1629
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1592
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1593
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ColumnLabelComponent, isStandalone: true, selector: "cauca-column-label", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showToolTip: { classPropertyName: "showToolTip", publicName: "showToolTip", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (showToolTip()) {<span [matTooltip]=\"displayValue()\" >{{ displayValue() }}</span>}\r\n@else { <span>{{displayValue()}}</span>}", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1630
1594
|
}
|
|
1631
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1595
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ColumnLabelComponent, decorators: [{
|
|
1632
1596
|
type: Component,
|
|
1633
1597
|
args: [{ selector: 'cauca-column-label', imports: [MatTooltip], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (showToolTip()) {<span [matTooltip]=\"displayValue()\" >{{ displayValue() }}</span>}\r\n@else { <span>{{displayValue()}}</span>}" }]
|
|
1634
1598
|
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showToolTip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolTip", required: false }] }] } });
|
|
@@ -1636,66 +1600,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
1636
1600
|
class SortableDataGridColumnComponent extends BaseGridColumnComponent {
|
|
1637
1601
|
constructor(odata, grid) {
|
|
1638
1602
|
super((grid ?? odata)?.table);
|
|
1639
|
-
this.
|
|
1640
|
-
|
|
1641
|
-
this.summaryLabel = input('',
|
|
1642
|
-
|
|
1603
|
+
this.summaryType = input('none', /* @ts-ignore */
|
|
1604
|
+
...(ngDevMode ? [{ debugName: "summaryType" }] : /* istanbul ignore next */ []));
|
|
1605
|
+
this.summaryLabel = input('', /* @ts-ignore */
|
|
1606
|
+
...(ngDevMode ? [{ debugName: "summaryLabel" }] : /* istanbul ignore next */ []));
|
|
1607
|
+
this.format = input('none', /* @ts-ignore */
|
|
1608
|
+
...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
|
|
1609
|
+
this.sortProp = input('', /* @ts-ignore */
|
|
1610
|
+
...(ngDevMode ? [{ debugName: "sortProp" }] : /* istanbul ignore next */ []));
|
|
1643
1611
|
this.isInitialized = false;
|
|
1644
1612
|
this.grid = null;
|
|
1645
1613
|
this.grid = grid ?? odata;
|
|
1646
1614
|
this.isInitialized = true;
|
|
1647
1615
|
}
|
|
1648
1616
|
calculateSummary() {
|
|
1649
|
-
|
|
1617
|
+
const rows = this.grid?.data?.();
|
|
1618
|
+
if (this.isInitialized && rows) {
|
|
1650
1619
|
if (this.summaryType() === 'sum') {
|
|
1651
|
-
return this.summaryLabel() +
|
|
1620
|
+
return this.summaryLabel() + rows.reduce((acc, row) => acc + row[this.prop()], 0) + this.summaryLabel();
|
|
1652
1621
|
}
|
|
1653
1622
|
if (this.summaryType() === 'count') {
|
|
1654
|
-
return
|
|
1623
|
+
return rows.length + this.summaryLabel();
|
|
1655
1624
|
}
|
|
1656
1625
|
}
|
|
1657
1626
|
return '';
|
|
1658
1627
|
}
|
|
1659
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1660
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1628
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SortableDataGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1629
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SortableDataGridColumnComponent, isStandalone: true, selector: "cauca-sortable-data-grid-column", inputs: { summaryType: { classPropertyName: "summaryType", publicName: "summaryType", isSignal: true, isRequired: false, transformFunction: null }, summaryLabel: { classPropertyName: "summaryLabel", publicName: "summaryLabel", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, sortProp: { classPropertyName: "sortProp", publicName: "sortProp", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "\r\n<ng-container matColumnDef=\"{{ prop() }}\">\r\n <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"sortProp() || prop()\" [ngStyle]=\"{'width': width()}\" [matTooltip]=\"label() ?? capitalize(prop())\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n <cauca-column-label [value]=\"row[prop()]\" [showToolTip]=\"showToolTip()\" [format]=\"format()\" />\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (isInitialized) {\r\n {{calculateSummary()}}\r\n }\r\n </td>\r\n</ng-container>\r\n", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-footer-cell{font-weight:700}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ColumnLabelComponent, selector: "cauca-column-label", inputs: ["value", "format", "showToolTip"] }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1661
1630
|
}
|
|
1662
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1631
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SortableDataGridColumnComponent, decorators: [{
|
|
1663
1632
|
type: Component,
|
|
1664
|
-
args: [{ selector: 'cauca-sortable-data-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.
|
|
1633
|
+
args: [{ selector: 'cauca-sortable-data-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => SortableDataGridColumnComponent) }], imports: [
|
|
1665
1634
|
MatColumnDef,
|
|
1666
1635
|
MatHeaderCell, MatHeaderCellDef, MatSortHeader, NgStyle,
|
|
1667
1636
|
MatCell, MatCellDef,
|
|
1668
1637
|
MatTooltip, ColumnLabelComponent,
|
|
1669
1638
|
MatFooterCell, MatFooterCellDef,
|
|
1670
|
-
], template: "\n<ng-container matColumnDef=\"{{ prop }}\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header [ngStyle]=\"{'width': width}\" [matTooltip]=\"label ?? capitalize(prop)\">\n {{ label ?? capitalize(prop) }}\n </th>\n\n <td mat-cell *matCellDef=\"let row\">\n <cauca-column-label [value]=\"row[prop]\" [showToolTip]=\"showToolTip\" [format]=\"format()\" />\n </td>\n\n <td mat-footer-cell *matFooterCellDef>\n @if (isInitialized) {\n {{calculateSummary()}}\n }\n </td>\n</ng-container>\n", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-footer-cell{font-weight:700}\n"] }]
|
|
1639
|
+
], template: "\r\n<ng-container matColumnDef=\"{{ prop() }}\">\r\n <th mat-header-cell *matHeaderCellDef [mat-sort-header]=\"sortProp() || prop()\" [ngStyle]=\"{'width': width()}\" [matTooltip]=\"label() ?? capitalize(prop())\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n <cauca-column-label [value]=\"row[prop()]\" [showToolTip]=\"showToolTip()\" [format]=\"format()\" />\r\n </td>\r\n\r\n <td mat-footer-cell *matFooterCellDef>\r\n @if (isInitialized) {\r\n {{calculateSummary()}}\r\n }\r\n </td>\r\n</ng-container>\r\n", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.mat-mdc-footer-cell{font-weight:700}\n"] }]
|
|
1671
1640
|
}], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
|
|
1672
1641
|
type: Optional
|
|
1673
1642
|
}] }, { type: DataGridComponent, decorators: [{
|
|
1674
1643
|
type: Optional
|
|
1675
|
-
}] }], propDecorators: {
|
|
1676
|
-
type: Input
|
|
1677
|
-
}], summaryType: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryType", required: false }] }], summaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryLabel", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }] } });
|
|
1644
|
+
}] }], propDecorators: { summaryType: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryType", required: false }] }], summaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "summaryLabel", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], sortProp: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortProp", required: false }] }] } });
|
|
1678
1645
|
|
|
1679
1646
|
class TranslationGridColumnComponent extends BaseGridColumnComponent {
|
|
1680
1647
|
constructor(odata, grid) {
|
|
1681
1648
|
super((grid ?? odata)?.table);
|
|
1682
1649
|
this.odata = odata;
|
|
1683
1650
|
this.grid = grid;
|
|
1684
|
-
this.prefix =
|
|
1651
|
+
this.prefix = input('', /* @ts-ignore */
|
|
1652
|
+
...(ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []));
|
|
1685
1653
|
}
|
|
1686
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1687
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1654
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TranslationGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1655
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: TranslationGridColumnComponent, isStandalone: true, selector: "cauca-translation-grid-column", inputs: { prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (prefix() && row[prop()]) { <span>{{ prefix()+'.'+row[prop()] | translate }}</span> }\r\n @else if(row[prop()]) { <span>{{ row[prop()] | translate }}</span> }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1688
1656
|
}
|
|
1689
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1657
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TranslationGridColumnComponent, decorators: [{
|
|
1690
1658
|
type: Component,
|
|
1691
|
-
args: [{ selector: 'cauca-translation-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.
|
|
1659
|
+
args: [{ selector: 'cauca-translation-grid-column', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TranslationGridColumnComponent) }], imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, MatCell, MatCellDef, TranslatePipe, MatFooterCell, MatFooterCellDef], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (prefix() && row[prop()]) { <span>{{ prefix()+'.'+row[prop()] | translate }}</span> }\r\n @else if(row[prop()]) { <span>{{ row[prop()] | translate }}</span> }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n</ng-container>", styles: ["th,td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}\n"] }]
|
|
1692
1660
|
}], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
|
|
1693
1661
|
type: Optional
|
|
1694
1662
|
}] }, { type: DataGridComponent, decorators: [{
|
|
1695
1663
|
type: Optional
|
|
1696
|
-
}] }], propDecorators: { prefix: [{
|
|
1697
|
-
type: Input
|
|
1698
|
-
}] } });
|
|
1664
|
+
}] }], propDecorators: { prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }] } });
|
|
1699
1665
|
|
|
1700
1666
|
class TimeSpanDataGridColumnComponent extends BaseGridColumnComponent {
|
|
1701
1667
|
constructor(odata, grid) {
|
|
@@ -1703,12 +1669,12 @@ class TimeSpanDataGridColumnComponent extends BaseGridColumnComponent {
|
|
|
1703
1669
|
this.odata = odata;
|
|
1704
1670
|
this.grid = grid;
|
|
1705
1671
|
}
|
|
1706
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1707
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1672
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TimeSpanDataGridColumnComponent, deps: [{ token: OdataGridComponent, optional: true }, { token: DataGridComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1673
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: TimeSpanDataGridColumnComponent, isStandalone: true, selector: "cauca-time-span-data-grid-column", providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TimeSpanDataGridColumnComponent) }], usesInheritance: true, ngImport: i0, template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (row[prop()] | Iso8601TimeSpan; as formattedValue) {\r\n <span [matTooltip]=\"showToolTip() ? formattedValue : ''\">\r\n {{ formattedValue }}\r\n </span>\r\n }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "pipe", type: Iso8601TimeSpanPipe, name: "Iso8601TimeSpan" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1708
1674
|
}
|
|
1709
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TimeSpanDataGridColumnComponent, decorators: [{
|
|
1710
1676
|
type: Component,
|
|
1711
|
-
args: [{ selector: 'cauca-time-span-data-grid-column', imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatCell, MatCellDef, MatTooltip, MatFooterCellDef, Iso8601TimeSpanPipe], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.
|
|
1677
|
+
args: [{ selector: 'cauca-time-span-data-grid-column', imports: [MatColumnDef, MatHeaderCell, MatHeaderCellDef, NgStyle, MatCell, MatCellDef, MatTooltip, MatFooterCellDef, Iso8601TimeSpanPipe], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: BaseGridColumnComponent, useExisting: forwardRef(() => TimeSpanDataGridColumnComponent) }], template: "<ng-container matColumnDef=\"{{ prop() }}\">\r\n\r\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{'width': width()}\">\r\n {{ label() ?? capitalize(prop()) }}\r\n </th>\r\n\r\n <td mat-cell *matCellDef=\"let row\">\r\n @if (row[prop()] | Iso8601TimeSpan; as formattedValue) {\r\n <span [matTooltip]=\"showToolTip() ? formattedValue : ''\">\r\n {{ formattedValue }}\r\n </span>\r\n }\r\n </td>\r\n <td mat-footer-cell *matFooterCellDef></td>\r\n\r\n</ng-container>" }]
|
|
1712
1678
|
}], ctorParameters: () => [{ type: OdataGridComponent, decorators: [{
|
|
1713
1679
|
type: Optional
|
|
1714
1680
|
}] }, { type: DataGridComponent, decorators: [{
|