@yuuvis/client-framework 2.10.0 → 2.10.1

package/fesm2022/yuuvis-client-framework-forms.mjs

@@ -12,6 +12,8 @@ import * as i2$1 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import * as i4 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
+import * as i5 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i2 from '@yuuvis/client-core';
 import { SystemService, Situation, TranslateModule, TranslateService, Operator, OperatorLabel, Utils, LocaleNumberPipe, FileSizePipe, Classification, IdmService, UserService, SearchUtils, LocaleDatePipe, ClassificationPrefix } from '@yuuvis/client-core';
 import { YUV_ICONS } from '@yuuvis/client-framework/icons';
@@ -29,8 +31,6 @@ import { DatepickerComponent, YuvDatepickerModule } from '@yuuvis/client-framewo
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i4$1 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i3$1 from '@yuuvis/client-framework/autocomplete';
 import { YuvAutocompleteModule } from '@yuuvis/client-framework/autocomplete';
 import { map as map$1, catchError } from 'rxjs/operators';
@@ -151,7 +151,7 @@ var DataGridSizeType;
     DataGridSizeType["AUTO"] = "auto";
 })(DataGridSizeType || (DataGridSizeType = {}));
 
-const MATERIAL = [MatMenuModule, MatMenuTrigger, MatIconModule, MatButtonModule, MatTableModule];
+const MATERIAL = [MatMenuModule, MatMenuTrigger, MatIconModule, MatButtonModule, MatTableModule, MatTooltipModule];
 class DataGridComponent {
     constructor() {
         this.#dialog = inject(MatDialog);
@@ -362,7 +362,7 @@ class DataGridComponent {
                 useExisting: forwardRef(() => DataGridComponent),
                 multi: true
             }
-        ], 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  @let data = dataSource();\n\n  <div class=\"yuv-data-grid__table\" [ngClass]=\"size()\">\n    <table mat-table [dataSource]=\"data\" 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              <ng-template *yuvRenderer=\"column.cell(element)\"></ng-template>\n            </td>\n          </ng-container>\n        }\n\n        <tr class=\"mat-row\" *matNoDataRow>\n          <td class=\"mat-cell no-data-cell\" [attr.colspan]=\"column.length\"></td>\n        </tr>\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    @if (data.length === 0) {\n      <span class=\"no-data\">{{ 'yuv.form.element.data.grid.noData' | translate }}</span>\n    }\n  </div>\n</fieldset>\n<mat-menu #menu=\"matMenu\">\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%;border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-s);overflow:hidden;position:relative}:host .yuv-data-grid__header{display:flex;justify-content:space-between;align-items:center;padding:var(--ymt-spacing-xs)}: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 .no-data{display:block;width:100%;background-color:var(--ymt-surface);text-align:center;padding:var(--ymt-spacing-s);font:var(--ymt-font-body);color:var(--ymt-text-color-subtle);font-style:italic}: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: i4.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { 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 }); }
+        ], 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\" [matTooltip]=\"'yuv.form.element.data.grid.add-row.button.tooltip' | translate\">\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n  </header>\n\n  @let displayedCol = displayedColumns();\n  @let displayedColActions = displayedColumnsWithActions();\n  @let data = dataSource();\n\n  <div class=\"yuv-data-grid__table\" [ngClass]=\"size()\">\n    <table mat-table [dataSource]=\"data\" 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)\" [matTooltip]=\"'yuv.form.element.data.grid.row.button.actions.tooltip' | translate\"  >\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              <ng-template *yuvRenderer=\"column.cell(element)\"></ng-template>\n            </td>\n          </ng-container>\n        }\n\n        <tr class=\"mat-row\" *matNoDataRow>\n          <td class=\"mat-cell no-data-cell\" [attr.colspan]=\"column.length\"></td>\n        </tr>\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    @if (data.length === 0) {\n      <span class=\"no-data\">{{ 'yuv.form.element.data.grid.noData' | translate }}</span>\n    }\n  </div>\n</fieldset>\n<mat-menu #menu=\"matMenu\">\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%;border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-s);overflow:hidden;position:relative}:host .yuv-data-grid__header{display:flex;justify-content:space-between;align-items:center;padding:var(--ymt-spacing-xs)}: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 .no-data{display:block;width:100%;background-color:var(--ymt-surface);text-align:center;padding:var(--ymt-spacing-s);font:var(--ymt-font-body);color:var(--ymt-text-color-subtle);font-style:italic}: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: i4.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: RendererDirective, selector: "[yuvRenderer]", inputs: ["yuvRenderer"] }, { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DataGridComponent, decorators: [{
             type: Component,
