iss-ctrl 0.0.18 → 0.0.20

package/fesm2022/{iss-ctrl-iss-ctrl-C_ZiixeF.mjs → iss-ctrl-iss-ctrl-BnwwafES.mjs}

@@ -1648,11 +1648,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }], propDecorators: { disabledDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDays", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], hijriCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hijriCalendar", required: false }] }], emitHijri: [{ type: i0.Input, args: [{ isSignal: true, alias: "emitHijri", required: false }] }] } });
 
-class HintsComponent {
+class Hints {
     hints = input([], ...(ngDevMode ? [{ debugName: "hints" }] : /* istanbul ignore next */ []));
     touched = input(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HintsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: HintsComponent, isStandalone: true, selector: "iss-ctrl-hints", inputs: { hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Hints, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Hints, isStandalone: true, selector: "iss-ctrl-hints", inputs: { hints: { classPropertyName: "hints", publicName: "hints", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (hints().length) {
       <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
         @for (hint of hints(); track $index) {
@@ -1678,7 +1678,7 @@ class HintsComponent {
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: HintsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Hints, decorators: [{
             type: Component,
             args: [{
                     selector: "iss-ctrl-hints",
@@ -1939,14 +1939,14 @@ class FilePickerControl extends ControlBase {
 
     <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
     <!--<iss-viewer-attachment (deleteOut)="onDelete($event)" [field]="filesValue()" [uploading]="uploading()"/>-->
-  `, isInline: true, styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader --input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: Droppable, selector: "[droppable]", outputs: ["onDrop"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }] });
+  `, isInline: true, styles: [".file-uploader{--uploader-height: 150px;--uploader-width: 100%;--uploader-bg: var(--off-white);--uploader-border: 1px dashed var(--dark-gray);--uploader-radius: var(--box-radius);--uploader-padding: 1rem;height:var(--uploader-height);background-color:var(--uploader-bg);border:var(--uploader-border);border-radius:var(--uploader-radius);padding:var(--uploader-padding);text-align:center;cursor:pointer}.file-uploader --input{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: Droppable, selector: "[droppable]", outputs: ["onDrop"] }, { kind: "component", type: Hints, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilePickerControl, decorators: [{
             type: Component,
             args: [{ selector: "iss-ctrl-file-picker", schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [
                         ReactiveFormsModule,
                         Droppable,
-                        HintsComponent,
+                        Hints,
                     ], providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: FilePickerControl, multi: true }
                     ], template: `
@@ -2091,7 +2091,7 @@ class InputControl extends ControlBase {
       </div>
       <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
     </mat-form-field>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatInputModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: Hints, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatInputModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputControl, decorators: [{
             type: Component,
@@ -2102,7 +2102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         MatFormFieldModule,
-                        HintsComponent,
+                        Hints,
                         MatInput,
                         MatInputModule,
                     ],
@@ -5596,7 +5596,7 @@ class TextareaControl extends ControlBase {
       </textarea>
       <iss-ctrl-hints [hints]="hints()" [touched]="touched()"/>
     </mat-form-field>
-  `, isInline: true, dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: HintsComponent, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: Hints, selector: "iss-ctrl-hints", inputs: ["hints", "touched"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextareaControl, decorators: [{
             type: Component,
@@ -5605,7 +5605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         MatFormField,
                         MatInput,
-                        HintsComponent,
+                        Hints,
                         FormsModule,
                         ReactiveFormsModule,
                         MatFormFieldModule,
@@ -6049,7 +6049,8 @@ class FieldEvent {
  * | `visible()` | `boolean` | Whether the field is rendered at all. |
  * | `loading()` | `boolean` | Shows the field's own loading state. |
  * | `config` | `FieldConfig` | Per-type configuration — see {@link FieldConfig}. |
- * | `validation` | `any` | Synchronous validation rules. |
+ * | `validation` | `any` | Synchronous validation rules, exactly as the JSON declared them. |
+ * | `validationFns` | `Record<string, Function>` | Validator factory behind each active rule, resolved by the outlet. |
  * | `asyncValidation` | `FieldAsyncValidation` | Remote validation rules. |
  * | `events` | `FieldEvent[]` | Cross-field reactions (show, hide, set value, …). |
  * | `children` | `IssField[]` | Nested fields, used by table and group fields. |
@@ -6073,6 +6074,10 @@ class IssField {
     wasVisible = signal(true, ...(ngDevMode ? [{ debugName: "wasVisible" }] : /* istanbul ignore next */ []));
     events;
     validation;
+    // The lazily imported factory behind each active rule in `validation`, keyed by rule name.
+    // The factories are kept beside the rules instead of inside them so `validation` stays the
+    // object the JSON declared: what a rule says is the API's, how it is applied is ours.
+    validationFns = {};
     asyncValidation;
     children;
     apiResponse = new BehaviorSubject(null);
@@ -6163,6 +6168,18 @@ const VALIDATORS = {
     fileSize: () => Promise.resolve().then(function () { return file_validator; }).then((c) => c.FileValidators.size),
     fileType: () => Promise.resolve().then(function () { return file_validator; }).then((c) => c.FileValidators.type),
 };
+/**
+ * Whether a rule in a field's `validation` is switched on.
+ *
+ * The rule's value is the argument its validator is built with, so it is also what says
+ * whether the rule applies at all: `{ "required": false }` is an optional field, not a
+ * required one, and a rule the API left out or sent as null is off the same way. Values
+ * that are falsy but meaningful — `0`, `""` — are rules, so only the three off states are
+ * rejected here.
+ */
+function isActiveValidationRule(value) {
+    return value !== undefined && value !== null && value !== false;
+}
 
 class FormEngine {
     // Fields are stored per host FormGroup, never on the service itself: a single root
@@ -6247,9 +6264,11 @@ class FormEngine {
     trackChangesValidations(field, form) {
         const changes$ = [];
         const masterNames = new Set();
-        const iterateOn = Object.entries(field.validation);
+        // A rule that names another field — `beforeDate`, say — carries that name as its value, and
+        // `processTrackChanges` ignores every value that is not a string.
+        const iterateOn = Object.entries(field.validation ?? {});
         iterateOn.forEach((validationObj) => {
-            this.processTrackChanges(validationObj[1].value, masterNames, changes$, field, form);
+            this.processTrackChanges(validationObj[1], masterNames, changes$, field, form);
         });
         return merge(...changes$);
     }
@@ -6281,8 +6300,10 @@ class FormEngine {
             changes$.push(this.#mapMasterFieldValueChangesToFieldChanges(masterField, masterCtrl));
         }
     }
+    // A field carries validation only where a rule is actually switched on: one sent as `false`
+    // or `null` says the field is free of it, so it counts for nothing here.
     fieldHasValidation(field) {
-        return !!(field.validation && Object.values(field.validation).filter((v) => v).length);
+        return !!field.validation && Object.values(field.validation).some(isActiveValidationRule);
     }
     fieldHasAsyncValidation(field) {
         return !!(field.asyncValidation && Object.values(field.asyncValidation).filter((v) => v).length);
@@ -6290,7 +6311,7 @@ class FormEngine {
     isFormValid(form, fields) {
         return fields.map((childField) => {
             const currentCtrl = form.get(childField.name);
-            if (childField.validation?.required() && childField.visible() && childField.mode() === "edit" && currentCtrl?.status !== "DISABLED") {
+            if (isActiveValidationRule(childField.validation?.required) && childField.visible() && childField.mode() === "edit" && currentCtrl?.status !== "DISABLED") {
                 return currentCtrl?.valid;
             }
             return true;
@@ -6316,8 +6337,15 @@ class FormEngine {
         }
         return registration;
     }
+    // Builds each switched-on rule into its validator, out of the value the rule was given:
+    // `{ "minLength": 3 }` is what makes the validator refuse two characters, and `{ "required":
+    // false }` builds nothing at all. The field rides along as the second argument for the rules
+    // that need their neighbours — `beforeDate` and friends — and is ignored by the rest.
+    // A rule whose factory never resolved is skipped rather than called.
     #validatorsToNgValidators(field) {
-        return this.#mapNgValidators(field.validation).map((validatorValue) => validatorValue?.fn(field));
+        return Object.entries(field.validation ?? {})
+            .filter(([key, value]) => isActiveValidationRule(value) && typeof field.validationFns?.[key] === "function")
+            .map(([key, value]) => field.validationFns[key](value, field));
     }
     #mapNgValidators(validationObj) {
         return Object.entries((validationObj ? validationObj : {}))
@@ -6383,22 +6411,22 @@ const COMPONENTS = {
     datetime: () => Promise.resolve().then(function () { return datetimePicker_field; }).then((c) => c.DatetimePickerField),
     date_range: () => Promise.resolve().then(function () { return dateRangePicker_field; }).then((c) => c.DateRangePickerField),
     attachment: () => Promise.resolve().then(function () { return filePicker_field; }).then((c) => c.FilePickerField),
-    userPicker: () => import('./iss-ctrl-user-picker.field-C7DZ3ck2.mjs').then((c) => c.UserPickerField),
+    userPicker: () => import('./iss-ctrl-user-picker.field-CJqIvkMM.mjs').then((c) => c.UserPickerField),
     vehicle_plate: () => Promise.resolve().then(function () { return plate_field; }).then((c) => c.PlateField),
-    enrichment: () => import('./iss-ctrl-note.field-CakHrlcq.mjs').then((c) => c.NoteField),
+    enrichment: () => import('./iss-ctrl-note.field-DyOSzuIi.mjs').then((c) => c.NoteField),
     mobile: () => Promise.resolve().then(function () { return mobile_field; }).then((c) => c.MobileField),
-    table: () => import('./iss-ctrl-table.field-Ce1KnlZO.mjs').then((c) => c.TableField),
+    table: () => import('./iss-ctrl-table.field-CJmtpHsh.mjs').then((c) => c.TableField),
     chips: () => Promise.resolve().then(function () { return chips_field; }).then((c) => c.ChipsField),
     switch: () => Promise.resolve().then(function () { return slideToggle_field; }).then((c) => c.SlideToggleField),
 };
 
 const SERVICES = {
-    setValue: () => import('./iss-ctrl-set-value-event-C-uD228s.mjs').then((s) => s.SetValueEvent),
+    setValue: () => import('./iss-ctrl-set-value-event-B800MsyP.mjs').then((s) => s.SetValueEvent),
     show: () => import('./iss-ctrl-show-event-BcRCwAfo.mjs').then((s) => s.ShowEvent),
-    load: () => import('./iss-ctrl-load-value-event-BjsuFpPf.mjs').then((s) => s.LoadValueEvent),
-    loadOptions: () => import('./iss-ctrl-load-options-event-DOlkFXz5.mjs').then((s) => s.LoadOptionsEvent),
-    triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-D5S3shyl.mjs').then((s) => s.TriggerBasedOnJsonValue),
-    replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-C-G34VNS.mjs').then((s) => s.ReplaceApiKeys),
+    load: () => import('./iss-ctrl-load-value-event-BG9zEexV.mjs').then((s) => s.LoadValueEvent),
+    loadOptions: () => import('./iss-ctrl-load-options-event-sTdrxJYn.mjs').then((s) => s.LoadOptionsEvent),
+    triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-C5x0hyWn.mjs').then((s) => s.TriggerBasedOnJsonValue),
+    replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-CzJkn7fK.mjs').then((s) => s.ReplaceApiKeys),
 };
 
 // Read-only counterpart of COMPONENTS: the component used to render a field's value
@@ -6585,6 +6613,11 @@ class Outlet {
             action.config.fn = configFn;
         }));
     }
+    // Resolves the validator behind every rule the field switched on. `validation` itself is left
+    // exactly as it arrived — the caller's own object, which it may still read and re-render — so
+    // the factories land in `validationFns` and the rules keep the values they were given.
+    // A rule that is off carries no validator: nothing is imported for it and nothing is built
+    // from it, which is what makes `{ "required": false }` an optional field.
     async #loadFieldValidation(f) {
         if (!f.validation)
             return;
@@ -6593,13 +6626,10 @@ class Outlet {
                 console.error(`${key} not found`);
                 return false;
             }
-            return validation !== undefined && !validation?.hasOwnProperty("fn");
+            return isActiveValidationRule(validation);
         });
-        await Promise.all(validationEntries.map(async ([key, validation]) => {
-            f.validation[key] = {
-                fn: await VALIDATORS[key](),
-                value: validation
-            };
+        await Promise.all(validationEntries.map(async ([key]) => {
+            f.validationFns[key] = await VALIDATORS[key]();
         }));
     }
     #listenToHostFormGroupChanges() {
@@ -6779,7 +6809,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ name: "translate" }]
         }] });
 
-class ValidationMessageComponent {
+class ValidationMessage {
     errors = input.required(...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
     showMessage = input.required(...(ngDevMode ? [{ debugName: "showMessage" }] : /* istanbul ignore next */ []));
     getValidationMessage(error) {
@@ -6790,8 +6820,8 @@ class ValidationMessageComponent {
         }
         return errorMessageGenerator(error.value);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ValidationMessageComponent, isStandalone: true, selector: "iss-validation-message-viewer", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: true, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationMessage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ValidationMessage, isStandalone: true, selector: "iss-validation-message-viewer", inputs: { errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: true, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
     @if (errors() !== null && showMessage()) {
       <div class="messages">
         @for (error of errors() ?? {} | keyvalue; track error) {
@@ -6803,7 +6833,7 @@ class ValidationMessageComponent {
     }
   `, isInline: true, styles: [":host{display:block;position:relative}.messages{position:absolute;inset-inline:0;top:0;z-index:1}p{margin:0}\n"], dependencies: [{ kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ValidationMessage, decorators: [{
             type: Component,
             args: [{ selector: "iss-validation-message-viewer", imports: [
                         KeyValuePipe,
@@ -7085,6 +7115,44 @@ var input_viewer = /*#__PURE__*/Object.freeze({
     InputViewer: InputViewer
 });
 
+/**
+ * `<iss-field-viewer>` — read-only presentation of a single field as a
+ * label / value row.
+ *
+ * Project the caption into the `label` slot and the rendered value into any
+ * element carrying a `value` attribute:
+ *
+ * ```html
+ * <iss-field-viewer>
+ *   <label>Request Type</label>
+ *   <span>value</span>
+ * </iss-field-viewer>
+ * ```
+ *
+ * The label sits in a fixed-width column, so every value in a stack of viewers
+ * starts on the same vertical line. Override that column with the
+ * `--field-viewer-label-width` custom property on any ancestor.
+ * When no label is projected, the value spans the full width of the row.
+ */
+class FieldViewer {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: FieldViewer, isStandalone: true, selector: "iss-field-viewer", ngImport: i0, template: `
+    <div class="field-viewer w-100">
+      <span class="field-viewer__label"><ng-content select="label"></ng-content></span>
+      <span class="field-viewer__value"><ng-content></ng-content></span>
+    </div>
+  `, isInline: true, styles: [":host{--field-viewer-label-width: 14rem;--field-viewer-gap: 1.5rem;--field-viewer-padding: .75rem 1rem;--field-viewer-label-fc: var(--dark-gray);--field-viewer-value-fc: var(--black);display:block;width:100%}.field-viewer{display:grid;grid-template-columns:var(--field-viewer-label-width) minmax(0,1fr);align-items:baseline;column-gap:var(--field-viewer-gap);padding:var(--field-viewer-padding);border-radius:var(--box-radius);font-size:.875rem;line-height:var(--default-line-height)}.field-viewer__label{color:var(--field-viewer-label-fc);font-weight:var(--font-regular);overflow-wrap:anywhere}.field-viewer__value{min-width:0;color:var(--field-viewer-value-fc);font-weight:var(--font-bold);overflow-wrap:anywhere}.field-viewer__label ::ng-deep label{display:block;margin:0;color:inherit;font:inherit}.field-viewer:not(:has(.field-viewer__label>*)){grid-template-columns:minmax(0,1fr)}.field-viewer:not(:has(.field-viewer__label>*)) .field-viewer__label{display:none}@media(max-width:575.98px){.field-viewer{grid-template-columns:minmax(0,1fr);row-gap:.25rem}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldViewer, decorators: [{
+            type: Component,
+            args: [{ selector: "iss-field-viewer", imports: [], template: `
+    <div class="field-viewer w-100">
+      <span class="field-viewer__label"><ng-content select="label"></ng-content></span>
+      <span class="field-viewer__value"><ng-content></ng-content></span>
+    </div>
+  `, styles: [":host{--field-viewer-label-width: 14rem;--field-viewer-gap: 1.5rem;--field-viewer-padding: .75rem 1rem;--field-viewer-label-fc: var(--dark-gray);--field-viewer-value-fc: var(--black);display:block;width:100%}.field-viewer{display:grid;grid-template-columns:var(--field-viewer-label-width) minmax(0,1fr);align-items:baseline;column-gap:var(--field-viewer-gap);padding:var(--field-viewer-padding);border-radius:var(--box-radius);font-size:.875rem;line-height:var(--default-line-height)}.field-viewer__label{color:var(--field-viewer-label-fc);font-weight:var(--font-regular);overflow-wrap:anywhere}.field-viewer__value{min-width:0;color:var(--field-viewer-value-fc);font-weight:var(--font-bold);overflow-wrap:anywhere}.field-viewer__label ::ng-deep label{display:block;margin:0;color:inherit;font:inherit}.field-viewer:not(:has(.field-viewer__label>*)){grid-template-columns:minmax(0,1fr)}.field-viewer:not(:has(.field-viewer__label>*)) .field-viewer__label{display:none}@media(max-width:575.98px){.field-viewer{grid-template-columns:minmax(0,1fr);row-gap:.25rem}}\n"] }]
+        }] });
+
 /**
  * `<iss-field-input>` — single line text, number, email or password entry.
  *
@@ -7132,10 +7200,13 @@ class InputField extends FieldBase {
         </iss-ctrl-input>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-input [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-input [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputControl, selector: "iss-ctrl-input", inputs: ["type", "prefixIcon", "prefixText", "suffixIcon", "suffixText"], outputs: ["onPrefixClick", "onSuffixClick"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: InputViewer, selector: "iss-viewer-input" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputControl, selector: "iss-ctrl-input", inputs: ["type", "prefixIcon", "prefixText", "suffixIcon", "suffixText"], outputs: ["onPrefixClick", "onSuffixClick"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: InputViewer, selector: "iss-viewer-input" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: InputField, decorators: [{
             type: Component,
@@ -7145,8 +7216,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         InputControl,
-                        ValidationMessageComponent,
-                        InputViewer
+                        ValidationMessage,
+                        InputViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -7165,7 +7237,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </iss-ctrl-input>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-input [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-input [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7232,10 +7307,13 @@ class TextareaField extends FieldBase {
         </iss-ctrl-textarea>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-textarea [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-textarea [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextareaControl, selector: "iss-ctrl-textarea" }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: TextareaViewer, selector: "iss-viewer-textarea" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TextareaControl, selector: "iss-ctrl-textarea" }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: TextareaViewer, selector: "iss-viewer-textarea" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TextareaField, decorators: [{
             type: Component,
@@ -7245,8 +7323,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         TextareaControl,
-                        ValidationMessageComponent,
-                        TextareaViewer
+                        ValidationMessage,
+                        TextareaViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -7256,7 +7335,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </iss-ctrl-textarea>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-textarea [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-textarea [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7334,10 +7416,13 @@ class ChipsField extends FieldBase {
         <iss-ctrl-chips [formControlName]="field.name" [readonly]="field.config.readonly() ?? false"><label>{{ field.label() }}</label></iss-ctrl-chips>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-chips [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-chips [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChipsControl, selector: "iss-ctrl-chips" }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: ChipsViewer, selector: "iss-viewer-chips" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChipsControl, selector: "iss-ctrl-chips" }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: ChipsViewer, selector: "iss-viewer-chips" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ChipsField, decorators: [{
             type: Component,
@@ -7347,8 +7432,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         ChipsControl,
-                        ValidationMessageComponent,
-                        ChipsViewer
+                        ValidationMessage,
+                        ChipsViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -7356,7 +7442,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         <iss-ctrl-chips [formControlName]="field.name" [readonly]="field.config.readonly() ?? false"><label>{{ field.label() }}</label></iss-ctrl-chips>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-chips [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-chips [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7428,19 +7517,23 @@ class RadioField extends FieldBase {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: RadioField, isStandalone: true, selector: "iss-field-radio", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
       <div style="display: flex; flex-direction: column">
-        @if (!field.config.hideLabel()) {
-          <mat-label>{{ field.label() }}</mat-label>
-        }
-
         @if (field.mode() === "edit") {
+          @if (!field.config.hideLabel()) {
+            <mat-label>{{ field.label() }}</mat-label>
+          }
           <iss-ctrl-radio [formControlName]="field.name" [options]="field.options()" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
           <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
         } @else {
-          <iss-viewer-radio [field]="field"/>
+          <iss-field-viewer>
+            @if (!field.config.hideLabel()) {
+              <label>{{ field.label() }}</label>
+            }
+            <iss-viewer-radio [field]="field"/>
+          </iss-field-viewer>
         }
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: RadioControl, selector: "iss-ctrl-radio", inputs: ["options"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: RadioViewer, selector: "iss-viewer-radio" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: RadioControl, selector: "iss-ctrl-radio", inputs: ["options"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: RadioViewer, selector: "iss-viewer-radio" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RadioField, decorators: [{
             type: Component,
@@ -7451,21 +7544,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ReactiveFormsModule,
                         MatLabel,
                         RadioControl,
-                        ValidationMessageComponent,
-                        RadioViewer
+                        ValidationMessage,
+                        RadioViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
       <div style="display: flex; flex-direction: column">
-        @if (!field.config.hideLabel()) {
-          <mat-label>{{ field.label() }}</mat-label>
-        }
-
         @if (field.mode() === "edit") {
+          @if (!field.config.hideLabel()) {
+            <mat-label>{{ field.label() }}</mat-label>
+          }
           <iss-ctrl-radio [formControlName]="field.name" [options]="field.options()" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
           <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
         } @else {
-          <iss-viewer-radio [field]="field"/>
+          <iss-field-viewer>
+            @if (!field.config.hideLabel()) {
+              <label>{{ field.label() }}</label>
+            }
+            <iss-viewer-radio [field]="field"/>
+          </iss-field-viewer>
         }
       </div>
     }
@@ -7546,10 +7644,13 @@ class SelectField extends FieldBase {
         </iss-ctrl-select>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-select [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-select [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectControl, selector: "iss-ctrl-select", inputs: ["options", "height", "loading"], outputs: ["onQueryChange"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: SelectViewer, selector: "iss-viewer-select" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectControl, selector: "iss-ctrl-select", inputs: ["options", "height", "loading"], outputs: ["onQueryChange"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: SelectViewer, selector: "iss-viewer-select" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SelectField, decorators: [{
             type: Component,
@@ -7559,8 +7660,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         SelectControl,
-                        ValidationMessageComponent,
-                        SelectViewer
+                        ValidationMessage,
+                        SelectViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -7570,7 +7672,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </iss-ctrl-select>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-select [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-select [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7634,10 +7739,13 @@ class MobileField extends FieldBase {
           <label>{{ field.label() }}</label>
         </iss-ctrl-mobile>
       } @else {
-        <iss-viewer-mobile [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-mobile [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MobileControl, selector: "iss-ctrl-mobile", inputs: ["preferredCountries"] }, { kind: "component", type: MobileViewer, selector: "iss-viewer-mobile" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MobileControl, selector: "iss-ctrl-mobile", inputs: ["preferredCountries"] }, { kind: "component", type: MobileViewer, selector: "iss-viewer-mobile" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: MobileField, decorators: [{
             type: Component,
@@ -7647,7 +7755,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         MobileControl,
-                        MobileViewer
+                        MobileViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -7656,7 +7765,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           <label>{{ field.label() }}</label>
         </iss-ctrl-mobile>
       } @else {
-        <iss-viewer-mobile [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-mobile [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7736,10 +7848,15 @@ class CheckboxField extends FieldBase {
         </iss-ctrl-checkbox>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-checkbox [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-checkbox [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CheckboxControl, selector: "iss-ctrl-checkbox", inputs: ["options"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: CheckboxViewer, selector: "iss-viewer-checkbox" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CheckboxControl, selector: "iss-ctrl-checkbox", inputs: ["options"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: CheckboxViewer, selector: "iss-viewer-checkbox" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CheckboxField, decorators: [{
             type: Component,
@@ -7749,8 +7866,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         CheckboxControl,
-                        ValidationMessageComponent,
-                        CheckboxViewer
+                        ValidationMessage,
+                        CheckboxViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -7762,7 +7880,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         </iss-ctrl-checkbox>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-checkbox [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-checkbox [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7834,10 +7957,10 @@ class ToggleButtonField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToggleButtonField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToggleButtonField, isStandalone: true, selector: "iss-field-toggle-button", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
-      @if (!field.config.hideLabel()) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
       @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
         <iss-ctrl-toggle-button
           [formControlName]="field.name"
           [options]="field.options()"
@@ -7847,10 +7970,15 @@ class ToggleButtonField extends FieldBase {
         />
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-toggle-button [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-toggle-button [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: ToggleButtonControl, selector: "iss-ctrl-toggle-button", inputs: ["options"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: ToggleButtonViewer, selector: "iss-viewer-toggle-button" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: ToggleButtonControl, selector: "iss-ctrl-toggle-button", inputs: ["options"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: ToggleButtonViewer, selector: "iss-viewer-toggle-button" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToggleButtonField, decorators: [{
             type: Component,
@@ -7861,15 +7989,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ReactiveFormsModule,
                         MatLabel,
                         ToggleButtonControl,
-                        ValidationMessageComponent,
-                        ToggleButtonViewer
+                        ValidationMessage,
+                        ToggleButtonViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
-      @if (!field.config.hideLabel()) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
       @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
         <iss-ctrl-toggle-button
           [formControlName]="field.name"
           [options]="field.options()"
@@ -7879,7 +8008,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         />
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-toggle-button [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-toggle-button [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -7954,36 +8088,44 @@ class SlideToggleField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SlideToggleField, isStandalone: true, selector: "iss-field-slide-toggle", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
-      @if (!field.config.hideLabel()) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
       @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
         <iss-ctrl-slide-toggle [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-slide-toggle [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-slide-toggle [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: SlideToggleControl, selector: "iss-ctrl-slide-toggle" }, { kind: "component", type: SlideToggleViewer, selector: "iss-viewer-slide-toggle" }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: SlideToggleControl, selector: "iss-ctrl-slide-toggle" }, { kind: "component", type: SlideToggleViewer, selector: "iss-viewer-slide-toggle" }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SlideToggleField, decorators: [{
             type: Component,
             args: [{
                     selector: "iss-field-slide-toggle",
                     viewProviders: [VIEW_PROVIDER],
-                    imports: [ReactiveFormsModule, MatLabel, SlideToggleControl, SlideToggleViewer, ValidationMessageComponent],
+                    imports: [ReactiveFormsModule, MatLabel, SlideToggleControl, SlideToggleViewer, ValidationMessage, FieldViewer],
                     template: `
     @if (field.visible()) {
-      @if (!field.config.hideLabel()) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
       @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
         <iss-ctrl-slide-toggle [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="onChange($event)"/>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-slide-toggle [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-slide-toggle [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -8202,18 +8344,22 @@ class PlateField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PlateField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PlateField, isStandalone: true, selector: "iss-field-plate-number", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
-      @if (!field.config.hideLabel()) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
       @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
         <iss-ctrl-plate-number [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="updateField($event)"/>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-plate [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-plate [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PlateControl, selector: "iss-ctrl-plate-number" }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: PlateViewer, selector: "iss-viewer-plate" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PlateControl, selector: "iss-ctrl-plate-number" }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: PlateViewer, selector: "iss-viewer-plate" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PlateField, decorators: [{
             type: Component,
@@ -8223,21 +8369,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         PlateControl,
-                        ValidationMessageComponent,
+                        ValidationMessage,
                         MatLabel,
-                        PlateViewer
+                        PlateViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
-      @if (!field.config.hideLabel()) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
       @if (field.mode() === "edit") {
+        @if (!field.config.hideLabel()) {
+          <mat-label>{{ field.label() }}</mat-label>
+        }
         <iss-ctrl-plate-number [formControlName]="field.name" [readonly]="field.config.readonly() ?? false" (onChange)="updateField($event)"/>
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
       } @else {
-        <iss-viewer-plate [field]="field"/>
+        <iss-field-viewer>
+          @if (!field.config.hideLabel()) {
+            <label>{{ field.label() }}</label>
+          }
+          <iss-viewer-plate [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -8562,10 +8713,10 @@ class FilePickerField extends FieldBase {
         super.ngOnDestroy();
         this.#valueEffect.destroy();
     }
-    // the outlet rewrites every validation entry into {fn, value}, so the extensions live under value
+    // The accepted extensions are the `fileType` rule's own value, the same one its validator is
+    // built from — a list, or the comma-separated string an older definition wrote it as.
     #acceptFactory() {
-        const fileType = this.field.validation?.["fileType"];
-        const extensions = fileType && fileType.hasOwnProperty("fn") ? fileType.value : fileType;
+        const extensions = this.field.validation?.["fileType"];
         if (!extensions) {
             return "";
         }
@@ -8600,8 +8751,8 @@ class FilePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FilePickerField, isStandalone: true, selector: "iss-field-file-picker", usesInheritance: true, ngImport: i0, template: `
     @if (field.visible()) {
-      <mat-label>{{ field.label() }}</mat-label>
       @if (field.mode() === "edit") {
+        <mat-label>{{ field.label() }}</mat-label>
         <input type="hidden" [formControlName]="field.name">
         <!-- [showDeleteButton]="field.config.showDeleteButton" [showDownloadButton]="field.config.showDownloadButton"-->
         <iss-ctrl-file-picker
@@ -8616,10 +8767,13 @@ class FilePickerField extends FieldBase {
         />
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="ctrl.touched"/>
       } @else {
-        <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FilePickerControl, selector: "iss-ctrl-file-picker", inputs: ["accept", "showDownloadButton", "showDeleteButton", "uploading", "uploadedFiles", "uploadingError"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: AttachmentViewer, selector: "iss-viewer-attachment", inputs: ["uploading", "uploadingError"], outputs: ["deleteOut"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: FilePickerControl, selector: "iss-ctrl-file-picker", inputs: ["accept", "showDownloadButton", "showDeleteButton", "uploading", "uploadedFiles", "uploadingError"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: AttachmentViewer, selector: "iss-viewer-attachment", inputs: ["uploading", "uploadingError"], outputs: ["deleteOut"] }, { kind: "directive", type: MatLabel$1, selector: "mat-label" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FilePickerField, decorators: [{
             type: Component,
@@ -8629,14 +8783,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         FilePickerControl,
-                        ValidationMessageComponent,
+                        ValidationMessage,
                         AttachmentViewer,
-                        MatLabel$1
+                        MatLabel$1,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
-      <mat-label>{{ field.label() }}</mat-label>
       @if (field.mode() === "edit") {
+        <mat-label>{{ field.label() }}</mat-label>
         <input type="hidden" [formControlName]="field.name">
         <!-- [showDeleteButton]="field.config.showDeleteButton" [showDownloadButton]="field.config.showDownloadButton"-->
         <iss-ctrl-file-picker
@@ -8651,7 +8806,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         />
         <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="ctrl.touched"/>
       } @else {
-        <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-attachment [uploading]="uploading()" [field]="viewField()"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -8715,10 +8873,13 @@ class TimePickerField extends FieldBase {
           <label>{{ field.label() }}</label>
         </iss-ctrl-time-picker>
       } @else {
-        <iss-viewer-time-picker [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-time-picker [field]="field"/>
+        </iss-field-viewer>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TimePickerControl, selector: "iss-ctrl-time-picker", inputs: ["interval", "minTime", "maxTime"] }, { kind: "component", type: TimePickerViewer, selector: "iss-viewer-time-picker" }], viewProviders: [VIEW_PROVIDER] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: TimePickerControl, selector: "iss-ctrl-time-picker", inputs: ["interval", "minTime", "maxTime"] }, { kind: "component", type: TimePickerViewer, selector: "iss-viewer-time-picker" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TimePickerField, decorators: [{
             type: Component,
@@ -8728,7 +8889,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         TimePickerControl,
-                        TimePickerViewer
+                        TimePickerViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -8737,7 +8899,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           <label>{{ field.label() }}</label>
         </iss-ctrl-time-picker>
       } @else {
-        <iss-viewer-time-picker [field]="field"/>
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-time-picker [field]="field"/>
+        </iss-field-viewer>
       }
     }
   `
@@ -8815,9 +8980,9 @@ var datePicker_viewer = /*#__PURE__*/Object.freeze({
  */
 class DatePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerField, isStandalone: true, selector: "iss-field-date-picker", usesInheritance: true, ngImport: i0, template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatePickerField, isStandalone: true, selector: "iss-field-date-picker", usesInheritance: true, ngImport: i0, template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
         <iss-ctrl-date-picker
           [formControlName]="field.name"
           [minDate]="field.config.minDate() ?? null"
@@ -8825,15 +8990,18 @@ class DatePickerField extends FieldBase {
           [readonly]="field.config.readonly() ?? false"
           [hijriCalendar]="field.config.hijriCalendar() ?? false"
           [emitHijri]="field.config.emitHijri() ?? false"
-        >
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-date-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-viewer-date-picker [field]="field"/>
-      }
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatePickerControl, selector: "iss-ctrl-date-picker", inputs: ["disabledDays", "minDate", "maxDate", "hijriCalendar", "emitHijri"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerViewer, selector: "iss-viewer-date-picker" }], viewProviders: [VIEW_PROVIDER] });
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-date-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatePickerControl, selector: "iss-ctrl-date-picker", inputs: ["disabledDays", "minDate", "maxDate", "hijriCalendar", "emitHijri"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerViewer, selector: "iss-viewer-date-picker" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatePickerField, decorators: [{
             type: Component,
@@ -8843,12 +9011,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         DatePickerControl,
-                        ValidationMessageComponent,
-                        DatePickerViewer
+                        ValidationMessage,
+                        DatePickerViewer,
+                        FieldViewer
                     ],
-                    template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
+                    template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
         <iss-ctrl-date-picker
           [formControlName]="field.name"
           [minDate]="field.config.minDate() ?? null"
@@ -8856,14 +9025,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           [readonly]="field.config.readonly() ?? false"
           [hijriCalendar]="field.config.hijriCalendar() ?? false"
           [emitHijri]="field.config.emitHijri() ?? false"
-        >
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-date-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-viewer-date-picker [field]="field"/>
-      }
-    }
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-date-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
   `
                 }]
         }] });
@@ -8941,9 +9113,9 @@ var datetimePicker_viewer = /*#__PURE__*/Object.freeze({
  */
 class DatetimePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatetimePickerField, isStandalone: true, selector: "iss-field-datetime-picker", usesInheritance: true, ngImport: i0, template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DatetimePickerField, isStandalone: true, selector: "iss-field-datetime-picker", usesInheritance: true, ngImport: i0, template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
         <iss-ctrl-datetime-picker
           [formControlName]="field.name"
           [minDate]="field.config.minDate() ?? null"
@@ -8951,15 +9123,18 @@ class DatetimePickerField extends FieldBase {
           [readonly]="field.config.readonly() ?? false"
           [hijriCalendar]="field.config.hijriCalendar() ?? false"
           [emitHijri]="field.config.emitHijri() ?? false"
-        >
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-datetime-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-viewer-datetime-picker [field]="field"/>
-      }
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimePickerControl, selector: "iss-ctrl-datetime-picker", inputs: ["disabledDays", "minDate", "maxDate", "minTime", "maxTime", "hijriCalendar", "emitHijri"] }, { kind: "component", type: ValidationMessageComponent, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerTimeViewer, selector: "iss-viewer-datetime-picker" }], viewProviders: [VIEW_PROVIDER] });
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-datetime-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-datetime-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DatetimePickerControl, selector: "iss-ctrl-datetime-picker", inputs: ["disabledDays", "minDate", "maxDate", "minTime", "maxTime", "hijriCalendar", "emitHijri"] }, { kind: "component", type: ValidationMessage, selector: "iss-validation-message-viewer", inputs: ["errors", "showMessage"] }, { kind: "component", type: DatePickerTimeViewer, selector: "iss-viewer-datetime-picker" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DatetimePickerField, decorators: [{
             type: Component,
@@ -8969,12 +9144,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         DatetimePickerControl,
-                        ValidationMessageComponent,
+                        ValidationMessage,
                         DatePickerTimeViewer,
+                        FieldViewer
                     ],
-                    template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
+                    template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
         <iss-ctrl-datetime-picker
           [formControlName]="field.name"
           [minDate]="field.config.minDate() ?? null"
@@ -8982,14 +9158,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           [readonly]="field.config.readonly() ?? false"
           [hijriCalendar]="field.config.hijriCalendar() ?? false"
           [emitHijri]="field.config.emitHijri() ?? false"
-        >
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-datetime-picker>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
-      } @else {
-        <iss-viewer-datetime-picker [field]="field"/>
-      }
-    }
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-datetime-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched"/>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-datetime-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
   `
                 }]
         }] });
@@ -9068,9 +9247,9 @@ var dateRangePicker_viewer = /*#__PURE__*/Object.freeze({
  */
 class DateRangePickerField extends FieldBase {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerField, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DateRangePickerField, isStandalone: true, selector: "iss-field-date-range-picker", usesInheritance: true, ngImport: i0, template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DateRangePickerField, isStandalone: true, selector: "iss-field-date-range-picker", usesInheritance: true, ngImport: i0, template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
         <iss-ctrl-date-range-picker
           [formControlName]="field.name"
           [minDate]="field.config.minDate() ?? null"
@@ -9078,14 +9257,17 @@ class DateRangePickerField extends FieldBase {
           [readonly]="field.config.readonly() ?? false"
           [hijriCalendar]="field.config.hijriCalendar() ?? false"
           [emitHijri]="field.config.emitHijri() ?? false"
-        >
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-date-range-picker>
-      } @else {
-        <iss-viewer-date-range-picker [field]="field"/>
-      }
-    }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateRangePickerControl, selector: "iss-ctrl-date-range-picker", inputs: ["disabledDays", "minDate", "maxDate", "hijriCalendar", "emitHijri"], outputs: ["onDateRangeObjectChange"] }, { kind: "component", type: DateRangePickerViewer, selector: "iss-viewer-date-range-picker" }], viewProviders: [VIEW_PROVIDER] });
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-range-picker>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-date-range-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: DateRangePickerControl, selector: "iss-ctrl-date-range-picker", inputs: ["disabledDays", "minDate", "maxDate", "hijriCalendar", "emitHijri"], outputs: ["onDateRangeObjectChange"] }, { kind: "component", type: DateRangePickerViewer, selector: "iss-viewer-date-range-picker" }, { kind: "component", type: FieldViewer, selector: "iss-field-viewer" }], viewProviders: [VIEW_PROVIDER] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DateRangePickerField, decorators: [{
             type: Component,
@@ -9095,11 +9277,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         DateRangePickerControl,
-                        DateRangePickerViewer
+                        DateRangePickerViewer,
+                        FieldViewer
                     ],
-                    template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
+                    template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
         <iss-ctrl-date-range-picker
           [formControlName]="field.name"
           [minDate]="field.config.minDate() ?? null"
@@ -9107,13 +9290,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
           [readonly]="field.config.readonly() ?? false"
           [hijriCalendar]="field.config.hijriCalendar() ?? false"
           [emitHijri]="field.config.emitHijri() ?? false"
-        >
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-date-range-picker>
-      } @else {
-        <iss-viewer-date-range-picker [field]="field"/>
-      }
-    }
+        >
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-range-picker>
+      } @else {
+        <iss-field-viewer>
+          <label>{{ field.label() }}</label>
+          <iss-viewer-date-range-picker [field]="field"/>
+        </iss-field-viewer>
+      }
+    }
   `
                 }]
         }] });
@@ -9402,11 +9588,13 @@ var file_validator = /*#__PURE__*/Object.freeze({
 });
 
 class TimeValidator {
-    static beforeDate(field) {
+    // The rule's value is the name of the field this one must not run past, so it arrives here
+    // rather than being read back off the field.
+    static beforeDate(otherFieldName) {
         const controlContainer = inject(ControlContainer);
         const parentForm = controlContainer.control;
         return (control) => {
-            const anotherControl = parentForm.get(field?.validation?.beforeDate?.value);
+            const anotherControl = parentForm.get(otherFieldName);
             if (anotherControl) {
                 const anotherControlValue = anotherControl.getRawValue();
                 const controlValue = control.getRawValue();
@@ -9419,7 +9607,7 @@ class TimeValidator {
             return null;
         };
     }
-    static afterDate(field) {
+    static afterDate(otherFieldName) {
         return (control) => {
             return null;
         };
@@ -9437,5 +9625,5 @@ var time_validator = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { PlateViewer as $, TimePickerField as A, DatePickerField as B, ControlBase as C, DatePickerControl as D, Employee as E, FieldBase as F, DatetimePickerField as G, HOST as H, IssField as I, DateRangePickerField as J, InputViewer as K, Loader as L, MobileControl as M, TextareaViewer as N, Outlet as O, PLACEHOLDER_REGEX as P, ChipsViewer as Q, RadioControl as R, SelectControl as S, TextareaControl as T, RadioViewer as U, VIEW_PROVIDER as V, SelectViewer as W, MobileViewer as X, CheckboxViewer as Y, ToggleButtonViewer as Z, SlideToggleViewer as _, ValidationMessageComponent as a, AttachmentViewer as a0, TimePickerViewer as a1, DatePickerViewer as a2, DatePickerTimeViewer as a3, DateRangePickerViewer as a4, DEFAULT_COUNTRY as a5, COUNTRIES as a6, DATE_FORMAT_ADAPTER as a7, DATETIME_FORMAT as a8, PLATE_LETTERS as a9, startOfHijriMonth as aA, getHijriDaysInMonth as aB, createHijriDate as aC, formatHijriDate as aD, parseHijriDate as aE, toHijriDisplay as aF, IssValidators as aG, FileValidators as aH, TimeValidator as aI, 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, IssDateAdapter as as, provideIssDateAdapter as at, Phone as au, arrayFrom as av, formatFileSize as aw, HIJRI_LOCALE as ax, HIJRI_MONTH_NAMES as ay, getHijriParts as az, ViewerBase as b, FormEngine as c, CheckboxControl as d, ChipsControl as e, DateRangePickerControl as f, getPropertyByPath as g, DatetimePickerControl as h, FilePickerControl as i, InputControl as j, PlateControl as k, SlideToggleControl as l, TimePickerControl as m, ToggleButtonControl as n, InputField as o, TextareaField as p, ChipsField as q, replacePlaceholders as r, RadioField as s, SelectField as t, MobileField as u, CheckboxField as v, ToggleButtonField as w, SlideToggleField as x, PlateField as y, FilePickerField as z };
-//# sourceMappingURL=iss-ctrl-iss-ctrl-C_ZiixeF.mjs.map
+export { SlideToggleViewer as $, FilePickerField as A, TimePickerField as B, ControlBase as C, DatePickerControl as D, Employee as E, FieldBase as F, DatePickerField as G, HOST as H, IssField as I, DatetimePickerField as J, DateRangePickerField as K, Loader as L, MobileControl as M, InputViewer as N, Outlet as O, PLACEHOLDER_REGEX as P, TextareaViewer as Q, RadioControl as R, SelectControl as S, TextareaControl as T, ChipsViewer as U, VIEW_PROVIDER as V, RadioViewer as W, SelectViewer as X, MobileViewer as Y, CheckboxViewer as Z, ToggleButtonViewer as _, ValidationMessage as a, PlateViewer as a0, AttachmentViewer as a1, TimePickerViewer as a2, DatePickerViewer as a3, DatePickerTimeViewer as a4, DateRangePickerViewer as a5, DEFAULT_COUNTRY as a6, COUNTRIES as a7, DATE_FORMAT_ADAPTER as a8, DATETIME_FORMAT as a9, HIJRI_MONTH_NAMES as aA, getHijriParts as aB, startOfHijriMonth as aC, getHijriDaysInMonth as aD, createHijriDate as aE, formatHijriDate as aF, parseHijriDate as aG, toHijriDisplay as aH, IssValidators as aI, FileValidators as aJ, TimeValidator as aK, PLATE_LETTERS as aa, VALIDATION_MESSAGES as ab, COMPONENTS as ac, SERVICES as ad, VALIDATORS as ae, isActiveValidationRule as af, FIELD_DATA as ag, UI_LANGUAGE as ah, ATTACHMENT_UPLOAD_URL as ai, ATTACHMENT_UPLOAD_RESPONSE_MAPPER as aj, ATTACHMENT_DOWNLOAD_URL as ak, USER_SEARCH_API as al, Hints as am, Droppable as an, ArabicNumberPipe as ao, FieldDataInjector as ap, PlateLetterPipe as aq, SelectStatusPipe as ar, TranslatePipe as as, FileHandler as at, IssDateAdapter as au, provideIssDateAdapter as av, Phone as aw, arrayFrom as ax, formatFileSize as ay, HIJRI_LOCALE as az, FieldViewer as b, ViewerBase as c, FormEngine as d, CheckboxControl as e, ChipsControl as f, getPropertyByPath as g, DateRangePickerControl as h, DatetimePickerControl as i, FilePickerControl as j, InputControl as k, PlateControl as l, SlideToggleControl as m, TimePickerControl as n, ToggleButtonControl as o, InputField as p, TextareaField as q, replacePlaceholders as r, ChipsField as s, RadioField as t, SelectField as u, MobileField as v, CheckboxField as w, ToggleButtonField as x, SlideToggleField as y, PlateField as z };
+//# sourceMappingURL=iss-ctrl-iss-ctrl-BnwwafES.mjs.map