iss-ctrl 0.0.8 → 0.0.10

package/fesm2022/{iss-ctrl-iss-ctrl-BLjj_Aqu.mjs → iss-ctrl-iss-ctrl-hz0ibyPg.mjs}

@@ -1,10 +1,9 @@
 import * as i0 from '@angular/core';
-import { Pipe, input, signal, output, Component, effect, CUSTOM_ELEMENTS_SCHEMA, HostListener, Directive, computed, ChangeDetectionStrategy, Injectable, inject, contentChild, isSignal, Injector, InjectionToken, DestroyRef } from '@angular/core';
+import { Pipe, input, signal, output, Component, CUSTOM_ELEMENTS_SCHEMA, HostListener, Directive, computed, effect, ChangeDetectionStrategy, Injectable, inject, ElementRef, contentChild, isSignal, Injector, InjectionToken, 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 * as i1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i4 from '@angular/material/chips';
 import { MatChipGrid, MatChipRow, MatChipInput, MatChipRemove, MatChipsModule, MatChipSet, MatChip } from '@angular/material/chips';
 import { MatFormField, MatFormFieldModule, MatHint, MatPrefix, MatError, MatLabel } from '@angular/material/form-field';
@@ -23,6 +22,7 @@ import { Subscription, BehaviorSubject, merge, of, map, from, tap, debounceTime,
 import * as i2$1 from '@angular/material/timepicker';
 import { MatTimepickerModule } from '@angular/material/timepicker';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { parsePhoneNumber, getExampleNumber } from 'libphonenumber-js/mobile';
 import examples from 'libphonenumber-js/mobile/examples';
 import * as i1$4 from '@angular/material/button-toggle';
@@ -53,7 +53,10 @@ class ControlBase {
     formControlName = input("", ...(ngDevMode ? [{ debugName: "formControlName" }] : /* istanbul ignore next */ []));
     min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    minLength = input(null, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
+    maxLength = input(null, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
     disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     placeholder = input("", ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     hints = input([], ...(ngDevMode ? [{ debugName: "hints" }] : /* istanbul ignore next */ []));
@@ -61,8 +64,6 @@ class ControlBase {
     touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     onChange = output();
     ctrl = new FormControl(null);
-    onTouch = () => { };
-    onPropagateValue = (_) => { };
     registerOnChange(fn) {
         this.onPropagateValue = fn;
     }
@@ -79,7 +80,7 @@ class ControlBase {
         }
     }
     writeValue(value) {
-        this.ctrl.setValue(value);
+        this.ctrl.setValue(value, { emitEvent: false });
     }
     markAsTouched() {
         this.touched.set(true);
@@ -88,6 +89,8 @@ class ControlBase {
     validate(control) {
         return this.ctrl.errors;
     }
+    onTouch = () => { };
+    onPropagateValue = (_) => { };
     emitValue(value) {
         let emissionValue = this.ctrl.getRawValue();
         if (value !== undefined) {
@@ -111,12 +114,12 @@ 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 }, 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" }, 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" }, ngImport: i0, template: ``, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ControlBase, decorators: [{
             type: Component,
             args: [{ template: `` }]
-        }], 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 }] }], 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"] }] } });
+        }], 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"] }] } });
 
 class CheckboxControl extends ControlBase {
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
@@ -133,25 +136,26 @@ class CheckboxControl extends ControlBase {
     }
     addToSelectedOptionsMap(option) {
         if (option) {
-            this.selectedOptions = signal(option, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+            this.selectedOptions.set(option);
         }
     }
     onCheckboxChange(checked, value) {
+        if (this.readonly()) {
+            return;
+        }
+        this.markAsTouched();
         const selectedOption = this.options().find((option) => option.value === value);
         if (!selectedOption) {
             return;
         }
-        this.selectedOptions.update((prev) => {
-            const options = prev;
-            if (checked) {
-                options.set(selectedOption.value, selectedOption);
-            }
-            else {
-                options.delete(selectedOption.value);
-            }
-            return options;
-        });
-        this.getEmissionValue(this.selectedOptions());
+        const options = new Map(this.selectedOptions());
+        if (checked) {
+            options.set(selectedOption.value, selectedOption);
+        }
+        else {
+            options.delete(selectedOption.value);
+        }
+        this.getEmissionValue(options);
     }
     stringifySelectedOptions() {
         if (!this.selectedOptions()?.size) {
@@ -161,7 +165,13 @@ class CheckboxControl extends ControlBase {
     }
     getEmissionValue(options) {
         this.addToSelectedOptionsMap(options);
-        this.emitValue(this.stringifySelectedOptions());
+        // the form keeps the stringified values, while (onChange) consumers get the resolved options
+        this.propagateValue(this.stringifySelectedOptions());
+        this.emitOnChangeEvent(this.#convertSelectedMapToArray());
+    }
+    #convertSelectedMapToArray() {
+        const selectedOptions = Array.from(this.selectedOptions().values());
+        return selectedOptions.length ? selectedOptions : null;
     }
     #selectedOptionsMapFactory(selectedOptions) {
         const selectedOptionsMap = new Map();
@@ -171,7 +181,7 @@ class CheckboxControl extends ControlBase {
         return selectedOptionsMap;
     }
     #reset() {
-        this.selectedOptions().clear();
+        this.selectedOptions.set(new Map());
         this.ctrl.setValue(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -181,7 +191,7 @@ class CheckboxControl extends ControlBase {
     <ul class="list-unstyled">
       @for (option of options(); track option.value) {
         <li class="mb-2">
-          <mat-checkbox [checked]="option | selectStatus: selectedOptions()" (change)="onCheckboxChange($event.checked, option.value)">
+          <mat-checkbox [checked]="option | selectStatus: selectedOptions()" [disabled]="disabled() || readonly()" (change)="onCheckboxChange($event.checked, option.value)">
             {{ option.label }}
           </mat-checkbox>
         </li>
@@ -201,7 +211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
     <ul class="list-unstyled">
       @for (option of options(); track option.value) {
         <li class="mb-2">
-          <mat-checkbox [checked]="option | selectStatus: selectedOptions()" (change)="onCheckboxChange($event.checked, option.value)">
+          <mat-checkbox [checked]="option | selectStatus: selectedOptions()" [disabled]="disabled() || readonly()" (change)="onCheckboxChange($event.checked, option.value)">
             {{ option.label }}
           </mat-checkbox>
         </li>
@@ -213,12 +223,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 class ChipsControl extends ControlBase {
     keywords = signal([], ...(ngDevMode ? [{ debugName: "keywords" }] : /* istanbul ignore next */ []));
-    #ctrlChanges = toSignal(this.ctrl.valueChanges);
-    #effect = effect(() => {
-        if (this.#ctrlChanges()) {
-            this.emitValue(this.#stringifyValues());
-        }
-    }, ...(ngDevMode ? [{ debugName: "#effect" }] : /* istanbul ignore next */ []));
     writeValue(value) {
         if (typeof value === "string") {
             this.keywords.set(this.#parseValues(value));
@@ -228,6 +232,10 @@ class ChipsControl extends ControlBase {
         }
     }
     remove(keyword) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.markAsTouched();
         this.keywords.update((keywords) => {
             const index = keywords.indexOf(keyword);
             if (index < 0) {
@@ -239,6 +247,10 @@ class ChipsControl extends ControlBase {
         this.emitValue(this.#stringifyValues());
     }
     add(event) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.markAsTouched();
         const value = (event.value || "").trim();
         if (value) {
             this.keywords.update((keywords) => [...keywords, value]);
@@ -246,9 +258,6 @@ class ChipsControl extends ControlBase {
         event.chipInput.clear();
         this.emitValue(this.#stringifyValues());
     }
-    ngOnDestroy() {
-        this.#effect.destroy();
-    }
     #stringifyValues() {
         return this.keywords().map((s) => s.trim()).join();
     }
@@ -265,8 +274,10 @@ class ChipsControl extends ControlBase {
       </mat-label>
       <input
         matInput
-        [placeholder]="placeholder()"
-        [matChipInputFor]="chipGrid"
+        [placeholder]="placeholder()"
+        [matChipInputFor]="chipGrid"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
         (matChipInputTokenEnd)="add($event)"
       />
     </mat-form-field>
@@ -274,7 +285,7 @@ class ChipsControl extends ControlBase {
       @for (keyword of keywords(); track keyword) {
         <mat-chip-row (removed)="remove(keyword)">
           {{ keyword }}
-          <button matChipRemove>
+          <button matChipRemove [disabled]="disabled() || readonly()">
             <ds-icon icon="trash" class="fc-red"></ds-icon>
           </button>
         </mat-chip-row>
@@ -307,8 +318,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       </mat-label>
       <input
         matInput
-        [placeholder]="placeholder()"
-        [matChipInputFor]="chipGrid"
+        [placeholder]="placeholder()"
+        [matChipInputFor]="chipGrid"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
         (matChipInputTokenEnd)="add($event)"
       />
     </mat-form-field>
@@ -316,7 +329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       @for (keyword of keywords(); track keyword) {
         <mat-chip-row (removed)="remove(keyword)">
           {{ keyword }}
-          <button matChipRemove>
+          <button matChipRemove [disabled]="disabled() || readonly()">
             <ds-icon icon="trash" class="fc-red"></ds-icon>
           </button>
         </mat-chip-row>
@@ -346,21 +359,35 @@ class DatePickerControl extends ControlBase {
     disabledDays = input([], ...(ngDevMode ? [{ debugName: "disabledDays" }] : /* istanbul ignore next */ []));
     minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
     maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
-    calendarDaysFilter = (d) => {
-        const day = (d || new Date()).getDay();
-        return !(this.disabledDays().includes(day));
-    };
     clear(event) {
+        if (this.readonly()) {
+            return;
+        }
         event.stopImmediatePropagation();
         this.ctrl.setValue(null);
         this.propagateValue(null);
         this.emitOnChangeEvent(null);
     }
+    calendarDaysFilter = (d) => {
+        const day = (d || new Date()).getDay();
+        return !(this.disabledDays().includes(day));
+    };
     emit($event) {
+        if (this.readonly()) {
+            return;
+        }
+        this.markAsTouched();
         const selectedDateString = format($event.value, "yyyy-MM-dd");
         this.propagateValue(selectedDateString);
         this.emitOnChangeEvent(selectedDateString);
     }
+    openPicker(picker) {
+        if (this.readonly()) {
+            return;
+        }
+        picker.open();
+        this.markAsTouched();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerControl, isStandalone: true, selector: "iss-ctrl-date-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 } }, providers: [
             DatePipe,
@@ -378,8 +405,9 @@ class DatePickerControl extends ControlBase {
         matInput
         readonly
         [matDatepicker]="picker"
-        (click)="picker.open(); markAsTouched()"
-        [formControl]="ctrl"
+        (click)="openPicker(picker)"
+        [formControl]="ctrl"
+        [readonly]="readonly()"
         [min]="minDate()"
         [max]="maxDate()"
         [matDatepickerFilter]="calendarDaysFilter"
@@ -388,7 +416,7 @@ class DatePickerControl extends ControlBase {
       @if (ctrl.getRawValue()) {
         <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
       }
-      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+      <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
       <mat-datepicker #picker></mat-datepicker>
 
     </mat-form-field>
@@ -412,8 +440,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         matInput
         readonly
         [matDatepicker]="picker"
-        (click)="picker.open(); markAsTouched()"
-        [formControl]="ctrl"
+        (click)="openPicker(picker)"
+        [formControl]="ctrl"
+        [readonly]="readonly()"
         [min]="minDate()"
         [max]="maxDate()"
         [matDatepickerFilter]="calendarDaysFilter"
@@ -422,7 +451,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       @if (ctrl.getRawValue()) {
         <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
       }
-      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+      <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
       <mat-datepicker #picker></mat-datepicker>
 
     </mat-form-field>
@@ -438,20 +467,36 @@ class DateRangePickerControl extends ControlBase {
         start: new FormControl(null),
         end: new FormControl(null),
     });
-    calendarDaysFilter = (d) => {
-        const day = (d || new Date()).getDay();
-        return !(this.disabledDays().includes(day));
-    };
     #sub = new Subscription();
     ngOnInit() {
         this.#sub.add(this.range.valueChanges.subscribe((values) => {
-            if (values.start && values.end) {
-                this.emitValue(this.#getEmissionValue(values.start, values.end));
-                this.onDateRangeObjectChange.emit(this.#getEmissionObject(values.start, values.end));
+            if (this.readonly()) {
+                return;
+            }
+            if (!values.start || !values.end) {
+                // an incomplete range is not a value, clearing one endpoint must clear the form value
+                this.emitValue(null);
+                this.onDateRangeObjectChange.emit(null);
+                return;
             }
+            this.emitValue(this.#getEmissionValue(values.start, values.end));
+            this.onDateRangeObjectChange.emit(this.#getEmissionObject(values.start, values.end));
         }));
     }
+    setDisabledState(isDisabled) {
+        super.setDisabledState(isDisabled);
+        // the template binds `range`, disabling ctrl alone leaves the inputs live
+        if (isDisabled) {
+            this.range.disable({ emitEvent: false });
+        }
+        else {
+            this.range.enable({ emitEvent: false });
+        }
+    }
     clear(event) {
+        if (this.readonly()) {
+            return;
+        }
         event.stopImmediatePropagation();
         this.ctrl.setValue(null);
         this.range.setValue({
@@ -461,19 +506,33 @@ class DateRangePickerControl extends ControlBase {
         this.propagateValue(null);
         this.emitOnChangeEvent(null);
     }
+    openPicker(picker) {
+        if (this.readonly()) {
+            return;
+        }
+        picker.open();
+        this.markAsTouched();
+    }
     writeValue(value) {
-        if (typeof value === "string") {
-            const valArr = value?.split(",");
-            const valObj = {
-                start: valArr[0],
-                end: valArr[1],
-            };
-            this.range.patchValue(valObj, { emitEvent: false });
+        if (typeof value !== "string" || !value) {
+            this.ctrl.setValue(null, { emitEvent: false });
+            this.range.reset({ start: null, end: null }, { emitEvent: false });
+            return;
         }
+        const valArr = value.split(",");
+        const valObj = {
+            start: valArr[0] ?? null,
+            end: valArr[1] ?? null,
+        };
+        this.range.patchValue(valObj, { emitEvent: false });
     }
     ngOnDestroy() {
         this.#sub.unsubscribe();
     }
+    calendarDaysFilter = (d) => {
+        const day = (d || new Date()).getDay();
+        return !(this.disabledDays().includes(day));
+    };
     #getDuration(startDate, endDate) {
         const start = new Date(startDate).getTime();
         const end = new Date(endDate).getTime();
@@ -518,21 +577,23 @@ class DateRangePickerControl extends ControlBase {
       >
         <input
           matStartDate
-          formControlName="start"
+          formControlName="start"
+          [readonly]="readonly()"
           placeholder="dd/mm/yyyy"
-          (click)="picker.open(); markAsTouched()"
+          (click)="openPicker(picker)"
         />
         <input
           matEndDate
-          formControlName="end"
+          formControlName="end"
+          [readonly]="readonly()"
           placeholder="dd/mm/yyyy"
-          (click)="picker.open(); markAsTouched()"
+          (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"></mat-datepicker-toggle>
+      <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
       <mat-date-range-picker #picker></mat-date-range-picker>
 
     </mat-form-field>
@@ -568,21 +629,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       >
         <input
           matStartDate
-          formControlName="start"
+          formControlName="start"
+          [readonly]="readonly()"
           placeholder="dd/mm/yyyy"
-          (click)="picker.open(); markAsTouched()"
+          (click)="openPicker(picker)"
         />
         <input
           matEndDate
-          formControlName="end"
+          formControlName="end"
+          [readonly]="readonly()"
           placeholder="dd/mm/yyyy"
-          (click)="picker.open(); markAsTouched()"
+          (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"></mat-datepicker-toggle>
+      <mat-datepicker-toggle matSuffix [for]="picker" [disabled]="readonly()"></mat-datepicker-toggle>
       <mat-date-range-picker #picker></mat-date-range-picker>
 
     </mat-form-field>
@@ -595,23 +658,32 @@ class TimePickerControl extends ControlBase {
     minTime = input(null, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
     maxTime = input(null, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
     emit(evt) {
+        if (this.readonly()) {
+            return;
+        }
         this.propagateValue(this.#stringifyTime(evt.value));
         this.emitOnChangeEvent(this.#stringifyTime(evt.value));
     }
     clear(event) {
+        if (this.readonly()) {
+            return;
+        }
         event.stopImmediatePropagation();
         this.ctrl.setValue(null);
         this.propagateValue(null);
         this.emitOnChangeEvent(null);
     }
     writeValue(value) {
-        if (value) {
-            const d = new Date();
-            d.setHours(value.split(":")[0]);
-            d.setMinutes(value.split(":")[1]);
-            d.setSeconds(value.split(":")[2] ?? "00");
-            this.ctrl.setValue(d);
+        if (!value) {
+            this.ctrl.setValue(null, { emitEvent: false });
+            return;
         }
+        const parts = String(value).split(":");
+        const d = new Date();
+        d.setHours(Number(parts[0]));
+        d.setMinutes(Number(parts[1]));
+        d.setSeconds(Number(parts[2] ?? "00"));
+        this.ctrl.setValue(d, { emitEvent: false });
     }
     #stringifyTime(value) {
         let formatedTime;
@@ -641,14 +713,15 @@ class TimePickerControl extends ControlBase {
         [formControl]="ctrl"
         [matTimepicker]="picker"
         [matTimepickerMin]="minTime()"
-        [matTimepickerMax]="maxTime()"
+        [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" />
-      <mat-timepicker (selected)="emit($event)" [interval]="interval()" #picker />
+      <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"] }] });
@@ -676,14 +749,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         [formControl]="ctrl"
         [matTimepicker]="picker"
         [matTimepickerMin]="minTime()"
-        [matTimepickerMax]="maxTime()"
+        [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" />
-      <mat-timepicker (selected)="emit($event)" [interval]="interval()" #picker />
+      <mat-timepicker-toggle matIconSuffix [for]="picker" [disabled]="readonly()"/>
+      <mat-timepicker (selected)="emit($event)" [interval]="interval()" #picker/>
 
     </mat-form-field>
   `,
@@ -700,7 +774,20 @@ class DatetimePickerControl extends ControlBase {
     maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
     minTime = input(null, ...(ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []));
     maxTime = input(null, ...(ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []));
+    setDisabledState(isDisabled) {
+        super.setDisabledState(isDisabled);
+        // the template binds `datetimeForm`, disabling ctrl alone leaves the pickers live
+        if (isDisabled) {
+            this.datetimeForm.disable({ emitEvent: false });
+        }
+        else {
+            this.datetimeForm.enable({ emitEvent: false });
+        }
+    }
     emit() {
+        if (this.readonly()) {
+            return;
+        }
         const datetimeStr = this.#stringifyDateTime(this.datetimeForm.getRawValue());
         this.propagateValue(datetimeStr);
         this.emitOnChangeEvent(datetimeStr);
@@ -752,7 +839,7 @@ class DatetimePickerControl extends ControlBase {
             { provide: NG_VALIDATORS, useExisting: DatetimePickerControl, multi: true },
         ], usesInheritance: true, ngImport: i0, template: `
     <form [formGroup]="datetimeForm" class="d-flex flex-row gap-1">
-      <iss-ctrl-date-picker (focusout)="markAsTouched()" [disabledDays]="disabledDays()" [maxDate]="maxDate()" [minDate]="minDate()" formControlName="date" (onChange)="emit()">
+      <iss-ctrl-date-picker (focusout)="markAsTouched()" [disabledDays]="disabledDays()" [maxDate]="maxDate()" [minDate]="minDate()" [readonly]="readonly()" formControlName="date" (onChange)="emit()">
         <label>
           <ng-content select="label"></ng-content>
         </label>
@@ -760,7 +847,8 @@ class DatetimePickerControl extends ControlBase {
       <iss-ctrl-time-picker
         (focusout)="markAsTouched()"
         [maxTime]="maxTime()"
-        [minTime]="minTime()"
+        [minTime]="minTime()"
+        [readonly]="readonly()"
         formControlName="time"
         (onChange)="emit()"
       />
@@ -786,7 +874,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ],
                     template: `
     <form [formGroup]="datetimeForm" class="d-flex flex-row gap-1">
-      <iss-ctrl-date-picker (focusout)="markAsTouched()" [disabledDays]="disabledDays()" [maxDate]="maxDate()" [minDate]="minDate()" formControlName="date" (onChange)="emit()">
+      <iss-ctrl-date-picker (focusout)="markAsTouched()" [disabledDays]="disabledDays()" [maxDate]="maxDate()" [minDate]="minDate()" [readonly]="readonly()" formControlName="date" (onChange)="emit()">
         <label>
           <ng-content select="label"></ng-content>
         </label>
@@ -794,7 +882,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       <iss-ctrl-time-picker
         (focusout)="markAsTouched()"
         [maxTime]="maxTime()"
-        [minTime]="minTime()"
+        [minTime]="minTime()"
+        [readonly]="readonly()"
         formControlName="time"
         (onChange)="emit()"
       />
@@ -910,7 +999,6 @@ class FilePickerControl extends ControlBase {
     attachments = signal([], ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
     #uploadedFilesEffectRef = effect(() => {
         this.#markUploadedFiles();
-        this.filesValue = computed(() => this.#returnAttachmentViewObject());
     }, ...(ngDevMode ? [{ debugName: "#uploadedFilesEffectRef" }] : /* istanbul ignore next */ []));
     /*todo needs review and refactor*/
     ngOnDestroy() {
@@ -927,8 +1015,12 @@ class FilePickerControl extends ControlBase {
     }
     onDelete(files) {
         this.attachments.set(files);
+        this.emitValue(this.#formDataFactory(this.attachments()));
     }
     captureFile($event) {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
         if (!$event) {
             return;
         }
@@ -947,13 +1039,21 @@ class FilePickerControl extends ControlBase {
             };
         });
         this.#updateAttachments(issFiles);
-        const emission = computed(() => this.#formDataFactory(this.attachments()), ...(ngDevMode ? [{ debugName: "emission" }] : /* istanbul ignore next */ []));
-        this.emitOnChangeEvent(emission());
+        // The field component uploads this output.  Emit only the files selected in
+        // this interaction: `attachments` also contains files selected earlier, so
+        // serialising it would upload those files again whenever more are added.
+        this.emitValue(this.#formDataFactory(issFiles));
+    }
+    openFilePicker(input) {
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
+        input.click();
+        this.markAsTouched();
     }
     #updateAttachments(selectedFiles) {
         if (!this.multiple()) {
-            this.attachments.set([]);
-            this.attachments()[0] = selectedFiles[0];
+            this.attachments.set([selectedFiles[0]]);
             return;
         }
         this.attachments.update((files) => {
@@ -1008,7 +1108,7 @@ class FilePickerControl extends ControlBase {
         return {
             config: {
                 showDownloadButton: this.showDownloadButton(),
-                showDeleteButton: this.showDownloadButton()
+                showDeleteButton: this.showDeleteButton()
             },
             ctrlJsonValue: signal(this.attachments())
         };
@@ -1017,20 +1117,21 @@ class FilePickerControl extends ControlBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: FilePickerControl, isStandalone: true, selector: "iss-ctrl-file-picker", inputs: { accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, showDownloadButton: { classPropertyName: "showDownloadButton", publicName: "showDownloadButton", isSignal: true, isRequired: false, transformFunction: null }, showDeleteButton: { classPropertyName: "showDeleteButton", publicName: "showDeleteButton", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null }, uploadedFiles: { classPropertyName: "uploadedFiles", publicName: "uploadedFiles", isSignal: true, isRequired: false, transformFunction: null }, uploadingError: { classPropertyName: "uploadingError", publicName: "uploadingError", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: FilePickerControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: `
-    <ds-file-picker (click)="inputFile.click(); markAsTouched()" (onDrop)="captureFile($event)" droppable>
+    <ds-file-picker (click)="openFilePicker(inputFile)" (onDrop)="captureFile($event)" droppable>
       <input
         #inputFile
         (change)="captureFile($any($event.target).files)"
+        (click)="$event.stopPropagation()"
         [accept]="accept()"
         [formControl]="ctrl"
         [multiple]="multiple()"
+        [disabled]="readonly()"
         [style.display]="'none'"
-        id="file"
         type="file"
       />
     </ds-file-picker>
 
-    <iss-ctrl-hints [hints]="hints()" [touched]="touched()" />
+    <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
     <!--<iss-viewer-attachment (deleteOut)="onDelete($event)" [field]="filesValue()" [uploading]="uploading()"/>-->
   `, isInline: true, styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader --input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: Droppable, selector: "[droppable]", outputs: ["onDrop"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }] });
 }
@@ -1043,20 +1144,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: FilePickerControl, multi: true }
                     ], template: `
-    <ds-file-picker (click)="inputFile.click(); markAsTouched()" (onDrop)="captureFile($event)" droppable>
+    <ds-file-picker (click)="openFilePicker(inputFile)" (onDrop)="captureFile($event)" droppable>
       <input
         #inputFile
         (change)="captureFile($any($event.target).files)"
+        (click)="$event.stopPropagation()"
         [accept]="accept()"
         [formControl]="ctrl"
         [multiple]="multiple()"
+        [disabled]="readonly()"
         [style.display]="'none'"
-        id="file"
         type="file"
       />
     </ds-file-picker>
 
-    <iss-ctrl-hints [hints]="hints()" [touched]="touched()" />
+    <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
     <!--<iss-viewer-attachment (deleteOut)="onDelete($event)" [field]="filesValue()" [uploading]="uploading()"/>-->
   `, styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader --input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.75rem}\n"] }]
         }], propDecorators: { accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], showDownloadButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDownloadButton", required: false }] }], showDeleteButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDeleteButton", required: false }] }], uploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploading", required: false }] }], uploadedFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadedFiles", required: false }] }], uploadingError: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadingError", required: false }] }] } });
@@ -1069,12 +1171,6 @@ class InputControl extends ControlBase {
     suffixText = input("", ...(ngDevMode ? [{ debugName: "suffixText" }] : /* istanbul ignore next */ []));
     onPrefixClick = output();
     onSuffixClick = output();
-    #ctrlChanges = toSignal(this.ctrl.valueChanges);
-    #effect = effect(() => {
-        if (this.#ctrlChanges()) {
-            this.emitValue(this.#ctrlChanges());
-        }
-    }, ...(ngDevMode ? [{ debugName: "#effect" }] : /* istanbul ignore next */ []));
     #disabledEffect = effect(() => {
         if (this.disabled()) {
             this.ctrl.disable();
@@ -1090,7 +1186,6 @@ class InputControl extends ControlBase {
         this.onPrefixClick.emit(this.ctrl.getRawValue());
     }
     ngOnDestroy() {
-        this.#effect.destroy();
         this.#disabledEffect.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -1114,11 +1209,14 @@ class InputControl extends ControlBase {
       <input
         matInput
         (blur)="markAsTouched()"
-        (input)="emitOnChangeEvent()"
+        (input)="emitValue()"
         [formControl]="ctrl"
-        [maxlength]="max()"
-        [minlength]="min()"
-        [placeholder]="placeholder()"
+        [attr.maxlength]="maxLength()"
+        [attr.minlength]="minLength()"
+        [attr.max]="max()"
+        [attr.min]="min()"
+        [placeholder]="placeholder()"
+        [readonly]="readonly()"
         [type]="type()"
       />
       <ng-content select="[issSuffix]"></ng-content>
@@ -1130,9 +1228,9 @@ class InputControl extends ControlBase {
           <ds-icon matSuffix icon="{{suffixIcon()}}"></ds-icon>
         }
       </div>
-      <iss-ctrl-hints [hints]="hints()" />
+      <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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatInputModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatInputModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputControl, decorators: [{
             type: Component,
@@ -1168,11 +1266,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       <input
         matInput
         (blur)="markAsTouched()"
-        (input)="emitOnChangeEvent()"
+        (input)="emitValue()"
         [formControl]="ctrl"
-        [maxlength]="max()"
-        [minlength]="min()"
-        [placeholder]="placeholder()"
+        [attr.maxlength]="maxLength()"
+        [attr.minlength]="minLength()"
+        [attr.max]="max()"
+        [attr.min]="min()"
+        [placeholder]="placeholder()"
+        [readonly]="readonly()"
         [type]="type()"
       />
       <ng-content select="[issSuffix]"></ng-content>
@@ -1184,7 +1285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           <ds-icon matSuffix icon="{{suffixIcon()}}"></ds-icon>
         }
       </div>
-      <iss-ctrl-hints [hints]="hints()" />
+      <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
     </mat-form-field>
   `
                 }]
@@ -3333,7 +3434,6 @@ class MobileControl extends ControlBase {
     preferredCountries = input(["SA"], ...(ngDevMode ? [{ debugName: "preferredCountries" }] : /* istanbul ignore next */ []));
     searchInput = new FormControl("");
     filteredCountries = computed(() => this.#searchInCountries(), ...(ngDevMode ? [{ debugName: "filteredCountries" }] : /* istanbul ignore next */ []));
-    #ctrlChanges = toSignal(this.ctrl.valueChanges);
     #searchQuery = toSignal(this.searchInput.valueChanges);
     #disabledEffect = effect(() => {
         if (this.disabled()) {
@@ -3344,33 +3444,34 @@ class MobileControl extends ControlBase {
         }
     }, ...(ngDevMode ? [{ debugName: "#disabledEffect" }] : /* istanbul ignore next */ []));
     writeValue(value) {
-        if (value) {
-            const mobileObject = this.phoneService.getPhoneNumberObject(value);
-            if (mobileObject) {
-                this.selectedCountry.set(mobileObject);
-                this.emitOnChangeEvent(this.selectedCountry());
-            }
-            this.ctrl.setValue(mobileObject?.nationalNumber);
+        if (!value) {
+            this.selectedCountry.set(DEFAULT_COUNTRY);
+            this.ctrl.setValue(null, { emitEvent: false });
+            return;
+        }
+        const mobileObject = this.phoneService.getPhoneNumberObject(value);
+        if (mobileObject) {
+            this.selectedCountry.set(mobileObject);
         }
+        this.ctrl.setValue(mobileObject?.nationalNumber ?? value, { emitEvent: false });
     }
     emit() {
-        if (this.#ctrlChanges()) {
-            const mobileInput = `+${this.selectedCountry().dailCode}${this.#ctrlChanges()}`;
-            const numberObject = this.phoneService.getPhoneNumberObject(mobileInput);
-            if (numberObject) {
-                this.selectedCountry.set(numberObject);
-                this.propagateValue(`+${numberObject.dailCode}${numberObject.nationalNumber}`);
-                this.emitOnChangeEvent(this.selectedCountry());
-            }
-            else {
-                this.propagateValue(mobileInput);
-                this.emitOnChangeEvent(this.selectedCountry());
-            }
+        const nationalNumber = this.ctrl.getRawValue();
+        if (!nationalNumber) {
+            this.propagateValue(null);
+            this.emitOnChangeEvent(this.selectedCountry());
+            return;
+        }
+        const mobileInput = `+${this.selectedCountry().dailCode}${nationalNumber}`;
+        const numberObject = this.phoneService.getPhoneNumberObject(mobileInput);
+        if (numberObject) {
+            this.selectedCountry.set(numberObject);
+            this.propagateValue(`+${numberObject.dailCode}${numberObject.nationalNumber}`);
         }
         else {
-            this.propagateValue(null);
-            this.emitOnChangeEvent(null);
+            this.propagateValue(mobileInput);
         }
+        this.emitOnChangeEvent(this.selectedCountry());
     }
     validate(control) {
         if (!control.getRawValue()) {
@@ -3405,35 +3506,54 @@ class MobileControl extends ControlBase {
         }
     }
     onSelectCountry(country) {
+        if (this.readonly()) {
+            return;
+        }
         this.selectedCountry.set(country);
         this.searchInput.setValue("");
         this.closeCountryCodeMenu();
-        this.propagateValue(`+${this.selectedCountry().dailCode}${this.#ctrlChanges()}`);
-        this.emitOnChangeEvent(`+${this.selectedCountry().dailCode}${this.#ctrlChanges()}`);
+        const nationalNumber = this.ctrl.getRawValue();
+        if (!nationalNumber) {
+            this.propagateValue(null);
+            this.emitOnChangeEvent(this.selectedCountry());
+            return;
+        }
+        const mobileInput = `+${country.dailCode}${nationalNumber}`;
+        this.propagateValue(mobileInput);
+        this.emitOnChangeEvent(this.selectedCountry());
     }
     closeCountryCodeMenu() {
         this.isOpen.set(false);
     }
     toggleCountryCodeMenu() {
+        if (this.readonly()) {
+            return;
+        }
         this.isOpen.update((isOpen) => !isOpen);
     }
     #sortCountries() {
+        // copies, never the shared COUNTRIES entries: order is per instance and must not leak globally
         return COUNTRIES.map((country) => {
-            if (this.preferredCountries().includes(country.code)) {
-                country.order = country.priority + (-1 * (this.preferredCountries().indexOf(country.code) - this.preferredCountries().length)) * 100;
+            const preferredIndex = this.preferredCountries().indexOf(country.code);
+            if (preferredIndex === -1) {
+                return { ...country };
             }
-            return country;
+            return {
+                ...country,
+                order: country.priority + (-1 * (preferredIndex - this.preferredCountries().length)) * 100,
+            };
         }).sort((a, b) => b.order - a.order);
     }
     #searchInCountries() {
-        if (this.#searchQuery()) {
-            return this.#sortCountries().filter((country) => {
-                return (country.code.toLowerCase().includes(this.#searchQuery())
-                    || country.name.toLowerCase().includes(this.#searchQuery())
-                    || country.dailCode.toLowerCase().includes(this.#searchQuery()));
-            });
-        }
-        return this.#sortCountries();
+        const query = (this.#searchQuery() ?? "").toLowerCase();
+        if (!query) {
+            return this.#sortCountries();
+        }
+        return this.#sortCountries().filter((country) => {
+            return (country.code.toLowerCase().includes(query)
+                || country.name.toLowerCase().includes(query)
+                || country.dailCode.toLowerCase().includes(query));
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MobileControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
     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: [
@@ -3462,7 +3582,8 @@ class MobileControl extends ControlBase {
         (blur)="markAsTouched()"
         (keydown)="onInput($event)"
         (input)="emit()"
-        [formControl]="ctrl"
+        [formControl]="ctrl"
+        [readonly]="readonly()"
         [placeholder]="selectedCountry().placeholder"
       />
     </mat-form-field>
@@ -3477,7 +3598,7 @@ class MobileControl extends ControlBase {
       <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()" />
+            <input matInput id="country-search-box" [formControl]="searchInput" (click)="$event.stopPropagation()"/>
           </mat-form-field>
         </div>
         <ul class="country-list">
@@ -3538,7 +3659,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         (blur)="markAsTouched()"
         (keydown)="onInput($event)"
         (input)="emit()"
-        [formControl]="ctrl"
+        [formControl]="ctrl"
+        [readonly]="readonly()"
         [placeholder]="selectedCountry().placeholder"
       />
     </mat-form-field>
@@ -3553,7 +3675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       <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()" />
+            <input matInput id="country-search-box" [formControl]="searchInput" (click)="$event.stopPropagation()"/>
           </mat-form-field>
         </div>
         <ul class="country-list">
@@ -3603,54 +3725,59 @@ class PlateControl extends ControlBase {
     lettersAr = signal(Array(3).fill(""), ...(ngDevMode ? [{ debugName: "lettersAr" }] : /* istanbul ignore next */ []));
     lettersEn = signal(Array(3).fill(""), ...(ngDevMode ? [{ debugName: "lettersEn" }] : /* istanbul ignore next */ []));
     letterErrors = signal(Array(3).fill(false), ...(ngDevMode ? [{ debugName: "letterErrors" }] : /* istanbul ignore next */ []));
+    #host = inject(ElementRef);
     writeValue(value) {
-        const val = value;
-        if (val) {
-            const parts = val.split("-");
-            const letters = parts[0]?.split("") || [];
-            const numbers = parts[1]?.split("") || [];
-            // Initialize letters
-            const lAr = [];
-            const lEn = [];
-            for (let i = 0; i < 3; i++) {
-                const char = letters[i] || "";
-                if (char) {
-                    const plateLetter = PLATE_LETTERS.find(l => l.value === char || l.label.en === char || l.label.ar === char);
-                    if (plateLetter) {
-                        lAr.push(plateLetter.label.ar);
-                        lEn.push(plateLetter.label.en);
-                    }
-                    else {
-                        lAr.push("");
-                        lEn.push("");
-                    }
+        if (!value) {
+            this.#resetPlate();
+            return;
+        }
+        const parts = value.split("-");
+        const letters = parts[0]?.split("") || [];
+        const numbers = parts[1]?.split("") || [];
+        // Initialize letters
+        const lAr = [];
+        const lEn = [];
+        for (let i = 0; i < 3; i++) {
+            const char = letters[i] || "";
+            if (char) {
+                const plateLetter = PLATE_LETTERS.find(l => l.value === char || l.label.en === char || l.label.ar === char);
+                if (plateLetter) {
+                    lAr.push(plateLetter.label.ar);
+                    lEn.push(plateLetter.label.en);
                 }
                 else {
                     lAr.push("");
                     lEn.push("");
                 }
             }
-            this.lettersAr.set(lAr);
-            this.lettersEn.set(lEn);
-            // Initialize numbers
-            const nAr = [];
-            const nEn = [];
-            for (let i = 0; i < 4; i++) {
-                const char = numbers[i] || "";
-                if (char) {
-                    nAr.push(this.convertDigit(char, "ar"));
-                    nEn.push(this.convertDigit(char, "en"));
-                }
-                else {
-                    nAr.push("");
-                    nEn.push("");
-                }
+            else {
+                lAr.push("");
+                lEn.push("");
+            }
+        }
+        this.lettersAr.set(lAr);
+        this.lettersEn.set(lEn);
+        // Initialize numbers
+        const nAr = [];
+        const nEn = [];
+        for (let i = 0; i < 4; i++) {
+            const char = numbers[i] || "";
+            if (char) {
+                nAr.push(this.convertDigit(char, "ar"));
+                nEn.push(this.convertDigit(char, "en"));
+            }
+            else {
+                nAr.push("");
+                nEn.push("");
             }
-            this.numbersAr.set(nAr);
-            this.numbersEn.set(nEn);
         }
+        this.numbersAr.set(nAr);
+        this.numbersEn.set(nEn);
     }
     onNumberInput(index, event, lang) {
+        if (this.readonly()) {
+            return;
+        }
         const input = event.target;
         let value = input.value;
         // Allow only numbers
@@ -3670,6 +3797,7 @@ class PlateControl extends ControlBase {
             newEn[index] = "";
             this.numbersAr.set(newAr);
             this.numbersEn.set(newEn);
+            this.emitPlate();
             return;
         }
         const arDigits = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧", "٨", "٩"];
@@ -3698,8 +3826,12 @@ class PlateControl extends ControlBase {
         }
         this.numbersAr.set(newAr);
         this.numbersEn.set(newEn);
+        this.emitPlate();
     }
     onLetterInput(index, event, lang) {
+        if (this.readonly()) {
+            return;
+        }
         const input = event.target;
         let value = input.value;
         if (!value) {
@@ -3712,6 +3844,7 @@ class PlateControl extends ControlBase {
             this.lettersAr.set(newAr);
             this.lettersEn.set(newEn);
             this.letterErrors.set(newErrors);
+            this.emitPlate();
             return;
         }
         // Take only the last character
@@ -3752,15 +3885,40 @@ class PlateControl extends ControlBase {
         this.lettersAr.set(newAr);
         this.lettersEn.set(newEn);
         this.letterErrors.set(newErrors);
+        this.emitPlate();
     }
     preventNonDigits($event, ar) {
         if ($event.key.length === 1 && !/^[0-9\u0660-\u0669]$/.test($event.key)) {
             $event.preventDefault();
         }
     }
+    #resetPlate() {
+        this.numbersAr.set(Array(4).fill(""));
+        this.numbersEn.set(Array(4).fill(""));
+        this.lettersAr.set(Array(3).fill(""));
+        this.lettersEn.set(Array(3).fill(""));
+        this.letterErrors.set(Array(3).fill(false));
+        this.ctrl.setValue(null, { emitEvent: false });
+    }
+    emitPlate() {
+        this.markAsTouched();
+        this.emitValue(this.stringifyPlate());
+    }
+    stringifyPlate() {
+        // lettersEn holds PlateLetter.label.en, which equals PlateLetter.value for every entry,
+        // so this round-trips through writeValue and the viewer. Invalid letters are held in the
+        // opposite-language row and serialize as empty.
+        const letters = this.lettersEn().join("");
+        const numbers = this.numbersEn().join("");
+        if (!letters && !numbers) {
+            return null;
+        }
+        return `${letters}-${numbers}`;
+    }
     focusInput(id) {
         setTimeout(() => {
-            const element = document.getElementById(id);
+            // scoped to this host: several plates can be on the same page
+            const element = this.#host.nativeElement.querySelector("[data-plate-input=\"" + id + "\"]");
             if (element) {
                 element.focus();
                 // Optional: Select text so user can overwrite easily if they cycle back
@@ -3792,8 +3950,9 @@ class PlateControl extends ControlBase {
               type="text"
               class="plate-input number-input"
               maxlength="1"
-              [id]="'num-ar-' + $index"
-              [value]="num"
+              [attr.data-plate-input]="'num-ar-' + $index"
+              [value]="num"
+              [readonly]="readonly()"
               placeholder="١"
               (keydown)="preventNonDigits($event, 'ar')"
               (keyup)="preventNonDigits($event, 'ar')"
@@ -3808,8 +3967,9 @@ class PlateControl extends ControlBase {
               type="text"
               class="plate-input number-input"
               maxlength="1"
-              [id]="'num-en-' + $index"
-              [value]="num"
+              [attr.data-plate-input]="'num-en-' + $index"
+              [value]="num"
+              [readonly]="readonly()"
               placeholder="1"
               (keydown)="preventNonDigits($event, 'en')"
               (keyup)="preventNonDigits($event, 'en')"
@@ -3838,9 +3998,10 @@ class PlateControl extends ControlBase {
                 type="text"
                 class="plate-input letter-input"
                 maxlength="1"
-                [id]="'let-ar-' + $index"
+                [attr.data-plate-input]="'let-ar-' + $index"
                 [class.invalid]="letterErrors()[$index]"
-                [value]="letter"
+                [value]="letter"
+                [readonly]="readonly()"
                 placeholder="س"
                 (input)="onLetterInput($index, $event, 'ar')"
               />
@@ -3858,9 +4019,10 @@ class PlateControl extends ControlBase {
                 type="text"
                 class="plate-input letter-input"
                 maxlength="1"
-                [id]="'let-en-' + $index"
+                [attr.data-plate-input]="'let-en-' + $index"
                 [class.invalid]="letterErrors()[$index]"
-                [value]="letter"
+                [value]="letter"
+                [readonly]="readonly()"
                 placeholder="S"
                 (input)="onLetterInput($index, $event, 'en')"
               />
@@ -3898,8 +4060,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
               type="text"
               class="plate-input number-input"
               maxlength="1"
-              [id]="'num-ar-' + $index"
-              [value]="num"
+              [attr.data-plate-input]="'num-ar-' + $index"
+              [value]="num"
+              [readonly]="readonly()"
               placeholder="١"
               (keydown)="preventNonDigits($event, 'ar')"
               (keyup)="preventNonDigits($event, 'ar')"
@@ -3914,8 +4077,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
               type="text"
               class="plate-input number-input"
               maxlength="1"
-              [id]="'num-en-' + $index"
-              [value]="num"
+              [attr.data-plate-input]="'num-en-' + $index"
+              [value]="num"
+              [readonly]="readonly()"
               placeholder="1"
               (keydown)="preventNonDigits($event, 'en')"
               (keyup)="preventNonDigits($event, 'en')"
@@ -3944,9 +4108,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type="text"
                 class="plate-input letter-input"
                 maxlength="1"
-                [id]="'let-ar-' + $index"
+                [attr.data-plate-input]="'let-ar-' + $index"
                 [class.invalid]="letterErrors()[$index]"
-                [value]="letter"
+                [value]="letter"
+                [readonly]="readonly()"
                 placeholder="س"
                 (input)="onLetterInput($index, $event, 'ar')"
               />
@@ -3964,9 +4129,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type="text"
                 class="plate-input letter-input"
                 maxlength="1"
-                [id]="'let-en-' + $index"
+                [attr.data-plate-input]="'let-en-' + $index"
                 [class.invalid]="letterErrors()[$index]"
-                [value]="letter"
+                [value]="letter"
+                [readonly]="readonly()"
                 placeholder="S"
                 (input)="onLetterInput($index, $event, 'en')"
               />
@@ -3993,24 +4159,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class RadioControl extends ControlBase {
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
     writeValue(value) {
-        if (value === null || value === undefined) {
+        if (!value) {
+            this.ctrl.setValue(null, { emitEvent: false });
             return;
         }
+        // single selection mode, only the first value of a comma separated list is honoured
         const values = value.split(",").map((val) => val.trim());
-        if (values.length > 1) {
-            this.emitValue(null);
-            throw new Error("You cannot set multiple values while the control is in single selection mode!");
-        }
-        this.ctrl.setValue(value);
+        this.ctrl.setValue(values[0], { emitEvent: false });
     }
     onRadioChange(value) {
-        this.emitValue(value);
+        if (this.readonly()) {
+            return;
+        }
+        this.markAsTouched();
+        this.ctrl.setValue(value, { emitEvent: false });
+        const selectedOption = this.options().find((option) => option.value === value);
+        // the form keeps the raw value, while (onChange) consumers get the resolved option
+        this.propagateValue(value);
+        this.emitOnChangeEvent(selectedOption ? [selectedOption] : null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadioControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RadioControl, isStandalone: true, selector: "iss-ctrl-radio", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: RadioControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: `
-    <mat-button-toggle-group [hideSingleSelectionIndicator]="true">
+    <mat-button-toggle-group [hideSingleSelectionIndicator]="true" [disabled]="disabled() || readonly()">
       @for (option of options(); track option.value) {
         <mat-button-toggle
           [value]="option.value"
@@ -4035,7 +4207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         { provide: NG_VALUE_ACCESSOR, useExisting: RadioControl, multi: true }
                     ],
                     template: `
-    <mat-button-toggle-group [hideSingleSelectionIndicator]="true">
+    <mat-button-toggle-group [hideSingleSelectionIndicator]="true" [disabled]="disabled() || readonly()">
       @for (option of options(); track option.value) {
         <mat-button-toggle
           [value]="option.value"
@@ -4057,12 +4229,6 @@ class SelectControl extends ControlBase {
     filteredOptions = computed(() => this.#filter(this.query()), ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
     onQueryChange = output();
-    displayFn = (options) => {
-        if (Array.isArray(options) && !this.multiple()) {
-            return options[0]?.label;
-        }
-        return "";
-    };
     optionTemplate = contentChild("optionTemplate", ...(ngDevMode ? [{ debugName: "optionTemplate" }] : /* istanbul ignore next */ []));
     cardViewerTemplate = contentChild("cardViewerTemplate", ...(ngDevMode ? [{ debugName: "cardViewerTemplate" }] : /* istanbul ignore next */ []));
     allSelected = signal(false, ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
@@ -4079,6 +4245,12 @@ class SelectControl extends ControlBase {
             this.ctrl.enable();
         }
     }, ...(ngDevMode ? [{ debugName: "#disabledEffectRef" }] : /* istanbul ignore next */ []));
+    displayFn = (options) => {
+        if (Array.isArray(options) && !this.multiple()) {
+            return options[0]?.label;
+        }
+        return "";
+    };
     /*todo: add pagination for async options*/
     writeValue(value) {
         this.#reset();
@@ -4088,19 +4260,21 @@ class SelectControl extends ControlBase {
         const values = value.split(",").map(val => val.trim());
         let selectedOptions = this.options().filter((option) => values.includes(option.value));
         if (!this.multiple()) {
-            if (selectedOptions.length > 1) {
-                this.#emit();
-                throw new Error("You cannot set multiple values while the control is in single selection mode!");
-            }
-            selectedOptions = selectedOptions.splice(-selectedOptions.length, selectedOptions.length - selectedOptions.length + 1);
+            // single selection mode, only the first matching option is honoured
+            selectedOptions = selectedOptions.slice(0, 1);
         }
+        const next = new Map();
         for (let i = 0; i < selectedOptions.length; i++) {
             const val = selectedOptions[i];
-            this.#addToSelectedOptionsMap(val);
+            next.set(val.value, val);
         }
+        this.selectedOptions.set(next);
         this.ctrl.setValue(selectedOptions);
     }
     captureValue($event) {
+        if (this.readonly()) {
+            return;
+        }
         if ($event?.option.value === "_SELECT_ALL_OPTIONS_") {
             return;
         }
@@ -4108,26 +4282,42 @@ class SelectControl extends ControlBase {
         this.#emit();
     }
     removeFromSelectedOptionsMap(option) {
-        this.selectedOptions().delete(option.value);
-        this.filteredOptions = computed(() => this.#filter(this.query()), ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+        if (this.readonly()) {
+            return;
+        }
+        this.selectedOptions.update((selected) => {
+            const next = new Map(selected);
+            next.delete(option.value);
+            return next;
+        });
         this.allSelected.set(false);
         this.#emit();
     }
     clearSelection() {
+        if (this.readonly()) {
+            return;
+        }
         this.#reset();
         this.allSelected.set(false);
         this.#emit();
     }
     toggleAllSelection() {
+        if (this.readonly()) {
+            return;
+        }
         if (this.selectedOptions().size === this.options().length) {
             this.#reset();
             this.#emit();
             this.allSelected.set(false);
             return;
         }
+        const next = new Map();
         for (let i = 0; i < this.options().length; i++) {
-            this.#addToSelectedOptionsMap(this.options()[i]);
+            const option = this.options()[i];
+            next.set(option.value, option);
         }
+        this.selectedOptions.set(next);
+        this.ctrl.setValue(this.#convertSelectedMapToArray());
         this.allSelected.set(true);
         this.#emit();
     }
@@ -4138,10 +4328,12 @@ class SelectControl extends ControlBase {
     #addToSelectedOptionsMap(option) {
         if (option) {
             const selectedOption = option;
-            if (!this.multiple()) {
-                this.#reset();
-            }
-            this.selectedOptions().set(selectedOption.value, selectedOption);
+            this.selectedOptions.update((selected) => {
+                // single selection replaces the map instead of adding to it
+                const next = this.multiple() ? new Map(selected) : new Map();
+                next.set(selectedOption.value, selectedOption);
+                return next;
+            });
             this.ctrl.setValue(this.#convertSelectedMapToArray());
         }
     }
@@ -4157,18 +4349,16 @@ class SelectControl extends ControlBase {
             return this.options();
         }
         const query = queryString.toLowerCase();
-        const filteredOptions = this.options().filter((option) => {
+        return this.options().filter((option) => {
             return (option.value.toLowerCase().includes(query) || option.label.toLowerCase().includes(query));
         });
-        return JSON.parse(JSON.stringify(filteredOptions));
     }
     #emit() {
         this.propagateValue(this.#stringifySelectedOptions());
         this.emitOnChangeEvent(this.#convertSelectedMapToArray());
     }
     #reset() {
-        this.selectedOptions().clear();
-        this.filteredOptions = computed(() => this.#filter(this.query()), ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+        this.selectedOptions.set(new Map());
         this.ctrl.setValue(null);
     }
     #convertSelectedMapToArray() {
@@ -4183,7 +4373,7 @@ class SelectControl extends ControlBase {
       <mat-label class="fs-16 fc-black">
         <ng-content select="label"></ng-content>
       </mat-label>
-      <input [formControl]="ctrl" [matAutocomplete]="auto" [matChipInputFor]="chipGrid" [placeholder]="placeholder()" class="m-0" matInput />
+      <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>
@@ -4207,7 +4397,7 @@ class SelectControl extends ControlBase {
             <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}" />
+                  <ng-container *ngTemplateOutlet="optionTemplate(); context: { $implicit: option}"/>
                 } @else {
                   {{ option.label }}
                 }
@@ -4231,7 +4421,7 @@ class SelectControl extends ControlBase {
             } @else {
               {{ chip[1].label }}
             }
-            <button matChipRemove [attr.aria-label]="'remove ' + 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>
@@ -4262,7 +4452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
       <mat-label class="fs-16 fc-black">
         <ng-content select="label"></ng-content>
       </mat-label>
-      <input [formControl]="ctrl" [matAutocomplete]="auto" [matChipInputFor]="chipGrid" [placeholder]="placeholder()" class="m-0" matInput />
+      <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>
@@ -4286,7 +4476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             <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}" />
+                  <ng-container *ngTemplateOutlet="optionTemplate(); context: { $implicit: option}"/>
                 } @else {
                   {{ option.label }}
                 }
@@ -4310,7 +4500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             } @else {
               {{ chip[1].label }}
             }
-            <button matChipRemove [attr.aria-label]="'remove ' + 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>
@@ -4322,6 +4512,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 class SlideToggleControl extends ControlBase {
     onSlideToggleChange(checked) {
+        if (this.readonly()) {
+            return;
+        }
+        this.markAsTouched();
         this.emitValue(checked);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
@@ -4329,7 +4523,8 @@ class SlideToggleControl extends ControlBase {
             { provide: NG_VALUE_ACCESSOR, useExisting: SlideToggleControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: `
     <mat-slide-toggle
-      class="d-block" [formControl]="ctrl"
+      class="d-block" [formControl]="ctrl"
+      [disabled]="readonly()"
       (change)="onSlideToggleChange($event.checked)"
     >
     </mat-slide-toggle>
@@ -4345,7 +4540,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ],
                     template: `
     <mat-slide-toggle
-      class="d-block" [formControl]="ctrl"
+      class="d-block" [formControl]="ctrl"
+      [disabled]="readonly()"
       (change)="onSlideToggleChange($event.checked)"
     >
     </mat-slide-toggle>
@@ -4378,15 +4574,16 @@ class TextareaControl extends ControlBase {
         matInput
         [placeholder]="placeholder()"
         [formControl]="ctrl"
-        [maxlength]="max()"
-        [minlength]="min()"
+        [attr.maxlength]="maxLength()"
+        [attr.minlength]="minLength()"
+        [readonly]="readonly()"
         (input)="emitValue()"
         (focusout)="markAsTouched()"
       >
       </textarea>
-      <iss-ctrl-hints [hints]="hints()" />
+      <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
     </mat-form-field>
-  `, isInline: true, dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextareaControl, decorators: [{
             type: Component,
@@ -4414,13 +4611,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         matInput
         [placeholder]="placeholder()"
         [formControl]="ctrl"
-        [maxlength]="max()"
-        [minlength]="min()"
+        [attr.maxlength]="maxLength()"
+        [attr.minlength]="minLength()"
+        [readonly]="readonly()"
         (input)="emitValue()"
         (focusout)="markAsTouched()"
       >
       </textarea>
-      <iss-ctrl-hints [hints]="hints()" />
+      <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
     </mat-form-field>
   `
                 }]
@@ -4431,46 +4629,48 @@ class ToggleButtonControl extends ControlBase {
     selectedOptions = signal(new Map(), ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
     writeValue(value) {
         this.#reset();
-        if (value === null || value === undefined) {
+        if (!value) {
             return;
         }
         const values = value.split(",").map((val) => val.trim());
         const selectedOptions = this.options().filter((option) => values.includes(option.value));
         if (!this.multiple()) {
-            if (selectedOptions.length > 1) {
-                this.emitValue(null);
-                throw new Error("You cannot set multiple values while the control is in single selection mode!");
-            }
-            this.ctrl.setValue(values[0]);
-            this.addToSelectedOptionsMap(this.#selectedOptionsMapFactory([selectedOptions[0]]));
+            // single selection mode, only the first matching option is honoured
+            const selectedOption = selectedOptions[0];
+            this.ctrl.setValue(selectedOption ? selectedOption.value : null, { emitEvent: false });
+            this.addToSelectedOptionsMap(this.#selectedOptionsMapFactory(selectedOption ? [selectedOption] : []));
             return;
         }
         this.addToSelectedOptionsMap(this.#selectedOptionsMapFactory(selectedOptions));
-        this.ctrl.setValue(values);
+        this.ctrl.setValue(selectedOptions.map((option) => option.value), { emitEvent: false });
     }
     addToSelectedOptionsMap(option) {
         if (option) {
-            this.selectedOptions = signal(option, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
+            this.selectedOptions.set(option);
         }
     }
     onToggleButtonChange(checked, value) {
+        if (this.readonly()) {
+            return;
+        }
+        this.markAsTouched();
         if (!this.multiple()) {
-            this.emitValue(value);
+            const selectedOption = this.options().find((o) => o.value === value);
+            this.addToSelectedOptionsMap(this.#selectedOptionsMapFactory(selectedOption ? [selectedOption] : []));
+            this.propagateValue(value);
+            this.emitOnChangeEvent(selectedOption ? [selectedOption] : null);
         }
         else {
             const option = this.options().find((o) => o.value === value);
             if (!option) {
                 return;
             }
-            this.selectedOptions.update((prev) => {
-                const options = prev;
-                if (checked)
-                    options.set(option.value, option);
-                else
-                    options.delete(option.value);
-                return options;
-            });
-            this.getEmissionValue(this.selectedOptions());
+            const options = new Map(this.selectedOptions());
+            if (checked)
+                options.set(option.value, option);
+            else
+                options.delete(option.value);
+            this.getEmissionValue(options);
         }
     }
     stringifySelectedOptions() {
@@ -4481,7 +4681,13 @@ class ToggleButtonControl extends ControlBase {
     }
     getEmissionValue(options) {
         this.addToSelectedOptionsMap(options);
-        this.emitValue(this.stringifySelectedOptions());
+        // the form keeps the stringified values, while (onChange) consumers get the resolved options
+        this.propagateValue(this.stringifySelectedOptions());
+        this.emitOnChangeEvent(this.#convertSelectedMapToArray());
+    }
+    #convertSelectedMapToArray() {
+        const selectedOptions = Array.from(this.selectedOptions().values());
+        return selectedOptions.length ? selectedOptions : null;
     }
     #selectedOptionsMapFactory(selectedOptions) {
         const selectedOptionsMap = new Map();
@@ -4491,15 +4697,16 @@ class ToggleButtonControl extends ControlBase {
         return selectedOptionsMap;
     }
     #reset() {
-        this.selectedOptions().clear();
-        this.ctrl.setValue(null);
+        this.selectedOptions.set(new Map());
+        this.ctrl.setValue(null, { emitEvent: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToggleButtonControl, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToggleButtonControl, isStandalone: true, selector: "iss-ctrl-toggle-button", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: ToggleButtonControl, multi: true }
         ], usesInheritance: true, ngImport: i0, template: `
     <mat-button-toggle-group
-      [formControl]="ctrl"
+      [formControl]="ctrl"
+      [disabled]="readonly()"
       [multiple]=multiple()
       [hideMultipleSelectionIndicator]="true"
       [hideSingleSelectionIndicator]="true"
@@ -4516,7 +4723,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             type: Component,
             args: [{ selector: "iss-ctrl-toggle-button", imports: [MatButtonToggleModule, ReactiveFormsModule], template: `
     <mat-button-toggle-group
-      [formControl]="ctrl"
+      [formControl]="ctrl"
+      [disabled]="readonly()"
       [multiple]=multiple()
       [hideMultipleSelectionIndicator]="true"
       [hideSingleSelectionIndicator]="true"
@@ -4541,28 +4749,28 @@ class FieldAsyncValidation {
 
 class FieldConfig {
     type = signal(undefined, ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    suffix = signal(undefined, ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+    disabled = signal(undefined, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = signal(undefined, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     placeholder = signal(undefined, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    suffix = signal(undefined, ...(ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []));
+    hideLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []));
     multiple = signal(undefined, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    minLength = signal(undefined, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
+    maxLength = signal(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
     min = signal(undefined, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
     max = signal(undefined, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
     minDate = signal(undefined, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
     maxDate = signal(undefined, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
-    minLength = signal(undefined, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
-    maxLength = signal(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
-    allowedFileSize = signal(undefined, ...(ngDevMode ? [{ debugName: "allowedFileSize" }] : /* istanbul ignore next */ []));
-    allowedFileTypes = signal(undefined, ...(ngDevMode ? [{ debugName: "allowedFileTypes" }] : /* istanbul ignore next */ []));
-    readonly = signal(undefined, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
-    disabled = signal(undefined, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     dateFilter = signal(undefined, ...(ngDevMode ? [{ debugName: "dateFilter" }] : /* istanbul ignore next */ []));
     templateId = signal(undefined, ...(ngDevMode ? [{ debugName: "templateId" }] : /* istanbul ignore next */ []));
     templateUrl = signal(undefined, ...(ngDevMode ? [{ debugName: "templateUrl" }] : /* istanbul ignore next */ []));
+    allowedFileSize = signal(undefined, ...(ngDevMode ? [{ debugName: "allowedFileSize" }] : /* istanbul ignore next */ []));
+    allowedFileTypes = signal(undefined, ...(ngDevMode ? [{ debugName: "allowedFileTypes" }] : /* istanbul ignore next */ []));
     maxFilesCount = signal(undefined, ...(ngDevMode ? [{ debugName: "maxFilesCount" }] : /* istanbul ignore next */ []));
     minFilesCount = signal(undefined, ...(ngDevMode ? [{ debugName: "minFilesCount" }] : /* istanbul ignore next */ []));
     maxUsersCount = signal(undefined, ...(ngDevMode ? [{ debugName: "maxUsersCount" }] : /* istanbul ignore next */ []));
     minUsersCount = signal(undefined, ...(ngDevMode ? [{ debugName: "minUsersCount" }] : /* istanbul ignore next */ []));
     showInTableColumns = signal(undefined, ...(ngDevMode ? [{ debugName: "showInTableColumns" }] : /* istanbul ignore next */ []));
-    hideLabel = signal(undefined, ...(ngDevMode ? [{ debugName: "hideLabel" }] : /* istanbul ignore next */ []));
     tableWithFilter = signal(undefined, ...(ngDevMode ? [{ debugName: "tableWithFilter" }] : /* istanbul ignore next */ []));
     tableWithSort = signal(undefined, ...(ngDevMode ? [{ debugName: "tableWithSort" }] : /* istanbul ignore next */ []));
     tableWithPagination = signal(undefined, ...(ngDevMode ? [{ debugName: "tableWithPagination" }] : /* istanbul ignore next */ []));
@@ -4573,11 +4781,13 @@ class FieldConfig {
         this.readonly.set(config?.readonly);
         this.disabled.set(config?.disabled);
         this.multiple.set(config?.multiple);
+        this.hideLabel.set(config?.hideLabel);
         this.min.set(config?.min);
         this.max.set(config?.max);
         this.minDate.set(config?.minDate);
         this.maxDate.set(config?.maxDate);
         this.dateFilter.set(config?.acceptWorkDaysOnly);
+        this.minLength.set(config?.minLength);
         this.maxLength.set(config?.maxLength);
         this.allowedFileSize.set(config?.allowedSize);
         this.allowedFileTypes.set(config?.allowedFileTypes);
@@ -4588,7 +4798,6 @@ class FieldConfig {
         this.maxUsersCount.set(config?.maxUsersCount);
         this.minUsersCount.set(config?.minUsersCount);
         this.showInTableColumns.set(config?.showInTableColumns);
-        this.hideLabel.set(config?.hideLabel);
         this.tableWithFilter.set(config?.tableWithFilter);
         this.tableWithSort.set(config?.tableWithSort);
         this.tableWithPagination.set(config?.tableWithPagination);
@@ -4702,7 +4911,7 @@ class IssField {
             this.label = field.label;
         }
         else {
-            this.label = signal(field.title, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+            this.label = signal(field.label ?? field.title, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         }
         if (isSignal(field.hint)) {
             this.hint = field.hint;
@@ -4732,7 +4941,8 @@ class IssField {
         if (!field.events) {
             field.events = [];
         }
-        this.visible = signal((!field.events.filter((obj) => obj.name === "show" && field.mode === "edit").length), ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        // this.mode() and not field.mode: the caller may have passed a signal
+        this.visible = signal(!field.events.some((obj) => obj.name === "show" && this.mode() === "edit"), ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
         this.events = field.events.map((action) => new FieldEvent(action, loader));
         this.validation = field.validation;
         this.asyncValidation = new FieldAsyncValidation(field.asyncValidation);
@@ -4747,13 +4957,7 @@ class IssField {
         this.apiResponse = new BehaviorSubject(null);
     }
     updateVisibility(value) {
-        this.visible.update((v) => {
-            if (!this.wasVisible) {
-                this.wasVisible = signal(v, ...(ngDevMode ? [{ debugName: "wasVisible" }] : /* istanbul ignore next */ []));
-            }
-            this.wasVisible.set(v);
-            return v;
-        });
+        this.wasVisible.set(this.visible());
         this.visible.set(value);
     }
 }
@@ -4779,7 +4983,58 @@ const VALIDATORS = {
 };
 
 class FormEngine {
-    fields = [];
+    // Fields are stored per host FormGroup, never on the service itself: a single root
+    // FormEngine serves every form on the page, including the nested outlet that
+    // iss-field-table renders against its own tableOutletForm.
+    // The outer WeakMap lets a form's entry be collected with the form. The inner Map is
+    // keyed by the outlet that registered them, so several outlets can share one host form
+    // without overwriting each other, and re-registering the same outlet replaces its own
+    // contribution instead of accumulating stale entries.
+    #registry = new WeakMap();
+    registerFields(form, owner, fields) {
+        this.#registration(form, owner).fields = fields;
+    }
+    // The names an outlet expects to see as controls on the host form. An outlet is ready
+    // once every one of them has been added, so this is registered up front in ngOnInit,
+    // before the fields themselves resolve.
+    registerExpectedFieldNames(form, owner, names) {
+        this.#registration(form, owner).expectedFieldNames = names;
+    }
+    unregisterOutlet(form, owner) {
+        const owners = this.#registry.get(form);
+        if (!owners) {
+            return;
+        }
+        owners.delete(owner);
+        if (!owners.size) {
+            this.#registry.delete(form);
+        }
+    }
+    getFields(form) {
+        return this.#registrations(form).map((registration) => registration.fields).flat();
+    }
+    getExpectedFieldNames(form) {
+        const names = this.#registrations(form).map((registration) => registration.expectedFieldNames).flat();
+        return Array.from(new Set(names));
+    }
+    // Searches nested children too, so a field inside a table can be found from the form
+    // that hosts the table.
+    getField(form, name, fields = this.getFields(form)) {
+        const match = fields.find((field) => field.name === name);
+        if (match) {
+            return match;
+        }
+        return fields
+            .filter((field) => field.children?.length)
+            .reduce((found, field) => found ?? this.getField(form, name, field.children), undefined);
+    }
+    getControlValue(form, name) {
+        const ctrlValue = form.get(name)?.getRawValue();
+        if (ctrlValue !== null && ctrlValue !== undefined && ctrlValue !== "") {
+            return ctrlValue;
+        }
+        return this.getField(form, name)?.value;
+    }
     createValidators(field) {
         if (!this.fieldHasValidation(field)) {
             return [Validators.nullValidator];
@@ -4821,7 +5076,7 @@ class FormEngine {
             return;
         }
         const masterCtrl = form.get(masterName);
-        const masterField = this.fields.find((field) => field.name === masterName);
+        const masterField = this.getField(form, masterName);
         if (!masterField) {
             return;
         }
@@ -4859,6 +5114,26 @@ class FormEngine {
             return true;
         }).every((status) => status);
     }
+    #registrations(form) {
+        const owners = this.#registry.get(form);
+        if (!owners) {
+            return [];
+        }
+        return Array.from(owners.values());
+    }
+    #registration(form, owner) {
+        let owners = this.#registry.get(form);
+        if (!owners) {
+            owners = new Map();
+            this.#registry.set(form, owners);
+        }
+        let registration = owners.get(owner);
+        if (!registration) {
+            registration = { fields: [], expectedFieldNames: [] };
+            owners.set(owner, registration);
+        }
+        return registration;
+    }
     #validatorsToNgValidators(field) {
         return this.#mapNgValidators(field.validation).map((validatorValue) => validatorValue?.fn(field));
     }
@@ -4902,28 +5177,52 @@ const COMPONENTS = {
     textarea: () => Promise.resolve().then(function () { return textarea_field; }).then((c) => c.TextareaField),
     chips: () => Promise.resolve().then(function () { return chips_field; }).then((c) => c.ChipsField),
     plate: () => Promise.resolve().then(function () { return plate_field; }).then((c) => c.PlateField),
-    note: () => import('./iss-ctrl-note.field-CuTQ3YwJ.mjs').then((c) => c.NoteField),
+    note: () => import('./iss-ctrl-note.field-4uLl0oS_.mjs').then((c) => c.NoteField),
     slideToggle: () => Promise.resolve().then(function () { return slideToggle_field; }).then((c) => c.SlideToggleField),
     toggle: () => Promise.resolve().then(function () { return toggleButton_field; }).then((c) => c.ToggleButtonField),
     time: () => Promise.resolve().then(function () { return timePicker_field; }).then((c) => c.TimePickerField),
     mobile: () => Promise.resolve().then(function () { return mobile_field; }).then((c) => c.MobileField),
-    table: () => import('./iss-ctrl-table.field-Bs6l5tWV.mjs').then((c) => c.TableField),
-    userPicker: () => import('./iss-ctrl-user-picker.field-Cx0CCAFC.mjs').then((c) => c.UserPickerField),
-    userPicker2: () => import('./iss-ctrl-user-picker.field-Cx0CCAFC.mjs').then((c) => c.UserPickerField),
+    table: () => import('./iss-ctrl-table.field-kPIwve-M.mjs').then((c) => c.TableField),
+    userPicker: () => import('./iss-ctrl-user-picker.field-l-0bW6lP.mjs').then((c) => c.UserPickerField),
+    userPicker2: () => import('./iss-ctrl-user-picker.field-l-0bW6lP.mjs').then((c) => c.UserPickerField),
 };
 
 const SERVICES = {
-    setValue: () => import('./iss-ctrl-set-value-event-BNNMVIeT.mjs').then((s) => s.SetValueEvent),
+    setValue: () => import('./iss-ctrl-set-value-event-BbEYFBe3.mjs').then((s) => s.SetValueEvent),
     show: () => import('./iss-ctrl-show-event-BcRCwAfo.mjs').then((s) => s.ShowEvent),
-    load: () => import('./iss-ctrl-load-value-event-idouR9ST.mjs').then((s) => s.LoadValueEvent),
-    loadOptions: () => import('./iss-ctrl-load-options-event-BIn0aiHl.mjs').then((s) => s.LoadOptionsEvent),
-    triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-6yh7NOEH.mjs').then((s) => s.TriggerBasedOnJsonValue),
-    replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-Df8ruZtV.mjs').then((s) => s.ReplaceApiKeys),
+    load: () => import('./iss-ctrl-load-value-event-DThpI9BA.mjs').then((s) => s.LoadValueEvent),
+    loadOptions: () => import('./iss-ctrl-load-options-event-ClX9TiiD.mjs').then((s) => s.LoadOptionsEvent),
+    triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-DuLD4SOS.mjs').then((s) => s.TriggerBasedOnJsonValue),
+    replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-BQL9zimJ.mjs').then((s) => s.ReplaceApiKeys),
+};
+
+// Read-only counterpart of COMPONENTS: the component used to render a field's value
+// without an editable control, keyed by the same field types.
+const VIEWERS = {
+    date: () => Promise.resolve().then(function () { return datePicker_viewer; }).then((c) => c.DatePickerViewer),
+    datetime: () => Promise.resolve().then(function () { return datetimePicker_viewer; }).then((c) => c.DatePickerTimeViewer),
+    dateRange: () => Promise.resolve().then(function () { return dateRangePicker_viewer; }).then((c) => c.DateRangePickerViewer),
+    date_range: () => Promise.resolve().then(function () { return dateRangePicker_viewer; }).then((c) => c.DateRangePickerViewer),
+    select: () => Promise.resolve().then(function () { return select_viewer; }).then((c) => c.SelectViewer),
+    input: () => Promise.resolve().then(function () { return input_viewer; }).then((c) => c.InputViewer),
+    text: () => Promise.resolve().then(function () { return input_viewer; }).then((c) => c.InputViewer),
+    checkbox: () => Promise.resolve().then(function () { return checkbox_viewer; }).then((c) => c.CheckboxViewer),
+    file: () => Promise.resolve().then(function () { return attachment_viewer; }).then((c) => c.AttachmentViewer),
+    file2: () => Promise.resolve().then(function () { return attachment_viewer; }).then((c) => c.AttachmentViewer),
+    radio: () => Promise.resolve().then(function () { return radio_viewer; }).then((c) => c.RadioViewer),
+    textarea: () => Promise.resolve().then(function () { return textarea_viewer; }).then((c) => c.TextareaViewer),
+    chips: () => Promise.resolve().then(function () { return chips_viewer; }).then((c) => c.ChipsViewer),
+    plate: () => Promise.resolve().then(function () { return plate_viewer; }).then((c) => c.PlateViewer),
+    slideToggle: () => Promise.resolve().then(function () { return slideToggle_viewer; }).then((c) => c.SlideToggleViewer),
+    toggle: () => Promise.resolve().then(function () { return toggleButton_viewer; }).then((c) => c.ToggleButtonViewer),
+    time: () => Promise.resolve().then(function () { return timePicker_viewer; }).then((c) => c.TimePickerViewer),
+    mobile: () => Promise.resolve().then(function () { return mobile_viewer; }).then((c) => c.MobileViewer),
 };
 
 class Loader {
     #injector = inject(Injector);
     #loadedComponents = new Map();
+    #loadedViewers = new Map();
     #loadedServices = new Map();
     loadComponent(field) {
         const loadedComponent = this.#loadedComponents.get(field.type);
@@ -4934,7 +5233,18 @@ class Loader {
         if (!componentImportFn) {
             return of(null);
         }
-        return this.#createObservableFromPromise(componentImportFn, field.type);
+        return this.#createObservableFromPromise(componentImportFn, field.type, this.#loadedComponents);
+    }
+    loadViewer(type) {
+        const loadedViewer = this.#loadedViewers.get(type);
+        if (loadedViewer) {
+            return of(loadedViewer);
+        }
+        const viewerImportFn = VIEWERS[type];
+        if (!viewerImportFn) {
+            return of(null);
+        }
+        return this.#createObservableFromPromise(viewerImportFn, type, this.#loadedViewers);
     }
     loadService(serviceName) {
         const loadedService = this.#loadedServices.get(serviceName);
@@ -4952,9 +5262,9 @@ class Loader {
             return loadedService;
         });
     }
-    #createObservableFromPromise(componentImportFn, type) {
+    #createObservableFromPromise(componentImportFn, type, cache) {
         return from(componentImportFn()).pipe(tap((component) => {
-            this.#loadedComponents.set(type, component);
+            cache.set(type, component);
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Loader, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -4988,33 +5298,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ name: "FieldDataInjector" }]
         }] });
 
-const outletRegistry = new Map();
 class Outlet {
     ready = output();
     formReady = signal(false, ...(ngDevMode ? [{ debugName: "formReady" }] : /* istanbul ignore next */ []));
     fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
     components = signal(null, ...(ngDevMode ? [{ debugName: "components" }] : /* istanbul ignore next */ []));
     #controlContainer = inject(ControlContainer);
+    #destroyRef = inject(DestroyRef);
     #formEngine = inject(FormEngine);
     #loader = inject(Loader);
-    #effectRef = effect(async () => {
-        const components = await this.#componentsFactory(this.fields());
-        this.components.set(components);
-        if (components) {
-            this.#formEngine.fields = components.map((component) => component.data);
-        }
+    #effectRef = effect((onCleanup) => {
+        // Dynamic imports cannot be cancelled, but an old result must never replace
+        // the components produced for a newer fields input (or a destroyed outlet).
+        let active = true;
+        onCleanup(() => {
+            active = false;
+        });
+        // Remove the previous outlet immediately. This destroys its field components
+        // (which remove their controls in ngOnDestroy) and prevents A's metadata from
+        // being returned while B is still loading.
+        this.components.set(null);
+        this.#formEngine.registerFields(this.hostFormGroup, this, []);
+        void this.#componentsFactory(this.fields()).then((components) => {
+            if (!active) {
+                return;
+            }
+            this.components.set(components);
+            this.#formEngine.registerFields(this.hostFormGroup, this, components.map((component) => component.data));
+        });
     }, ...(ngDevMode ? [{ debugName: "#effectRef" }] : /* istanbul ignore next */ []));
     get hostFormGroup() {
         return this.#controlContainer.control;
     }
     ngOnInit() {
-        if (!this.hostFormGroup.id) {
-            this.hostFormGroup.id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-        }
-        const existingFields = outletRegistry.get(this.hostFormGroup.id) || [];
-        const newFieldNames = this.fields().filter((f) => f.mode() === "edit" || (f.mode() === "view" && f.value)).map((f) => f.name);
-        outletRegistry.set(this.hostFormGroup.id, Array.from(new Set([...existingFields, ...newFieldNames])));
-        this.#listenToHostFormGroupChanges().subscribe((isReady) => {
+        const expectedFieldNames = this.fields()
+            .filter((f) => f.mode() === "edit" || (f.mode() === "view" && f.value))
+            .map((f) => f.name);
+        this.#formEngine.registerExpectedFieldNames(this.hostFormGroup, this, expectedFieldNames);
+        this.#listenToHostFormGroupChanges().pipe(takeUntilDestroyed(this.#destroyRef)).subscribe((isReady) => {
             if (isReady) {
                 this.formReady.set(true);
                 this.ready.emit(true);
@@ -5023,6 +5344,7 @@ class Outlet {
     }
     ngOnDestroy() {
         this.#effectRef.destroy();
+        this.#formEngine.unregisterOutlet(this.hostFormGroup, this);
     }
     async #componentsFactory(fields) {
         const fieldsComponentPromise = fields.map(async (field) => {
@@ -5078,7 +5400,7 @@ class Outlet {
     #listenToHostFormGroupChanges() {
         return this.hostFormGroup.valueChanges.pipe(debounceTime(500), map(() => {
             const controlNames = Object.keys(this.hostFormGroup.getRawValue());
-            const fieldNames = outletRegistry.get(this.hostFormGroup.id);
+            const fieldNames = this.#formEngine.getExpectedFieldNames(this.hostFormGroup);
             const diff = fieldNames.filter((x) => !controlNames.includes(x));
             return diff.length === 0;
         }), first((v) => v));
@@ -5265,7 +5587,8 @@ class ValidationMessageComponent {
     getValidationMessage(error) {
         const errorMessageGenerator = VALIDATION_MESSAGES[error.key];
         if (!errorMessageGenerator) {
-            throw new Error(`THERE IS NO VALIDATION MESSAGE FOR KEY "${error.key}"`);
+            console.warn(`THERE IS NO VALIDATION MESSAGE FOR KEY "${error.key}"`);
+            return error.key;
         }
         return errorMessageGenerator(error.value);
     }
@@ -5442,16 +5765,27 @@ class FieldBase {
     ngOnDestroy() {
         this.#valueChangeEffectRef.destroy();
         this.#eventEffectRef.destroy();
+        this.#removeControlFromForm();
     }
     #addControlToForm() {
         this.ctrl.setValue(this.formEngine.getFieldValue(this.field));
         this.ctrl.setValidators(this.formEngine.createValidators(this.field));
         this.ctrl.setAsyncValidators(this.formEngine.createAsyncValidators(this.field));
+        if (this.field.config.disabled() === true) {
+            this.ctrl.disable({ emitEvent: false });
+        }
         this.form.addControl(this.field.name, this.ctrl);
         if (this.ctrl.getRawValue()) {
             this.ctrl.markAsTouched();
         }
     }
+    // a conditionally rendered field would otherwise leave its control behind on the host
+    // form, keeping it in the form value and in the outlet's readiness diff forever
+    #removeControlFromForm() {
+        if (this.form?.get(this.field.name) === this.ctrl) {
+            this.form.removeControl(this.field.name);
+        }
+    }
     #initiateEvents() {
         // todo don't start events in view mode, just set value
         if (this.field.events && this.field.events.length) {
@@ -5513,17 +5847,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+var input_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    InputViewer: InputViewer
+});
+
 class InputField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: InputField, isStandalone: true, selector: "iss-field-input", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-input [formControlName]="field.name" [type]="field.config.type() ?? ''" [placeholder]="field.config.placeholder() ?? ''" [min]="field.config.min() ?? null" [max]="field.config.max() ?? null">
+        <iss-ctrl-input
+          [formControlName]="field.name"
+          [type]="field.config.type() ?? ''"
+          [placeholder]="field.config.placeholder() ?? ''"
+          [min]="field.config.min() ?? null"
+          [max]="field.config.max() ?? null"
+          [readonly]="field.config.readonly() ?? false"
+          [minLength]="field.config.minLength() ?? null"
+          [maxLength]="field.config.maxLength() ?? null"
+        >
           <label>{{ field.label() }}</label>
         </iss-ctrl-input>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-input [field]="field" />
+        <iss-viewer-input [field]="field"/>
       }
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputControl, selector: "iss-ctrl-input", inputs: ["type", "prefixIcon", "prefixText", "suffixIcon", "suffixText"], outputs: ["onPrefixClick", "onSuffixClick"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: InputViewer, selector: "iss-viewer-input" }], viewProviders: [VIEW_PROVIDER] });
@@ -5542,12 +5890,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-input [formControlName]="field.name" [type]="field.config.type() ?? ''" [placeholder]="field.config.placeholder() ?? ''" [min]="field.config.min() ?? null" [max]="field.config.max() ?? null">
+        <iss-ctrl-input
+          [formControlName]="field.name"
+          [type]="field.config.type() ?? ''"
+          [placeholder]="field.config.placeholder() ?? ''"
+          [min]="field.config.min() ?? null"
+          [max]="field.config.max() ?? null"
+          [readonly]="field.config.readonly() ?? false"
+          [minLength]="field.config.minLength() ?? null"
+          [maxLength]="field.config.maxLength() ?? null"
+        >
           <label>{{ field.label() }}</label>
         </iss-ctrl-input>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-input [field]="field" />
+        <iss-viewer-input [field]="field"/>
       }
     }
   `
@@ -5575,17 +5932,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+var textarea_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TextareaViewer: TextareaViewer
+});
+
 class TextareaField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextareaField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TextareaField, isStandalone: true, selector: "iss-field-textarea", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-textarea [formControlName]="field.name" [min]="field.config.min() ?? null" [max]="field.config.max() ?? null">
+        <iss-ctrl-textarea [formControlName]="field.name" [minLength]="field.config.minLength() ?? null" [maxLength]="field.config.maxLength() ?? null" [readonly]="field.config.readonly() ?? false">
           <label>{{ field.label() }}</label>
         </iss-ctrl-textarea>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-textarea [field]="field" />
+        <iss-viewer-textarea [field]="field"/>
       }
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextareaControl, selector: "iss-ctrl-textarea" }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: TextareaViewer, selector: "iss-viewer-textarea" }], viewProviders: [VIEW_PROVIDER] });
@@ -5604,12 +5966,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-textarea [formControlName]="field.name" [min]="field.config.min() ?? null" [max]="field.config.max() ?? null">
+        <iss-ctrl-textarea [formControlName]="field.name" [minLength]="field.config.minLength() ?? null" [maxLength]="field.config.maxLength() ?? null" [readonly]="field.config.readonly() ?? false">
           <label>{{ field.label() }}</label>
         </iss-ctrl-textarea>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-textarea [field]="field" />
+        <iss-viewer-textarea [field]="field"/>
       }
     }
   `
@@ -5652,17 +6014,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+var chips_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ChipsViewer: ChipsViewer
+});
+
 class ChipsField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChipsField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ChipsField, isStandalone: true, selector: "iss-field-chips", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-chips [formControlName]="field.name"><label>{{ field.label() }}</label></iss-ctrl-chips>
+        <iss-ctrl-chips [formControlName]="field.name" [readonly]="field.config.readonly() ?? false"><label>{{ field.label() }}</label></iss-ctrl-chips>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-chips [field]="field" />
+        <iss-viewer-chips [field]="field"/>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChipsControl, selector: "iss-ctrl-chips" }, { kind: "component", type: ChipsViewer, selector: "iss-viewer-chips" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChipsControl, selector: "iss-ctrl-chips" }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: ChipsViewer, selector: "iss-viewer-chips" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChipsField, decorators: [{
             type: Component,
@@ -5672,14 +6040,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         ChipsControl,
+                        ValidationMessageComponent,
                         ChipsViewer
                     ],
                     template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-chips [formControlName]="field.name"><label>{{ field.label() }}</label></iss-ctrl-chips>
+        <iss-ctrl-chips [formControlName]="field.name" [readonly]="field.config.readonly() ?? false"><label>{{ field.label() }}</label></iss-ctrl-chips>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-chips [field]="field" />
+        <iss-viewer-chips [field]="field"/>
       }
     }
   `
@@ -5715,6 +6085,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+var radio_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    RadioViewer: RadioViewer
+});
+
 class RadioField extends FieldBase {
     onChange($event) {
         this.field.ctrlJsonValue.set($event);
@@ -5723,18 +6098,19 @@ class RadioField extends FieldBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RadioField, isStandalone: true, selector: "iss-field-radio", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       <div style="display: flex; flex-direction: column">
-        @if (!(field.config.hideLabel)) {
+        @if (!field.config.hideLabel()) {
           <mat-label>{{ field.label() }}</mat-label>
         }
 
         @if (field.mode() === "edit") {
-          <iss-ctrl-radio [formControlName]="field.name" [options]="field.options()" (onChange)="onChange($event)" />
+          <iss-ctrl-radio [formControlName]="field.name" [options]="field.options()" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
+          <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
         } @else {
-          <iss-viewer-radio [field]="field" />
+          <iss-viewer-radio [field]="field"/>
         }
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: RadioControl, selector: "iss-ctrl-radio", inputs: ["options"] }, { kind: "component", type: RadioViewer, selector: "iss-viewer-radio" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: RadioControl, selector: "iss-ctrl-radio", inputs: ["options"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: RadioViewer, selector: "iss-viewer-radio" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadioField, decorators: [{
             type: Component,
@@ -5745,19 +6121,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ReactiveFormsModule,
                         MatLabel,
                         RadioControl,
+                        ValidationMessageComponent,
                         RadioViewer
                     ],
                     template: `
     @if (field.visible()) {
       <div style="display: flex; flex-direction: column">
-        @if (!(field.config.hideLabel)) {
+        @if (!field.config.hideLabel()) {
           <mat-label>{{ field.label() }}</mat-label>
         }
 
         @if (field.mode() === "edit") {
-          <iss-ctrl-radio [formControlName]="field.name" [options]="field.options()" (onChange)="onChange($event)" />
+          <iss-ctrl-radio [formControlName]="field.name" [options]="field.options()" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
+          <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
         } @else {
-          <iss-viewer-radio [field]="field" />
+          <iss-viewer-radio [field]="field"/>
         }
       </div>
     }
@@ -5794,6 +6172,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+var select_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SelectViewer: SelectViewer
+});
+
 class SelectField extends FieldBase {
     onChange($event) {
         this.field.ctrlJsonValue.set($event);
@@ -5802,14 +6185,15 @@ class SelectField extends FieldBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SelectField, isStandalone: true, selector: "iss-field-select", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-select [formControlName]="field.name" [options]="field.options()" [multiple]="field.config.multiple()" (onChange)="onChange($event)">
+        <iss-ctrl-select [formControlName]="field.name" [options]="field.options()" [multiple]="field.config.multiple()" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)">
           <label>{{ field.label() }}</label>
         </iss-ctrl-select>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-select [field]="field" />
+        <iss-viewer-select [field]="field"/>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectControl, selector: "iss-ctrl-select", inputs: ["options", "height", "loading"], outputs: ["onQueryChange"] }, { kind: "component", type: SelectViewer, selector: "iss-viewer-select" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectControl, selector: "iss-ctrl-select", inputs: ["options", "height", "loading"], outputs: ["onQueryChange"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: SelectViewer, selector: "iss-viewer-select" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectField, decorators: [{
             type: Component,
@@ -5819,16 +6203,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         SelectControl,
+                        ValidationMessageComponent,
                         SelectViewer
                     ],
                     template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-select [formControlName]="field.name" [options]="field.options()" [multiple]="field.config.multiple()" (onChange)="onChange($event)">
+        <iss-ctrl-select [formControlName]="field.name" [options]="field.options()" [multiple]="field.config.multiple()" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)">
           <label>{{ field.label() }}</label>
         </iss-ctrl-select>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-select [field]="field" />
+        <iss-viewer-select [field]="field"/>
       }
     }
   `
@@ -5856,16 +6242,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+var mobile_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    MobileViewer: MobileViewer
+});
+
 class MobileField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MobileField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: MobileField, isStandalone: true, selector: "iss-field-mobile", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-mobile [formControlName]="field.name">
+        <iss-ctrl-mobile [formControlName]="field.name" [readonly]="field.config.readonly() ?? false">
           <label>{{ field.label() }}</label>
         </iss-ctrl-mobile>
       } @else {
-        <iss-viewer-mobile [field]="field" />
+        <iss-viewer-mobile [field]="field"/>
       }
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MobileControl, selector: "iss-ctrl-mobile", inputs: ["preferredCountries"] }, { kind: "component", type: MobileViewer, selector: "iss-viewer-mobile" }], viewProviders: [VIEW_PROVIDER] });
@@ -5883,11 +6274,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-mobile [formControlName]="field.name">
+        <iss-ctrl-mobile [formControlName]="field.name" [readonly]="field.config.readonly() ?? false">
           <label>{{ field.label() }}</label>
         </iss-ctrl-mobile>
       } @else {
-        <iss-viewer-mobile [field]="field" />
+        <iss-viewer-mobile [field]="field"/>
       }
     }
   `
@@ -5924,24 +6315,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+var checkbox_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CheckboxViewer: CheckboxViewer
+});
+
 class CheckboxField extends FieldBase {
     updateField($event) {
-        this.field.jsonValue = $event;
+        this.field.ctrlJsonValue.set($event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CheckboxField, isStandalone: true, selector: "iss-field-checkbox", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-checkbox [formControlName]="field.name" [options]="field.options()" (onChange)="updateField($event)">
-          @if (!(field.config.hideLabel)) {
+        <iss-ctrl-checkbox [formControlName]="field.name" [options]="field.options()" [readonly]="field.config.readonly() ?? false" (onChange)="updateField($event)">
+          @if (!field.config.hideLabel()) {
             <label>{{ field.label() }}</label>
           }
         </iss-ctrl-checkbox>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-checkbox [field]="field" />
+        <iss-viewer-checkbox [field]="field"/>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CheckboxControl, selector: "iss-ctrl-checkbox", inputs: ["options"] }, { kind: "component", type: CheckboxViewer, selector: "iss-viewer-checkbox" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CheckboxControl, selector: "iss-ctrl-checkbox", inputs: ["options"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: CheckboxViewer, selector: "iss-viewer-checkbox" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxField, decorators: [{
             type: Component,
@@ -5951,18 +6348,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         CheckboxControl,
+                        ValidationMessageComponent,
                         CheckboxViewer
                     ],
                     template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-checkbox [formControlName]="field.name" [options]="field.options()" (onChange)="updateField($event)">
-          @if (!(field.config.hideLabel)) {
+        <iss-ctrl-checkbox [formControlName]="field.name" [options]="field.options()" [readonly]="field.config.readonly() ?? false" (onChange)="updateField($event)">
+          @if (!field.config.hideLabel()) {
             <label>{{ field.label() }}</label>
           }
         </iss-ctrl-checkbox>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-checkbox [field]="field" />
+        <iss-viewer-checkbox [field]="field"/>
       }
     }
   `
@@ -5998,6 +6397,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+var toggleButton_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ToggleButtonViewer: ToggleButtonViewer
+});
+
 class ToggleButtonField extends FieldBase {
     onChange($event) {
         this.field.ctrlJsonValue.set($event);
@@ -6005,21 +6409,23 @@ class ToggleButtonField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToggleButtonField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToggleButtonField, isStandalone: true, selector: "iss-field-toggle-button", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
-      @if (!(field.config.hideLabel)) {
+      @if (!field.config.hideLabel()) {
         <mat-label>{{ field.label() }}</mat-label>
       }
       @if (field.mode() === "edit") {
         <iss-ctrl-toggle-button
           [formControlName]="field.name"
-          [options]="field.options()"
-          [multiple]="field.config.multiple()"
+          [options]="field.options()"
+          [multiple]="field.config.multiple()"
+          [readonly]="field.config.readonly() ?? false"
           (onChange)="onChange($event)"
         />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-toggle-button [field]="field" />
+        <iss-viewer-toggle-button [field]="field"/>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: ToggleButtonControl, selector: "iss-ctrl-toggle-button", inputs: ["options"] }, { kind: "component", type: ToggleButtonViewer, selector: "iss-viewer-toggle-button" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: ToggleButtonControl, selector: "iss-ctrl-toggle-button", inputs: ["options"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: ToggleButtonViewer, selector: "iss-viewer-toggle-button" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToggleButtonField, decorators: [{
             type: Component,
@@ -6030,22 +6436,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ReactiveFormsModule,
                         MatLabel,
                         ToggleButtonControl,
+                        ValidationMessageComponent,
                         ToggleButtonViewer
                     ],
                     template: `
     @if (field.visible()) {
-      @if (!(field.config.hideLabel)) {
+      @if (!field.config.hideLabel()) {
         <mat-label>{{ field.label() }}</mat-label>
       }
       @if (field.mode() === "edit") {
         <iss-ctrl-toggle-button
           [formControlName]="field.name"
-          [options]="field.options()"
-          [multiple]="field.config.multiple()"
+          [options]="field.options()"
+          [multiple]="field.config.multiple()"
+          [readonly]="field.config.readonly() ?? false"
           (onChange)="onChange($event)"
         />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-toggle-button [field]="field" />
+        <iss-viewer-toggle-button [field]="field"/>
       }
     }
   `
@@ -6058,9 +6467,13 @@ var toggleButton_field = /*#__PURE__*/Object.freeze({
 });
 
 class SlideToggleViewer extends ViewerBase {
+    // the control writes a boolean, while a value coming from the server is a string
+    isChecked(value) {
+        return value === true || value === "true";
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleViewer, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SlideToggleViewer, isStandalone: true, selector: "iss-viewer-slide-toggle", usesInheritance: true, ngImport: i0, template: `
-    @if (field().ctrlValue() === 'true') {
+    @if (isChecked(field().ctrlValue())) {
       {{ field().label() + ' Yes' }}
     } @else {
       {{ field().label() + ' No' }}
@@ -6072,7 +6485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     selector: "iss-viewer-slide-toggle",
                     template: `
-    @if (field().ctrlValue() === 'true') {
+    @if (isChecked(field().ctrlValue())) {
       {{ field().label() + ' Yes' }}
     } @else {
       {{ field().label() + ' No' }}
@@ -6081,41 +6494,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+var slideToggle_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SlideToggleViewer: SlideToggleViewer
+});
+
 class SlideToggleField extends FieldBase {
     onChange($event) {
-        this.field.jsonValue = $event;
+        this.field.ctrlJsonValue.set($event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SlideToggleField, isStandalone: true, selector: "iss-field-slide-toggle", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
-      @if (!(field.config.hideLabel)) {
+      @if (!field.config.hideLabel()) {
         <mat-label>{{ field.label() }}</mat-label>
       }
 
       @if (field.mode() === "edit") {
-        <iss-ctrl-slide-toggle [formControlName]="field.name" (onChange)="onChange($event)" />
+        <iss-ctrl-slide-toggle [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-slide-toggle [field]="field" />
+        <iss-viewer-slide-toggle [field]="field"/>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: SlideToggleControl, selector: "iss-ctrl-slide-toggle" }, { kind: "component", type: SlideToggleViewer, selector: "iss-viewer-slide-toggle" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: SlideToggleControl, selector: "iss-ctrl-slide-toggle" }, { kind: "component", type: SlideToggleViewer, selector: "iss-viewer-slide-toggle" }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleField, decorators: [{
             type: Component,
             args: [{
                     selector: "iss-field-slide-toggle",
                     viewProviders: [VIEW_PROVIDER],
-                    imports: [ReactiveFormsModule, MatLabel, SlideToggleControl, SlideToggleViewer],
+                    imports: [ReactiveFormsModule, MatLabel, SlideToggleControl, SlideToggleViewer, ValidationMessageComponent],
                     template: `
     @if (field.visible()) {
-      @if (!(field.config.hideLabel)) {
+      @if (!field.config.hideLabel()) {
         <mat-label>{{ field.label() }}</mat-label>
       }
 
       @if (field.mode() === "edit") {
-        <iss-ctrl-slide-toggle [formControlName]="field.name" (onChange)="onChange($event)" />
+        <iss-ctrl-slide-toggle [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-slide-toggle [field]="field" />
+        <iss-viewer-slide-toggle [field]="field"/>
       }
     }
   `
@@ -6299,6 +6719,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".plate-container{width:600px;height:130px;border:4px solid #1D252D;border-radius:10px;background:#fff;display:flex;box-shadow:0 4px 10px #0003;overflow:hidden;position:relative}.section{display:flex;flex-direction:column;justify-content:center;align-items:center}.numbers-section{flex:2;padding:0 10px}.digit-row{display:flex;justify-content:space-between;width:80%;font-size:38px;line-height:1;color:#1d252d;margin:2px 0}.emblem-section{flex:1.2;padding:10px}.emblem-svg{width:100%;height:100%;max-height:90px}.letters-section{flex:1.8;border-right:2px solid #1D252D;padding:0 10px}.arabic-row{font-family:Noto Sans Arabic,sans-serif;font-size:32px;display:flex;justify-content:space-around;width:100%;margin-bottom:5px;color:#1d252d}.english-row{font-size:38px;display:flex;justify-content:space-around;width:100%;color:#1d252d}.ksa-strip{width:50px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:10px 0;background-color:#fff}.mini-emblem{width:25px;height:auto}.ksa-text{writing-mode:vertical-rl;text-orientation:upright;font-weight:900;font-size:16px;letter-spacing:2px;color:#1d252d;margin-top:auto;margin-bottom:5px}.plate-input{background:transparent;border:none;text-align:center;font-family:inherit;font-size:inherit;font-weight:700;color:#1d252d;width:100%;padding:0;margin:0;outline:none}.plate-input:focus{border-bottom:2px solid #1D252D}.digit-row,.arabic-row,.english-row{display:flex;justify-content:space-between;width:100%}.number-input,.letter-input{flex:1}.plate-input::placeholder{color:#ccc;opacity:1}.input-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;flex:1}.error-tooltip{position:absolute;bottom:-15px;font-size:10px;color:red;white-space:nowrap}.plate-input.invalid{color:red}\n"] }]
         }] });
 
+var plate_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    PlateViewer: PlateViewer
+});
+
 class PlateField extends FieldBase {
     updateField($event) {
         this.field.ctrlJsonValue.set($event);
@@ -6306,17 +6731,18 @@ class PlateField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PlateField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PlateField, isStandalone: true, selector: "iss-field-plate-number", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
-      @if (!(field.config.hideLabel)) {
+      @if (!field.config.hideLabel()) {
         <mat-label>{{ field.label() }}</mat-label>
       }
 
       @if (field.mode() === "edit") {
-        <iss-ctrl-plate-number [formControlName]="field.name" (onChange)="updateField($event)" />
+        <iss-ctrl-plate-number [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="updateField($event)"/>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-plate [field]="field" />
+        <iss-viewer-plate [field]="field"/>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PlateControl, selector: "iss-ctrl-plate-number" }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: PlateViewer, selector: "iss-viewer-plate" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PlateControl, selector: "iss-ctrl-plate-number" }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: PlateViewer, selector: "iss-viewer-plate" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PlateField, decorators: [{
             type: Component,
@@ -6326,19 +6752,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         PlateControl,
+                        ValidationMessageComponent,
                         MatLabel,
                         PlateViewer
                     ],
                     template: `
     @if (field.visible()) {
-      @if (!(field.config.hideLabel)) {
+      @if (!field.config.hideLabel()) {
         <mat-label>{{ field.label() }}</mat-label>
       }
 
       @if (field.mode() === "edit") {
-        <iss-ctrl-plate-number [formControlName]="field.name" (onChange)="updateField($event)" />
+        <iss-ctrl-plate-number [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="updateField($event)"/>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-plate [field]="field" />
+        <iss-viewer-plate [field]="field"/>
       }
     }
   `
@@ -6452,6 +6880,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
   `, schemas: [CUSTOM_ELEMENTS_SCHEMA], styles: [".insideTableStyle{width:272px}.files-list{--file-item-width: 270px;display:grid;grid-template-columns:repeat(auto-fill,var(--file-item-width));grid-gap:.5rem}@media(max-width:768px){.files-list{grid-template-columns:repeat(auto-fill,minmax(var(--file-item-width),1fr))}}.mat-mdc-progress-bar{--mat-progress-bar-active-indicator-color: var(--purple);--mat-progress-bar-track-color: rgba(var(--rgb-purple), .25)}.file-item-container .file-item{--file-bg: var(--off-white);--file-radius: var(--box-radius);--icon-color: var(--purple);--icon-size: 2rem;--file-border: transparent;display:flex;align-items:center;background-color:var(--file-bg);border:1px solid var(--file-border);border-radius:var(--file-radius);padding:0 1rem;height:70px;gap:.75rem}.file-item-container .file-item.error{--file-bg: rgba(var(--rgb-red), 10%);--file-border: var(--red);--icon-color: var(--red)}.file-item-container .file-item .icon{color:var(--icon-color);font-size:var(--icon-size)}.file-item-container .file-item .file-action{display:flex;align-items:center;gap:.5rem}ds-attachments::part(base){--file-width: 250px}\n"] }]
         }], propDecorators: { uploading: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploading", required: false }] }], uploadingError: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadingError", required: false }] }], deleteOut: [{ type: i0.Output, args: ["deleteOut"] }] } });
 
+var attachment_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AttachmentViewer: AttachmentViewer
+});
+
 const ATTACHMENT_UPLOAD_URL = new InjectionToken("ATTACHMENT UPLOAD URL");
 const ATTACHMENT_UPLOAD_RESPONSE_MAPPER = new InjectionToken("Map backend response to required response interface.");
 const ATTACHMENT_DOWNLOAD_URL = new InjectionToken("Attachment download URL");
@@ -6477,9 +6910,8 @@ class FileHandler {
     #units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
     upload(data) {
         const url = this.ATTACHMENT_UPLOAD_URL;
-        return this.#http.post(url, data, {
-            headers: { "Content-Type": "multipart/form-data" },
-        }).pipe(map((res) => this.attachmentAdapter(res)));
+        // no Content-Type header: the browser adds it with the FormData boundary
+        return this.#http.post(url, data).pipe(map((res) => this.attachmentAdapter(res)));
     }
     formDataFactory(files, multiple) {
         if (files.length === 0) {
@@ -6572,17 +7004,30 @@ class FilePickerField extends FieldBase {
     viewField = computed(() => this.#generateViewField(this.field.ctrlJsonValue()), ...(ngDevMode ? [{ debugName: "viewField" }] : /* istanbul ignore next */ []));
     attachments = signal([], ...(ngDevMode ? [{ debugName: "attachments" }] : /* istanbul ignore next */ []));
     uploadingError = signal(undefined, ...(ngDevMode ? [{ debugName: "uploadingError" }] : /* istanbul ignore next */ []));
+    accept = this.#acceptFactory();
+    // the ids the picker already holds files for; without it the effect would re-download
+    // the very files captureFile just uploaded, since it writes them back into ctrl
+    #hydratedValue = null;
     #valueEffect = effect(() => {
-        if (this.ctrlValueChange() && this.field.value) {
-            this.fileHandlerService.fetchFiles(this.ctrlValueChange()).subscribe((res) => {
-                const filesOnly = res.map((attachment) => attachment.file);
-                const formDataValue = this.fileHandlerService.formDataFactory(filesOnly, !!this.field.config.multiple());
-                this.picker.setValue(formDataValue);
-                this.field.ctrlJsonValue.set(res);
-            });
+        const value = this.ctrlValueChange();
+        if (!value || !this.field.value || value === this.#hydratedValue) {
+            return;
         }
+        this.#hydratedValue = value;
+        this.fileHandlerService.fetchFiles(value)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((res) => {
+            const filesOnly = res.map((attachment) => attachment.file);
+            const formDataValue = this.fileHandlerService.formDataFactory(filesOnly, !!this.field.config.multiple());
+            this.attachments.set(res);
+            this.picker.setValue(formDataValue);
+            this.field.ctrlJsonValue.set(res);
+        });
     }, ...(ngDevMode ? [{ debugName: "#valueEffect" }] : /* istanbul ignore next */ []));
     captureFile(formData) {
+        if (!formData) {
+            return;
+        }
         this.uploading.set(true);
         const notUploadedFiles = this.#getNotUploadedFiles(formData);
         if (this.fileHandlerService.formDataHasValue(notUploadedFiles)) {
@@ -6592,9 +7037,16 @@ class FilePickerField extends FieldBase {
                 console.error(err);
                 return EMPTY;
             })).subscribe((res) => {
-                this.attachments.set(res);
+                this.attachments.update((attachments) => {
+                    if (!this.field.config.multiple()) {
+                        return res;
+                    }
+                    return [...attachments, ...res];
+                });
                 const stringifiedValue = this.stringifyIssAttachment(this.attachments());
+                this.#hydratedValue = stringifiedValue;
                 this.ctrl.setValue(stringifiedValue);
+                this.field.ctrlJsonValue.set(this.attachments());
                 this.uploading.set(false);
             });
         }
@@ -6609,6 +7061,20 @@ class FilePickerField extends FieldBase {
         super.ngOnDestroy();
         this.#valueEffect.destroy();
     }
+    // the outlet rewrites every validation entry into {fn, value}, so the extensions live under value
+    #acceptFactory() {
+        const fileType = this.field.validation?.["fileType"];
+        const extensions = fileType && fileType.hasOwnProperty("fn") ? fileType.value : fileType;
+        if (!extensions) {
+            return "";
+        }
+        const list = Array.isArray(extensions) ? extensions : String(extensions).split(",");
+        return list
+            .map((extension) => extension.trim())
+            .filter((extension) => !!extension)
+            .map((extension) => extension.startsWith(".") ? extension : `.${extension}`)
+            .join(",");
+    }
     #generateViewField(value) {
         return {
             config: {
@@ -6639,16 +7105,17 @@ class FilePickerField extends FieldBase {
         <!-- [showDeleteButton]="field.config.showDeleteButton" [showDownloadButton]="field.config.showDownloadButton"-->
         <iss-ctrl-file-picker
           [formControl]="picker"
-          [accept]="field.validation.fileType"
+          [accept]="accept"
           (onChange)="captureFile($event)"
-          [multiple]="field.config.multiple()"
+          [multiple]="field.config.multiple()"
+          [readonly]="field.config.readonly() ?? false"
           [uploading]="uploading()"
           [uploadedFiles]="attachments()"
           [uploadingError]="uploadingError()"
         />
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="ctrl.touched" />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="ctrl.touched"/>
       } @else {
-        <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()" />
+        <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()"/>
       }
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FilePickerControl, selector: "iss-ctrl-file-picker", inputs: ["accept", "showDownloadButton", "showDeleteButton", "uploading", "uploadedFiles", "uploadingError"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: AttachmentViewer, selector: "iss-viewer-attachment", inputs: ["uploading", "uploadingError"], outputs: ["deleteOut"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }], viewProviders: [VIEW_PROVIDER] });
@@ -6673,16 +7140,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         <!-- [showDeleteButton]="field.config.showDeleteButton" [showDownloadButton]="field.config.showDownloadButton"-->
         <iss-ctrl-file-picker
           [formControl]="picker"
-          [accept]="field.validation.fileType"
+          [accept]="accept"
           (onChange)="captureFile($event)"
-          [multiple]="field.config.multiple()"
+          [multiple]="field.config.multiple()"
+          [readonly]="field.config.readonly() ?? false"
           [uploading]="uploading()"
           [uploadedFiles]="attachments()"
           [uploadingError]="uploadingError()"
         />
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="ctrl.touched" />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="ctrl.touched"/>
       } @else {
-        <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()" />
+        <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()"/>
       }
     }
   `
@@ -6710,16 +7178,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+var timePicker_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    TimePickerViewer: TimePickerViewer
+});
+
 class TimePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: TimePickerField, isStandalone: true, selector: "iss-field-time-picker", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-time-picker [formControlName]="field.name">
+        <iss-ctrl-time-picker [formControlName]="field.name" [readonly]="field.config.readonly() ?? false">
           <label>{{ field.label() }}</label>
         </iss-ctrl-time-picker>
       } @else {
-        <iss-viewer-time-picker [field]="field" />
+        <iss-viewer-time-picker [field]="field"/>
       }
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TimePickerControl, selector: "iss-ctrl-time-picker", inputs: ["interval", "minTime", "maxTime"] }, { kind: "component", type: TimePickerViewer, selector: "iss-viewer-time-picker" }], viewProviders: [VIEW_PROVIDER] });
@@ -6737,11 +7210,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-time-picker [formControlName]="field.name">
+        <iss-ctrl-time-picker [formControlName]="field.name" [readonly]="field.config.readonly() ?? false">
           <label>{{ field.label() }}</label>
         </iss-ctrl-time-picker>
       } @else {
-        <iss-viewer-time-picker [field]="field" />
+        <iss-viewer-time-picker [field]="field"/>
       }
     }
   `
@@ -6772,19 +7245,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+var datePicker_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DatePickerViewer: DatePickerViewer
+});
+
 class DatePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerField, isStandalone: true, selector: "iss-field-date-picker", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-date-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null">
+        <iss-ctrl-date-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
           <label>{{ field.label() }}</label>
         </iss-ctrl-date-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-date-picker [field]="field" />
+        <iss-viewer-date-picker [field]="field"/>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatePickerControl, selector: "iss-ctrl-date-picker", inputs: ["disabledDays", "minDate", "maxDate"] }, { kind: "component", type: DatePickerViewer, selector: "iss-viewer-date-picker" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatePickerControl, selector: "iss-ctrl-date-picker", inputs: ["disabledDays", "minDate", "maxDate"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerViewer, selector: "iss-viewer-date-picker" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerField, decorators: [{
             type: Component,
@@ -6794,16 +7273,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         DatePickerControl,
+                        ValidationMessageComponent,
                         DatePickerViewer
                     ],
                     template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-date-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null">
+        <iss-ctrl-date-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
           <label>{{ field.label() }}</label>
         </iss-ctrl-date-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-date-picker [field]="field" />
+        <iss-viewer-date-picker [field]="field"/>
       }
     }
   `
@@ -6835,17 +7316,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+var datetimePicker_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DatePickerTimeViewer: DatePickerTimeViewer
+});
+
 class DatetimePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatetimePickerField, isStandalone: true, selector: "iss-field-datetime-picker", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-datetime-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null">
+        <iss-ctrl-datetime-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
           <label>{{ field.label() }}</label>
         </iss-ctrl-datetime-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-datetime-picker [field]="field" />
+        <iss-viewer-datetime-picker [field]="field"/>
       }
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimePickerControl, selector: "iss-ctrl-datetime-picker", inputs: ["disabledDays", "minDate", "maxDate", "minTime", "maxTime"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerTimeViewer, selector: "iss-viewer-datetime-picker" }], viewProviders: [VIEW_PROVIDER] });
@@ -6864,12 +7350,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-datetime-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null">
+        <iss-ctrl-datetime-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
           <label>{{ field.label() }}</label>
         </iss-ctrl-datetime-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-datetime-picker [field]="field" />
+        <iss-viewer-datetime-picker [field]="field"/>
       }
     }
   `
@@ -6908,16 +7394,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+var dateRangePicker_viewer = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DateRangePickerViewer: DateRangePickerViewer
+});
+
 class DateRangePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DateRangePickerField, isStandalone: true, selector: "iss-field-date-range-picker", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-date-range-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null">
+        <iss-ctrl-date-range-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
           <label>{{ field.label() }}</label>
         </iss-ctrl-date-range-picker>
       } @else {
-        <iss-viewer-date-range-picker [field]="field" />
+        <iss-viewer-date-range-picker [field]="field"/>
       }
     }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateRangePickerControl, selector: "iss-ctrl-date-range-picker", inputs: ["disabledDays", "minDate", "maxDate"], outputs: ["onDateRangeObjectChange"] }, { kind: "component", type: DateRangePickerViewer, selector: "iss-viewer-date-range-picker" }], viewProviders: [VIEW_PROVIDER] });
@@ -6935,11 +7426,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     template: `
     @if (field.visible()) {
       @if (field.mode() === "edit") {
-        <iss-ctrl-date-range-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null">
+        <iss-ctrl-date-range-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null" [readonly]="field.config.readonly() ?? false">
           <label>{{ field.label() }}</label>
         </iss-ctrl-date-range-picker>
       } @else {
-        <iss-viewer-date-range-picker [field]="field" />
+        <iss-viewer-date-range-picker [field]="field"/>
       }
     }
   `
@@ -7265,5 +7756,5 @@ var time_validator = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { PlateViewer as $, FilePickerField as A, TimePickerField as B, CheckboxControl 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, SelectViewer as S, TextareaControl as T, ChipsViewer as U, VIEW_PROVIDER as V, RadioViewer as W, MobileViewer as X, CheckboxViewer as Y, ToggleButtonViewer as Z, SlideToggleViewer as _, ViewerBase as a, AttachmentViewer as a0, TimePickerViewer as a1, DatePickerViewer as a2, DatePickerTimeViewer as a3, DateRangePickerViewer as a4, DEFAULT_COUNTRY as a5, COUNTRIES as a6, DATE_FORMAT_ADAPTER as a7, DATETIME_FORMAT as a8, PLATE_LETTERS as a9, VALIDATION_MESSAGES as aa, COMPONENTS as ab, SERVICES as ac, VALIDATORS as ad, FIELD_DATA as ae, UI_LANGUAGE as af, ATTACHMENT_UPLOAD_URL as ag, ATTACHMENT_UPLOAD_RESPONSE_MAPPER as ah, ATTACHMENT_DOWNLOAD_URL as ai, USER_SEARCH_API as aj, HintsComponent as ak, Droppable as al, ArabicNumberPipe as am, FieldDataInjector as an, PlateLetterPipe as ao, SelectStatusPipe as ap, TranslatePipe as aq, FileHandler as ar, Phone as as, arrayFrom as at, formatFileSize as au, IssValidators as av, FileValidators as aw, TimeValidator as ax, FormEngine as b, SelectControl as c, ValidationMessageComponent as d, ChipsControl as e, DateRangePickerControl as f, getPropertyByPath as g, DatetimePickerControl as h, FilePickerControl as i, InputControl as j, PlateControl as k, SlideToggleControl as l, TimePickerControl as m, ToggleButtonControl as n, ControlBase 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-BLjj_Aqu.mjs.map
+export { PlateViewer as $, TimePickerField as A, DatePickerField as B, ControlBase as C, DatePickerControl as D, Employee as E, FieldBase as F, DatetimePickerField as G, HOST as H, IssField as I, DateRangePickerField as J, InputViewer as K, Loader as L, MobileControl as M, TextareaViewer as N, Outlet as O, PLACEHOLDER_REGEX as P, ChipsViewer as Q, RadioControl as R, SelectControl as S, TextareaControl as T, RadioViewer as U, VIEW_PROVIDER as V, SelectViewer as W, MobileViewer as X, CheckboxViewer as Y, ToggleButtonViewer as Z, SlideToggleViewer as _, ViewerBase as a, AttachmentViewer as a0, TimePickerViewer as a1, DatePickerViewer as a2, DatePickerTimeViewer as a3, DateRangePickerViewer as a4, DEFAULT_COUNTRY as a5, COUNTRIES as a6, DATE_FORMAT_ADAPTER as a7, DATETIME_FORMAT as a8, PLATE_LETTERS as a9, VALIDATION_MESSAGES as aa, COMPONENTS as ab, SERVICES as ac, VALIDATORS as ad, FIELD_DATA as ae, UI_LANGUAGE as af, ATTACHMENT_UPLOAD_URL as ag, ATTACHMENT_UPLOAD_RESPONSE_MAPPER as ah, ATTACHMENT_DOWNLOAD_URL as ai, USER_SEARCH_API as aj, HintsComponent as ak, Droppable as al, ArabicNumberPipe as am, FieldDataInjector as an, PlateLetterPipe as ao, SelectStatusPipe as ap, TranslatePipe as aq, FileHandler as ar, Phone as as, arrayFrom as at, formatFileSize as au, IssValidators as av, FileValidators as aw, TimeValidator as ax, FormEngine as b, ValidationMessageComponent as c, CheckboxControl as d, ChipsControl as e, DateRangePickerControl as f, getPropertyByPath as g, DatetimePickerControl as h, FilePickerControl as i, InputControl as j, PlateControl as k, SlideToggleControl as l, TimePickerControl as m, ToggleButtonControl as n, InputField as o, TextareaField as p, ChipsField as q, replacePlaceholders as r, RadioField as s, SelectField as t, MobileField as u, CheckboxField as v, ToggleButtonField as w, SlideToggleField as x, PlateField as y, FilePickerField as z };
+//# sourceMappingURL=iss-ctrl-iss-ctrl-hz0ibyPg.mjs.map