@yuuvis/client-framework 2.0.0 → 2.0.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.
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
import
|
|
2
|
-
import * as i5 from '@angular/cdk/table';
|
|
3
|
-
import { CdkTableModule } from '@angular/cdk/table';
|
|
4
|
-
import * as i1$1 from '@angular/common';
|
|
1
|
+
import * as i1$3 from '@angular/common';
|
|
5
2
|
import { CommonModule, DecimalPipe, NgClass } from '@angular/common';
|
|
6
3
|
import * as i0 from '@angular/core';
|
|
7
4
|
import { inject, signal, input, forwardRef, ChangeDetectionStrategy, Component, computed, effect, untracked, viewChild, DestroyRef, Input, output, ElementRef, NgModule } from '@angular/core';
|
|
8
5
|
import * as i1 from '@angular/forms';
|
|
9
6
|
import { FormBuilder, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormControl } from '@angular/forms';
|
|
10
|
-
import * as i3$1 from '@angular/material/button';
|
|
11
7
|
import { MatButtonModule } from '@angular/material/button';
|
|
12
|
-
import * as i2 from '@angular/material/dialog';
|
|
13
8
|
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
|
|
14
9
|
import * as i2$1 from '@angular/material/icon';
|
|
15
10
|
import { MatIconModule } from '@angular/material/icon';
|
|
16
|
-
import * as
|
|
11
|
+
import * as i1$1 from '@angular/material/menu';
|
|
12
|
+
import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
|
|
13
|
+
import * as i3 from '@angular/material/table';
|
|
14
|
+
import { MatTableModule } from '@angular/material/table';
|
|
15
|
+
import * as i2 from '@yuuvis/client-core';
|
|
17
16
|
import { SystemService, ObjectFormTranslateService, Situation, TranslateModule, ClipboardService, TranslateService, Operator, OperatorLabel, LocaleNumberPipe, FileSizePipe, Classification, Utils, UserService, YuvUser, SearchUtils, LocaleDatePipe, ClassificationPrefix } from '@yuuvis/client-core';
|
|
18
17
|
import { YUV_ICONS } from '@yuuvis/client-framework/icons';
|
|
19
18
|
import { map, of, forkJoin } from 'rxjs';
|
|
20
19
|
import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
|
|
20
|
+
import { DialogComponent, AbstractMatFormField, injectNgControl } from '@yuuvis/client-framework/common';
|
|
21
21
|
import { MetadataFormFieldComponent } from '@yuuvis/client-framework/metadata-form';
|
|
22
|
+
import { YmtButtonDirective } from '@yuuvis/material';
|
|
22
23
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
23
24
|
import { MatInputModule } from '@angular/material/input';
|
|
24
25
|
import { TranslateService as TranslateService$1 } from '@ngx-translate/core';
|
|
25
|
-
import { AbstractMatFormField, injectNgControl } from '@yuuvis/client-framework/common';
|
|
26
26
|
import * as i2$2 from '@yuuvis/client-framework/datepicker';
|
|
27
27
|
import { DatepickerComponent, YuvDatepickerModule } from '@yuuvis/client-framework/datepicker';
|
|
28
28
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
@@ -30,12 +30,12 @@ import * as i1$2 from '@angular/material/select';
|
|
|
30
30
|
import { MatSelectModule } from '@angular/material/select';
|
|
31
31
|
import * as i4 from '@angular/material/tooltip';
|
|
32
32
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
33
|
-
import * as i3$
|
|
33
|
+
import * as i3$1 from '@yuuvis/client-framework/autocomplete';
|
|
34
34
|
import { YuvAutocompleteModule } from '@yuuvis/client-framework/autocomplete';
|
|
35
35
|
import { map as map$1, catchError, finalize } from 'rxjs/operators';
|
|
36
36
|
import { marker } from '@colsen1991/ngx-translate-extract-marker';
|
|
37
37
|
import { ENTER, COMMA } from '@angular/cdk/keycodes';
|
|
38
|
-
import * as i1$
|
|
38
|
+
import * as i1$4 from '@angular/material/chips';
|
|
39
39
|
import { MatChipsModule } from '@angular/material/chips';
|
|
40
40
|
|
|
41
41
|
class EditTableDataComponent {
|
|
@@ -68,7 +68,7 @@ class EditTableDataComponent {
|
|
|
68
68
|
#dialogRef;
|
|
69
69
|
#elementData;
|
|
70
70
|
cancel() {
|
|
71
|
-
this.#dialogRef.close(
|
|
71
|
+
this.#dialogRef.close(null);
|
|
72
72
|
}
|
|
73
73
|
submit() {
|
|
74
74
|
if (this.tableForm.valid && this.#dialogRef)
|
|
@@ -118,17 +118,27 @@ class EditTableDataComponent {
|
|
|
118
118
|
useExisting: forwardRef(() => EditTableDataComponent),
|
|
119
119
|
multi: true
|
|
120
120
|
}
|
|
121
|
-
], ngImport: i0, template: "<
|
|
121
|
+
], ngImport: i0, template: "<yuv-dialog [headertitel]=\"'yuv.form.element.data.grid.edit.headline' | translate: { headline: header }\">\n <main>\n <div [formGroup]=\"tableForm\">\n <div class=\"fields\">\n @for (element of columns; track $index) {\n <div [attr.data-name]=\"element.name\" class=\"form-field\">\n <yuv-metadata-form-field [field]=\"element\" [formControlName]=\"element.name\" [situation]=\"situation\"></yuv-metadata-form-field>\n\n @let errorsGroup = errorMessage();\n @if (errorsGroup && tableForm.errors) {\n <div class=\"err-msg\">\n @for (errors of errorsGroup; track $index) {\n @for (error of errors; track $index) {\n {{ error[element.name] }}\n }\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n </main>\n\n <footer>\n <button ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.form.element.data.grid.edit.cancel' | translate }}</button>\n <button ymtButton=\"primary\" (click)=\"submit()\" [disabled]=\"!tableForm.dirty && !tableForm.valid\">\n @if (adding) {\n {{ 'yuv.form.element.data.grid.edit.add' | translate }}\n } @else {\n {{ 'yuv.form.element.data.grid.edit' | translate }}\n }\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}:host .err-msg{font:var(--ymt-font-body-subtle);color:var(--ymt-danger);padding:var(--ymt-spacing-2xs) 0;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DialogComponent, selector: "yuv-dialog", inputs: ["headertitel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: MetadataFormFieldComponent, selector: "yuv-metadata-form-field", inputs: ["field", "situation"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "directive", type: YmtButtonDirective, selector: "button[ymtButton], a[ymtButton]", inputs: ["ymtButton", "disabled", "aria-disabled", "disableRipple", "disabledInteractive", "button-size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
122
122
|
}
|
|
123
123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: EditTableDataComponent, decorators: [{
|
|
124
124
|
type: Component,
|
|
125
|
-
args: [{ selector: 'yuv-edit-table-data', standalone: true, imports: [
|
|
125
|
+
args: [{ selector: 'yuv-edit-table-data', standalone: true, imports: [
|
|
126
|
+
CommonModule,
|
|
127
|
+
ReactiveFormsModule,
|
|
128
|
+
DialogComponent,
|
|
129
|
+
MatDialogModule,
|
|
130
|
+
MatButtonModule,
|
|
131
|
+
MatFormFieldModule,
|
|
132
|
+
MetadataFormFieldComponent,
|
|
133
|
+
TranslateModule,
|
|
134
|
+
YmtButtonDirective
|
|
135
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
126
136
|
{
|
|
127
137
|
provide: NG_VALUE_ACCESSOR,
|
|
128
138
|
useExisting: forwardRef(() => EditTableDataComponent),
|
|
129
139
|
multi: true
|
|
130
140
|
}
|
|
131
|
-
], template: "<
|
|
141
|
+
], template: "<yuv-dialog [headertitel]=\"'yuv.form.element.data.grid.edit.headline' | translate: { headline: header }\">\n <main>\n <div [formGroup]=\"tableForm\">\n <div class=\"fields\">\n @for (element of columns; track $index) {\n <div [attr.data-name]=\"element.name\" class=\"form-field\">\n <yuv-metadata-form-field [field]=\"element\" [formControlName]=\"element.name\" [situation]=\"situation\"></yuv-metadata-form-field>\n\n @let errorsGroup = errorMessage();\n @if (errorsGroup && tableForm.errors) {\n <div class=\"err-msg\">\n @for (errors of errorsGroup; track $index) {\n @for (error of errors; track $index) {\n {{ error[element.name] }}\n }\n }\n </div>\n }\n </div>\n }\n </div>\n </div>\n </main>\n\n <footer>\n <button ymtButton=\"secondary\" (click)=\"cancel()\">{{ 'yuv.form.element.data.grid.edit.cancel' | translate }}</button>\n <button ymtButton=\"primary\" (click)=\"submit()\" [disabled]=\"!tableForm.dirty && !tableForm.valid\">\n @if (adding) {\n {{ 'yuv.form.element.data.grid.edit.add' | translate }}\n } @else {\n {{ 'yuv.form.element.data.grid.edit' | translate }}\n }\n </button>\n </footer>\n</yuv-dialog>\n", styles: [":host .fields{padding:var(--ymt-spacing-m)}:host .err-msg{font:var(--ymt-font-body-subtle);color:var(--ymt-danger);padding:var(--ymt-spacing-2xs) 0;border:0}\n"] }]
|
|
132
142
|
}] });
|
|
133
143
|
|
|
134
144
|
var DataGridSizeType;
|
|
@@ -140,13 +150,12 @@ var DataGridSizeType;
|
|
|
140
150
|
DataGridSizeType["AUTO"] = "auto";
|
|
141
151
|
})(DataGridSizeType || (DataGridSizeType = {}));
|
|
142
152
|
|
|
143
|
-
const CDK_IMPORT = [CdkMenu, CdkTableModule, CdkMenuTrigger, CdkMenuItem];
|
|
144
153
|
class DataGridComponent {
|
|
145
154
|
constructor() {
|
|
146
155
|
this.#dialog = inject(MatDialog);
|
|
147
156
|
this.#clipboardService = inject(ClipboardService);
|
|
148
157
|
this.#decimalPipe = inject(DecimalPipe);
|
|
149
|
-
this.
|
|
158
|
+
this.translate = inject(TranslateService);
|
|
150
159
|
this.situation = input(Situation.EDIT);
|
|
151
160
|
this.formElement = input(undefined);
|
|
152
161
|
this.formControl = input(undefined);
|
|
@@ -185,6 +194,7 @@ class DataGridComponent {
|
|
|
185
194
|
#openEditOverlay(elementData, adding = false) {
|
|
186
195
|
return this.#dialog
|
|
187
196
|
.open(EditTableDataComponent, {
|
|
197
|
+
minWidth: '25%',
|
|
188
198
|
data: {
|
|
189
199
|
formElement: {
|
|
190
200
|
...this.formElement()
|
|
@@ -219,9 +229,11 @@ class DataGridComponent {
|
|
|
219
229
|
this.#openEditOverlay(null, true).subscribe((result) => {
|
|
220
230
|
const currentData = this.dataSource();
|
|
221
231
|
const data = [...currentData];
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
232
|
+
if (result) {
|
|
233
|
+
data.push(result);
|
|
234
|
+
const formElement = this.formElement();
|
|
235
|
+
formElement && this.#updateTable(formElement['elements'], data);
|
|
236
|
+
}
|
|
225
237
|
});
|
|
226
238
|
}
|
|
227
239
|
removeRow(element) {
|
|
@@ -229,13 +241,13 @@ class DataGridComponent {
|
|
|
229
241
|
const formElement = this.formElement();
|
|
230
242
|
formElement && this.#updateTable(formElement['elements'], updatedData);
|
|
231
243
|
}
|
|
232
|
-
#
|
|
244
|
+
#cellValue(element, value) {
|
|
233
245
|
switch (element.type) {
|
|
234
246
|
case 'string':
|
|
235
247
|
return value;
|
|
236
248
|
break;
|
|
237
249
|
case 'decimal':
|
|
238
|
-
return this.#decimalPipe.transform(value, '1.2-4', this.
|
|
250
|
+
return this.#decimalPipe.transform(value, '1.2-4', this.translate.currentLang);
|
|
239
251
|
break;
|
|
240
252
|
default:
|
|
241
253
|
return value;
|
|
@@ -248,7 +260,7 @@ class DataGridComponent {
|
|
|
248
260
|
acc.push({
|
|
249
261
|
columnDef: el.label,
|
|
250
262
|
header: el.label,
|
|
251
|
-
cell: (element) => (element.isAddRow ? '' : this.#
|
|
263
|
+
cell: (element) => (element.isAddRow ? '' : this.#cellValue(el, element[el.label]))
|
|
252
264
|
});
|
|
253
265
|
return acc;
|
|
254
266
|
}, []));
|
|
@@ -256,7 +268,9 @@ class DataGridComponent {
|
|
|
256
268
|
else {
|
|
257
269
|
this.displayedColumns.set([]);
|
|
258
270
|
}
|
|
259
|
-
|
|
271
|
+
const displayedColumns = [...this.displayedColumns().map((col) => col.columnDef)];
|
|
272
|
+
!this.readonly() && displayedColumns.push('actions');
|
|
273
|
+
this.displayedColumnsWithActions.set(displayedColumns);
|
|
260
274
|
this.dataSource.set(data);
|
|
261
275
|
}
|
|
262
276
|
writeValue(obj) {
|
|
@@ -282,11 +296,11 @@ class DataGridComponent {
|
|
|
282
296
|
multi: true
|
|
283
297
|
},
|
|
284
298
|
DecimalPipe
|
|
285
|
-
], ngImport: i0, template: "<header>\n <h3>{{ tableLabel() }}</h3>\n @if (!readonly()) {\n <button
|
|
299
|
+
], ngImport: i0, template: "<header>\n <h3>{{ tableLabel() }}</h3>\n @if (!readonly()) {\n <button (click)=\"addRow()\" class=\"table-options-add-row\">\n <mat-icon>add</mat-icon>\n </button>\n }\n</header>\n@let displayedCol = displayedColumns();\n@let displayedColActions = displayedColumnsWithActions();\n<div class=\"table-wrapper\" [ngClass]=\"size()\">\n <table mat-table [dataSource]=\"dataSource()\" class=\"mat-elevation-z8\">\n @for (column of displayedCol; track column) {\n <ng-container [matColumnDef]=\"column.columnDef\">\n <th mat-header-cell *matHeaderCellDef [attr.aria-label]=\"column.header\" [title]=\"column.header\">{{ column.header }}</th>\n <td mat-cell *matCellDef=\"let element\">{{ column.cell(element) }}</td>\n </ng-container>\n }\n\n @if (!readonly()) {\n <ng-container matColumnDef=\"actions\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef class=\"actions-row\" aria-label=\"row actions\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"actions-row\">\n <!-- Only show the button in the last (empty) row -->\n <button class=\"table-options-menu-bar-item\" [matMenuTriggerFor]=\"menu\" (click)=\"onMenuTriggert(element)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColActions; sticky: ['header-1']\"></tr>\n @if (!readonly()) {\n <tr (dblclick)=\"editRow(row)\" [class.selected-row]=\"row === selectedRow()\" mat-row *matRowDef=\"let row; columns: displayedColActions\"></tr>\n } @else {\n <tr mat-row *matRowDef=\"let row; columns: displayedColActions\"></tr>\n }\n </table>\n</div>\n\n<mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"copyLine(selectedRow())\">{{ 'yuv.form.element.data.grid.copy' | translate }}</button>\n <button mat-menu-item (click)=\"editRow(selectedRow())\">{{ 'yuv.form.element.data.grid.edit' | translate }}</button>\n <button mat-menu-item (click)=\"removeRow(selectedRow())\">{{ 'yuv.form.element.data.grid.remove' | translate }}</button>\n</mat-menu>\n", styles: [":host{--table-size-small: 200px;--table-size-medium: 400px;--table-size-large: 600px;--table-size-extra-large: 800px;border:1px solid var(--ymt-outline-variant);max-width:100%;overflow:auto}:host header{display:flex;justify-content:space-between;background-color:var(--ymt-surface-panel-grey)}:host header h3{text-align:start;-webkit-user-select:none;user-select:none;flex:0 1 auto;padding:1rem;margin:0;color:var(--ymt-text-color-subtle);border-radius:2px;font:var(--ymt-font-body-subtle);font-weight:400}:host .actions-row{max-width:34px;background-color:#f0f0f0;padding:0}:host.yuv-data-grid{display:block}:host.yuv-data-grid .table-wrapper{overflow:auto;position:relative;white-space:nowrap}:host.yuv-data-grid .table-wrapper.small{height:var(--table-size-small)}:host.yuv-data-grid .table-wrapper.medium{height:var(--table-size-medium)}:host.yuv-data-grid .table-wrapper.large{height:var(--table-size-large)}:host.yuv-data-grid .table-wrapper.extra-large{height:var(--table-size-extra-large)}:host.yuv-data-grid ::ng-deep .cdk-header-cell:not(:last-child){padding:.5rem 1rem}:host.yuv-data-grid ::ng-deep table{border-spacing:0}:host.yuv-data-grid ::ng-deep th{border-bottom:1px solid var(--ymt-outline-variant);border-right:1px solid var(--ymt-outline-variant);padding:.5rem 0}:host.yuv-data-grid ::ng-deep thead{background-color:var(--ymt-surface-panel)}:host.yuv-data-grid ::ng-deep tr.cdk-row{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}:host.yuv-data-grid ::ng-deep tr.cdk-row:hover td{border-top:1px solid var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-surface-panel)}:host.yuv-data-grid ::ng-deep tr.cdk-row:hover:has(.actions-row) td.cdk-cell.actions-row.sticky{opacity:1}:host.yuv-data-grid ::ng-deep tr.cdk-row.selected-row{color:var(--ymt-text-color-subtle)}:host.yuv-data-grid ::ng-deep tr.cdk-row td{border-bottom:1px solid transparent;border-top:1px solid transparent}:host.yuv-data-grid ::ng-deep tr.cdk-row td:not(:last-child){padding:.5rem 1rem}:host.yuv-data-grid ::ng-deep .cdk-table .cdk-header-row th[role=columnheader]{font-weight:500}:host.yuv-data-grid th.cdk-header-cell.sticky-column{position:sticky;top:0;background-color:var(--ymt-surface-panel)}:host.yuv-data-grid td.cdk-cell.actions-row.sticky{position:sticky;right:0;opacity:0;background-color:var(--ymt-surface-panel);transition:opacity .2s ease-in-out}:host .table-options-menu-bar-item,:host .table-options-add-row{cursor:pointer;border:none;-webkit-user-select:none;user-select:none;min-width:34px;line-height:26px;padding:0;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$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: "component", type: i1$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$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: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i3.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
286
300
|
}
|
|
287
301
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DataGridComponent, decorators: [{
|
|
288
302
|
type: Component,
|
|
289
|
-
args: [{ selector: 'yuv-data-grid', standalone: true, imports: [
|
|
303
|
+
args: [{ selector: 'yuv-data-grid', standalone: true, imports: [NgClass, MatMenuModule, MatMenuTrigger, MatIconModule, MatButtonModule, MatTableModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
290
304
|
{
|
|
291
305
|
provide: NG_VALUE_ACCESSOR,
|
|
292
306
|
useExisting: forwardRef(() => DataGridComponent),
|
|
@@ -295,7 +309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
|
|
|
295
309
|
DecimalPipe
|
|
296
310
|
], host: {
|
|
297
311
|
class: 'yuv-data-grid'
|
|
298
|
-
}, template: "<header>\n <h3>{{ tableLabel() }}</h3>\n @if (!readonly()) {\n <button
|
|
312
|
+
}, template: "<header>\n <h3>{{ tableLabel() }}</h3>\n @if (!readonly()) {\n <button (click)=\"addRow()\" class=\"table-options-add-row\">\n <mat-icon>add</mat-icon>\n </button>\n }\n</header>\n@let displayedCol = displayedColumns();\n@let displayedColActions = displayedColumnsWithActions();\n<div class=\"table-wrapper\" [ngClass]=\"size()\">\n <table mat-table [dataSource]=\"dataSource()\" class=\"mat-elevation-z8\">\n @for (column of displayedCol; track column) {\n <ng-container [matColumnDef]=\"column.columnDef\">\n <th mat-header-cell *matHeaderCellDef [attr.aria-label]=\"column.header\" [title]=\"column.header\">{{ column.header }}</th>\n <td mat-cell *matCellDef=\"let element\">{{ column.cell(element) }}</td>\n </ng-container>\n }\n\n @if (!readonly()) {\n <ng-container matColumnDef=\"actions\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef class=\"actions-row\" aria-label=\"row actions\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"actions-row\">\n <!-- Only show the button in the last (empty) row -->\n <button class=\"table-options-menu-bar-item\" [matMenuTriggerFor]=\"menu\" (click)=\"onMenuTriggert(element)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </td>\n </ng-container>\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColActions; sticky: ['header-1']\"></tr>\n @if (!readonly()) {\n <tr (dblclick)=\"editRow(row)\" [class.selected-row]=\"row === selectedRow()\" mat-row *matRowDef=\"let row; columns: displayedColActions\"></tr>\n } @else {\n <tr mat-row *matRowDef=\"let row; columns: displayedColActions\"></tr>\n }\n </table>\n</div>\n\n<mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"copyLine(selectedRow())\">{{ 'yuv.form.element.data.grid.copy' | translate }}</button>\n <button mat-menu-item (click)=\"editRow(selectedRow())\">{{ 'yuv.form.element.data.grid.edit' | translate }}</button>\n <button mat-menu-item (click)=\"removeRow(selectedRow())\">{{ 'yuv.form.element.data.grid.remove' | translate }}</button>\n</mat-menu>\n", styles: [":host{--table-size-small: 200px;--table-size-medium: 400px;--table-size-large: 600px;--table-size-extra-large: 800px;border:1px solid var(--ymt-outline-variant);max-width:100%;overflow:auto}:host header{display:flex;justify-content:space-between;background-color:var(--ymt-surface-panel-grey)}:host header h3{text-align:start;-webkit-user-select:none;user-select:none;flex:0 1 auto;padding:1rem;margin:0;color:var(--ymt-text-color-subtle);border-radius:2px;font:var(--ymt-font-body-subtle);font-weight:400}:host .actions-row{max-width:34px;background-color:#f0f0f0;padding:0}:host.yuv-data-grid{display:block}:host.yuv-data-grid .table-wrapper{overflow:auto;position:relative;white-space:nowrap}:host.yuv-data-grid .table-wrapper.small{height:var(--table-size-small)}:host.yuv-data-grid .table-wrapper.medium{height:var(--table-size-medium)}:host.yuv-data-grid .table-wrapper.large{height:var(--table-size-large)}:host.yuv-data-grid .table-wrapper.extra-large{height:var(--table-size-extra-large)}:host.yuv-data-grid ::ng-deep .cdk-header-cell:not(:last-child){padding:.5rem 1rem}:host.yuv-data-grid ::ng-deep table{border-spacing:0}:host.yuv-data-grid ::ng-deep th{border-bottom:1px solid var(--ymt-outline-variant);border-right:1px solid var(--ymt-outline-variant);padding:.5rem 0}:host.yuv-data-grid ::ng-deep thead{background-color:var(--ymt-surface-panel)}:host.yuv-data-grid ::ng-deep tr.cdk-row{cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease-in-out}:host.yuv-data-grid ::ng-deep tr.cdk-row:hover td{border-top:1px solid var(--ymt-surface-panel);border-bottom:1px solid var(--ymt-surface-panel)}:host.yuv-data-grid ::ng-deep tr.cdk-row:hover:has(.actions-row) td.cdk-cell.actions-row.sticky{opacity:1}:host.yuv-data-grid ::ng-deep tr.cdk-row.selected-row{color:var(--ymt-text-color-subtle)}:host.yuv-data-grid ::ng-deep tr.cdk-row td{border-bottom:1px solid transparent;border-top:1px solid transparent}:host.yuv-data-grid ::ng-deep tr.cdk-row td:not(:last-child){padding:.5rem 1rem}:host.yuv-data-grid ::ng-deep .cdk-table .cdk-header-row th[role=columnheader]{font-weight:500}:host.yuv-data-grid th.cdk-header-cell.sticky-column{position:sticky;top:0;background-color:var(--ymt-surface-panel)}:host.yuv-data-grid td.cdk-cell.actions-row.sticky{position:sticky;right:0;opacity:0;background-color:var(--ymt-surface-panel);transition:opacity .2s ease-in-out}:host .table-options-menu-bar-item,:host .table-options-add-row{cursor:pointer;border:none;-webkit-user-select:none;user-select:none;min-width:34px;line-height:26px;padding:0;display:flex;align-items:center;justify-content:center}\n"] }]
|
|
299
313
|
}] });
|
|
300
314
|
|
|
301
315
|
class DatetimeComponent extends AbstractMatFormField {
|
|
@@ -1049,7 +1063,7 @@ class OrganizationComponent extends AbstractMatFormField {
|
|
|
1049
1063
|
super.onNgOnDestroy();
|
|
1050
1064
|
}
|
|
1051
1065
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: OrganizationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1052
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.12", type: OrganizationComponent, isStandalone: true, selector: "yuv-organization", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, excludeMe: { classPropertyName: "excludeMe", publicName: "excludeMe", isSignal: true, isRequired: false, transformFunction: null }, withMetadata: { classPropertyName: "withMetadata", publicName: "withMetadata", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: OrganizationComponent }], usesInheritance: true, ngImport: i0, template: "<yuv-autocomplete\n [busy]=\"busy()\"\n [formControl]=\"acFormControl\"\n #autocomplete\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly()\"\n [autocompleteValues]=\"autocompleteRes\"\n [forceSelection]=\"true\"\n (autocompleteFnc)=\"autocompleteFn($event)\"\n [multiple]=\"true\"\n [maxItems]=\"multiselect() ? (-1) : 1\"\n>\n <!-- template for item inside the dropdown -->\n <ng-template #optionTemplate let-item>\n <span class=\"chip\">{{ item.value.user.title }}</span>\n </ng-template>\n\n <!-- template for chip -->\n <ng-template #chipTemplate let-item>\n <span class=\"chip\" [ngClass]=\"{ notFound: item.value.state.notFound }\" [matTooltip]=\"item.value.titleString\">\n {{ item.value.user.title || '...' }}\n </span>\n </ng-template>\n</yuv-autocomplete>\n\n<mat-icon [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">{{ multiselect() ? 'group' : 'person' }}</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host yuv-icon.classify{width:18px;height:18px;padding:var(--ymt-spacing-3xs);color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$
|
|
1066
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.12", type: OrganizationComponent, isStandalone: true, selector: "yuv-organization", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, excludeMe: { classPropertyName: "excludeMe", publicName: "excludeMe", isSignal: true, isRequired: false, transformFunction: null }, withMetadata: { classPropertyName: "withMetadata", publicName: "withMetadata", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: OrganizationComponent }], usesInheritance: true, ngImport: i0, template: "<yuv-autocomplete\n [busy]=\"busy()\"\n [formControl]=\"acFormControl\"\n #autocomplete\n [placeholder]=\"placeholder\"\n [disabled]=\"readonly()\"\n [autocompleteValues]=\"autocompleteRes\"\n [forceSelection]=\"true\"\n (autocompleteFnc)=\"autocompleteFn($event)\"\n [multiple]=\"true\"\n [maxItems]=\"multiselect() ? (-1) : 1\"\n>\n <!-- template for item inside the dropdown -->\n <ng-template #optionTemplate let-item>\n <span class=\"chip\">{{ item.value.user.title }}</span>\n </ng-template>\n\n <!-- template for chip -->\n <ng-template #chipTemplate let-item>\n <span class=\"chip\" [ngClass]=\"{ notFound: item.value.state.notFound }\" [matTooltip]=\"item.value.titleString\">\n {{ item.value.user.title || '...' }}\n </span>\n </ng-template>\n</yuv-autocomplete>\n\n<mat-icon [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">{{ multiselect() ? 'group' : 'person' }}</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host .chip.notFound{color:var(--ymt-on-danger-container);text-decoration:line-through}:host .chip.notFound:before{content:\"!\";display:inline-block;background-color:var(--ymt-danger-container);color:#fff;border-radius:2px;padding-inline:.3em;text-decoration:none;margin-inline-end:.75em}:host yuv-autocomplete{flex:1}:host yuv-icon.classify{width:18px;height:18px;padding:var(--ymt-spacing-3xs);color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: YuvAutocompleteModule }, { kind: "component", type: i3$1.AutocompleteComponent, selector: "yuv-autocomplete", inputs: ["ariaLabel", "busy", "multiple", "distinctValues", "addOnBlur", "minLength", "maxItems", "forceSelection", "autocompleteValues"], outputs: ["autocompleteFnc"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
|
|
1053
1067
|
}
|
|
1054
1068
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: OrganizationComponent, decorators: [{
|
|
1055
1069
|
type: Component,
|
|
@@ -1084,7 +1098,7 @@ class DateRangePickerComponent {
|
|
|
1084
1098
|
this.#dialogRef.close(this.form.value.range);
|
|
1085
1099
|
}
|
|
1086
1100
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DateRangePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1087
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.12", type: DateRangePickerComponent, isStandalone: true, selector: "yuv-date-range-picker", inputs: { range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"apply()\">\n <h2>{{ 'yuv.form.element.range-select-date.custom.overlay.title' | translate }}</h2>\n <yuv-datetime-range [withTime]=\"false\" formControlName=\"range\"></yuv-datetime-range>\n <button class=\"primary\" [disabled]=\"form.invalid\">{{ 'yuv.form.element.range-select-date.custom.overlay.button.apply' | translate }}</button>\n</form>\n", styles: [":host form{display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"title title\" \"input input\" \". button\";gap:var(--ymt-spacing-m);padding:var(--ymt-spacing-m)}:host form h2{grid-area:title;margin:0}:host form yuv-datetime-range{grid-area:input;border:1px solid var(--ymt-text-color-subtle);padding:1px 2px;border-radius:2px}:host form button{grid-area:button}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type:
|
|
1101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.12", type: DateRangePickerComponent, isStandalone: true, selector: "yuv-date-range-picker", inputs: { range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"apply()\">\n <h2>{{ 'yuv.form.element.range-select-date.custom.overlay.title' | translate }}</h2>\n <yuv-datetime-range [withTime]=\"false\" formControlName=\"range\"></yuv-datetime-range>\n <button class=\"primary\" [disabled]=\"form.invalid\">{{ 'yuv.form.element.range-select-date.custom.overlay.button.apply' | translate }}</button>\n</form>\n", styles: [":host form{display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(3,auto);grid-template-areas:\"title title\" \"input input\" \". button\";gap:var(--ymt-spacing-m);padding:var(--ymt-spacing-m)}:host form h2{grid-area:title;margin:0}:host form yuv-datetime-range{grid-area:input;border:1px solid var(--ymt-text-color-subtle);padding:1px 2px;border-radius:2px}:host form button{grid-area:button}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "component", type: DatetimeRangeComponent, selector: "yuv-datetime-range", inputs: ["withTime", "readonly", "operator", "situation"] }] }); }
|
|
1088
1102
|
}
|
|
1089
1103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DateRangePickerComponent, decorators: [{
|
|
1090
1104
|
type: Component,
|
|
@@ -1589,11 +1603,11 @@ class StringComponent extends AbstractMatFormField {
|
|
|
1589
1603
|
super.onNgOnDestroy();
|
|
1590
1604
|
}
|
|
1591
1605
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: StringComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1592
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: StringComponent, isStandalone: true, selector: "yuv-string", inputs: { multiselect: "multiselect", rows: "rows", readonly: "readonly", autofocus: "autofocus", classifications: "classifications", situation: "situation", regex: "regex", minLength: "minLength", maxLength: "maxLength" }, providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], usesInheritance: true, ngImport: i0, template: "@if ((!rows || rows <= 1) && !multiselect) {\n <input matInput type=\"text\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [readonly]=\"readonly\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect) {\n <!-- single line input with multiselect-->\n <mat-chip-grid #chipGrid [formControl]=\"fc\" [disabled]=\"disabled\">\n @for (v of value; track v) {\n <mat-chip-row (removed)=\"chipsRemove(v)\" [editable]=\"true\" (edited)=\"chipsEdit(v, $event)\">\n {{ v }}\n <button matChipRemove>\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n [disabled]=\"disabled\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"chipsAdd($event)\"\n />\n </mat-chip-grid>\n} @else if (rows && rows > 1) {\n <!-- multi line text inputs -->\n <textarea\n matInput\n class=\"input-textarea\"\n (blur)=\"onBlur()\"\n [rows]=\"rows\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [formControl]=\"fc\"\n ></textarea>\n}\n\n@if (classify) {\n <div class=\"classify\">\n @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect || value.length <= 1)) {\n <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n <mat-icon>{{ classify.icon }}</mat-icon>\n </a>\n } @else {\n <mat-icon>{{ classify.icon }}</mat-icon>\n }\n </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;flex:1;align-items:center
|
|
1606
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: StringComponent, isStandalone: true, selector: "yuv-string", inputs: { multiselect: "multiselect", rows: "rows", readonly: "readonly", autofocus: "autofocus", classifications: "classifications", situation: "situation", regex: "regex", minLength: "minLength", maxLength: "maxLength" }, providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], usesInheritance: true, ngImport: i0, template: "@if ((!rows || rows <= 1) && !multiselect) {\n <input matInput type=\"text\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [readonly]=\"readonly\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect) {\n <!-- single line input with multiselect-->\n <mat-chip-grid #chipGrid [formControl]=\"fc\" [disabled]=\"disabled\">\n @for (v of value; track v) {\n <mat-chip-row (removed)=\"chipsRemove(v)\" [editable]=\"true\" (edited)=\"chipsEdit(v, $event)\">\n {{ v }}\n <button matChipRemove>\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n [disabled]=\"disabled\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"chipsAdd($event)\"\n />\n </mat-chip-grid>\n} @else if (rows && rows > 1) {\n <!-- multi line text inputs -->\n <textarea\n matInput\n class=\"input-textarea\"\n (blur)=\"onBlur()\"\n [rows]=\"rows\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [formControl]=\"fc\"\n ></textarea>\n}\n\n@if (classify) {\n <div class=\"classify\">\n @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect || value.length <= 1)) {\n <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n <mat-icon>{{ classify.icon }}</mat-icon>\n </a>\n } @else {\n <mat-icon>{{ classify.icon }}</mat-icon>\n }\n </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;flex:1;align-items:center}:host:has(mat-chip-grid){overflow-x:auto}:host textarea.input-textarea{width:100%;resize:vertical;background-color:transparent;border:0;outline:0}:host input{display:flex;flex-wrap:wrap;align-items:center;width:100%;border:0;outline:0;background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
1593
1607
|
}
|
|
1594
1608
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: StringComponent, decorators: [{
|
|
1595
1609
|
type: Component,
|
|
1596
|
-
args: [{ selector: 'yuv-string', standalone: true, imports: [CommonModule, MatChipsModule, MatIconModule, ReactiveFormsModule, FormsModule], providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], template: "@if ((!rows || rows <= 1) && !multiselect) {\n <input matInput type=\"text\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [readonly]=\"readonly\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect) {\n <!-- single line input with multiselect-->\n <mat-chip-grid #chipGrid [formControl]=\"fc\" [disabled]=\"disabled\">\n @for (v of value; track v) {\n <mat-chip-row (removed)=\"chipsRemove(v)\" [editable]=\"true\" (edited)=\"chipsEdit(v, $event)\">\n {{ v }}\n <button matChipRemove>\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n [disabled]=\"disabled\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"chipsAdd($event)\"\n />\n </mat-chip-grid>\n} @else if (rows && rows > 1) {\n <!-- multi line text inputs -->\n <textarea\n matInput\n class=\"input-textarea\"\n (blur)=\"onBlur()\"\n [rows]=\"rows\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [formControl]=\"fc\"\n ></textarea>\n}\n\n@if (classify) {\n <div class=\"classify\">\n @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect || value.length <= 1)) {\n <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n <mat-icon>{{ classify.icon }}</mat-icon>\n </a>\n } @else {\n <mat-icon>{{ classify.icon }}</mat-icon>\n }\n </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;flex:1;align-items:center
|
|
1610
|
+
args: [{ selector: 'yuv-string', standalone: true, imports: [CommonModule, MatChipsModule, MatIconModule, ReactiveFormsModule, FormsModule], providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], template: "@if ((!rows || rows <= 1) && !multiselect) {\n <input matInput type=\"text\" (blur)=\"onBlur()\" [disabled]=\"disabled\" [readonly]=\"readonly\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect) {\n <!-- single line input with multiselect-->\n <mat-chip-grid #chipGrid [formControl]=\"fc\" [disabled]=\"disabled\">\n @for (v of value; track v) {\n <mat-chip-row (removed)=\"chipsRemove(v)\" [editable]=\"true\" (edited)=\"chipsEdit(v, $event)\">\n {{ v }}\n <button matChipRemove>\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip-row>\n }\n <input\n [disabled]=\"disabled\"\n [matChipInputFor]=\"chipGrid\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"chipsAdd($event)\"\n />\n </mat-chip-grid>\n} @else if (rows && rows > 1) {\n <!-- multi line text inputs -->\n <textarea\n matInput\n class=\"input-textarea\"\n (blur)=\"onBlur()\"\n [rows]=\"rows\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [formControl]=\"fc\"\n ></textarea>\n}\n\n@if (classify) {\n <div class=\"classify\">\n @if (value && !validationErrors.length && (classify.hrefPrefix !== '' || !multiselect || value.length <= 1)) {\n <a href=\"{{ classify.hrefPrefix + formatedValue }}\">\n <mat-icon>{{ classify.icon }}</mat-icon>\n </a>\n } @else {\n <mat-icon>{{ classify.icon }}</mat-icon>\n }\n </div>\n}\n", styles: [":host{display:flex;flex-flow:row nowrap;flex:1;align-items:center}:host:has(mat-chip-grid){overflow-x:auto}:host textarea.input-textarea{width:100%;resize:vertical;background-color:transparent;border:0;outline:0}:host input{display:flex;flex-wrap:wrap;align-items:center;width:100%;border:0;outline:0;background:transparent}\n"] }]
|
|
1597
1611
|
}], propDecorators: { multiselect: [{
|
|
1598
1612
|
type: Input
|
|
1599
1613
|
}], rows: [{
|