iss-ctrl 0.0.19 → 0.0.21

package/fesm2022/{iss-ctrl-iss-ctrl-Cy9p_PEj.mjs → iss-ctrl-iss-ctrl-BKu6a5HF.mjs}

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Pipe, input, signal, output, Component, CUSTOM_ELEMENTS_SCHEMA, InjectionToken, inject, Injectable, effect, HostListener, Directive, computed, ChangeDetectionStrategy, ElementRef, contentChild, isSignal, Injector, DestroyRef } from '@angular/core';
+import { Pipe, input, signal, output, inject, Injector, Component, CUSTOM_ELEMENTS_SCHEMA, InjectionToken, Injectable, effect, HostListener, Directive, computed, ChangeDetectionStrategy, ElementRef, contentChild, isSignal, DestroyRef } from '@angular/core';
 import * as i1$2 from '@angular/forms';
-import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormGroup, FormsModule, Validators, ControlContainer } from '@angular/forms';
+import { FormControl, NgControl, ReactiveFormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormGroup, FormsModule, Validators, ControlContainer } from '@angular/forms';
 import * as i1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i4 from '@angular/material/chips';
@@ -145,6 +145,29 @@ class ControlBase {
      */
     onChange = output();
     ctrl = new FormControl(null);
+    /**
+     * Error state for the inner `mat-form-field`, derived from the **host** control.
+     *
+     * Material reads `errorState` off the `NgControl` bound to its own `matInput` — here that is
+     * {@link ControlBase.ctrl}, which carries no validators and is therefore always valid. Every
+     * error a consumer cares about (the field config's validators plus the control's own
+     * {@link ControlBase.validate}) lives on the host control instead, so without this matcher an
+     * invalid `iss-ctrl-*` would keep rendering the valid outline. Bind it on the `matInput` as
+     * `[errorStateMatcher]="errorStateMatcher"`.
+     */
+    errorStateMatcher = {
+        isErrorState: (_control, form) => {
+            const host = this.hostControl();
+            if (!host) {
+                return false;
+            }
+            return !!host.invalid && (!!host.touched || this.touched() || !!form?.submitted);
+        }
+    };
+    #injector = inject(Injector);
+    // Resolved lazily: injecting NgControl in the constructor would close the DI cycle through
+    // NG_VALUE_ACCESSOR, which every control provides with `useExisting`.
+    #hostControl = undefined;
     registerOnChange(fn) {
         this.onPropagateValue = fn;
     }
@@ -170,6 +193,16 @@ class ControlBase {
     validate(control) {
         return this.ctrl.errors;
     }
+    /**
+     * The `NgControl` this component is bound to from the outside (`formControlName`,
+     * `[formControl]` or `[ngModel]`), or `null` when it is used without one.
+     */
+    hostControl() {
+        if (this.#hostControl === undefined) {
+            this.#hostControl = this.#injector.get(NgControl, null, { self: true });
+        }
+        return this.#hostControl;
+    }
     /**
      * Whether the control currently holds no value.
      *
@@ -210,13 +243,13 @@ class ControlBase {
         this.onChange.emit(emissionValue);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ControlBase, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ControlBase, isStandalone: true, selector: "ng-component", inputs: { formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, host: { properties: { "class.iss-ctrl-empty": "isEmpty()" } }, ngImport: i0, template: ``, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ControlBase, isStandalone: true, selector: "ng-component", inputs: { formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange" }, host: { properties: { "class.iss-ctrl-empty": "isEmpty()" }, classAttribute: "iss-ctrl" }, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ControlBase, decorators: [{
             type: Component,
             args: [{
                     template: ``,
-                    host: { "[class.iss-ctrl-empty]": "isEmpty()" }
+                    host: { "class": "iss-ctrl", "[class.iss-ctrl-empty]": "isEmpty()" }
                 }]
         }], propDecorators: { formControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControlName", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hints: [{ type: i0.Input, args: [{ isSignal: true, alias: "hints", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], onChange: [{ type: i0.Output, args: ["onChange"] }] } });
 
@@ -421,31 +454,32 @@ class ChipsControl extends ControlBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChipsControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChipsControl, isStandalone: true, selector: "iss-ctrl-chips", providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: ChipsControl, multi: true }
-        ], usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field floatLabel="auto" class="">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <input
-        matInput
-        [placeholder]="placeholder()"
-        [matChipInputFor]="chipGrid"
-        [disabled]="disabled()"
-        [readonly]="readonly()"
-        (matChipInputTokenEnd)="add($event)"
-      />
-    </mat-form-field>
-    <mat-chip-grid #chipGrid>
-      @for (keyword of keywords(); track keyword) {
-        <mat-chip-row (removed)="remove(keyword)">
-          {{ keyword }}
-          <button matChipRemove [disabled]="disabled() || readonly()">
-            <ds-icon icon="trash" class="fc-red"></ds-icon>
-          </button>
-        </mat-chip-row>
-      }
-    </mat-chip-grid>
+        ], usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        [placeholder]="placeholder()"
+        [matChipInputFor]="chipGrid"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        (matChipInputTokenEnd)="add($event)"
+      />
+    </mat-form-field>
+    <mat-chip-grid #chipGrid>
+      @for (keyword of keywords(); track keyword) {
+        <mat-chip-row (removed)="remove(keyword)">
+          {{ keyword }}
+          <button matChipRemove [disabled]="disabled() || readonly()">
+            <ds-icon icon="trash" class="fc-red"></ds-icon>
+          </button>
+        </mat-chip-row>
+      }
+    </mat-chip-grid>
   `, isInline: true, dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChipsControl, decorators: [{
@@ -466,31 +500,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: ChipsControl, multi: true }
                     ],
-                    template: `
-    <mat-form-field floatLabel="auto" class="">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <input
-        matInput
-        [placeholder]="placeholder()"
-        [matChipInputFor]="chipGrid"
-        [disabled]="disabled()"
-        [readonly]="readonly()"
-        (matChipInputTokenEnd)="add($event)"
-      />
-    </mat-form-field>
-    <mat-chip-grid #chipGrid>
-      @for (keyword of keywords(); track keyword) {
-        <mat-chip-row (removed)="remove(keyword)">
-          {{ keyword }}
-          <button matChipRemove [disabled]="disabled() || readonly()">
-            <ds-icon icon="trash" class="fc-red"></ds-icon>
-          </button>
-        </mat-chip-row>
-      }
-    </mat-chip-grid>
+                    template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        [placeholder]="placeholder()"
+        [matChipInputFor]="chipGrid"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        (matChipInputTokenEnd)="add($event)"
+      />
+    </mat-form-field>
+    <mat-chip-grid #chipGrid>
+      @for (keyword of keywords(); track keyword) {
+        <mat-chip-row (removed)="remove(keyword)">
+          {{ keyword }}
+          <button matChipRemove [disabled]="disabled() || readonly()">
+            <ds-icon icon="trash" class="fc-red"></ds-icon>
+          </button>
+        </mat-chip-row>
+      }
+    </mat-chip-grid>
   `
                 }]
         }] });
@@ -956,32 +991,33 @@ class DatePickerControl extends ControlBase {
             provideIssDateAdapter(),
             { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerControl, multi: true },
             { provide: NG_VALIDATORS, useExisting: DatePickerControl, multi: true },
-        ], usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field floatLabel="auto" class="">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <input
-        class="cursor-pointer"
-        matInput
-        readonly
-        [matDatepicker]="picker"
-        (click)="openPicker(picker)"
-        [formControl]="ctrl"
-        [readonly]="readonly()"
-        [min]="minDate()"
-        [max]="maxDate()"
-        [matDatepickerFilter]="calendarDaysFilter"
-        (dateChange)="emit($event)"
-      />
-      @if (ctrl.getRawValue()) {
-        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
-      }
-      <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
-      <mat-datepicker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-datepicker>
-
-    </mat-form-field>
+        ], usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input
+        class="cursor-pointer"
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        readonly
+        [matDatepicker]="picker"
+        (click)="openPicker(picker)"
+        [formControl]="ctrl"
+        [readonly]="readonly()"
+        [min]="minDate()"
+        [max]="maxDate()"
+        [matDatepickerFilter]="calendarDaysFilter"
+        (dateChange)="emit($event)"
+      />
+      @if (ctrl.getRawValue()) {
+        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
+      }
+      <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
+      <mat-datepicker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-datepicker>
+
+    </mat-form-field>
   `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerControl, decorators: [{
@@ -991,32 +1027,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         provideIssDateAdapter(),
                         { provide: NG_VALUE_ACCESSOR, useExisting: DatePickerControl, multi: true },
                         { provide: NG_VALIDATORS, useExisting: DatePickerControl, multi: true },
-                    ], template: `
-    <mat-form-field floatLabel="auto" class="">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <input
-        class="cursor-pointer"
-        matInput
-        readonly
-        [matDatepicker]="picker"
-        (click)="openPicker(picker)"
-        [formControl]="ctrl"
-        [readonly]="readonly()"
-        [min]="minDate()"
-        [max]="maxDate()"
-        [matDatepickerFilter]="calendarDaysFilter"
-        (dateChange)="emit($event)"
-      />
-      @if (ctrl.getRawValue()) {
-        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
-      }
-      <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
-      <mat-datepicker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-datepicker>
-
-    </mat-form-field>
+                    ], template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input
+        class="cursor-pointer"
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        readonly
+        [matDatepicker]="picker"
+        (click)="openPicker(picker)"
+        [formControl]="ctrl"
+        [readonly]="readonly()"
+        [min]="minDate()"
+        [max]="maxDate()"
+        [matDatepickerFilter]="calendarDaysFilter"
+        (dateChange)="emit($event)"
+      />
+      @if (ctrl.getRawValue()) {
+        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
+      }
+      <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
+      <mat-datepicker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-datepicker>
+
+    </mat-form-field>
   ` }]
         }], propDecorators: { disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], hijriCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hijriCalendar", required: false }] }], emitHijri: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitHijri", required: false }] }] } });
 
@@ -1208,42 +1245,44 @@ class DateRangePickerControl extends ControlBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DateRangePickerControl, isStandalone: true, selector: "iss-ctrl-date-range-picker", inputs: { disabledDays: { classPropertyName: "disabledDays", publicName: "disabledDays", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, hijriCalendar: { classPropertyName: "hijriCalendar", publicName: "hijriCalendar", isSignal: true, isRequired: false, transformFunction: null }, emitHijri: { classPropertyName: "emitHijri", publicName: "emitHijri", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDateRangeObjectChange: "onDateRangeObjectChange" }, providers: [
             provideIssDateAdapter(),
             { provide: NG_VALUE_ACCESSOR, useExisting: DateRangePickerControl, multi: true },
-        ], usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field floatLabel="auto" class="">
-
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <mat-date-range-input
-        [formGroup]="range"
-        [rangePicker]="picker"
-        [min]="minDate()"
-        [max]="maxDate()"
-        [dateFilter]="calendarDaysFilter"
-      >
-        <input
-          matStartDate
-          formControlName="start"
-          [readonly]="readonly()"
-          placeholder="dd/mm/yyyy"
-          (click)="openPicker(picker)"
-        />
-        <input
-          matEndDate
-          formControlName="end"
-          [readonly]="readonly()"
-          placeholder="dd/mm/yyyy"
-          (click)="openPicker(picker)"
-        />
-      </mat-date-range-input>
-      @if (range.getRawValue().start || range.getRawValue().end) {
-        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
-      }
-      <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
-      <mat-date-range-picker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-date-range-picker>
-
-    </mat-form-field>
+        ], usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field floatLabel="auto" class="">
+
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <mat-date-range-input
+        [formGroup]="range"
+        [rangePicker]="picker"
+        [min]="minDate()"
+        [max]="maxDate()"
+        [dateFilter]="calendarDaysFilter"
+      >
+        <input
+          matStartDate
+          [errorStateMatcher]="errorStateMatcher"
+          formControlName="start"
+          [readonly]="readonly()"
+          placeholder="dd/mm/yyyy"
+          (click)="openPicker(picker)"
+        />
+        <input
+          matEndDate
+          [errorStateMatcher]="errorStateMatcher"
+          formControlName="end"
+          [readonly]="readonly()"
+          placeholder="dd/mm/yyyy"
+          (click)="openPicker(picker)"
+        />
+      </mat-date-range-input>
+      @if (range.getRawValue().start || range.getRawValue().end) {
+        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
+      }
+      <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
+      <mat-date-range-picker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-date-range-picker>
+
+    </mat-form-field>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerControl, decorators: [{
@@ -1260,42 +1299,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         provideIssDateAdapter(),
                         { provide: NG_VALUE_ACCESSOR, useExisting: DateRangePickerControl, multi: true },
                     ],
-                    template: `
-    <mat-form-field floatLabel="auto" class="">
-
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <mat-date-range-input
-        [formGroup]="range"
-        [rangePicker]="picker"
-        [min]="minDate()"
-        [max]="maxDate()"
-        [dateFilter]="calendarDaysFilter"
-      >
-        <input
-          matStartDate
-          formControlName="start"
-          [readonly]="readonly()"
-          placeholder="dd/mm/yyyy"
-          (click)="openPicker(picker)"
-        />
-        <input
-          matEndDate
-          formControlName="end"
-          [readonly]="readonly()"
-          placeholder="dd/mm/yyyy"
-          (click)="openPicker(picker)"
-        />
-      </mat-date-range-input>
-      @if (range.getRawValue().start || range.getRawValue().end) {
-        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
-      }
-      <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
-      <mat-date-range-picker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-date-range-picker>
-
-    </mat-form-field>
+                    template: `
+    <mat-form-field floatLabel="auto" class="">
+
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <mat-date-range-input
+        [formGroup]="range"
+        [rangePicker]="picker"
+        [min]="minDate()"
+        [max]="maxDate()"
+        [dateFilter]="calendarDaysFilter"
+      >
+        <input
+          matStartDate
+          [errorStateMatcher]="errorStateMatcher"
+          formControlName="start"
+          [readonly]="readonly()"
+          placeholder="dd/mm/yyyy"
+          (click)="openPicker(picker)"
+        />
+        <input
+          matEndDate
+          [errorStateMatcher]="errorStateMatcher"
+          formControlName="end"
+          [readonly]="readonly()"
+          placeholder="dd/mm/yyyy"
+          (click)="openPicker(picker)"
+        />
+      </mat-date-range-input>
+      @if (range.getRawValue().start || range.getRawValue().end) {
+        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
+      }
+      <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
+      <mat-date-range-picker #picker [panelClass]="isHijri() ? 'iss-hijri-calendar' : ''"></mat-date-range-picker>
+
+    </mat-form-field>
   `
                 }]
         }], propDecorators: { disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], hijriCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hijriCalendar", required: false }] }], emitHijri: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitHijri", required: false }] }], onDateRangeObjectChange: [{ type: i0.Output, args: ["onDateRangeObjectChange"] }] } });
@@ -1381,28 +1422,29 @@ class TimePickerControl extends ControlBase {
             provideNativeDateAdapter(),
             { provide: NG_VALUE_ACCESSOR, useExisting: TimePickerControl, multi: true },
             { provide: NG_VALIDATORS, useExisting: TimePickerControl, multi: true },
-        ], usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field floatLabel="auto" class="">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <input
-        matInput
-        [formControl]="ctrl"
-        [matTimepicker]="picker"
-        [matTimepickerMin]="minTime()"
-        [matTimepickerMax]="maxTime()"
-        [readonly]="readonly()"
-        readonly
-      />
-      @if (ctrl.getRawValue()) {
-        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
-      }
-      <mat-timepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"/>
-      <mat-timepicker (selected)="emit($event)" [interval]="interval()" #picker/>
-
-    </mat-form-field>
+        ], usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        [formControl]="ctrl"
+        [matTimepicker]="picker"
+        [matTimepickerMin]="minTime()"
+        [matTimepickerMax]="maxTime()"
+        [readonly]="readonly()"
+        readonly
+      />
+      @if (ctrl.getRawValue()) {
+        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
+      }
+      <mat-timepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"/>
+      <mat-timepicker (selected)="emit($event)" [interval]="interval()" #picker/>
+
+    </mat-form-field>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTimepickerModule }, { kind: "component", type: i2$1.MatTimepicker, selector: "mat-timepicker", inputs: ["interval", "options", "disableRipple", "aria-label", "aria-labelledby", "panelClass"], outputs: ["selected", "opened", "closed"], exportAs: ["matTimepicker"] }, { kind: "directive", type: i2$1.MatTimepickerInput, selector: "input[matTimepicker]", inputs: ["value", "matTimepicker", "matTimepickerMin", "matTimepickerMax", "matTimepickerOpenOnClick", "disabled"], outputs: ["valueChange"], exportAs: ["matTimepickerInput"] }, { kind: "component", type: i2$1.MatTimepickerToggle, selector: "mat-timepicker-toggle", inputs: ["for", "aria-label", "aria-labelledby", "disabled", "tabIndex", "disableRipple"], exportAs: ["matTimepickerToggle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimePickerControl, decorators: [{
@@ -1418,28 +1460,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         { provide: NG_VALUE_ACCESSOR, useExisting: TimePickerControl, multi: true },
                         { provide: NG_VALIDATORS, useExisting: TimePickerControl, multi: true },
                     ],
-                    template: `
-    <mat-form-field floatLabel="auto" class="">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <input
-        matInput
-        [formControl]="ctrl"
-        [matTimepicker]="picker"
-        [matTimepickerMin]="minTime()"
-        [matTimepickerMax]="maxTime()"
-        [readonly]="readonly()"
-        readonly
-      />
-      @if (ctrl.getRawValue()) {
-        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
-      }
-      <mat-timepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"/>
-      <mat-timepicker (selected)="emit($event)" [interval]="interval()" #picker/>
-
-    </mat-form-field>
+                    template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        [formControl]="ctrl"
+        [matTimepicker]="picker"
+        [matTimepickerMin]="minTime()"
+        [matTimepickerMax]="maxTime()"
+        [readonly]="readonly()"
+        readonly
+      />
+      @if (ctrl.getRawValue()) {
+        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
+      }
+      <mat-timepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"/>
+      <mat-timepicker (selected)="emit($event)" [interval]="interval()" #picker/>
+
+    </mat-form-field>
   `,
                 }]
         }], propDecorators: { interval: [{ type: i0.Input, args: [{ isSignal: true, alias: "interval", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }] } });
@@ -1648,11 +1691,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], hijriCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hijriCalendar", required: false }] }], emitHijri: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitHijri", required: false }] }] } });
 
-class HintsComponent {
+class Hints {
     hints = input([], ...(ngDevMode ? [{ debugName: "hints" }] : /* istanbul ignore next */ []));
     touched = input(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HintsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: HintsComponent, isStandalone: true, selector: "iss-ctrl-hints", inputs: { hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Hints, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Hints, isStandalone: true, selector: "iss-ctrl-hints", inputs: { hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (hints().length) {
       <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
         @for (hint of hints(); track $index) {
@@ -1678,7 +1721,7 @@ class HintsComponent {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HintsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Hints, decorators: [{
             type: Component,
             args: [{
                     selector: "iss-ctrl-hints",
@@ -1939,14 +1982,14 @@ class FilePickerControl extends ControlBase {
 
     <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
     <!--<iss-viewer-attachment (deleteOut)="onDelete($event)" [field]="filesValue()" [uploading]="uploading()"/>-->
-  `, isInline: true, styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader --input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: Droppable, selector: "[droppable]", outputs: ["onDrop"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }] });
+  `, isInline: true, styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader --input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: Droppable, selector: "[droppable]", outputs: ["onDrop"] }, { kind: "component", type: Hints, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilePickerControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-file-picker", schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
                         ReactiveFormsModule,
                         Droppable,
-                        HintsComponent,
+                        Hints,
                     ], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: FilePickerControl, multi: true }
                     ], template: `
@@ -2052,46 +2095,47 @@ class InputControl extends ControlBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: InputControl, isStandalone: true, selector: "iss-ctrl-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, prefixText: { classPropertyName: "prefixText", publicName: "prefixText", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixText: { classPropertyName: "suffixText", publicName: "suffixText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onPrefixClick: "onPrefixClick", onSuffixClick: "onSuffixClick" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: InputControl, multi: true },
             { provide: NG_VALIDATORS, useExisting: InputControl, multi: true }
-        ], usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field floatLabel="auto" class="">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <ng-content select="[issPrefix]"></ng-content>
-      <div (click)="emitPrefixClick()" class="cursor-pointer">
-        @if (prefixText()) {
-          <span matTextPrefix>{{ prefixText() }}</span>
-        }
-        @if (prefixIcon()) {
-          <ds-icon matPrefix icon="{{prefixIcon()}}"></ds-icon>
-        }
-      </div>
-      <input
-        matInput
-        (blur)="markAsTouched()"
-        (input)="emitValue()"
-        [formControl]="ctrl"
-        [attr.maxlength]="maxLength()"
-        [attr.minlength]="minLength()"
-        [attr.max]="max()"
-        [attr.min]="min()"
-        [placeholder]="placeholder()"
-        [readonly]="readonly()"
-        [type]="type()"
-      />
-      <ng-content select="[issSuffix]"></ng-content>
-      <div (click)="emitSuffixClick()" class="cursor-pointer">
-        @if (suffixText()) {
-          <span matTextSuffix>{{ suffixText() }}</span>
-        }
-        @if (suffixIcon()) {
-          <ds-icon matSuffix icon="{{suffixIcon()}}"></ds-icon>
-        }
-      </div>
-      <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
-    </mat-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatInputModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <ng-content select="[issPrefix]"></ng-content>
+      <div (click)="emitPrefixClick()" class="cursor-pointer">
+        @if (prefixText()) {
+          <span matTextPrefix>{{ prefixText() }}</span>
+        }
+        @if (prefixIcon()) {
+          <ds-icon matPrefix icon="{{prefixIcon()}}"></ds-icon>
+        }
+      </div>
+      <input
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        (blur)="markAsTouched()"
+        (input)="emitValue()"
+        [formControl]="ctrl"
+        [attr.maxlength]="maxLength()"
+        [attr.minlength]="minLength()"
+        [attr.max]="max()"
+        [attr.min]="min()"
+        [placeholder]="placeholder()"
+        [readonly]="readonly()"
+        [type]="type()"
+      />
+      <ng-content select="[issSuffix]"></ng-content>
+      <div (click)="emitSuffixClick()" class="cursor-pointer">
+        @if (suffixText()) {
+          <span matTextSuffix>{{ suffixText() }}</span>
+        }
+        @if (suffixIcon()) {
+          <ds-icon matSuffix icon="{{suffixIcon()}}"></ds-icon>
+        }
+      </div>
+      <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
+    </mat-form-field>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: Hints, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatInputModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputControl, decorators: [{
             type: Component,
@@ -2102,7 +2146,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         MatFormFieldModule,
-                        HintsComponent,
+                        Hints,
                         MatInput,
                         MatInputModule,
                     ],
@@ -2110,45 +2154,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         { provide: NG_VALUE_ACCESSOR, useExisting: InputControl, multi: true },
                         { provide: NG_VALIDATORS, useExisting: InputControl, multi: true }
                     ],
-                    template: `
-    <mat-form-field floatLabel="auto" class="">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <ng-content select="[issPrefix]"></ng-content>
-      <div (click)="emitPrefixClick()" class="cursor-pointer">
-        @if (prefixText()) {
-          <span matTextPrefix>{{ prefixText() }}</span>
-        }
-        @if (prefixIcon()) {
-          <ds-icon matPrefix icon="{{prefixIcon()}}"></ds-icon>
-        }
-      </div>
-      <input
-        matInput
-        (blur)="markAsTouched()"
-        (input)="emitValue()"
-        [formControl]="ctrl"
-        [attr.maxlength]="maxLength()"
-        [attr.minlength]="minLength()"
-        [attr.max]="max()"
-        [attr.min]="min()"
-        [placeholder]="placeholder()"
-        [readonly]="readonly()"
-        [type]="type()"
-      />
-      <ng-content select="[issSuffix]"></ng-content>
-      <div (click)="emitSuffixClick()" class="cursor-pointer">
-        @if (suffixText()) {
-          <span matTextSuffix>{{ suffixText() }}</span>
-        }
-        @if (suffixIcon()) {
-          <ds-icon matSuffix icon="{{suffixIcon()}}"></ds-icon>
-        }
-      </div>
-      <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
-    </mat-form-field>
+                    template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <ng-content select="[issPrefix]"></ng-content>
+      <div (click)="emitPrefixClick()" class="cursor-pointer">
+        @if (prefixText()) {
+          <span matTextPrefix>{{ prefixText() }}</span>
+        }
+        @if (prefixIcon()) {
+          <ds-icon matPrefix icon="{{prefixIcon()}}"></ds-icon>
+        }
+      </div>
+      <input
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        (blur)="markAsTouched()"
+        (input)="emitValue()"
+        [formControl]="ctrl"
+        [attr.maxlength]="maxLength()"
+        [attr.minlength]="minLength()"
+        [attr.max]="max()"
+        [attr.min]="min()"
+        [placeholder]="placeholder()"
+        [readonly]="readonly()"
+        [type]="type()"
+      />
+      <ng-content select="[issSuffix]"></ng-content>
+      <div (click)="emitSuffixClick()" class="cursor-pointer">
+        @if (suffixText()) {
+          <span matTextSuffix>{{ suffixText() }}</span>
+        }
+        @if (suffixIcon()) {
+          <ds-icon matSuffix icon="{{suffixIcon()}}"></ds-icon>
+        }
+      </div>
+      <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
+    </mat-form-field>
   `
                 }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], suffixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixText", required: false }] }], onPrefixClick: [{ type: i0.Output, args: ["onPrefixClick"] }], onSuffixClick: [{ type: i0.Output, args: ["onSuffixClick"] }] } });
@@ -4446,67 +4491,68 @@ class MobileControl extends ControlBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MobileControl, isStandalone: true, selector: "iss-ctrl-mobile", inputs: { preferredCountries: { classPropertyName: "preferredCountries", publicName: "preferredCountries", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: MobileControl, multi: true },
             { provide: NG_VALIDATORS, useExisting: MobileControl, multi: true }
-        ], usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field floatLabel="auto" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <div class="d-inline-flex align-items-center gap-1 country-flag" matPrefix (click)="toggleCountryCodeMenu()">
-        <img
-          ngSrc="./flags/{{selectedCountry().code.toLowerCase()}}.svg"
-          width="20"
-          height="20"
-          [alt]="selectedCountry().code.toLowerCase()"
-          class="country-flag--image"
-          [priority]="true"
-        >
-        <ds-icon icon="arrow-down" class="fs-12 fc-dark-gray"></ds-icon>
-      </div>
-      <input
-        matInput
-        type="tel"
-        autocomplete="off"
-        (blur)="markAsTouched()"
-        (keydown)="onInput($event)"
-        (input)="emit()"
-        [formControl]="ctrl"
-        [readonly]="readonly()"
-        [placeholder]="selectedCountry().placeholder"
-      />
-    </mat-form-field>
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayHasBackdrop]="true"
-      (backdropClick)="closeCountryCodeMenu()"
-      [cdkConnectedOverlayGrowAfterOpen]="true"
-      [cdkConnectedOverlayOrigin]="trigger"
-      [cdkConnectedOverlayOpen]="isOpen()"
-    >
-      <div class="country-dropdown bc-white box-shadow p-2">
-        <div class="search-container">
-          <mat-form-field>
-            <input matInput id="country-search-box" [formControl]="searchInput" (click)="$event.stopPropagation()"/>
-          </mat-form-field>
-        </div>
-        <ul class="country-list">
-          @for (country of filteredCountries(); track $index) {
-            <li
-              #countryEl
-              [ngClass]="country.order > 1 ? 'preferredCounty'  : ''"
-              class="d-flex align-items-center gap-2 cursor-pointer p-2"
-              (click)="onSelectCountry(country)"
-            >
-              @defer (on viewport(countryEl)) {
-                <img ngSrc="./flags/{{country.code.toLowerCase()}}.svg" width="20" height="20" alt="" class="country-flag--image">
-              }
-              <span class="fs-12 fc-dark-gray">(+{{ country.dailCode }})</span>
-              <span class="fs-12 fc-black">{{ country.name }}</span>
-            </li>
-          }
-        </ul>
-      </div>
-    </ng-template>
+        ], usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field floatLabel="auto" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <div class="d-inline-flex align-items-center gap-1 country-flag" matPrefix (click)="toggleCountryCodeMenu()">
+        <img
+          ngSrc="./flags/{{selectedCountry().code.toLowerCase()}}.svg"
+          width="20"
+          height="20"
+          [alt]="selectedCountry().code.toLowerCase()"
+          class="country-flag--image"
+          [priority]="true"
+        >
+        <ds-icon icon="arrow-down" class="fs-12 fc-dark-gray"></ds-icon>
+      </div>
+      <input
+        matInput
+        type="tel"
+        autocomplete="off"
+        (blur)="markAsTouched()"
+        (keydown)="onInput($event)"
+        (input)="emit()"
+        [formControl]="ctrl"
+        [readonly]="readonly()"
+        [placeholder]="selectedCountry().placeholder"
+        [errorStateMatcher]="errorStateMatcher"
+      />
+    </mat-form-field>
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayHasBackdrop]="true"
+      (backdropClick)="closeCountryCodeMenu()"
+      [cdkConnectedOverlayGrowAfterOpen]="true"
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="isOpen()"
+    >
+      <div class="country-dropdown bc-white box-shadow p-2">
+        <div class="search-container">
+          <mat-form-field>
+            <input matInput id="country-search-box" [formControl]="searchInput" (click)="$event.stopPropagation()"/>
+          </mat-form-field>
+        </div>
+        <ul class="country-list">
+          @for (country of filteredCountries(); track $index) {
+            <li
+              #countryEl
+              [ngClass]="country.order > 1 ? 'preferredCounty'  : ''"
+              class="d-flex align-items-center gap-2 cursor-pointer p-2"
+              (click)="onSelectCountry(country)"
+            >
+              @defer (on viewport(countryEl)) {
+                <img ngSrc="./flags/{{country.code.toLowerCase()}}.svg" width="20" height="20" alt="" class="country-flag--image">
+              }
+              <span class="fs-12 fc-dark-gray">(+{{ country.dailCode }})</span>
+              <span class="fs-12 fc-black">{{ country.name }}</span>
+            </li>
+          }
+        </ul>
+      </div>
+    </ng-template>
   `, isInline: true, styles: [".country-flag{border-inline-end:var(--input-border);padding-inline-end:.5rem;margin-inline-end:.5rem;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }], deferBlockDependencies: [() => [NgOptimizedImage]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MobileControl, decorators: [{
@@ -4524,67 +4570,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: MobileControl, multi: true },
                         { provide: NG_VALIDATORS, useExisting: MobileControl, multi: true }
-                    ], template: `
-    <mat-form-field floatLabel="auto" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <div class="d-inline-flex align-items-center gap-1 country-flag" matPrefix (click)="toggleCountryCodeMenu()">
-        <img
-          ngSrc="./flags/{{selectedCountry().code.toLowerCase()}}.svg"
-          width="20"
-          height="20"
-          [alt]="selectedCountry().code.toLowerCase()"
-          class="country-flag--image"
-          [priority]="true"
-        >
-        <ds-icon icon="arrow-down" class="fs-12 fc-dark-gray"></ds-icon>
-      </div>
-      <input
-        matInput
-        type="tel"
-        autocomplete="off"
-        (blur)="markAsTouched()"
-        (keydown)="onInput($event)"
-        (input)="emit()"
-        [formControl]="ctrl"
-        [readonly]="readonly()"
-        [placeholder]="selectedCountry().placeholder"
-      />
-    </mat-form-field>
-    <ng-template
-      cdkConnectedOverlay
-      [cdkConnectedOverlayHasBackdrop]="true"
-      (backdropClick)="closeCountryCodeMenu()"
-      [cdkConnectedOverlayGrowAfterOpen]="true"
-      [cdkConnectedOverlayOrigin]="trigger"
-      [cdkConnectedOverlayOpen]="isOpen()"
-    >
-      <div class="country-dropdown bc-white box-shadow p-2">
-        <div class="search-container">
-          <mat-form-field>
-            <input matInput id="country-search-box" [formControl]="searchInput" (click)="$event.stopPropagation()"/>
-          </mat-form-field>
-        </div>
-        <ul class="country-list">
-          @for (country of filteredCountries(); track $index) {
-            <li
-              #countryEl
-              [ngClass]="country.order > 1 ? 'preferredCounty'  : ''"
-              class="d-flex align-items-center gap-2 cursor-pointer p-2"
-              (click)="onSelectCountry(country)"
-            >
-              @defer (on viewport(countryEl)) {
-                <img ngSrc="./flags/{{country.code.toLowerCase()}}.svg" width="20" height="20" alt="" class="country-flag--image">
-              }
-              <span class="fs-12 fc-dark-gray">(+{{ country.dailCode }})</span>
-              <span class="fs-12 fc-black">{{ country.name }}</span>
-            </li>
-          }
-        </ul>
-      </div>
-    </ng-template>
+                    ], template: `
+    <mat-form-field floatLabel="auto" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <div class="d-inline-flex align-items-center gap-1 country-flag" matPrefix (click)="toggleCountryCodeMenu()">
+        <img
+          ngSrc="./flags/{{selectedCountry().code.toLowerCase()}}.svg"
+          width="20"
+          height="20"
+          [alt]="selectedCountry().code.toLowerCase()"
+          class="country-flag--image"
+          [priority]="true"
+        >
+        <ds-icon icon="arrow-down" class="fs-12 fc-dark-gray"></ds-icon>
+      </div>
+      <input
+        matInput
+        type="tel"
+        autocomplete="off"
+        (blur)="markAsTouched()"
+        (keydown)="onInput($event)"
+        (input)="emit()"
+        [formControl]="ctrl"
+        [readonly]="readonly()"
+        [placeholder]="selectedCountry().placeholder"
+        [errorStateMatcher]="errorStateMatcher"
+      />
+    </mat-form-field>
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayHasBackdrop]="true"
+      (backdropClick)="closeCountryCodeMenu()"
+      [cdkConnectedOverlayGrowAfterOpen]="true"
+      [cdkConnectedOverlayOrigin]="trigger"
+      [cdkConnectedOverlayOpen]="isOpen()"
+    >
+      <div class="country-dropdown bc-white box-shadow p-2">
+        <div class="search-container">
+          <mat-form-field>
+            <input matInput id="country-search-box" [formControl]="searchInput" (click)="$event.stopPropagation()"/>
+          </mat-form-field>
+        </div>
+        <ul class="country-list">
+          @for (country of filteredCountries(); track $index) {
+            <li
+              #countryEl
+              [ngClass]="country.order > 1 ? 'preferredCounty'  : ''"
+              class="d-flex align-items-center gap-2 cursor-pointer p-2"
+              (click)="onSelectCountry(country)"
+            >
+              @defer (on viewport(countryEl)) {
+                <img ngSrc="./flags/{{country.code.toLowerCase()}}.svg" width="20" height="20" alt="" class="country-flag--image">
+              }
+              <span class="fs-12 fc-dark-gray">(+{{ country.dailCode }})</span>
+              <span class="fs-12 fc-black">{{ country.name }}</span>
+            </li>
+          }
+        </ul>
+      </div>
+    </ng-template>
   `, styles: [".country-flag{border-inline-end:var(--input-border);padding-inline-end:.5rem;margin-inline-end:.5rem;cursor:pointer}\n"] }]
         }], propDecorators: { preferredCountries: [{ type: i0.Input, args: [{ isSignal: true, alias: "preferredCountries", required: false }] }] } });
 
@@ -5301,6 +5348,11 @@ class SelectControl extends ControlBase {
         this.#queryEffectRef.destroy();
         this.#disabledEffectRef.destroy();
     }
+    // the selection is the value here; `ctrl` doubles as the autocomplete's search box, so while
+    // the user is typing a query it holds that string rather than the chosen options.
+    isEmpty() {
+        return this.selectedOptions().size === 0;
+    }
     #addToSelectedOptionsMap(option) {
         if (option) {
             const selectedOption = option;
@@ -5344,67 +5396,67 @@ class SelectControl extends ControlBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SelectControl, isStandalone: true, selector: "iss-ctrl-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onQueryChange: "onQueryChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: SelectControl, multi: true },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true, isSignal: true }, { propertyName: "cardViewerTemplate", first: true, predicate: ["cardViewerTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field floatLabel="auto" class="">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <input [formControl]="ctrl" [matAutocomplete]="auto" [matChipInputFor]="chipGrid" [placeholder]="placeholder()" [readonly]="readonly()" (blur)="markAsTouched()" class="m-0" matInput/>
-      @if (!disabled()) {
-        @if (selectedOptions().size) {
-          <span matSuffix class="sfi sfi-close fs-18 fc-black cursor-pointer" (click)="clearSelection()"></span>
-        } @else {
-          <span matSuffix class="sfi sfi-arrow-down fs-18 fc-black cursor-pointer"></span>
-        }
-      }
-
-      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="captureValue($event)" [displayWith]="displayFn" autoActiveFirstOption hideSingleSelectionIndicator>
-        @if (loading()) {
-          <mat-option disabled="true">
-            <ds-icon icon="spinner" class="spin fc-coral fs-20"></ds-icon>
-          </mat-option>
-        } @else {
-          @if (filteredOptions().length) {
-            @if (multiple()) {
-              <mat-option (click)="toggleAllSelection()" value="_SELECT_ALL_OPTIONS_">
-                {{ allSelected() ? "deselect all" : "Select All" }}
-              </mat-option>
-            }
-            <cdk-virtual-scroll-viewport itemSize="5" [ngStyle]="{'height': height()}">
-              <mat-option *cdkVirtualFor="let option of filteredOptions()" [value]="option" [ngClass]="{'mdc-list-item__selected': option | selectStatus: selectedOptions()}">
-                @if (optionTemplate()) {
-                  <ng-container *ngTemplateOutlet="optionTemplate(); context: { $implicit: option}"/>
-                } @else {
-                  {{ option.label }}
-                }
-              </mat-option>
-            </cdk-virtual-scroll-viewport>
-          } @else {
-            <mat-option disabled="true">No Result Found</mat-option>
-          }
-        }
-      </mat-autocomplete>
-    </mat-form-field>
-
-    <mat-chip-grid #chipGrid>
-      @if (multiple()) {
-        @for (chip of selectedOptions(); track chip[0]) {
-          <mat-chip-row (removed)="removeFromSelectedOptionsMap(chip[1])">
-            @if (cardViewerTemplate()) {
-              <ng-container
-                *ngTemplateOutlet="cardViewerTemplate(); context: { $implicit:  chip[1]}"
-              />
-            } @else {
-              {{ chip[1].label }}
-            }
-            <button matChipRemove [disabled]="readonly()" [attr.aria-label]="'remove ' + chip[1].label">
-              <ds-icon icon="trash" class="fc-red"></ds-icon>
-            </button>
-          </mat-chip-row>
-        }
-      }
-    </mat-chip-grid>
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true, isSignal: true }, { propertyName: "cardViewerTemplate", first: true, predicate: ["cardViewerTemplate"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input [formControl]="ctrl" [matAutocomplete]="auto" [matChipInputFor]="chipGrid" [placeholder]="placeholder()" [readonly]="readonly()" [errorStateMatcher]="errorStateMatcher" (blur)="markAsTouched()" class="m-0" matInput/>
+      @if (!disabled()) {
+        @if (selectedOptions().size) {
+          <span matSuffix class="sfi sfi-close fs-18 fc-black cursor-pointer" (click)="clearSelection()"></span>
+        } @else {
+          <span matSuffix class="sfi sfi-arrow-down fs-18 fc-black cursor-pointer"></span>
+        }
+      }
+
+      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="captureValue($event)" [displayWith]="displayFn" autoActiveFirstOption hideSingleSelectionIndicator>
+        @if (loading()) {
+          <mat-option disabled="true">
+            <ds-icon icon="spinner" class="spin fc-coral fs-20"></ds-icon>
+          </mat-option>
+        } @else {
+          @if (filteredOptions().length) {
+            @if (multiple()) {
+              <mat-option (click)="toggleAllSelection()" value="_SELECT_ALL_OPTIONS_">
+                {{ allSelected() ? "deselect all" : "Select All" }}
+              </mat-option>
+            }
+            <cdk-virtual-scroll-viewport itemSize="5" [ngStyle]="{'height': height()}">
+              <mat-option *cdkVirtualFor="let option of filteredOptions()" [value]="option" [ngClass]="{'mdc-list-item__selected': option | selectStatus: selectedOptions()}">
+                @if (optionTemplate()) {
+                  <ng-container *ngTemplateOutlet="optionTemplate(); context: { $implicit: option}"/>
+                } @else {
+                  {{ option.label }}
+                }
+              </mat-option>
+            </cdk-virtual-scroll-viewport>
+          } @else {
+            <mat-option disabled="true">No Result Found</mat-option>
+          }
+        }
+      </mat-autocomplete>
+    </mat-form-field>
+
+    <mat-chip-grid #chipGrid>
+      @if (multiple()) {
+        @for (chip of selectedOptions(); track chip[0]) {
+          <mat-chip-row (removed)="removeFromSelectedOptionsMap(chip[1])">
+            @if (cardViewerTemplate()) {
+              <ng-container
+                *ngTemplateOutlet="cardViewerTemplate(); context: { $implicit:  chip[1]}"
+              />
+            } @else {
+              {{ chip[1].label }}
+            }
+            <button matChipRemove [disabled]="readonly()" [attr.aria-label]="'remove ' + chip[1].label">
+              <ds-icon icon="trash" class="fc-red"></ds-icon>
+            </button>
+          </mat-chip-row>
+        }
+      }
+    </mat-chip-grid>
   `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2$2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: SelectStatusPipe, name: "selectStatus" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectControl, decorators: [{
@@ -5424,67 +5476,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         NgTemplateOutlet,
                     ], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: SelectControl, multi: true },
-                    ], template: `
-    <mat-form-field floatLabel="auto" class="">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <input [formControl]="ctrl" [matAutocomplete]="auto" [matChipInputFor]="chipGrid" [placeholder]="placeholder()" [readonly]="readonly()" (blur)="markAsTouched()" class="m-0" matInput/>
-      @if (!disabled()) {
-        @if (selectedOptions().size) {
-          <span matSuffix class="sfi sfi-close fs-18 fc-black cursor-pointer" (click)="clearSelection()"></span>
-        } @else {
-          <span matSuffix class="sfi sfi-arrow-down fs-18 fc-black cursor-pointer"></span>
-        }
-      }
-
-      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="captureValue($event)" [displayWith]="displayFn" autoActiveFirstOption hideSingleSelectionIndicator>
-        @if (loading()) {
-          <mat-option disabled="true">
-            <ds-icon icon="spinner" class="spin fc-coral fs-20"></ds-icon>
-          </mat-option>
-        } @else {
-          @if (filteredOptions().length) {
-            @if (multiple()) {
-              <mat-option (click)="toggleAllSelection()" value="_SELECT_ALL_OPTIONS_">
-                {{ allSelected() ? "deselect all" : "Select All" }}
-              </mat-option>
-            }
-            <cdk-virtual-scroll-viewport itemSize="5" [ngStyle]="{'height': height()}">
-              <mat-option *cdkVirtualFor="let option of filteredOptions()" [value]="option" [ngClass]="{'mdc-list-item__selected': option | selectStatus: selectedOptions()}">
-                @if (optionTemplate()) {
-                  <ng-container *ngTemplateOutlet="optionTemplate(); context: { $implicit: option}"/>
-                } @else {
-                  {{ option.label }}
-                }
-              </mat-option>
-            </cdk-virtual-scroll-viewport>
-          } @else {
-            <mat-option disabled="true">No Result Found</mat-option>
-          }
-        }
-      </mat-autocomplete>
-    </mat-form-field>
-
-    <mat-chip-grid #chipGrid>
-      @if (multiple()) {
-        @for (chip of selectedOptions(); track chip[0]) {
-          <mat-chip-row (removed)="removeFromSelectedOptionsMap(chip[1])">
-            @if (cardViewerTemplate()) {
-              <ng-container
-                *ngTemplateOutlet="cardViewerTemplate(); context: { $implicit:  chip[1]}"
-              />
-            } @else {
-              {{ chip[1].label }}
-            }
-            <button matChipRemove [disabled]="readonly()" [attr.aria-label]="'remove ' + chip[1].label">
-              <ds-icon icon="trash" class="fc-red"></ds-icon>
-            </button>
-          </mat-chip-row>
-        }
-      }
-    </mat-chip-grid>
+                    ], template: `
+    <mat-form-field floatLabel="auto" class="">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <input [formControl]="ctrl" [matAutocomplete]="auto" [matChipInputFor]="chipGrid" [placeholder]="placeholder()" [readonly]="readonly()" [errorStateMatcher]="errorStateMatcher" (blur)="markAsTouched()" class="m-0" matInput/>
+      @if (!disabled()) {
+        @if (selectedOptions().size) {
+          <span matSuffix class="sfi sfi-close fs-18 fc-black cursor-pointer" (click)="clearSelection()"></span>
+        } @else {
+          <span matSuffix class="sfi sfi-arrow-down fs-18 fc-black cursor-pointer"></span>
+        }
+      }
+
+      <mat-autocomplete #auto="matAutocomplete" (optionSelected)="captureValue($event)" [displayWith]="displayFn" autoActiveFirstOption hideSingleSelectionIndicator>
+        @if (loading()) {
+          <mat-option disabled="true">
+            <ds-icon icon="spinner" class="spin fc-coral fs-20"></ds-icon>
+          </mat-option>
+        } @else {
+          @if (filteredOptions().length) {
+            @if (multiple()) {
+              <mat-option (click)="toggleAllSelection()" value="_SELECT_ALL_OPTIONS_">
+                {{ allSelected() ? "deselect all" : "Select All" }}
+              </mat-option>
+            }
+            <cdk-virtual-scroll-viewport itemSize="5" [ngStyle]="{'height': height()}">
+              <mat-option *cdkVirtualFor="let option of filteredOptions()" [value]="option" [ngClass]="{'mdc-list-item__selected': option | selectStatus: selectedOptions()}">
+                @if (optionTemplate()) {
+                  <ng-container *ngTemplateOutlet="optionTemplate(); context: { $implicit: option}"/>
+                } @else {
+                  {{ option.label }}
+                }
+              </mat-option>
+            </cdk-virtual-scroll-viewport>
+          } @else {
+            <mat-option disabled="true">No Result Found</mat-option>
+          }
+        }
+      </mat-autocomplete>
+    </mat-form-field>
+
+    <mat-chip-grid #chipGrid>
+      @if (multiple()) {
+        @for (chip of selectedOptions(); track chip[0]) {
+          <mat-chip-row (removed)="removeFromSelectedOptionsMap(chip[1])">
+            @if (cardViewerTemplate()) {
+              <ng-container
+                *ngTemplateOutlet="cardViewerTemplate(); context: { $implicit:  chip[1]}"
+              />
+            } @else {
+              {{ chip[1].label }}
+            }
+            <button matChipRemove [disabled]="readonly()" [attr.aria-label]="'remove ' + chip[1].label">
+              <ds-icon icon="trash" class="fc-red"></ds-icon>
+            </button>
+          </mat-chip-row>
+        }
+      }
+    </mat-chip-grid>
   `, schemas: [CUSTOM_ELEMENTS_SCHEMA] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], onQueryChange: [{ type: i0.Output, args: ["onQueryChange"] }], optionTemplate: [{ type: i0.ContentChild, args: ["optionTemplate", { isSignal: true }] }], cardViewerTemplate: [{ type: i0.ContentChild, args: ["cardViewerTemplate", { isSignal: true }] }] } });
 
@@ -5577,26 +5629,27 @@ class TextareaControl extends ControlBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: TextareaControl, isStandalone: true, selector: "iss-ctrl-textarea", providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: TextareaControl, multi: true },
             { provide: NG_VALIDATORS, useExisting: TextareaControl, multi: true }
-        ], usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field floatLabel="auto" class="custom-textarea">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <textarea
-        matInput
-        [placeholder]="placeholder()"
-        [formControl]="ctrl"
-        [attr.maxlength]="maxLength()"
-        [attr.minlength]="minLength()"
-        [readonly]="readonly()"
-        (input)="emitValue()"
-        (focusout)="markAsTouched()"
-      >
-      </textarea>
-      <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
-    </mat-form-field>
-  `, isInline: true, dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }] });
+        ], usesInheritance: true, ngImport: i0, template: `
+    <mat-form-field floatLabel="auto" class="custom-textarea">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <textarea
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        [placeholder]="placeholder()"
+        [formControl]="ctrl"
+        [attr.maxlength]="maxLength()"
+        [attr.minlength]="minLength()"
+        [readonly]="readonly()"
+        (input)="emitValue()"
+        (focusout)="markAsTouched()"
+      >
+      </textarea>
+      <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
+    </mat-form-field>
+  `, isInline: true, dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: Hints, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextareaControl, decorators: [{
             type: Component,
@@ -5605,7 +5658,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         MatFormField,
                         MatInput,
-                        HintsComponent,
+                        Hints,
                         FormsModule,
                         ReactiveFormsModule,
                         MatFormFieldModule,
@@ -5615,25 +5668,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         { provide: NG_VALIDATORS, useExisting: TextareaControl, multi: true }
                     ],
                     schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    template: `
-    <mat-form-field floatLabel="auto" class="custom-textarea">
-      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
-      <mat-label class="fs-16 fc-dark-gray">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <textarea
-        matInput
-        [placeholder]="placeholder()"
-        [formControl]="ctrl"
-        [attr.maxlength]="maxLength()"
-        [attr.minlength]="minLength()"
-        [readonly]="readonly()"
-        (input)="emitValue()"
-        (focusout)="markAsTouched()"
-      >
-      </textarea>
-      <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
-    </mat-form-field>
+                    template: `
+    <mat-form-field floatLabel="auto" class="custom-textarea">
+      <!-- Always rendered: upgrade.scss shows the floating label only while the projected <label> carries text, so an omitted or empty one collapses on its own. -->
+      <mat-label class="fs-16 fc-dark-gray">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <textarea
+        matInput
+        [errorStateMatcher]="errorStateMatcher"
+        [placeholder]="placeholder()"
+        [formControl]="ctrl"
+        [attr.maxlength]="maxLength()"
+        [attr.minlength]="minLength()"
+        [readonly]="readonly()"
+        (input)="emitValue()"
+        (focusout)="markAsTouched()"
+      >
+      </textarea>
+      <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
+    </mat-form-field>
   `
                 }]
         }] });
@@ -6411,22 +6465,22 @@ const COMPONENTS = {
     datetime: () => Promise.resolve().then(function () { return datetimePicker_field; }).then((c) => c.DatetimePickerField),
     date_range: () => Promise.resolve().then(function () { return dateRangePicker_field; }).then((c) => c.DateRangePickerField),
     attachment: () => Promise.resolve().then(function () { return filePicker_field; }).then((c) => c.FilePickerField),
-    userPicker: () => import('./iss-ctrl-user-picker.field-BhjVNeqN.mjs').then((c) => c.UserPickerField),
+    userPicker: () => import('./iss-ctrl-user-picker.field-BH63sZ-X.mjs').then((c) => c.UserPickerField),
     vehicle_plate: () => Promise.resolve().then(function () { return plate_field; }).then((c) => c.PlateField),
-    enrichment: () => import('./iss-ctrl-note.field-CbLlparb.mjs').then((c) => c.NoteField),
+    enrichment: () => import('./iss-ctrl-note.field-B_Lbp28X.mjs').then((c) => c.NoteField),
     mobile: () => Promise.resolve().then(function () { return mobile_field; }).then((c) => c.MobileField),
-    table: () => import('./iss-ctrl-table.field-CvqXIE4q.mjs').then((c) => c.TableField),
+    table: () => import('./iss-ctrl-table.field-B5FxF6hn.mjs').then((c) => c.TableField),
     chips: () => Promise.resolve().then(function () { return chips_field; }).then((c) => c.ChipsField),
     switch: () => Promise.resolve().then(function () { return slideToggle_field; }).then((c) => c.SlideToggleField),
 };
 
 const SERVICES = {
-    setValue: () => import('./iss-ctrl-set-value-event-vKIrSRgu.mjs').then((s) => s.SetValueEvent),
+    setValue: () => import('./iss-ctrl-set-value-event-CgXhi0Bv.mjs').then((s) => s.SetValueEvent),
     show: () => import('./iss-ctrl-show-event-BcRCwAfo.mjs').then((s) => s.ShowEvent),
-    load: () => import('./iss-ctrl-load-value-event-DmX9Pkzf.mjs').then((s) => s.LoadValueEvent),
-    loadOptions: () => import('./iss-ctrl-load-options-event-CmXkuQ5O.mjs').then((s) => s.LoadOptionsEvent),
-    triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-wyn6AXWA.mjs').then((s) => s.TriggerBasedOnJsonValue),
-    replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-C_mYQdtP.mjs').then((s) => s.ReplaceApiKeys),
+    load: () => import('./iss-ctrl-load-value-event-DJKJ5S3h.mjs').then((s) => s.LoadValueEvent),
+    loadOptions: () => import('./iss-ctrl-load-options-event-CxyAyNMe.mjs').then((s) => s.LoadOptionsEvent),
+    triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-2v1kLVHZ.mjs').then((s) => s.TriggerBasedOnJsonValue),
+    replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-C0XYQW4i.mjs').then((s) => s.ReplaceApiKeys),
 };
 
 // Read-only counterpart of COMPONENTS: the component used to render a field's value
@@ -6809,7 +6863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ name: "translate" }]
         }] });
 
-class ValidationMessageComponent {
+class ValidationMessage {
     errors = input.required(...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     showMessage = input.required(...(ngDevMode ? [{ debugName: "showMessage" }] : /* istanbul ignore next */ []));
     getValidationMessage(error) {
@@ -6820,8 +6874,8 @@ class ValidationMessageComponent {
         }
         return errorMessageGenerator(error.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ValidationMessageComponent, isStandalone: true, selector: "iss-validation-message-viewer", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: true, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ValidationMessage, isStandalone: true, selector: "iss-validation-message-viewer", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: true, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     @if (errors() !== null && showMessage()) {
       <div class="messages">
         @for (error of errors() ?? {} | keyvalue; track error) {
@@ -6833,7 +6887,7 @@ class ValidationMessageComponent {
     }
   `, isInline: true, styles: [":host{display:block;position:relative}.messages{position:absolute;inset-inline:0;top:0;z-index:1}p{margin:0}\n"], dependencies: [{ kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationMessage, decorators: [{
             type: Component,
             args: [{ selector: "iss-validation-message-viewer", imports: [
                         KeyValuePipe,
@@ -7115,6 +7169,44 @@ var input_viewer = /*#__PURE__*/Object.freeze({
     InputViewer: InputViewer
 });
 
+/**
+ * `<iss-field-viewer>` — read-only presentation of a single field as a
+ * label / value row.
+ *
+ * Project the caption into the `label` slot and the rendered value into any
+ * element carrying a `value` attribute:
+ *
+ * ```html
+ * <iss-field-viewer>
+ *   <label>Request Type</label>
+ *   <span>value</span>
+ * </iss-field-viewer>
+ * ```
+ *
+ * The label sits in a fixed-width column, so every value in a stack of viewers
+ * starts on the same vertical line. Override that column with the
+ * `--field-viewer-label-width` custom property on any ancestor.
+ * When no label is projected, the value spans the full width of the row.
+ */
+class FieldViewer {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: FieldViewer, isStandalone: true, selector: "iss-field-viewer", ngImport: i0, template: `
+    <div class="field-viewer w-100">
+      <span class="field-viewer__label"><ng-content select="label"></ng-content></span>
+      <span class="field-viewer__value"><ng-content></ng-content></span>
+    </div>
+  `, isInline: true, styles: [":host{--field-viewer-label-width: 14rem;--field-viewer-gap: 1.5rem;--field-viewer-padding: .75rem 1rem;--field-viewer-label-fc: var(--dark-gray);--field-viewer-value-fc: var(--black);display:block;width:100%}.field-viewer{display:grid;grid-template-columns:var(--field-viewer-label-width) minmax(0,1fr);align-items:baseline;column-gap:var(--field-viewer-gap);padding:var(--field-viewer-padding);border-radius:var(--box-radius);font-size:.875rem;line-height:var(--default-line-height)}.field-viewer__label{color:var(--field-viewer-label-fc);font-weight:var(--font-regular);overflow-wrap:anywhere}.field-viewer__value{min-width:0;color:var(--field-viewer-value-fc);font-weight:var(--font-bold);overflow-wrap:anywhere}.field-viewer__label ::ng-deep label{display:block;margin:0;color:inherit;font:inherit}.field-viewer:not(:has(.field-viewer__label>*)){grid-template-columns:minmax(0,1fr)}.field-viewer:not(:has(.field-viewer__label>*)) .field-viewer__label{display:none}@media(max-width:575.98px){.field-viewer{grid-template-columns:minmax(0,1fr);row-gap:.25rem}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldViewer, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-field-viewer", imports: [], template: `
+    <div class="field-viewer w-100">
+      <span class="field-viewer__label"><ng-content select="label"></ng-content></span>
+      <span class="field-viewer__value"><ng-content></ng-content></span>
+    </div>
+  `, styles: [":host{--field-viewer-label-width: 14rem;--field-viewer-gap: 1.5rem;--field-viewer-padding: .75rem 1rem;--field-viewer-label-fc: var(--dark-gray);--field-viewer-value-fc: var(--black);display:block;width:100%}.field-viewer{display:grid;grid-template-columns:var(--field-viewer-label-width) minmax(0,1fr);align-items:baseline;column-gap:var(--field-viewer-gap);padding:var(--field-viewer-padding);border-radius:var(--box-radius);font-size:.875rem;line-height:var(--default-line-height)}.field-viewer__label{color:var(--field-viewer-label-fc);font-weight:var(--font-regular);overflow-wrap:anywhere}.field-viewer__value{min-width:0;color:var(--field-viewer-value-fc);font-weight:var(--font-bold);overflow-wrap:anywhere}.field-viewer__label ::ng-deep label{display:block;margin:0;color:inherit;font:inherit}.field-viewer:not(:has(.field-viewer__label>*)){grid-template-columns:minmax(0,1fr)}.field-viewer:not(:has(.field-viewer__label>*)) .field-viewer__label{display:none}@media(max-width:575.98px){.field-viewer{grid-template-columns:minmax(0,1fr);row-gap:.25rem}}\n"] }]
+        }] });
+
 /**
  * `<iss-field-input>` — single line text, number, email or password entry.
  *
@@ -7162,10 +7254,13 @@ class InputField extends FieldBase {
         </iss-ctrl-input>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-input [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-input [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputControl, selector: "iss-ctrl-input", inputs: ["type", "prefixIcon", "prefixText", "suffixIcon", "suffixText"], outputs: ["onPrefixClick", "onSuffixClick"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: InputViewer, selector: "iss-viewer-input" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputControl, selector: "iss-ctrl-input", inputs: ["type", "prefixIcon", "prefixText", "suffixIcon", "suffixText"], outputs: ["onPrefixClick", "onSuffixClick"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: InputViewer, selector: "iss-viewer-input" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputField, decorators: [{
             type: Component,
@@ -7175,8 +7270,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         InputControl,
-                        ValidationMessageComponent,
-                        InputViewer
+                        ValidationMessage,
+                        InputViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -7195,7 +7291,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </iss-ctrl-input>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-input [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-input [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7262,10 +7361,13 @@ class TextareaField extends FieldBase {
         </iss-ctrl-textarea>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-textarea [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-textarea [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextareaControl, selector: "iss-ctrl-textarea" }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: TextareaViewer, selector: "iss-viewer-textarea" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextareaControl, selector: "iss-ctrl-textarea" }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: TextareaViewer, selector: "iss-viewer-textarea" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextareaField, decorators: [{
             type: Component,
@@ -7275,8 +7377,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         TextareaControl,
-                        ValidationMessageComponent,
-                        TextareaViewer
+                        ValidationMessage,
+                        TextareaViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -7286,7 +7389,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </iss-ctrl-textarea>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-textarea [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-textarea [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7364,10 +7470,13 @@ class ChipsField extends FieldBase {
         <iss-ctrl-chips [formControlName]="field.name" [readonly]="field.config.readonly() ?? false"><label>{{ field.label() }}</label></iss-ctrl-chips>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-chips [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-chips [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChipsControl, selector: "iss-ctrl-chips" }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: ChipsViewer, selector: "iss-viewer-chips" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChipsControl, selector: "iss-ctrl-chips" }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: ChipsViewer, selector: "iss-viewer-chips" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChipsField, decorators: [{
             type: Component,
@@ -7377,8 +7486,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         ChipsControl,
-                        ValidationMessageComponent,
-                        ChipsViewer
+                        ValidationMessage,
+                        ChipsViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -7386,7 +7496,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         <iss-ctrl-chips [formControlName]="field.name" [readonly]="field.config.readonly() ?? false"><label>{{ field.label() }}</label></iss-ctrl-chips>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-chips [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-chips [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7458,19 +7571,23 @@ class RadioField extends FieldBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RadioField, isStandalone: true, selector: "iss-field-radio", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       <div style="display: flex; flex-direction: column">
-        @if (!field.config.hideLabel()) {
-          <mat-label>{{ field.label() }}</mat-label>
-        }
-
         @if (field.mode() === "edit") {
+          @if (!field.config.hideLabel()) {
+            <mat-label>{{ field.label() }}</mat-label>
+          }
           <iss-ctrl-radio [formControlName]="field.name" [options]="field.options()" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
           <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
         } @else {
-          <iss-viewer-radio [field]="field"/>
+          <iss-field-viewer>
+            @if (!field.config.hideLabel()) {
+              <label>{{ field.label() }}</label>
+            }
+            <iss-viewer-radio [field]="field"/>
+          </iss-field-viewer>
         }
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: RadioControl, selector: "iss-ctrl-radio", inputs: ["options"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: RadioViewer, selector: "iss-viewer-radio" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: RadioControl, selector: "iss-ctrl-radio", inputs: ["options"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: RadioViewer, selector: "iss-viewer-radio" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadioField, decorators: [{
             type: Component,
@@ -7481,21 +7598,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ReactiveFormsModule,
                         MatLabel,
                         RadioControl,
-                        ValidationMessageComponent,
-                        RadioViewer
+                        ValidationMessage,
+                        RadioViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
       <div style="display: flex; flex-direction: column">
-        @if (!field.config.hideLabel()) {
-          <mat-label>{{ field.label() }}</mat-label>
-        }
-
         @if (field.mode() === "edit") {
+          @if (!field.config.hideLabel()) {
+            <mat-label>{{ field.label() }}</mat-label>
+          }
           <iss-ctrl-radio [formControlName]="field.name" [options]="field.options()" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
           <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
         } @else {
-          <iss-viewer-radio [field]="field"/>
+          <iss-field-viewer>
+            @if (!field.config.hideLabel()) {
+              <label>{{ field.label() }}</label>
+            }
+            <iss-viewer-radio [field]="field"/>
+          </iss-field-viewer>
         }
       </div>
     }
@@ -7576,10 +7698,13 @@ class SelectField extends FieldBase {
         </iss-ctrl-select>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-select [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-select [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectControl, selector: "iss-ctrl-select", inputs: ["options", "height", "loading"], outputs: ["onQueryChange"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: SelectViewer, selector: "iss-viewer-select" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectControl, selector: "iss-ctrl-select", inputs: ["options", "height", "loading"], outputs: ["onQueryChange"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: SelectViewer, selector: "iss-viewer-select" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectField, decorators: [{
             type: Component,
@@ -7589,8 +7714,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         SelectControl,
-                        ValidationMessageComponent,
-                        SelectViewer
+                        ValidationMessage,
+                        SelectViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -7600,7 +7726,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </iss-ctrl-select>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-select [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-select [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7664,10 +7793,13 @@ class MobileField extends FieldBase {
           <label>{{ field.label() }}</label>
         </iss-ctrl-mobile>
       } @else {
-        <iss-viewer-mobile [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-mobile [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MobileControl, selector: "iss-ctrl-mobile", inputs: ["preferredCountries"] }, { kind: "component", type: MobileViewer, selector: "iss-viewer-mobile" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MobileControl, selector: "iss-ctrl-mobile", inputs: ["preferredCountries"] }, { kind: "component", type: MobileViewer, selector: "iss-viewer-mobile" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MobileField, decorators: [{
             type: Component,
@@ -7677,7 +7809,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         MobileControl,
-                        MobileViewer
+                        MobileViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -7686,7 +7819,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           <label>{{ field.label() }}</label>
         </iss-ctrl-mobile>
       } @else {
-        <iss-viewer-mobile [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-mobile [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7766,10 +7902,15 @@ class CheckboxField extends FieldBase {
         </iss-ctrl-checkbox>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-checkbox [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-checkbox [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CheckboxControl, selector: "iss-ctrl-checkbox", inputs: ["options"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: CheckboxViewer, selector: "iss-viewer-checkbox" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CheckboxControl, selector: "iss-ctrl-checkbox", inputs: ["options"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: CheckboxViewer, selector: "iss-viewer-checkbox" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxField, decorators: [{
             type: Component,
@@ -7779,8 +7920,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         CheckboxControl,
-                        ValidationMessageComponent,
-                        CheckboxViewer
+                        ValidationMessage,
+                        CheckboxViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -7792,7 +7934,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </iss-ctrl-checkbox>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-checkbox [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-checkbox [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7864,10 +8011,10 @@ class ToggleButtonField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToggleButtonField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToggleButtonField, isStandalone: true, selector: "iss-field-toggle-button", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
-      @if (!field.config.hideLabel()) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
       @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
         <iss-ctrl-toggle-button
           [formControlName]="field.name"
           [options]="field.options()"
@@ -7877,10 +8024,15 @@ class ToggleButtonField extends FieldBase {
         />
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-toggle-button [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-toggle-button [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: ToggleButtonControl, selector: "iss-ctrl-toggle-button", inputs: ["options"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: ToggleButtonViewer, selector: "iss-viewer-toggle-button" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: ToggleButtonControl, selector: "iss-ctrl-toggle-button", inputs: ["options"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: ToggleButtonViewer, selector: "iss-viewer-toggle-button" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToggleButtonField, decorators: [{
             type: Component,
@@ -7891,15 +8043,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ReactiveFormsModule,
                         MatLabel,
                         ToggleButtonControl,
-                        ValidationMessageComponent,
-                        ToggleButtonViewer
+                        ValidationMessage,
+                        ToggleButtonViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
-      @if (!field.config.hideLabel()) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
       @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
         <iss-ctrl-toggle-button
           [formControlName]="field.name"
           [options]="field.options()"
@@ -7909,7 +8062,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         />
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-toggle-button [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-toggle-button [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7984,36 +8142,44 @@ class SlideToggleField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SlideToggleField, isStandalone: true, selector: "iss-field-slide-toggle", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
-      @if (!field.config.hideLabel()) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
       @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
         <iss-ctrl-slide-toggle [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-slide-toggle [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-slide-toggle [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: SlideToggleControl, selector: "iss-ctrl-slide-toggle" }, { kind: "component", type: SlideToggleViewer, selector: "iss-viewer-slide-toggle" }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: SlideToggleControl, selector: "iss-ctrl-slide-toggle" }, { kind: "component", type: SlideToggleViewer, selector: "iss-viewer-slide-toggle" }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleField, decorators: [{
             type: Component,
             args: [{
                     selector: "iss-field-slide-toggle",
                     viewProviders: [VIEW_PROVIDER],
-                    imports: [ReactiveFormsModule, MatLabel, SlideToggleControl, SlideToggleViewer, ValidationMessageComponent],
+                    imports: [ReactiveFormsModule, MatLabel, SlideToggleControl, SlideToggleViewer, ValidationMessage, FieldViewer],
                     template: `
     @if (field.visible()) {
-      @if (!field.config.hideLabel()) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
       @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
         <iss-ctrl-slide-toggle [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-slide-toggle [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-slide-toggle [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -8232,18 +8398,22 @@ class PlateField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PlateField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PlateField, isStandalone: true, selector: "iss-field-plate-number", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
-      @if (!field.config.hideLabel()) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
       @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
         <iss-ctrl-plate-number [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="updateField($event)"/>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-plate [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-plate [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PlateControl, selector: "iss-ctrl-plate-number" }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: PlateViewer, selector: "iss-viewer-plate" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PlateControl, selector: "iss-ctrl-plate-number" }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: PlateViewer, selector: "iss-viewer-plate" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PlateField, decorators: [{
             type: Component,
@@ -8253,21 +8423,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         PlateControl,
-                        ValidationMessageComponent,
+                        ValidationMessage,
                         MatLabel,
-                        PlateViewer
+                        PlateViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
-      @if (!field.config.hideLabel()) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
       @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
         <iss-ctrl-plate-number [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="updateField($event)"/>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-plate [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-plate [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -8630,8 +8805,8 @@ class FilePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FilePickerField, isStandalone: true, selector: "iss-field-file-picker", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
-      <mat-label>{{ field.label() }}</mat-label>
       @if (field.mode() === "edit") {
+        <mat-label>{{ field.label() }}</mat-label>
         <input type="hidden" [formControlName]="field.name">
         <!-- [showDeleteButton]="field.config.showDeleteButton" [showDownloadButton]="field.config.showDownloadButton"-->
         <iss-ctrl-file-picker
@@ -8646,10 +8821,13 @@ class FilePickerField extends FieldBase {
         />
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="ctrl.touched"/>
       } @else {
-        <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FilePickerControl, selector: "iss-ctrl-file-picker", inputs: ["accept", "showDownloadButton", "showDeleteButton", "uploading", "uploadedFiles", "uploadingError"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: AttachmentViewer, selector: "iss-viewer-attachment", inputs: ["uploading", "uploadingError"], outputs: ["deleteOut"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FilePickerControl, selector: "iss-ctrl-file-picker", inputs: ["accept", "showDownloadButton", "showDeleteButton", "uploading", "uploadedFiles", "uploadingError"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: AttachmentViewer, selector: "iss-viewer-attachment", inputs: ["uploading", "uploadingError"], outputs: ["deleteOut"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilePickerField, decorators: [{
             type: Component,
@@ -8659,14 +8837,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         FilePickerControl,
-                        ValidationMessageComponent,
+                        ValidationMessage,
                         AttachmentViewer,
-                        MatLabel$1
+                        MatLabel$1,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
-      <mat-label>{{ field.label() }}</mat-label>
       @if (field.mode() === "edit") {
+        <mat-label>{{ field.label() }}</mat-label>
         <input type="hidden" [formControlName]="field.name">
         <!-- [showDeleteButton]="field.config.showDeleteButton" [showDownloadButton]="field.config.showDownloadButton"-->
         <iss-ctrl-file-picker
@@ -8681,7 +8860,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         />
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="ctrl.touched"/>
       } @else {
-        <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -8745,10 +8927,13 @@ class TimePickerField extends FieldBase {
           <label>{{ field.label() }}</label>
         </iss-ctrl-time-picker>
       } @else {
-        <iss-viewer-time-picker [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-time-picker [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TimePickerControl, selector: "iss-ctrl-time-picker", inputs: ["interval", "minTime", "maxTime"] }, { kind: "component", type: TimePickerViewer, selector: "iss-viewer-time-picker" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TimePickerControl, selector: "iss-ctrl-time-picker", inputs: ["interval", "minTime", "maxTime"] }, { kind: "component", type: TimePickerViewer, selector: "iss-viewer-time-picker" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimePickerField, decorators: [{
             type: Component,
@@ -8758,7 +8943,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         TimePickerControl,
-                        TimePickerViewer
+                        TimePickerViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -8767,7 +8953,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           <label>{{ field.label() }}</label>
         </iss-ctrl-time-picker>
       } @else {
-        <iss-viewer-time-picker [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-time-picker [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -8845,9 +9034,9 @@ var datePicker_viewer = /*#__PURE__*/Object.freeze({
  */
 class DatePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerField, isStandalone: true, selector: "iss-field-date-picker", usesInheritance: true, ngImport: i0, template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerField, isStandalone: true, selector: "iss-field-date-picker", usesInheritance: true, ngImport: i0, template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
         <iss-ctrl-date-picker
           [formControlName]="field.name"
           [minDate]="field.config.minDate() ?? null"
@@ -8855,15 +9044,18 @@ class DatePickerField extends FieldBase {
           [readonly]="field.config.readonly() ?? false"
           [hijriCalendar]="field.config.hijriCalendar() ?? false"
           [emitHijri]="field.config.emitHijri() ?? false"
-        >
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-date-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-viewer-date-picker [field]="field"/>
-      }
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatePickerControl, selector: "iss-ctrl-date-picker", inputs: ["disabledDays", "minDate", "maxDate", "hijriCalendar", "emitHijri"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerViewer, selector: "iss-viewer-date-picker" }], viewProviders: [VIEW_PROVIDER] });
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-date-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatePickerControl, selector: "iss-ctrl-date-picker", inputs: ["disabledDays", "minDate", "maxDate", "hijriCalendar", "emitHijri"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerViewer, selector: "iss-viewer-date-picker" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerField, decorators: [{
             type: Component,
@@ -8873,12 +9065,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         DatePickerControl,
-                        ValidationMessageComponent,
-                        DatePickerViewer
+                        ValidationMessage,
+                        DatePickerViewer,
+                        FieldViewer
                     ],
-                    template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
+                    template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
         <iss-ctrl-date-picker
           [formControlName]="field.name"
           [minDate]="field.config.minDate() ?? null"
@@ -8886,14 +9079,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           [readonly]="field.config.readonly() ?? false"
           [hijriCalendar]="field.config.hijriCalendar() ?? false"
           [emitHijri]="field.config.emitHijri() ?? false"
-        >
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-date-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-viewer-date-picker [field]="field"/>
-      }
-    }
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-date-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
   `
                 }]
         }] });
@@ -8971,9 +9167,9 @@ var datetimePicker_viewer = /*#__PURE__*/Object.freeze({
  */
 class DatetimePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatetimePickerField, isStandalone: true, selector: "iss-field-datetime-picker", usesInheritance: true, ngImport: i0, template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatetimePickerField, isStandalone: true, selector: "iss-field-datetime-picker", usesInheritance: true, ngImport: i0, template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
         <iss-ctrl-datetime-picker
           [formControlName]="field.name"
           [minDate]="field.config.minDate() ?? null"
@@ -8981,15 +9177,18 @@ class DatetimePickerField extends FieldBase {
           [readonly]="field.config.readonly() ?? false"
           [hijriCalendar]="field.config.hijriCalendar() ?? false"
           [emitHijri]="field.config.emitHijri() ?? false"
-        >
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-datetime-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-viewer-datetime-picker [field]="field"/>
-      }
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimePickerControl, selector: "iss-ctrl-datetime-picker", inputs: ["disabledDays", "minDate", "maxDate", "minTime", "maxTime", "hijriCalendar", "emitHijri"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerTimeViewer, selector: "iss-viewer-datetime-picker" }], viewProviders: [VIEW_PROVIDER] });
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-datetime-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-datetime-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimePickerControl, selector: "iss-ctrl-datetime-picker", inputs: ["disabledDays", "minDate", "maxDate", "minTime", "maxTime", "hijriCalendar", "emitHijri"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerTimeViewer, selector: "iss-viewer-datetime-picker" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimePickerField, decorators: [{
             type: Component,
@@ -8999,12 +9198,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         DatetimePickerControl,
-                        ValidationMessageComponent,
+                        ValidationMessage,
                         DatePickerTimeViewer,
+                        FieldViewer
                     ],
-                    template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
+                    template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
         <iss-ctrl-datetime-picker
           [formControlName]="field.name"
           [minDate]="field.config.minDate() ?? null"
@@ -9012,14 +9212,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           [readonly]="field.config.readonly() ?? false"
           [hijriCalendar]="field.config.hijriCalendar() ?? false"
           [emitHijri]="field.config.emitHijri() ?? false"
-        >
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-datetime-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-viewer-datetime-picker [field]="field"/>
-      }
-    }
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-datetime-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-datetime-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
   `
                 }]
         }] });
