@yuuvis/client-framework 2.3.8 → 2.3.9
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 +31 -12
- package/fesm2022/yuuvis-client-framework-forms.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 +40 -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 +20 -10
- 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 +2 -3
- package/lib/assets/i18n/de.json +8 -6
- package/lib/assets/i18n/en.json +2 -0
- package/object-details/lib/object-audit/object-audit.component.d.ts +3 -8
- package/package.json +4 -4
- 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);
|
|
@@ -183,6 +183,20 @@ class DataGridComponent {
|
|
|
183
183
|
add: YUV_ICONS.add,
|
|
184
184
|
more: YUV_ICONS.more
|
|
185
185
|
};
|
|
186
|
+
this.#readOnlyUpdateEffect = effect(() => {
|
|
187
|
+
const readonly = this.readonly();
|
|
188
|
+
untracked(() => {
|
|
189
|
+
this.displayedColumnsWithActions.update((cols) => {
|
|
190
|
+
if (readonly) {
|
|
191
|
+
const idx = cols.findIndex((c) => c === 'actions');
|
|
192
|
+
if (idx > -1)
|
|
193
|
+
cols.splice(idx, 1);
|
|
194
|
+
}
|
|
195
|
+
return cols;
|
|
196
|
+
});
|
|
197
|
+
this.displayedColumns.update((cols) => (readonly ? cols.filter((c) => c.columnDef !== 'actions') : cols));
|
|
198
|
+
});
|
|
199
|
+
});
|
|
186
200
|
this.#loadData = effect(() => {
|
|
187
201
|
const formElement = this.formElement();
|
|
188
202
|
untracked(() => formElement && this.#updateTable(formElement['elements'], formElement['value'] || []));
|
|
@@ -202,6 +216,8 @@ class DataGridComponent {
|
|
|
202
216
|
#systemService;
|
|
203
217
|
#decimalPipe;
|
|
204
218
|
#datePipe;
|
|
219
|
+
#cdRef;
|
|
220
|
+
#readOnlyUpdateEffect;
|
|
205
221
|
#loadData;
|
|
206
222
|
#sourceData;
|
|
207
223
|
#openEditOverlay(elementData, adding = false) {
|
|
@@ -228,6 +244,8 @@ class DataGridComponent {
|
|
|
228
244
|
this.selectedRow.set(element);
|
|
229
245
|
}
|
|
230
246
|
editRow(element) {
|
|
247
|
+
if (this.readonly())
|
|
248
|
+
return;
|
|
231
249
|
this.selectedRow.set(element);
|
|
232
250
|
this.#openEditOverlay(element).subscribe((result) => {
|
|
233
251
|
if (result) {
|
|
@@ -268,7 +286,7 @@ class DataGridComponent {
|
|
|
268
286
|
}
|
|
269
287
|
#updateTable(elements, data = []) {
|
|
270
288
|
if (elements.length > 0) {
|
|
271
|
-
|
|
289
|
+
const columns = elements.reduce((acc, el) => {
|
|
272
290
|
acc.push({
|
|
273
291
|
columnDef: el.name,
|
|
274
292
|
header: this.#systemService.getLocalizedLabel(el.name) || el.name,
|
|
@@ -276,13 +294,14 @@ class DataGridComponent {
|
|
|
276
294
|
cell: (element) => (element.isAddRow ? '' : this.#cellValue(el, element[el.name]))
|
|
277
295
|
});
|
|
278
296
|
return acc;
|
|
279
|
-
}, [])
|
|
297
|
+
}, []);
|
|
298
|
+
!this.readonly() && columns.push({ columnDef: 'actions', header: '', cell: () => '' });
|
|
299
|
+
this.displayedColumns.set(columns);
|
|
280
300
|
}
|
|
281
301
|
else {
|
|
282
302
|
this.displayedColumns.set([]);
|
|
283
303
|
}
|
|
284
304
|
const displayedColumns = [...this.displayedColumns().map((col) => col.columnDef)];
|
|
285
|
-
!this.readonly() && displayedColumns.push('actions');
|
|
286
305
|
this.displayedColumnsWithActions.set(displayedColumns);
|
|
287
306
|
this.dataSource.set(data);
|
|
288
307
|
}
|
|
@@ -312,7 +331,7 @@ class DataGridComponent {
|
|
|
312
331
|
//this.isRequired = control.hasValidator(Validators.required);
|
|
313
332
|
this.isRequired = !!control._eoFormElement?.required;
|
|
314
333
|
this.isInvalid = !!control.errors && (control.touched || control.dirty);
|
|
315
|
-
this.
|
|
334
|
+
this.#cdRef.markForCheck();
|
|
316
335
|
});
|
|
317
336
|
return null;
|
|
318
337
|
}
|
|
@@ -337,7 +356,7 @@ class DataGridComponent {
|
|
|
337
356
|
},
|
|
338
357
|
DecimalPipe,
|
|
339
358
|
DatePipe
|
|
340
|
-
], ngImport: i0, template: "
|
|
359
|
+
], 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
360
|
}
|
|
342
361
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DataGridComponent, decorators: [{
|
|
343
362
|
type: Component,
|
|
@@ -357,7 +376,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
357
376
|
], host: {
|
|
358
377
|
class: 'yuv-data-grid',
|
|
359
378
|
'(focusout)': 'onHostFocusOut($event)'
|
|
360
|
-
}, template: "
|
|
379
|
+
}, 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
380
|
}] });
|
|
362
381
|
|
|
363
382
|
class DatetimeComponent extends AbstractMatFormField {
|
|
@@ -1137,7 +1156,7 @@ class OrganizationComponent extends AbstractMatFormField {
|
|
|
1137
1156
|
value: u
|
|
1138
1157
|
}));
|
|
1139
1158
|
this.acFormControl.setValue(this.multiselect() ? mapped : [mapped[0]], { emitEvent: false });
|
|
1140
|
-
this.acFormControl.updateValueAndValidity();
|
|
1159
|
+
this.acFormControl.updateValueAndValidity({ emitEvent: false });
|
|
1141
1160
|
});
|
|
1142
1161
|
}
|
|
1143
1162
|
autocompleteFn(query) {
|
|
@@ -1178,7 +1197,7 @@ class OrganizationComponent extends AbstractMatFormField {
|
|
|
1178
1197
|
this.ngControl.control.setErrors(this.acFormControl.errors);
|
|
1179
1198
|
}
|
|
1180
1199
|
});
|
|
1181
|
-
this.acFormControl.updateValueAndValidity();
|
|
1200
|
+
this.acFormControl.updateValueAndValidity({ emitEvent: false });
|
|
1182
1201
|
this.acFormControl.valueChanges.subscribe((v) => {
|
|
1183
1202
|
if (!Array.isArray(v))
|
|
1184
1203
|
v = v ? [v] : [];
|
|
@@ -1902,11 +1921,11 @@ class StringComponent extends AbstractMatFormField {
|
|
|
1902
1921
|
super.onNgOnDestroy();
|
|
1903
1922
|
}
|
|
1904
1923
|
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:
|
|
1924
|
+
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}: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
1925
|
}
|
|
1907
1926
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: StringComponent, decorators: [{
|
|
1908
1927
|
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:
|
|
1928
|
+
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}:host input{display:flex;flex-wrap:wrap;align-items:center;width:100%;border:0;outline:0;background:transparent}\n"] }]
|
|
1910
1929
|
}], propDecorators: { multiselect: [{
|
|
1911
1930
|
type: Input
|
|
1912
1931
|
}], rows: [{
|