iss-ctrl 0.0.20 → 0.0.21

package/fesm2022/{iss-ctrl-iss-ctrl-BnwwafES.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 }] }] } });
@@ -2052,45 +2095,46 @@ 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>
+        ], 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: [{
@@ -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,25 +5629,26 @@ 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>
+        ], 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: [{
@@ -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-CJqIvkMM.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-DyOSzuIi.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-CJmtpHsh.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-B800MsyP.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-BG9zEexV.mjs').then((s) => s.LoadValueEvent),
-    loadOptions: () => import('./iss-ctrl-load-options-event-sTdrxJYn.mjs').then((s) => s.LoadOptionsEvent),
-    triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-C5x0hyWn.mjs').then((s) => s.TriggerBasedOnJsonValue),
-    replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-CzJkn7fK.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
@@ -9626,4 +9680,4 @@ var time_validator = /*#__PURE__*/Object.freeze({
  */
 
 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-BnwwafES.mjs.map
+//# sourceMappingURL=iss-ctrl-iss-ctrl-BKu6a5HF.mjs.map