@yuuvis/client-framework 2.10.2 → 2.11.0

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

@@ -1,7 +1,7 @@
 import * as i1$2 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, signal, input, forwardRef, ChangeDetectionStrategy, Component, ChangeDetectorRef, ElementRef, computed, linkedSignal, effect, untracked, viewChild, DestroyRef, Input, output, NgModule } from '@angular/core';
+import { inject, signal, input, forwardRef, ChangeDetectionStrategy, Component, ChangeDetectorRef, ElementRef, computed, linkedSignal, effect, untracked, DestroyRef, viewChild, Input, output, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormBuilder, Validators, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl, FormGroup, FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -23,12 +23,12 @@ import { YmtButtonDirective, YmtIconButtonDirective } from '@yuuvis/material';
 import { map, timer, take, of, forkJoin } from 'rxjs';
 import { MatFormFieldModule, MatFormFieldControl } from '@angular/material/form-field';
 import { FormTranslateService, DialogComponent, AbstractMatFormField, injectNgControl } from '@yuuvis/client-framework/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatInputModule } from '@angular/material/input';
 import { TranslateService as TranslateService$1, TranslateModule as TranslateModule$1 } from '@ngx-translate/core';
 import * as i2$2 from '@yuuvis/client-framework/datepicker';
 import { DatepickerComponent, YuvDatepickerModule } from '@yuuvis/client-framework/datepicker';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i3$1 from '@yuuvis/client-framework/autocomplete';
@@ -383,11 +383,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     }, 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 FormUtils {
+    static getErrorState(control) {
+        return control.invalid && (control.dirty || control.touched);
+    }
+}
+
 class DatetimeComponent extends AbstractMatFormField {
-    #localeEffect;
     constructor() {
-        super();
+        super(...arguments);
         this.translate = inject(TranslateService$1);
+        this.#dRef = inject(DestroyRef);
         this.pickerCmp = viewChild.required(DatepickerComponent);
         this.ngControl = injectNgControl(this);
         this.fc = new FormControl(null);
@@ -414,12 +420,21 @@ class DatetimeComponent extends AbstractMatFormField {
         this.withTime = input(false);
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         this.propagateChange = (_) => { };
-        this.fc.valueChanges.subscribe((v) => this.onValueChange(v));
-        this.fc.statusChanges.subscribe((v) => {
-            this.errorState = v === 'INVALID';
-            this.ngControl?.control?.setErrors(this.errorState ? { datecontrol: true } : null);
-        });
     }
+    #dRef;
+    #localeEffect;
+    // constructor() {
+    //   super();
+    //   this.fc.valueChanges.pipe(takeUntilDestroyed()).subscribe((v) => this.onValueChange(v));
+    //   this.fc.statusChanges.pipe(takeUntilDestroyed()).subscribe((v) => {
+    //     this.errorState = FormUtils.getErrorState(this.fc);
+    //     if (this.ngControl?.control) {
+    //       this.ngControl.control.setErrors(this.fc.errors);
+    //     }
+    //     // this.errorState = v === 'INVALID';
+    //     // this.ngControl?.control?.setErrors(this.errorState ? { datecontrol: true } : null);
+    //   });
+    // }
     #setLabels() {
         this.labels = {
             calendarApply: this.translate.instant('yuv.form.element.datetime.calendar.select'),
@@ -441,7 +456,8 @@ class DatetimeComponent extends AbstractMatFormField {
             this.#propagate(value);
         }
         this.value = value || null;
-        this.fc.setValue(this.value, { emitEvent: false });
+        // this.fc.setValue(this.value, { emitEvent: false });
+        this.fc.patchValue(this.value, { emitEvent: false, onlySelf: true });
     }
     #propagate(value) {
         let propagateValue = value;
@@ -457,6 +473,12 @@ class DatetimeComponent extends AbstractMatFormField {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     registerOnTouched() { }
     setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.fc.disable();
+        }
+        else {
+            this.fc.enable();
+        }
         this.disabled = isDisabled;
     }
     onValueChange(e) {
@@ -466,14 +488,21 @@ class DatetimeComponent extends AbstractMatFormField {
         this.focusHandled.set(true);
         this.#setLabels();
         this.translate.onLangChange.subscribe((e) => this._locale.set(e.lang));
+        this.fc.valueChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => this.onValueChange(v));
+        this.fc.statusChanges.pipe(takeUntilDestroyed(this.#dRef)).subscribe((v) => {
+            this.errorState = FormUtils.getErrorState(this.fc);
+            if (this.ngControl?.control) {
+                this.ngControl.control.setErrors(this.fc.errors);
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatetimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatetimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.15", type: DatetimeComponent, isStandalone: true, selector: "yuv-datetime", inputs: { locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, onlyFutureDates: { classPropertyName: "onlyFutureDates", publicName: "onlyFutureDates", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MatFormFieldControl, useExisting: DatetimeComponent }], viewQueries: [{ propertyName: "pickerCmp", first: true, predicate: DatepickerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<yuv-datepicker\n  [calendar]=\"calendar()\"\n  [disabled]=\"readonly()\"\n  [withTime]=\"withTime()\"\n  [locale]=\"_locale()\"\n  [labels]=\"labels!\"\n  [onlyFutureDates]=\"onlyFutureDates()\"\n  [formControl]=\"fc\"\n></yuv-datepicker>\n", styles: [":host{display:flex;overflow-x:auto;--ymt-scrollbar-outer-size: 0px;--ymt-scrollbar-inner-size: 0px}:host yuv-datepicker{flex:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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: YuvDatepickerModule }, { kind: "component", type: i2$2.DatepickerComponent, selector: "yuv-datepicker", inputs: ["calendar", "readonly", "hour12", "locale", "labels", "withTime", "onlyFutureDates", "minDate", "maxDate", "disabled"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DatetimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'yuv-datetime', standalone: true, imports: [ReactiveFormsModule, YuvDatepickerModule, MatInputModule, MatDatepickerModule], providers: [{ provide: MatFormFieldControl, useExisting: DatetimeComponent }], template: "<yuv-datepicker\n  [calendar]=\"calendar()\"\n  [disabled]=\"readonly()\"\n  [withTime]=\"withTime()\"\n  [locale]=\"_locale()\"\n  [labels]=\"labels!\"\n  [onlyFutureDates]=\"onlyFutureDates()\"\n  [formControl]=\"fc\"\n></yuv-datepicker>\n", styles: [":host{display:flex;overflow-x:auto;--ymt-scrollbar-outer-size: 0px;--ymt-scrollbar-inner-size: 0px}:host yuv-datepicker{flex:1}\n"] }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class DatetimeRangeComponent extends AbstractMatFormField {
     constructor() {
@@ -641,12 +670,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }] } });
 
-class FormUtils {
-    static getErrorState(control) {
-        return control.invalid && (control.dirty || control.touched);
-    }
-}
-
 var _a;
 /**
  * Creates form input for number values.
@@ -1163,7 +1186,7 @@ class OrganizationComponent extends AbstractMatFormField {
         this.disabled = isDisabled;
     }
     #getPropagateValue() {
-        const value = this.innerValue.map((v) => (this.withMetadata() ? JSON.stringify({ id: v.id, title: v.title }) : v.id));
+        const value = this.innerValue.map((v) => (this.withMetadata() ? JSON.stringify({ id: v.id, title: v.title, type: v.type }) : v.id));
         return this.multiselect() ? value : value[0];
     }
     resolveFn(value) {
@@ -1965,11 +1988,13 @@ 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()\" [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 }] }); }
+    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" }, host: { properties: { "class.readonly": "readonly" } }, 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      [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 matInput class=\"input-textarea\" (blur)=\"onBlur()\" [rows]=\"rows\" [readonly]=\"readonly\" [formControl]=\"fc\"></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}:host.readonly .classify{pointer-events:all}\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()\" [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"] }]
+            args: [{ selector: 'yuv-string', standalone: true, imports: [CommonModule, MatChipsModule, MatIconModule, ReactiveFormsModule, FormsModule], providers: [{ provide: MatFormFieldControl, useExisting: StringComponent }], host: {
+                        '[class.readonly]': 'readonly'
+                    }, 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      [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 matInput class=\"input-textarea\" (blur)=\"onBlur()\" [rows]=\"rows\" [readonly]=\"readonly\" [formControl]=\"fc\"></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}:host.readonly .classify{pointer-events:all}\n"] }]
         }], propDecorators: { multiselect: [{
                 type: Input
             }], rows: [{