@@ -380,7 +380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     ], host: {
                         class: 'yuv-data-grid',
                         '(focusout)': 'onHostFocusOut($event)'
-                    }, 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  @let data = dataSource();\n\n  <div class=\"yuv-data-grid__table\" [ngClass]=\"size()\">\n    <table mat-table [dataSource]=\"data\" 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              <ng-template *yuvRenderer=\"column.cell(element)\"></ng-template>\n            </td>\n          </ng-container>\n        }\n\n        <tr class=\"mat-row\" *matNoDataRow>\n          <td class=\"mat-cell no-data-cell\" [attr.colspan]=\"column.length\"></td>\n        </tr>\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    @if (data.length === 0) {\n      <span class=\"no-data\">{{ 'yuv.form.element.data.grid.noData' | translate }}</span>\n    }\n  </div>\n</fieldset>\n<mat-menu #menu=\"matMenu\">\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%;border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-s);overflow:hidden;position:relative}:host .yuv-data-grid__header{display:flex;justify-content:space-between;align-items:center;padding:var(--ymt-spacing-xs)}: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 .no-data{display:block;width:100%;background-color:var(--ymt-surface);text-align:center;padding:var(--ymt-spacing-s);font:var(--ymt-font-body);color:var(--ymt-text-color-subtle);font-style:italic}: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"] }]
+                    }, 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\" [matTooltip]=\"'yuv.form.element.data.grid.add-row.button.tooltip' | translate\">\n        <mat-icon>add</mat-icon>\n      </button>\n    }\n  </header>\n\n  @let displayedCol = displayedColumns();\n  @let displayedColActions = displayedColumnsWithActions();\n  @let data = dataSource();\n\n  <div class=\"yuv-data-grid__table\" [ngClass]=\"size()\">\n    <table mat-table [dataSource]=\"data\" 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)\" [matTooltip]=\"'yuv.form.element.data.grid.row.button.actions.tooltip' | translate\"  >\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              <ng-template *yuvRenderer=\"column.cell(element)\"></ng-template>\n            </td>\n          </ng-container>\n        }\n\n        <tr class=\"mat-row\" *matNoDataRow>\n          <td class=\"mat-cell no-data-cell\" [attr.colspan]=\"column.length\"></td>\n        </tr>\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    @if (data.length === 0) {\n      <span class=\"no-data\">{{ 'yuv.form.element.data.grid.noData' | translate }}</span>\n    }\n  </div>\n</fieldset>\n<mat-menu #menu=\"matMenu\">\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%;border:1px solid var(--ymt-outline-variant);border-radius:var(--ymt-corner-s);overflow:hidden;position:relative}:host .yuv-data-grid__header{display:flex;justify-content:space-between;align-items:center;padding:var(--ymt-spacing-xs)}: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 .no-data{display:block;width:100%;background-color:var(--ymt-surface);text-align:center;padding:var(--ymt-spacing-s);font:var(--ymt-font-body);color:var(--ymt-text-color-subtle);font-style:italic}: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"] }]
         }] });
 
 class DatetimeComponent extends AbstractMatFormField {
@@ -1259,7 +1259,7 @@ class OrganizationComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OrganizationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: true, 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  [required]=\"required\"\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  [distinctValues]=\"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    @if (item.value) {\n      <span class=\"chip\">{{ item.value.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\" [ngClass]=\"{ notFound: item.value.notFound }\" [matTooltip]=\"item.value.titleString\">\n        {{ item.value.title || '...' }}\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</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 mat-icon{color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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: true, 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  [required]=\"required\"\n  [busy]=\"busy()\"\n  [formControl]=\"acFormControl\"\n  #autocomplete\n  [placeholder]=\"placeholder\"\n  [disabled]=\"readonly()\"\n  [autocompleteValues]=\"autocompleteRes\"\n  [forceSelection]=\"true\"\n  [distinctValues]=\"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    @if (item.value) {\n      <span class=\"chip\">{{ item.value.title }}</span>\n    }\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    @if (item.value) {\n      <span class=\"chip\" [ngClass]=\"{ notFound: item.value.notFound }\" [matTooltip]=\"item.value.titleString\">\n        {{ item.value.title || '...' }}\n      </span>\n    }\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</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 mat-icon{color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OrganizationComponent, decorators: [{
             type: Component,
@@ -1411,7 +1411,7 @@ class OrganizationSetComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OrganizationSetComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: OrganizationSetComponent, isStandalone: true, selector: "yuv-organization-set", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, withMetadata: { classPropertyName: "withMetadata", publicName: "withMetadata", isSignal: true, isRequired: false, transformFunction: null }, autocompleteMinLength: { classPropertyName: "autocompleteMinLength", publicName: "autocompleteMinLength", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, types: { classPropertyName: "types", publicName: "types", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: OrganizationSetComponent }], 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.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\">\n      {{ item.value.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization-set.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule$1 }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: OrganizationSetComponent, isStandalone: true, selector: "yuv-organization-set", inputs: { situation: { classPropertyName: "situation", publicName: "situation", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, withMetadata: { classPropertyName: "withMetadata", publicName: "withMetadata", isSignal: true, isRequired: false, transformFunction: null }, autocompleteMinLength: { classPropertyName: "autocompleteMinLength", publicName: "autocompleteMinLength", isSignal: true, isRequired: false, transformFunction: null }, classifications: { classPropertyName: "classifications", publicName: "classifications", isSignal: true, isRequired: false, transformFunction: null }, types: { classPropertyName: "types", publicName: "types", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: OrganizationSetComponent }], 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.title }}</span>\n  </ng-template>\n\n  <!-- template for chip -->\n  <ng-template #chipTemplate let-item>\n    <span class=\"chip\">\n      {{ item.value.title || '...' }}\n    </span>\n  </ng-template>\n</yuv-autocomplete>\n\n<mat-icon class=\"ymt-icon--size-s\" [matTooltip]=\"'yuv.form.element.organization-set.classify.icon.title' | translate\">\n  {{ multiselect() ? 'group' : 'person' }}\n</mat-icon>\n", styles: [":host{display:flex;align-items:center}:host yuv-autocomplete{flex:1}:host mat-icon{color:var(--ymt-text-color-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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", "acBlur"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule$1 }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OrganizationSetComponent, decorators: [{
             type: Component,
@@ -1965,11 +1965,11 @@ class StringComponent extends AbstractMatFormField {
         super.onNgOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StringComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 mat-chip-grid{flex:1}: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 }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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()\" [readonly]=\"readonly\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect) {\n  <!-- single line input with multiselect-->\n  <mat-chip-grid #chipGrid [formControl]=\"fc\">\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      \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    [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 mat-chip-grid{flex:1}: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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: StringComponent, decorators: [{
             type: Component,
-            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 mat-chip-grid{flex:1}: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"] }]
+            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()\" [readonly]=\"readonly\" [formControl]=\"fc\" />\n} @else if ((!rows || rows <= 1) && multiselect) {\n  <!-- single line input with multiselect-->\n  <mat-chip-grid #chipGrid [formControl]=\"fc\">\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      \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    [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 mat-chip-grid{flex:1}: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"] }]
         }], propDecorators: { multiselect: [{
                 type: Input
             }], rows: [{