@yuuvis/client-framework 2.3.8 → 2.3.10
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/fesm2022/yuuvis-client-framework-forms.mjs +35 -13
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs +17 -18
- package/fesm2022/yuuvis-client-framework-metadata-form.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-details.mjs +28 -30
- package/fesm2022/yuuvis-client-framework-object-details.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs +2 -2
- package/fesm2022/yuuvis-client-framework-object-flavor.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-form.mjs +4 -4
- package/fesm2022/yuuvis-client-framework-object-form.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-sort.mjs +39 -15
- package/fesm2022/yuuvis-client-framework-sort.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +10 -5
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-widget-grid.mjs +28 -15
- package/fesm2022/yuuvis-client-framework-widget-grid.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework.mjs +1 -1
- package/fesm2022/yuuvis-client-framework.mjs.map +1 -1
- package/forms/lib/elements/data-grid/data-grid/data-grid.component.d.ts +3 -4
- package/lib/assets/i18n/de.json +8 -6
- package/lib/assets/i18n/en.json +2 -0
- package/metadata-form/lib/metadata-form-field/metadata-form-field.component.d.ts +1 -1
- package/object-details/lib/object-audit/object-audit.component.d.ts +3 -8
- package/package.json +8 -8
- package/sort/lib/sort/sort.component.d.ts +5 -1
- package/tile-list/lib/tile/tile.component.d.ts +2 -1
- package/tile-list/lib/tile-list/tile-list.component.d.ts +2 -1
- package/widget-grid/lib/widget-grid-registry.service.d.ts +1 -0
|
@@ -15,11 +15,11 @@ import { MatTableModule } from '@angular/material/table';
|
|
|
15
15
|
import * as i2 from '@yuuvis/client-core';
|
|
16
16
|
import { SystemService, Situation, TranslateModule, ClipboardService, TranslateService, Operator, OperatorLabel, Utils, LocaleNumberPipe, FileSizePipe, Classification, UserService, YuvUser, IdmService, SearchUtils, LocaleDatePipe, ClassificationPrefix } from '@yuuvis/client-core';
|
|
17
17
|
import { YUV_ICONS } from '@yuuvis/client-framework/icons';
|
|
18
|
+
import { MetadataFormFieldComponent, ObjectMetadataElementLabelDirective } from '@yuuvis/client-framework/metadata-form';
|
|
18
19
|
import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
|
|
19
20
|
import { map, timer, take, of, forkJoin } from 'rxjs';
|
|
20
21
|
import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
|
|
21
22
|
import { FormTranslateService, DialogComponent, AbstractMatFormField, injectNgControl } from '@yuuvis/client-framework/common';
|
|
22
|
-
import { MetadataFormFieldComponent, ObjectMetadataElementLabelDirective } from '@yuuvis/client-framework/metadata-form';
|
|
23
23
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
24
24
|
import { MatInputModule } from '@angular/material/input';
|
|
25
25
|
import { TranslateService as TranslateService$1, TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
|
|
@@ -161,7 +161,7 @@ class DataGridComponent {
|
|
|
161
161
|
this.#decimalPipe = inject(DecimalPipe);
|
|
162
162
|
this.#datePipe = inject(DatePipe);
|
|
163
163
|
this.translate = inject(TranslateService);
|
|
164
|
-
this
|
|
164
|
+
this.#cdRef = inject(ChangeDetectorRef);
|
|
165
165
|
this.el = inject((ElementRef));
|
|
166
166
|
this.situation = input(Situation.EDIT);
|
|
167
167
|
this.formElement = input(undefined);
|
|
@@ -174,7 +174,10 @@ class DataGridComponent {
|
|
|
174
174
|
this.displayedColumns = signal([]);
|
|
175
175
|
this.displayedColumnsWithActions = signal([]);
|
|
176
176
|
this.dataSource = signal([]);
|
|
177
|
-
this.tableLabel = computed(() =>
|
|
177
|
+
this.tableLabel = computed(() => {
|
|
178
|
+
const formElement = this.formElement();
|
|
179
|
+
return formElement ? this.#systemService.getLocalizedResource(`${formElement['name']}_label`) : formElement && formElement['label'];
|
|
180
|
+
});
|
|
178
181
|
this.selectedRow = signal(null);
|
|
179
182
|
this.isRequired = false;
|
|
180
183
|
this.isInvalid = false;
|
|
@@ -183,6 +186,20 @@ class DataGridComponent {
|
|
|
183
186
|
add: YUV_ICONS.add,
|
|
184
187
|
more: YUV_ICONS.more
|
|
185
188
|
};
|
|
189
|
+
this.#readOnlyUpdateEffect = effect(() => {
|
|
190
|
+
const readonly = this.readonly();
|
|
191
|
+
untracked(() => {
|
|
192
|
+
this.displayedColumnsWithActions.update((cols) => {
|
|
193
|
+
if (readonly) {
|
|
194
|
+
const idx = cols.findIndex((c) => c === 'actions');
|
|
195
|
+
if (idx > -1)
|
|
196
|
+
cols.splice(idx, 1);
|
|
197
|
+
}
|
|
198
|
+
return cols;
|
|
199
|
+
});
|
|
200
|
+
this.displayedColumns.update((cols) => (readonly ? cols.filter((c) => c.columnDef !== 'actions') : cols));
|
|
201
|
+
});
|
|
202
|
+
});
|
|
186
203
|
this.#loadData = effect(() => {
|
|
187
204
|
const formElement = this.formElement();
|
|
188
205
|
untracked(() => formElement && this.#updateTable(formElement['elements'], formElement['value'] || []));
|
|
@@ -202,6 +219,8 @@ class DataGridComponent {
|
|
|
202
219
|
#systemService;
|
|
203
220
|
#decimalPipe;
|
|
204
221
|
#datePipe;
|
|
222
|
+
#cdRef;
|
|
223
|
+
#readOnlyUpdateEffect;
|
|
205
224
|
#loadData;
|
|
206
225
|
#sourceData;
|
|
207
226
|
#openEditOverlay(elementData, adding = false) {
|
|
@@ -228,6 +247,8 @@ class DataGridComponent {
|
|
|
228
247
|
this.selectedRow.set(element);
|
|
229
248
|
}
|
|
230
249
|
editRow(element) {
|
|
250
|
+
if (this.readonly())
|
|
251
|
+
return;
|
|
231
252
|
this.selectedRow.set(element);
|
|
232
253
|
this.#openEditOverlay(element).subscribe((result) => {
|
|
233
254
|
if (result) {
|
|
@@ -268,7 +289,7 @@ class DataGridComponent {
|
|
|
268
289
|
}
|
|
269
290
|
#updateTable(elements, data = []) {
|
|
270
291
|
if (elements.length > 0) {
|
|
271
|
-
|
|
292
|
+
const columns = elements.reduce((acc, el) => {
|
|
272
293
|
acc.push({
|
|
273
294
|
columnDef: el.name,
|
|
274
295
|
header: this.#systemService.getLocalizedLabel(el.name) || el.name,
|
|
@@ -276,13 +297,14 @@ class DataGridComponent {
|
|
|
276
297
|
cell: (element) => (element.isAddRow ? '' : this.#cellValue(el, element[el.name]))
|
|
277
298
|
});
|
|
278
299
|
return acc;
|
|
279
|
-
}, [])
|
|
300
|
+
}, []);
|
|
301
|
+
!this.readonly() && columns.push({ columnDef: 'actions', header: '', cell: () => '' });
|
|
302
|
+
this.displayedColumns.set(columns);
|
|
280
303
|
}
|
|
281
304
|
else {
|
|
282
305
|
this.displayedColumns.set([]);
|
|
283
306
|
}
|
|
284
307
|
const displayedColumns = [...this.displayedColumns().map((col) => col.columnDef)];
|
|
285
|
-
!this.readonly() && displayedColumns.push('actions');
|
|
286
308
|
this.displayedColumnsWithActions.set(displayedColumns);
|
|
287
309
|
this.dataSource.set(data);
|
|
288
310
|
}
|
|
@@ -312,7 +334,7 @@ class DataGridComponent {
|
|
|
312
334
|
//this.isRequired = control.hasValidator(Validators.required);
|
|
313
335
|
this.isRequired = !!control._eoFormElement?.required;
|
|
314
336
|
this.isInvalid = !!control.errors && (control.touched || control.dirty);
|
|
315
|
-
this.
|
|
337
|
+
this.#cdRef.markForCheck();
|
|
316
338
|
});
|
|
317
339
|
return null;
|
|
318
340
|
}
|
|
@@ -337,7 +359,7 @@ class DataGridComponent {
|
|
|
337
359
|
},
|
|
338
360
|
DecimalPipe,
|
|
339
361
|
DatePipe
|
|
340
|
-
], ngImport: i0, template: "
|
|
362
|
+
], ngImport: i0, template: "<fieldset [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"isInvalid\">\n <legend class=\"ymt-hide-sr\">\n {{ tableLabel() }}\n @if (isRequired) {\n *\n }\n </legend>\n <header class=\"yuv-data-grid__header\">\n <span\n [yuvObjectMetadataElementLabel]=\"formFieldContext()\"\n class=\"yuv-data-grid__header-title label\"\n [ngClass]=\"{ 'yuv-data-grid__header-title--invalid': isInvalid }\"\n aria-hidden=\"true\"\n >\n {{ tableLabel() }}\n @if (isRequired) {\n *\n }\n </span>\n\n @if (!readonly()) {\n <button ymtIconButton (click)=\"addRow()\" class=\"yuv-data-grid__header-action\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </header>\n\n @let displayedCol = displayedColumns();\n @let displayedColActions = displayedColumnsWithActions();\n\n <div class=\"yuv-data-grid__table\" [ngClass]=\"size()\">\n <table mat-table [dataSource]=\"dataSource()\" class=\"mat-elevation-z8\">\n <caption class=\"ymt-hide-sr\">\n {{\n tableLabel()\n }}\n </caption>\n\n @for (column of displayedCol; track column) {\n @if (column.columnDef === 'actions') {\n <h1>Actions</h1>\n <ng-container [matColumnDef]=\"column.columnDef\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\"></th>\n <td class=\"yuv-data-grid__cell--editable\" mat-cell *matCellDef=\"let element\">\n <div class=\"yuv-data-grid__table-actions\">\n <!-- Only show the button in the last (empty) row -->\n <button ymtIconButton icon-button-size=\"small\" class=\"table-options-menu-bar-item\" [matMenuTriggerFor]=\"menu\" (click)=\"onMenuTrigger(element)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n } @else {\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\n [ngClass]=\"{ 'number-cell': column.type === 'integer' || column.type === 'decimal', 'yuv-data-grid__cell--editable': !readonly() }\"\n mat-cell\n *matCellDef=\"let element\"\n >\n {{ column.cell(element) }}\n </td>\n </ng-container>\n }\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColActions; sticky: ['header-1']\"></tr>\n\n <tr (dblclick)=\"editRow(row)\" [class.selected-row]=\"row === selectedRow()\" mat-row *matRowDef=\"let row; columns: displayedColActions\"></tr>\n </table>\n </div>\n</fieldset>\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;max-width:100%;width:100%}:host .yuv-data-grid__header{display:flex;justify-content:space-between;align-items:center;margin-block-end:var(--ymt-spacing-m)}:host .yuv-data-grid__header-title{transform:scale(var(--mat-mdc-form-field-floating-label-scale, .75))}:host .yuv-data-grid__header-title--invalid{background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);align-self:baseline}:host .yuv-data-grid__cell--editable{-webkit-user-select:none;user-select:none}:host .yuv-data-grid__table{overflow:auto;white-space:nowrap}:host .yuv-data-grid__table.small{height:var(--table-size-small)}:host .yuv-data-grid__table.medium{height:var(--table-size-medium)}:host .yuv-data-grid__table.large{height:var(--table-size-large)}:host .yuv-data-grid__table.extra-large{height:var(--table-size-extra-large)}:host .yuv-data-grid__table-actions{display:flex;align-items:center;justify-content:flex-end}:host.yuv-data-grid{display:block}:host.yuv-data-grid ::ng-deep tr.cdk-row td.number-cell{text-align:right}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$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: i2$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ObjectMetadataElementLabelDirective, selector: "[yuvObjectMetadataElementLabel]", inputs: ["yuvObjectMetadataElementLabel"] }, { kind: "directive", type: YmtIconButtonDirective, selector: "button[ymtIconButton],button[ymt-icon-button],a[ymtIconButton],a[ymt-icon-button]", inputs: ["disabled", "disableRipple", "aria-disabled", "disabledInteractive", "icon-button-size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
341
363
|
}
|
|
342
364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DataGridComponent, decorators: [{
|
|
343
365
|
type: Component,
|
|
@@ -357,7 +379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
357
379
|
], host: {
|
|
358
380
|
class: 'yuv-data-grid',
|
|
359
381
|
'(focusout)': 'onHostFocusOut($event)'
|
|
360
|
-
}, template: "
|
|
382
|
+
}, template: "<fieldset [attr.aria-required]=\"isRequired\" [attr.aria-invalid]=\"isInvalid\">\n <legend class=\"ymt-hide-sr\">\n {{ tableLabel() }}\n @if (isRequired) {\n *\n }\n </legend>\n <header class=\"yuv-data-grid__header\">\n <span\n [yuvObjectMetadataElementLabel]=\"formFieldContext()\"\n class=\"yuv-data-grid__header-title label\"\n [ngClass]=\"{ 'yuv-data-grid__header-title--invalid': isInvalid }\"\n aria-hidden=\"true\"\n >\n {{ tableLabel() }}\n @if (isRequired) {\n *\n }\n </span>\n\n @if (!readonly()) {\n <button ymtIconButton (click)=\"addRow()\" class=\"yuv-data-grid__header-action\">\n <mat-icon>add</mat-icon>\n </button>\n }\n </header>\n\n @let displayedCol = displayedColumns();\n @let displayedColActions = displayedColumnsWithActions();\n\n <div class=\"yuv-data-grid__table\" [ngClass]=\"size()\">\n <table mat-table [dataSource]=\"dataSource()\" class=\"mat-elevation-z8\">\n <caption class=\"ymt-hide-sr\">\n {{\n tableLabel()\n }}\n </caption>\n\n @for (column of displayedCol; track column) {\n @if (column.columnDef === 'actions') {\n <h1>Actions</h1>\n <ng-container [matColumnDef]=\"column.columnDef\" stickyEnd>\n <th mat-header-cell *matHeaderCellDef aria-label=\"row actions\"></th>\n <td class=\"yuv-data-grid__cell--editable\" mat-cell *matCellDef=\"let element\">\n <div class=\"yuv-data-grid__table-actions\">\n <!-- Only show the button in the last (empty) row -->\n <button ymtIconButton icon-button-size=\"small\" class=\"table-options-menu-bar-item\" [matMenuTriggerFor]=\"menu\" (click)=\"onMenuTrigger(element)\">\n <mat-icon>more_vert</mat-icon>\n </button>\n </div>\n </td>\n </ng-container>\n } @else {\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\n [ngClass]=\"{ 'number-cell': column.type === 'integer' || column.type === 'decimal', 'yuv-data-grid__cell--editable': !readonly() }\"\n mat-cell\n *matCellDef=\"let element\"\n >\n {{ column.cell(element) }}\n </td>\n </ng-container>\n }\n }\n\n <tr mat-header-row *matHeaderRowDef=\"displayedColActions; sticky: ['header-1']\"></tr>\n\n <tr (dblclick)=\"editRow(row)\" [class.selected-row]=\"row === selectedRow()\" mat-row *matRowDef=\"let row; columns: displayedColActions\"></tr>\n </table>\n </div>\n</fieldset>\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;max-width:100%;width:100%}:host .yuv-data-grid__header{display:flex;justify-content:space-between;align-items:center;margin-block-end:var(--ymt-spacing-m)}:host .yuv-data-grid__header-title{transform:scale(var(--mat-mdc-form-field-floating-label-scale, .75))}:host .yuv-data-grid__header-title--invalid{background-color:var(--ymt-danger-container);color:var(--ymt-on-danger-container);align-self:baseline}:host .yuv-data-grid__cell--editable{-webkit-user-select:none;user-select:none}:host .yuv-data-grid__table{overflow:auto;white-space:nowrap}:host .yuv-data-grid__table.small{height:var(--table-size-small)}:host .yuv-data-grid__table.medium{height:var(--table-size-medium)}:host .yuv-data-grid__table.large{height:var(--table-size-large)}:host .yuv-data-grid__table.extra-large{height:var(--table-size-extra-large)}:host .yuv-data-grid__table-actions{display:flex;align-items:center;justify-content:flex-end}:host.yuv-data-grid{display:block}:host.yuv-data-grid ::ng-deep tr.cdk-row td.number-cell{text-align:right}\n"] }]
|
|
361
383
|
}] });
|
|
362
384
|
|
|
363
385
|
class DatetimeComponent extends AbstractMatFormField {
|
|
@@ -1137,7 +1159,7 @@ class OrganizationComponent extends AbstractMatFormField {
|
|
|
1137
1159
|
value: u
|
|
1138
1160
|
}));
|
|
1139
1161
|
this.acFormControl.setValue(this.multiselect() ? mapped : [mapped[0]], { emitEvent: false });
|
|
1140
|
-
this.acFormControl.updateValueAndValidity();
|
|
1162
|
+
this.acFormControl.updateValueAndValidity({ emitEvent: false });
|
|
1141
1163
|
});
|
|
1142
1164
|
}
|
|
1143
1165
|
autocompleteFn(query) {
|
|
@@ -1178,7 +1200,7 @@ class OrganizationComponent extends AbstractMatFormField {
|
|
|
1178
1200
|
this.ngControl.control.setErrors(this.acFormControl.errors);
|
|
1179
1201
|
}
|
|
1180
1202
|
});
|
|
1181
|
-
this.acFormControl.updateValueAndValidity();
|
|
1203
|
+
this.acFormControl.updateValueAndValidity({ emitEvent: false });
|
|
1182
1204
|
this.acFormControl.valueChanges.subscribe((v) => {
|
|
1183
1205
|
if (!Array.isArray(v))
|
|
1184
1206
|
v = v ? [v] : [];
|
|
@@ -1902,11 +1924,11 @@ class StringComponent extends AbstractMatFormField {
|
|
|
1902
1924
|
super.onNgOnDestroy();
|
|
1903
1925
|
}
|
|
1904
1926
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StringComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1905
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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;scrollbar-width:none}:host textarea.input-textarea{width:100%;resize:
|
|
1927
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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;scrollbar-width:none}:host textarea.input-textarea{width:100%;resize:none;background-color:transparent;border:0;outline:0;margin-block:var(--ymt-spacing-s)}: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$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$3.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: i3.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 }] }); }
|
|
1906
1928
|
}
|
|
1907
1929
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StringComponent, decorators: [{
|
|
1908
1930
|
type: Component,
|
|
1909
|
-
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;scrollbar-width:none}:host textarea.input-textarea{width:100%;resize:
|
|
1931
|
+
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;scrollbar-width:none}:host textarea.input-textarea{width:100%;resize:none;background-color:transparent;border:0;outline:0;margin-block:var(--ymt-spacing-s)}:host input{display:flex;flex-wrap:wrap;align-items:center;width:100%;border:0;outline:0;background:transparent}\n"] }]
|
|
1910
1932
|
}], propDecorators: { multiselect: [{
|
|
1911
1933
|
type: Input
|
|
1912
1934
|
}], rows: [{
|