@@ -9098,9 +9301,9 @@ var dateRangePicker_viewer = /*#__PURE__*/Object.freeze({
  */
 class DateRangePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DateRangePickerField, isStandalone: true, selector: "iss-field-date-range-picker", usesInheritance: true, ngImport: i0, template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DateRangePickerField, isStandalone: true, selector: "iss-field-date-range-picker", usesInheritance: true, ngImport: i0, template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
         <iss-ctrl-date-range-picker
           [formControlName]="field.name"
           [minDate]="field.config.minDate() ?? null"
@@ -9108,14 +9311,17 @@ class DateRangePickerField extends FieldBase {
           [readonly]="field.config.readonly() ?? false"
           [hijriCalendar]="field.config.hijriCalendar() ?? false"
           [emitHijri]="field.config.emitHijri() ?? false"
-        >
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-date-range-picker>
-      } @else {
-        <iss-viewer-date-range-picker [field]="field"/>
-      }
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateRangePickerControl, selector: "iss-ctrl-date-range-picker", inputs: ["disabledDays", "minDate", "maxDate", "hijriCalendar", "emitHijri"], outputs: ["onDateRangeObjectChange"] }, { kind: "component", type: DateRangePickerViewer, selector: "iss-viewer-date-range-picker" }], viewProviders: [VIEW_PROVIDER] });
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-range-picker>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-date-range-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateRangePickerControl, selector: "iss-ctrl-date-range-picker", inputs: ["disabledDays", "minDate", "maxDate", "hijriCalendar", "emitHijri"], outputs: ["onDateRangeObjectChange"] }, { kind: "component", type: DateRangePickerViewer, selector: "iss-viewer-date-range-picker" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerField, decorators: [{
             type: Component,
@@ -9125,11 +9331,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         DateRangePickerControl,
-                        DateRangePickerViewer
+                        DateRangePickerViewer,
+                        FieldViewer
                     ],
-                    template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
+                    template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
         <iss-ctrl-date-range-picker
           [formControlName]="field.name"
           [minDate]="field.config.minDate() ?? null"
@@ -9137,13 +9344,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           [readonly]="field.config.readonly() ?? false"
           [hijriCalendar]="field.config.hijriCalendar() ?? false"
           [emitHijri]="field.config.emitHijri() ?? false"
-        >
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-date-range-picker>
-      } @else {
-        <iss-viewer-date-range-picker [field]="field"/>
-      }
-    }
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-range-picker>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-date-range-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
   `
                 }]
         }] });
@@ -9469,5 +9679,5 @@ var time_validator = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { PlateViewer as $, TimePickerField as A, DatePickerField as B, ControlBase as C, DatePickerControl as D, Employee as E, FieldBase as F, DatetimePickerField as G, HOST as H, IssField as I, DateRangePickerField as J, InputViewer as K, Loader as L, MobileControl as M, TextareaViewer as N, Outlet as O, PLACEHOLDER_REGEX as P, ChipsViewer as Q, RadioControl as R, SelectControl as S, TextareaControl as T, RadioViewer as U, VIEW_PROVIDER as V, SelectViewer as W, MobileViewer as X, CheckboxViewer as Y, ToggleButtonViewer as Z, SlideToggleViewer as _, ValidationMessageComponent as a, AttachmentViewer as a0, TimePickerViewer as a1, DatePickerViewer as a2, DatePickerTimeViewer as a3, DateRangePickerViewer as a4, DEFAULT_COUNTRY as a5, COUNTRIES as a6, DATE_FORMAT_ADAPTER as a7, DATETIME_FORMAT as a8, PLATE_LETTERS as a9, getHijriParts as aA, startOfHijriMonth as aB, getHijriDaysInMonth as aC, createHijriDate as aD, formatHijriDate as aE, parseHijriDate as aF, toHijriDisplay as aG, IssValidators as aH, FileValidators as aI, TimeValidator as aJ, VALIDATION_MESSAGES as aa, COMPONENTS as ab, SERVICES as ac, VALIDATORS as ad, isActiveValidationRule as ae, FIELD_DATA as af, UI_LANGUAGE as ag, ATTACHMENT_UPLOAD_URL as ah, ATTACHMENT_UPLOAD_RESPONSE_MAPPER as ai, ATTACHMENT_DOWNLOAD_URL as aj, USER_SEARCH_API as ak, HintsComponent as al, Droppable as am, ArabicNumberPipe as an, FieldDataInjector as ao, PlateLetterPipe as ap, SelectStatusPipe as aq, TranslatePipe as ar, FileHandler as as, IssDateAdapter as at, provideIssDateAdapter as au, Phone as av, arrayFrom as aw, formatFileSize as ax, HIJRI_LOCALE as ay, HIJRI_MONTH_NAMES as az, ViewerBase as b, FormEngine as c, CheckboxControl as d, ChipsControl as e, DateRangePickerControl as f, getPropertyByPath as g, DatetimePickerControl as h, FilePickerControl as i, InputControl as j, PlateControl as k, SlideToggleControl as l, TimePickerControl as m, ToggleButtonControl as n, InputField as o, TextareaField as p, ChipsField as q, replacePlaceholders as r, RadioField as s, SelectField as t, MobileField as u, CheckboxField as v, ToggleButtonField as w, SlideToggleField as x, PlateField as y, FilePickerField as z };
-//# sourceMappingURL=iss-ctrl-iss-ctrl-Cy9p_PEj.mjs.map
+export { SlideToggleViewer as $, FilePickerField as A, TimePickerField as B, ControlBase as C, DatePickerControl as D, Employee as E, FieldBase as F, DatePickerField as G, HOST as H, IssField as I, DatetimePickerField as J, DateRangePickerField as K, Loader as L, MobileControl as M, InputViewer as N, Outlet as O, PLACEHOLDER_REGEX as P, TextareaViewer as Q, RadioControl as R, SelectControl as S, TextareaControl as T, ChipsViewer as U, VIEW_PROVIDER as V, RadioViewer as W, SelectViewer as X, MobileViewer as Y, CheckboxViewer as Z, ToggleButtonViewer as _, ValidationMessage as a, PlateViewer as a0, AttachmentViewer as a1, TimePickerViewer as a2, DatePickerViewer as a3, DatePickerTimeViewer as a4, DateRangePickerViewer as a5, DEFAULT_COUNTRY as a6, COUNTRIES as a7, DATE_FORMAT_ADAPTER as a8, DATETIME_FORMAT as a9, HIJRI_MONTH_NAMES as aA, getHijriParts as aB, startOfHijriMonth as aC, getHijriDaysInMonth as aD, createHijriDate as aE, formatHijriDate as aF, parseHijriDate as aG, toHijriDisplay as aH, IssValidators as aI, FileValidators as aJ, TimeValidator as aK, PLATE_LETTERS as aa, VALIDATION_MESSAGES as ab, COMPONENTS as ac, SERVICES as ad, VALIDATORS as ae, isActiveValidationRule as af, FIELD_DATA as ag, UI_LANGUAGE as ah, ATTACHMENT_UPLOAD_URL as ai, ATTACHMENT_UPLOAD_RESPONSE_MAPPER as aj, ATTACHMENT_DOWNLOAD_URL as ak, USER_SEARCH_API as al, Hints as am, Droppable as an, ArabicNumberPipe as ao, FieldDataInjector as ap, PlateLetterPipe as aq, SelectStatusPipe as ar, TranslatePipe as as, FileHandler as at, IssDateAdapter as au, provideIssDateAdapter as av, Phone as aw, arrayFrom as ax, formatFileSize as ay, HIJRI_LOCALE as az, FieldViewer as b, ViewerBase as c, FormEngine as d, CheckboxControl as e, ChipsControl as f, getPropertyByPath as g, DateRangePickerControl as h, DatetimePickerControl as i, FilePickerControl as j, InputControl as k, PlateControl as l, SlideToggleControl as m, TimePickerControl as n, ToggleButtonControl as o, InputField as p, TextareaField as q, replacePlaceholders as r, ChipsField as s, RadioField as t, SelectField as u, MobileField as v, CheckboxField as w, ToggleButtonField as x, SlideToggleField as y, PlateField as z };
+//# sourceMappingURL=iss-ctrl-iss-ctrl-BKu6a5HF.mjs.map