iss-ctrl 0.0.19 → 0.0.20

package/fesm2022/{iss-ctrl-iss-ctrl-Cy9p_PEj.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,
@@ -6411,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-BhjVNeqN.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-CbLlparb.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-CvqXIE4q.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-vKIrSRgu.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-DmX9Pkzf.mjs').then((s) => s.LoadValueEvent),
-    loadOptions: () => import('./iss-ctrl-load-options-event-CmXkuQ5O.mjs').then((s) => s.LoadOptionsEvent),
-    triggerBasedOnJsonValue: () => import('./iss-ctrl-trigger-based-on-json-value-wyn6AXWA.mjs').then((s) => s.TriggerBasedOnJsonValue),
-    replaceApiKeyDefaultImpl: () => import('./iss-ctrl-replace-api-keys-C_mYQdtP.mjs').then((s) => s.ReplaceApiKeys),
+    load: () => import('./iss-ctrl-load-value-event-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
@@ -6809,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) {
@@ -6820,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) {
@@ -6833,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,
@@ -7115,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.
  *
@@ -7162,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,
@@ -7175,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()) {
@@ -7195,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>
       }
     }
   `
@@ -7262,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,
@@ -7275,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()) {
@@ -7286,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>
       }
     }
   `
@@ -7364,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,
@@ -7377,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()) {
@@ -7386,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>
       }
     }
   `
@@ -7458,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,
@@ -7481,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>
     }
@@ -7576,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,
@@ -7589,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()) {
@@ -7600,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>
       }
     }
   `
@@ -7664,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,
@@ -7677,7 +7755,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         MobileControl,
-                        MobileViewer
+                        MobileViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -7686,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>
       }
     }
   `
@@ -7766,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,
@@ -7779,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()) {
@@ -7792,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>
       }
     }
   `
@@ -7864,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()"
@@ -7877,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,
@@ -7891,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()"
@@ -7909,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>
       }
     }
   `
@@ -7984,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>
       }
     }
   `
@@ -8232,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,
@@ -8253,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>
       }
     }
   `
@@ -8630,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
@@ -8646,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,
@@ -8659,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
@@ -8681,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>
       }
     }
   `
@@ -8745,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,
@@ -8758,7 +8889,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     imports: [
                         ReactiveFormsModule,
                         TimePickerControl,
-                        TimePickerViewer
+                        TimePickerViewer,
+                        FieldViewer
                     ],
                     template: `
     @if (field.visible()) {
@@ -8767,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>
       }
     }
   `
@@ -8845,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"
@@ -8855,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,
@@ -8873,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"
@@ -8886,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>
+      }
+    }
   `
                 }]
         }] });
@@ -8971,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"
@@ -8981,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,
@@ -8999,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"
@@ -9012,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>
+      }
+    }
   `
                 }]
         }] });
@@ -9098,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"
@@ -9108,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,
@@ -9125,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"
@@ -9137,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>
+      }
+    }
   `
                 }]
         }] });
@@ -9469,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, getHijriParts as aA, startOfHijriMonth as aB, getHijriDaysInMonth as aC, createHijriDate as aD, formatHijriDate as aE, parseHijriDate as aF, toHijriDisplay as aG, IssValidators as aH, FileValidators as aI, TimeValidator as aJ, VALIDATION_MESSAGES as aa, COMPONENTS as ab, SERVICES as ac, VALIDATORS as ad, isActiveValidationRule as ae, FIELD_DATA as af, UI_LANGUAGE as ag, ATTACHMENT_UPLOAD_URL as ah, ATTACHMENT_UPLOAD_RESPONSE_MAPPER as ai, ATTACHMENT_DOWNLOAD_URL as aj, USER_SEARCH_API as ak, HintsComponent as al, Droppable as am, ArabicNumberPipe as an, FieldDataInjector as ao, PlateLetterPipe as ap, SelectStatusPipe as aq, TranslatePipe as ar, FileHandler as as, IssDateAdapter as at, provideIssDateAdapter as au, Phone as av, arrayFrom as aw, formatFileSize as ax, HIJRI_LOCALE as ay, HIJRI_MONTH_NAMES as az, ViewerBase as b, FormEngine as c, CheckboxControl as d, ChipsControl as e, DateRangePickerControl as f, getPropertyByPath as g, DatetimePickerControl as h, FilePickerControl as i, InputControl as j, PlateControl as k, SlideToggleControl as l, TimePickerControl as m, ToggleButtonControl as n, InputField as o, TextareaField as p, ChipsField as q, replacePlaceholders as r, RadioField as s, SelectField as t, MobileField as u, CheckboxField as v, ToggleButtonField as w, SlideToggleField as x, PlateField as y, FilePickerField as z };
-//# sourceMappingURL=iss-ctrl-iss-ctrl-Cy9p_PEj.mjs.map
+export { SlideToggleViewer as $, FilePickerField as A, TimePickerField as B, ControlBase as C, DatePickerControl as D, Employee as E, FieldBase as F, DatePickerField as G, HOST as H, IssField as I, DatetimePickerField as J, DateRangePickerField as K, Loader as L, MobileControl as M, InputViewer as N, Outlet as O, PLACEHOLDER_REGEX as P, TextareaViewer as Q, RadioControl as R, SelectControl as S, TextareaControl as T, ChipsViewer as U, VIEW_PROVIDER as V, RadioViewer as W, SelectViewer as X, MobileViewer as Y, CheckboxViewer as Z, ToggleButtonViewer as _, ValidationMessage as a, PlateViewer as a0, AttachmentViewer as a1, TimePickerViewer as a2, DatePickerViewer as a3, DatePickerTimeViewer as a4, DateRangePickerViewer as a5, DEFAULT_COUNTRY as a6, COUNTRIES as a7, DATE_FORMAT_ADAPTER as a8, DATETIME_FORMAT as a9, HIJRI_MONTH_NAMES as aA, getHijriParts as aB, startOfHijriMonth as aC, getHijriDaysInMonth as aD, createHijriDate as aE, formatHijriDate as aF, parseHijriDate as aG, toHijriDisplay as aH, IssValidators as aI, FileValidators as aJ, TimeValidator as aK, PLATE_LETTERS as aa, VALIDATION_MESSAGES as ab, COMPONENTS as ac, SERVICES as ad, VALIDATORS as ae, isActiveValidationRule as af, FIELD_DATA as ag, UI_LANGUAGE as ah, ATTACHMENT_UPLOAD_URL as ai, ATTACHMENT_UPLOAD_RESPONSE_MAPPER as aj, ATTACHMENT_DOWNLOAD_URL as ak, USER_SEARCH_API as al, Hints as am, Droppable as an, ArabicNumberPipe as ao, FieldDataInjector as ap, PlateLetterPipe as aq, SelectStatusPipe as ar, TranslatePipe as as, FileHandler as at, IssDateAdapter as au, provideIssDateAdapter as av, Phone as aw, arrayFrom as ax, formatFileSize as ay, HIJRI_LOCALE as az, FieldViewer as b, ViewerBase as c, FormEngine as d, CheckboxControl as e, ChipsControl as f, getPropertyByPath as g, DateRangePickerControl as h, DatetimePickerControl as i, FilePickerControl as j, InputControl as k, PlateControl as l, SlideToggleControl as m, TimePickerControl as n, ToggleButtonControl as o, InputField as p, TextareaField as q, replacePlaceholders as r, ChipsField as s, RadioField as t, SelectField as u, MobileField as v, CheckboxField as w, ToggleButtonField as x, SlideToggleField as y, PlateField as z };
+//# sourceMappingURL=iss-ctrl-iss-ctrl-BnwwafES.mjs.map