@ajf/material 18.4.0 → 18.5.0

package/fesm2022/ajf-material-forms.mjs

@@ -1,27 +1,24 @@
-import * as i1 from '@ajf/core/forms';
-import { AjfBaseFieldComponent, AJF_WARNING_ALERT_SERVICE, AjfAudioFieldComponent as AjfAudioFieldComponent$1, AjfInputFieldComponent as AjfInputFieldComponent$1, AjfFieldWithChoicesComponent, AJF_SEARCH_ALERT_THRESHOLD, AjfTableFieldComponent as AjfTableFieldComponent$1, AjfVideoUrlFieldComponent as AjfVideoUrlFieldComponent$1, AjfFieldService as AjfFieldService$1, AjfReadOnlyFieldComponent, AjfFieldType, AjfReadOnlyDateFieldComponent, AjfReadOnlyTableFieldComponent, AjfReadOnlySelectFieldComponent, AjfReadOnlyImageFieldComponent, AjfReadOnlyGeolocationFieldComponent, AjfReadOnlyFileFieldComponent, AjfFileFieldComponent, AjfImageFieldComponent, AjfReadOnlyVideoUrlFieldComponent, AjfFormField as AjfFormField$1, AjfFormRenderer as AjfFormRenderer$1, AjfFormsModule as AjfFormsModule$1 } from '@ajf/core/forms';
+import * as i1$1 from '@ajf/core/forms';
+import { AjfBaseFieldComponent, AJF_WARNING_ALERT_SERVICE, isRepeatingSlideInstance, AjfAudioFieldComponent as AjfAudioFieldComponent$1, AjfInputFieldComponent as AjfInputFieldComponent$1, AjfFieldWithChoicesComponent, AJF_SEARCH_ALERT_THRESHOLD, AjfTableFieldComponent as AjfTableFieldComponent$1, AjfVideoUrlFieldComponent as AjfVideoUrlFieldComponent$1, AjfFieldService as AjfFieldService$1, AjfReadOnlyFieldComponent, AjfFieldType, AjfReadOnlyDateFieldComponent, AjfReadOnlyTableFieldComponent, AjfReadOnlySelectFieldComponent, AjfReadOnlyImageFieldComponent, AjfReadOnlyGeolocationFieldComponent, AjfReadOnlyFileFieldComponent, AjfFileFieldComponent, AjfImageFieldComponent, AjfReadOnlyVideoUrlFieldComponent, AjfFormField as AjfFormField$1, AjfNodeType, isFieldInstance, nodeInstanceCompleteName, AjfFormRenderer as AjfFormRenderer$1, AjfFormsModule as AjfFormsModule$1 } from '@ajf/core/forms';
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, Inject, ViewChild, Optional, Input, NgModule } from '@angular/core';
+import { ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, Inject, Pipe, ViewChild, Optional, HostBinding, Input, EventEmitter, Output, NgModule } from '@angular/core';
 import * as i2$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i4 from '@angular/forms';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import * as i5 from '@ngneat/transloco';
 import { map, switchMap, startWith, distinctUntilChanged, debounceTime } from 'rxjs/operators';
-import * as i5 from '@angular/material/button';
+import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
 import * as i2$2 from '@ajf/material/calendar';
 import { AjfCalendarModule } from '@ajf/material/calendar';
-import * as i6 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
 import * as i4$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i5$1 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i8 from '@ngneat/transloco';
 import * as i2$3 from '@ajf/material/audio';
 import { AjfAudioModule } from '@ajf/material/audio';
 import * as i2$4 from '@ajf/material/barcode';
@@ -30,44 +27,44 @@ import * as i4$2 from '@ajf/core/common';
 import { AjfCommonModule } from '@ajf/core/common';
 import * as i2$5 from '@ajf/material/geolocation';
 import { AjfGeolocationModule } from '@ajf/material/geolocation';
-import { Subject, Subscription, of, combineLatest, merge } from 'rxjs';
+import { Subject, Subscription, of, combineLatest, merge, EMPTY } from 'rxjs';
 import * as i2$6 from '@ajf/material/checkbox-group';
 import { AjfCheckboxGroupModule } from '@ajf/material/checkbox-group';
 import * as i3$1 from '@ajf/core/checkbox-group';
-import * as i5$2 from '@angular/material/select';
+import * as i2$7 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i6 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i6$1 from '@angular/material/core';
+import * as i7 from '@angular/material/core';
 import { MatNativeDateModule } from '@angular/material/core';
-import * as i8$1 from 'ngx-mat-select-search';
+import * as i9 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { AjfRange } from '@ajf/core/range';
-import * as i3$2 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i5$3 from '@angular/material/slider';
+import * as i5$1 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
-import * as i3$3 from '@angular/material/radio';
-import { MatRadioModule } from '@angular/material/radio';
 import * as i4$3 from 'ngx-quill';
 import { QuillModule } from 'ngx-quill';
-import * as i2$7 from '@ajf/material/time';
+import * as i2$8 from '@ajf/material/time';
 import { AjfTimeModule } from '@ajf/material/time';
-import * as i2$8 from '@angular/platform-browser';
-import * as i3$4 from '@angular/common/http';
-import * as i2$9 from '@ajf/material/signature';
+import * as i2$9 from '@angular/platform-browser';
+import * as i3$2 from '@angular/common/http';
+import * as i2$a from '@ajf/material/signature';
 import { AjfSignatureModule } from '@ajf/material/signature';
-import * as i2$a from '@ajf/core/page-slider';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i3$3 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i2$b from '@ajf/core/page-slider';
 import * as i3$5 from '@ajf/material/page-slider';
 import { AjfPageSliderModule } from '@ajf/material/page-slider';
-import * as i6$2 from '@angular/material/button-toggle';
+import * as i3$4 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import { AjfTranslocoModule } from '@ajf/core/transloco';
+import { TextFieldModule } from '@angular/cdk/text-field';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i7 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i9 from '@angular/material/toolbar';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatRadioModule } from '@angular/material/radio';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i10 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { AjfTranslocoModule } from '@ajf/core/transloco';
-import { TextFieldModule } from '@angular/cdk/text-field';
 
 /**
  * @license
@@ -95,7 +92,7 @@ class AjfFieldWarningDialog {
         this.message = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFieldWarningDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFieldWarningDialog, selector: "ng-component", ngImport: i0, template: "<mat-dialog-content><div [innerHTML]=\"message\"></div></mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button [mat-dialog-close]=\"true\">Ok</button>\n  <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\n</mat-dialog-actions>\n", dependencies: [{ kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFieldWarningDialog, selector: "ng-component", ngImport: i0, template: "<mat-dialog-content><div [innerHTML]=\"message\"></div></mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button [mat-dialog-close]=\"true\">Ok</button>\n  <button mat-button [mat-dialog-close]=\"false\">Cancel</button>\n</mat-dialog-actions>\n", dependencies: [{ kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFieldWarningDialog, decorators: [{
             type: Component,
@@ -143,17 +140,106 @@ class AjfBooleanFieldComponent extends AjfBaseFieldComponent {
     constructor(cdr, service, was) {
         super(cdr, service, was);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfBooleanFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfBooleanFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<mat-slide-toggle *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\"></mat-slide-toggle>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfBooleanFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfBooleanFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"control | async as ctrl\">\n  <mat-slide-toggle [formControl]=\"ctrl!\"></mat-slide-toggle>\n  <span class=\"ajf-bool-label\">{{ (ctrl.value ? 'Yes' : 'No') | transloco }}</span>\n</ng-container>\n", styles: ["ajf-field .ajf-bool-label{color:var(--ajf-text);font-size:14px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfBooleanFieldComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-slide-toggle *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\"></mat-slide-toggle>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"control | async as ctrl\">\n  <mat-slide-toggle [formControl]=\"ctrl!\"></mat-slide-toggle>\n  <span class=\"ajf-bool-label\">{{ (ctrl.value ? 'Yes' : 'No') | transloco }}</span>\n</ng-container>\n", styles: ["ajf-field .ajf-bool-label{color:var(--ajf-text);font-size:14px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }] });
 
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+const pageCount = (slide) => isRepeatingSlideInstance(slide) ? Math.max(1, slide.reps) : 1;
+/**
+ * Resolve the page slider's current page into a slide.
+ *
+ * The renderer lays out one page per slide, and one page per repetition of a
+ * repeating slide, optionally preceded by a start message page -- the same
+ * arithmetic the error navigation in `AjfFormRenderer` performs.
+ *
+ * Impure, because slide visibility and repetition counts are mutated in place.
+ * The result is memoized so that the pipe keeps handing back the same object
+ * while nothing has moved: returning a fresh one on every check would trip
+ * Angular's "expression has changed after it was checked" guard.
+ */
+class AjfCurrentSlidePipe {
+    constructor() {
+        this._last = null;
+    }
+    transform(slides, currentPage, hasStartMessage, hasEndMessage = false) {
+        const visible = (slides || []).filter(s => s.visible !== false);
+        const offset = hasStartMessage ? 1 : 0;
+        const next = {
+            slide: null,
+            repIndex: 0,
+            reps: 0,
+            displayNumber: Math.max(1, (currentPage || 0) + 1),
+            total: visible.length,
+            pages: offset +
+                (hasEndMessage ? 1 : 0) +
+                visible.reduce((count, slide) => count + pageCount(slide), 0),
+        };
+        let page = (currentPage || 0) - offset;
+        if (page >= 0) {
+            for (let i = 0; i < visible.length; i++) {
+                const slide = visible[i];
+                const pages = pageCount(slide);
+                if (page < pages) {
+                    next.slide = slide;
+                    next.repIndex = page;
+                    next.reps = isRepeatingSlideInstance(slide)
+                        ? slide.reps
+                        : 0;
+                    next.displayNumber = i + 1 + offset;
+                    break;
+                }
+                page -= pages;
+            }
+        }
+        const last = this._last;
+        if (last != null &&
+            last.slide === next.slide &&
+            last.repIndex === next.repIndex &&
+            last.reps === next.reps &&
+            last.displayNumber === next.displayNumber &&
+            last.total === next.total &&
+            last.pages === next.pages) {
+            return last;
+        }
+        this._last = next;
+        return next;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfCurrentSlidePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AjfCurrentSlidePipe, name: "ajfCurrentSlide", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfCurrentSlidePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ajfCurrentSlide', pure: false }]
+        }] });
+
 /**
  * @license
  * Copyright (C) Gnucoop soc. coop.
@@ -179,13 +265,13 @@ class AjfDateFieldComponent extends AjfBaseFieldComponent {
     constructor(cdr, service, was) {
         super(cdr, service, was);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfDateFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfDateFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ajf-calendar\n  *ngIf=\"control|async as ctrl\"\n  selectionMode=\"day\"\n  [dateOnlyForDay]=\"true\"\n  [minDate]=\"instance!.node.minDate|ajfDateValue\"\n  [maxDate]=\"instance!.node.maxDate|ajfDateValue\"\n  [formControl]=\"ctrl!\"\n></ajf-calendar>\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.AjfCalendarComponent, selector: "ajf-calendar" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AjfDateValuePipe, name: "ajfDateValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfDateFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfDateFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ajf-calendar\n  *ngIf=\"control|async as ctrl\"\n  selectionMode=\"day\"\n  [dateOnlyForDay]=\"true\"\n  [minDate]=\"instance!.node.minDate|ajfDateValue\"\n  [maxDate]=\"instance!.node.maxDate|ajfDateValue\"\n  [formControl]=\"ctrl!\"\n></ajf-calendar>\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.AjfCalendarComponent, selector: "ajf-calendar" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.AjfDateValuePipe, name: "ajfDateValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfDateFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ajf-calendar\n  *ngIf=\"control|async as ctrl\"\n  selectionMode=\"day\"\n  [dateOnlyForDay]=\"true\"\n  [minDate]=\"instance!.node.minDate|ajfDateValue\"\n  [maxDate]=\"instance!.node.maxDate|ajfDateValue\"\n  [formControl]=\"ctrl!\"\n></ajf-calendar>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }] });
@@ -218,13 +304,13 @@ class AjfDateInputFieldComponent extends AjfBaseFieldComponent {
     clear(ctrl) {
         ctrl.setValue(null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfDateInputFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfDateInputFieldComponent, selector: "ng-component", viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-form-field *ngIf=\"control|async as ctrl\">\n  <input\n    matInput\n    [matDatepicker]=\"picker\"\n    [attr.aria-label]=\"instance!|ajfNodeCompleteName\"\n    [min]=\"instance!.node.minDate|ajfDateValueString\"\n    [max]=\"instance!.node.maxDate|ajfDateValueString\"\n    [formControl]=\"ctrl!\"\n    readonly\n  />\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker>\n    <mat-datepicker-actions>\n      <button mat-button (click)=\"clear(ctrl); picker.close()\">{{'Clear'|transloco}}</button>\n      <button mat-raised-button color=\"primary\" matDatepickerApply>{{'OK'|transloco}}</button>\n    </mat-datepicker-actions>\n  </mat-datepicker>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i4$1.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i8.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AjfDateValueStringPipe, name: "ajfDateValueString" }, { kind: "pipe", type: i1.AjfNodeCompleteNamePipe, name: "ajfNodeCompleteName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfDateInputFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfDateInputFieldComponent, selector: "ng-component", viewQueries: [{ propertyName: "input", first: true, predicate: MatInput, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"control | async as ctrl\">\n  <span class=\"ajf-input-group ajf-control--mono\">\n    <input\n      [matDatepicker]=\"picker\"\n      [attr.aria-label]=\"instance! | ajfNodeCompleteName\"\n      [min]=\"instance!.node.minDate | ajfDateValueString\"\n      [max]=\"instance!.node.maxDate | ajfDateValueString\"\n      [formControl]=\"ctrl!\"\n      readonly\n    />\n    <mat-datepicker-toggle class=\"ajf-input-group-action\" [for]=\"picker\"></mat-datepicker-toggle>\n  </span>\n  <mat-datepicker #picker>\n    <mat-datepicker-actions>\n      <button mat-button type=\"button\" (click)=\"clear(ctrl); picker.close()\">\n        {{ 'Clear' | transloco }}\n      </button>\n      <button mat-raised-button color=\"primary\" matDatepickerApply>{{ 'OK' | transloco }}</button>\n    </mat-datepicker-actions>\n  </mat-datepicker>\n</ng-container>\n", styles: ["ajf-field .ajf-input-group{width:200px}ajf-field .ajf-input-group .mat-datepicker-toggle{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$1.MatDatepickerActions, selector: "mat-datepicker-actions, mat-date-range-picker-actions" }, { kind: "directive", type: i4$1.MatDatepickerApply, selector: "[matDatepickerApply], [matDateRangePickerApply]" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.AjfDateValueStringPipe, name: "ajfDateValueString" }, { kind: "pipe", type: i1$1.AjfNodeCompleteNamePipe, name: "ajfNodeCompleteName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfDateInputFieldComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-form-field *ngIf=\"control|async as ctrl\">\n  <input\n    matInput\n    [matDatepicker]=\"picker\"\n    [attr.aria-label]=\"instance!|ajfNodeCompleteName\"\n    [min]=\"instance!.node.minDate|ajfDateValueString\"\n    [max]=\"instance!.node.maxDate|ajfDateValueString\"\n    [formControl]=\"ctrl!\"\n    readonly\n  />\n  <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker>\n    <mat-datepicker-actions>\n      <button mat-button (click)=\"clear(ctrl); picker.close()\">{{'Clear'|transloco}}</button>\n      <button mat-raised-button color=\"primary\" matDatepickerApply>{{'OK'|transloco}}</button>\n    </mat-datepicker-actions>\n  </mat-datepicker>\n</mat-form-field>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"control | async as ctrl\">\n  <span class=\"ajf-input-group ajf-control--mono\">\n    <input\n      [matDatepicker]=\"picker\"\n      [attr.aria-label]=\"instance! | ajfNodeCompleteName\"\n      [min]=\"instance!.node.minDate | ajfDateValueString\"\n      [max]=\"instance!.node.maxDate | ajfDateValueString\"\n      [formControl]=\"ctrl!\"\n      readonly\n    />\n    <mat-datepicker-toggle class=\"ajf-input-group-action\" [for]=\"picker\"></mat-datepicker-toggle>\n  </span>\n  <mat-datepicker #picker>\n    <mat-datepicker-actions>\n      <button mat-button type=\"button\" (click)=\"clear(ctrl); picker.close()\">\n        {{ 'Clear' | transloco }}\n      </button>\n      <button mat-raised-button color=\"primary\" matDatepickerApply>{{ 'OK' | transloco }}</button>\n    </mat-datepicker-actions>\n  </mat-datepicker>\n</ng-container>\n", styles: ["ajf-field .ajf-input-group{width:200px}ajf-field .ajf-input-group .mat-datepicker-toggle{display:inline-flex}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }], propDecorators: { input: [{
@@ -257,13 +343,13 @@ class AjfEmptyFieldComponent extends AjfBaseFieldComponent {
     constructor(cdr, service, was) {
         super(cdr, service, was);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfEmptyFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfEmptyFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"instance\">\n  <h1 [innerHTML]=\"instance.node.label | transloco\"></h1>\n  <div [innerHTML]=\"instance.node.HTML | transloco\"></div>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i8.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfEmptyFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfEmptyFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<!-- The field row renders the label; this block carries only the note body. -->\n<div class=\"ajf-note\" *ngIf=\"instance\" [innerHTML]=\"instance.node.HTML | transloco\"></div>\n", styles: ["ajf-field .ajf-note{box-sizing:border-box;width:100%;padding:12px 16px;border-left:3px solid var(--ajf-accent);background:var(--ajf-band);color:var(--ajf-text);font-size:14px;line-height:1.5}ajf-field .ajf-note>:first-child{margin-top:0}ajf-field .ajf-note>:last-child{margin-bottom:0}ajf-field .ajf-note strong,ajf-field .ajf-note b{font-weight:600}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfEmptyFieldComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"instance\">\n  <h1 [innerHTML]=\"instance.node.label | transloco\"></h1>\n  <div [innerHTML]=\"instance.node.HTML | transloco\"></div>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- The field row renders the label; this block carries only the note body. -->\n<div class=\"ajf-note\" *ngIf=\"instance\" [innerHTML]=\"instance.node.HTML | transloco\"></div>\n", styles: ["ajf-field .ajf-note{box-sizing:border-box;width:100%;padding:12px 16px;border-left:3px solid var(--ajf-accent);background:var(--ajf-band);color:var(--ajf-text);font-size:14px;line-height:1.5}ajf-field .ajf-note>:first-child{margin-top:0}ajf-field .ajf-note>:last-child{margin-bottom:0}ajf-field .ajf-note strong,ajf-field .ajf-note b{font-weight:600}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }] });
@@ -293,13 +379,13 @@ class AjfAudioFieldComponent extends AjfAudioFieldComponent$1 {
     constructor(cdr, service, was) {
         super(cdr, service, was);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfAudioFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfAudioFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfAudioFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<div class=\"ajf-field-wrapper\" *ngIf=\"control | async as ctrl\">\n  <ajf-audio\n    [readonly]=\"!instance?.editable\"\n    [formControl]=\"ctrl\"\n  ></ajf-audio>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i2$3.AjfAudioComponent, selector: "ajf-audio", inputs: ["readonly"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfAudioFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ajf-field-wrapper\" *ngIf=\"control | async as ctrl\">\n  <ajf-audio\n    [readonly]=\"!instance?.editable\"\n    [formControl]=\"ctrl\"\n  ></ajf-audio>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }] });
@@ -329,13 +415,13 @@ class AjfBarcodeFieldComponent extends AjfBaseFieldComponent {
     constructor(cdr, service, was) {
         super(cdr, service, was);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfBarcodeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfBarcodeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfBarcodeFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ajf-barcode *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\"></ajf-barcode>\n", styles: [""], dependencies: [{ kind: "component", type: i2$4.AjfBarcodeComponent, selector: "ajf-barcode" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfBarcodeFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ajf-barcode *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\"></ajf-barcode>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }] });
@@ -371,13 +457,13 @@ class AjfDisplayFieldComponent extends AjfInputFieldComponent$1 {
     constructor(cdr, service, was) {
         super(cdr, service, was);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfDisplayFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfDisplayFieldComponent, selector: "ajf-display-field", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"control | async as ctrl\">\n    <ng-container [ngSwitch]=\"instance?.node?.fieldType\">\n\n        <!-- String  -->\n        <span *ngSwitchCase=\"0\">{{ ctrl.value }}</span>\n\n        <!-- Textarea with HTML  -->\n        <div *ngSwitchCase=\"1\" [innerHTML]=\"ctrl.value | safeHtml\"></div>\n\n        <!-- Number  -->\n        <span *ngSwitchCase=\"2\">{{ ctrl.value | number }}</span>\n\n        <!-- Boolean  -->\n        <mat-slide-toggle *ngSwitchCase=\"3\" [checked]=\"ctrl.value\" (click)=\"$event.preventDefault()\"\n            (change)=\"$event.source.checked = ctrl.value\" [disableRipple]=\"true\">\n        </mat-slide-toggle>\n\n        <!-- Default -->\n        <span *ngSwitchDefault>{{ ctrl.value }}</span>\n\n    </ng-container>\n</ng-container>", styles: ["ajf-display-field span{min-height:1em;display:block}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i4$2.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfDisplayFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfDisplayFieldComponent, selector: "ajf-display-field", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"control | async as ctrl\">\n    <ng-container [ngSwitch]=\"instance?.node?.fieldType\">\n\n        <!-- String  -->\n        <span *ngSwitchCase=\"0\">{{ ctrl.value }}</span>\n\n        <!-- Textarea with HTML  -->\n        <div *ngSwitchCase=\"1\" [innerHTML]=\"ctrl.value | safeHtml\"></div>\n\n        <!-- Number  -->\n        <span *ngSwitchCase=\"2\">{{ ctrl.value | number }}</span>\n\n        <!-- Boolean  -->\n        <mat-slide-toggle *ngSwitchCase=\"3\" [checked]=\"ctrl.value\" (click)=\"$event.preventDefault()\"\n            (change)=\"$event.source.checked = ctrl.value\" [disableRipple]=\"true\">\n        </mat-slide-toggle>\n\n        <!-- Default -->\n        <span *ngSwitchDefault>{{ ctrl.value }}</span>\n\n    </ng-container>\n</ng-container>", styles: ["ajf-display-field{display:block;color:var(--ajf-text);font-size:14px;line-height:1.5}ajf-display-field>div>:first-child{margin-top:0}ajf-display-field>div>:last-child{margin-bottom:0}ajf-display-field .mat-mdc-slide-toggle{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "pipe", type: i4$2.SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfDisplayFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ajf-display-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"control | async as ctrl\">\n    <ng-container [ngSwitch]=\"instance?.node?.fieldType\">\n\n        <!-- String  -->\n        <span *ngSwitchCase=\"0\">{{ ctrl.value }}</span>\n\n        <!-- Textarea with HTML  -->\n        <div *ngSwitchCase=\"1\" [innerHTML]=\"ctrl.value | safeHtml\"></div>\n\n        <!-- Number  -->\n        <span *ngSwitchCase=\"2\">{{ ctrl.value | number }}</span>\n\n        <!-- Boolean  -->\n        <mat-slide-toggle *ngSwitchCase=\"3\" [checked]=\"ctrl.value\" (click)=\"$event.preventDefault()\"\n            (change)=\"$event.source.checked = ctrl.value\" [disableRipple]=\"true\">\n        </mat-slide-toggle>\n\n        <!-- Default -->\n        <span *ngSwitchDefault>{{ ctrl.value }}</span>\n\n    </ng-container>\n</ng-container>", styles: ["ajf-display-field span{min-height:1em;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: undefined, decorators: [{
+            args: [{ selector: 'ajf-display-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"control | async as ctrl\">\n    <ng-container [ngSwitch]=\"instance?.node?.fieldType\">\n\n        <!-- String  -->\n        <span *ngSwitchCase=\"0\">{{ ctrl.value }}</span>\n\n        <!-- Textarea with HTML  -->\n        <div *ngSwitchCase=\"1\" [innerHTML]=\"ctrl.value | safeHtml\"></div>\n\n        <!-- Number  -->\n        <span *ngSwitchCase=\"2\">{{ ctrl.value | number }}</span>\n\n        <!-- Boolean  -->\n        <mat-slide-toggle *ngSwitchCase=\"3\" [checked]=\"ctrl.value\" (click)=\"$event.preventDefault()\"\n            (change)=\"$event.source.checked = ctrl.value\" [disableRipple]=\"true\">\n        </mat-slide-toggle>\n\n        <!-- Default -->\n        <span *ngSwitchDefault>{{ ctrl.value }}</span>\n\n    </ng-container>\n</ng-container>", styles: ["ajf-display-field{display:block;color:var(--ajf-text);font-size:14px;line-height:1.5}ajf-display-field>div>:first-child{margin-top:0}ajf-display-field>div>:last-child{margin-bottom:0}ajf-display-field .mat-mdc-slide-toggle{pointer-events:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }] });
@@ -407,13 +493,13 @@ class AjfInputFieldComponent extends AjfInputFieldComponent$1 {
     constructor(cdr, service, was) {
         super(cdr, service, was);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfInputFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfInputFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<mat-form-field *ngIf=\"control|async as ctrl\">\n  <input matInput *ngIf=\"type === 'text'\" type=\"text\" [formControl]=\"ctrl!\"\n    [readonly]=\"instance!|ajfIsReadonlyInputField\" [attr.aria-labelledby]=\"instance!.node.name\">\n  <input matInput *ngIf=\"type === 'number'\" type=\"number\" [formControl]=\"ctrl!\"\n    [readonly]=\"instance!|ajfIsReadonlyInputField\" [attr.aria-labelledby]=\"instance!.node.name\">\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AjfIsReadonlyInputFieldPipe, name: "ajfIsReadonlyInputField" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfInputFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfInputFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"control | async as ctrl\">\n  <input\n    *ngIf=\"type === 'text'\"\n    class=\"ajf-control\"\n    [class.ajf-control--formula]=\"instance!.node.fieldType === 6\"\n    [class.ajf-control--mono]=\"instance!.node.fieldType === 6\"\n    type=\"text\"\n    [formControl]=\"ctrl!\"\n    [readonly]=\"instance! | ajfIsReadonlyInputField\"\n    [attr.aria-labelledby]=\"instance!.node.name\"\n  />\n  <input\n    *ngIf=\"type === 'number'\"\n    class=\"ajf-control ajf-control--mono ajf-control--narrow\"\n    type=\"number\"\n    [formControl]=\"ctrl!\"\n    [readonly]=\"instance! | ajfIsReadonlyInputField\"\n    [attr.aria-labelledby]=\"instance!.node.name\"\n  />\n</ng-container>\n", styles: ["ajf-field .ajf-control--formula{width:auto;min-width:72px;max-width:240px;border-color:transparent;background:var(--ajf-band);color:var(--ajf-text);text-align:center}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.AjfIsReadonlyInputFieldPipe, name: "ajfIsReadonlyInputField" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfInputFieldComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-form-field *ngIf=\"control|async as ctrl\">\n  <input matInput *ngIf=\"type === 'text'\" type=\"text\" [formControl]=\"ctrl!\"\n    [readonly]=\"instance!|ajfIsReadonlyInputField\" [attr.aria-labelledby]=\"instance!.node.name\">\n  <input matInput *ngIf=\"type === 'number'\" type=\"number\" [formControl]=\"ctrl!\"\n    [readonly]=\"instance!|ajfIsReadonlyInputField\" [attr.aria-labelledby]=\"instance!.node.name\">\n</mat-form-field>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"control | async as ctrl\">\n  <input\n    *ngIf=\"type === 'text'\"\n    class=\"ajf-control\"\n    [class.ajf-control--formula]=\"instance!.node.fieldType === 6\"\n    [class.ajf-control--mono]=\"instance!.node.fieldType === 6\"\n    type=\"text\"\n    [formControl]=\"ctrl!\"\n    [readonly]=\"instance! | ajfIsReadonlyInputField\"\n    [attr.aria-labelledby]=\"instance!.node.name\"\n  />\n  <input\n    *ngIf=\"type === 'number'\"\n    class=\"ajf-control ajf-control--mono ajf-control--narrow\"\n    type=\"number\"\n    [formControl]=\"ctrl!\"\n    [readonly]=\"instance! | ajfIsReadonlyInputField\"\n    [attr.aria-labelledby]=\"instance!.node.name\"\n  />\n</ng-container>\n", styles: ["ajf-field .ajf-control--formula{width:auto;min-width:72px;max-width:240px;border-color:transparent;background:var(--ajf-band);color:var(--ajf-text);text-align:center}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }] });
@@ -443,13 +529,13 @@ class AjfGeolocationFieldComponent extends AjfBaseFieldComponent {
     constructor(cdr, service, was) {
         super(cdr, service, was);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfGeolocationFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfGeolocationFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfGeolocationFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ajf-geolocation *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\"></ajf-geolocation>", styles: [""], dependencies: [{ kind: "component", type: i2$5.AjfGeolocationComponent, selector: "ajf-geolocation" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfGeolocationFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ajf-geolocation *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\"></ajf-geolocation>" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }] });
@@ -477,6 +563,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  */
 const maxChoicesInDom$1 = 40;
 class AjfMultipleChoiceFieldComponent extends AjfFieldWithChoicesComponent {
+    /**
+     * Whether the choices collapse into a searchable dropdown. Below the search
+     * threshold they are laid out as buttons instead, which reads faster for a
+     * short list. `forceExpanded` wins over `forceNarrow`, so a schema can pin
+     * either presentation regardless of how many choices there are.
+     */
+    get isNarrow() {
+        const instance = this.instance;
+        if (instance == null) {
+            return false;
+        }
+        if (instance.node.forceExpanded) {
+            return false;
+        }
+        return instance.node.forceNarrow || instance.filteredChoices.length > this.expandThreshold;
+    }
     constructor(cdr, service, was, searchThreshold) {
         super(cdr, service, was, searchThreshold);
         this.expandThreshold = super.searchThreshold;
@@ -510,6 +612,24 @@ class AjfMultipleChoiceFieldComponent extends AjfFieldWithChoicesComponent {
             return truncated;
         }));
     }
+    /** The label shown on a selection chip. */
+    labelFor(value) {
+        const choice = (this.instance?.filteredChoices || []).find(c => c.value === value);
+        if (choice == null) {
+            return `${value}`;
+        }
+        return choice.translatedLabel ?? choice.label;
+    }
+    /**
+     * Drop one value from the selection, from the chip's own button. The click has
+     * to be stopped from reaching the trigger, which would reopen the panel.
+     */
+    removeValue(ctrl, value, event) {
+        event.stopPropagation();
+        event.preventDefault();
+        const current = Array.isArray(ctrl.value) ? ctrl.value : [];
+        ctrl.setValue(current.filter(v => v !== value));
+    }
     _onInstanceChange() {
         this._instanceUpdateForChoicesSub.unsubscribe();
         this._choicesUpdate$.next();
@@ -524,13 +644,13 @@ class AjfMultipleChoiceFieldComponent extends AjfFieldWithChoicesComponent {
         this._instanceUpdateForChoicesSub.unsubscribe();
         this._choicesUpdate$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfMultipleChoiceFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }, { token: AJF_SEARCH_ALERT_THRESHOLD, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AjfMultipleChoiceFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (instance) {\n  @if (instance.node.forceNarrow || instance.filteredChoices.length > expandThreshold) {\n    <mat-select *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\" [multiple]=\"true\">\n      <mat-option [style.backgroundColor]=\"'white'\">\n        <ngx-mat-select-search\n          [formControl]=\"searchFilterCtrl\"\n          [placeholderLabel]=\"'Search'|transloco\"\n          [noEntriesFoundLabel]=\"'Nothing found'|transloco\"\n          [enableClearOnEscapePressed]=\"true\">\n        </ngx-mat-select-search>\n      </mat-option>\n      <mat-option [value]=\"choice.value\" *ngFor=\"let choice of filteredChoices$ | async\">\n        {{ choice.translatedLabel ?? (choice.label|transloco) }}\n      </mat-option>\n    </mat-select>\n  } @else {\n    <ajf-checkbox-group *ngIf=\"control|async as ctrl\" class=\"ajf-choices-container\"\n        [formControl]=\"ctrl!\">\n      <ajf-checkbox-group-item [value]=\"choice.value\" *ngFor=\"let choice of instance.filteredChoices\">\n        {{ choice.translatedLabel ?? (choice.label|transloco) }}\n      </ajf-checkbox-group-item>\n    </ajf-checkbox-group>\n  }\n}\n", styles: [""], dependencies: [{ kind: "component", type: i2$6.CheckboxGroupItem, selector: "ajf-checkbox-group-item" }, { kind: "directive", type: i3$1.AjfCheckboxGroup, selector: "ajf-checkbox-group,[ajf-checkbox-group]", inputs: ["value", "name", "disabled"], outputs: ["change"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8$1.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "pipe", type: i8.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfMultipleChoiceFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }, { token: AJF_SEARCH_ALERT_THRESHOLD, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AjfMultipleChoiceFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (instance) {\n<ng-container *ngIf=\"control | async as ctrl\">\n  <div class=\"ajf-choice-control\">\n    @if (isNarrow) {\n    <mat-select [formControl]=\"ctrl!\" panelClass=\"ajf-select-panel\" [multiple]=\"true\">\n      <mat-select-trigger>\n        <span class=\"ajf-chip ajf-chip--removable\" *ngFor=\"let value of ctrl.value\">\n          {{ labelFor(value) | transloco }}\n          <button\n            type=\"button\"\n            *ngIf=\"!ctrl.disabled\"\n            [attr.aria-label]=\"'Remove' | transloco\"\n            (click)=\"removeValue(ctrl!, value, $event)\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </span>\n      </mat-select-trigger>\n      <mat-option class=\"ajf-select-search-option\">\n        <ngx-mat-select-search\n          [formControl]=\"searchFilterCtrl\"\n          [placeholderLabel]=\"'Search' | transloco\"\n          [noEntriesFoundLabel]=\"'Nothing found' | transloco\"\n          [enableClearOnEscapePressed]=\"true\"\n        >\n        </ngx-mat-select-search>\n      </mat-option>\n      <mat-option [value]=\"choice.value\" *ngFor=\"let choice of filteredChoices$ | async\">\n        {{ choice.translatedLabel ?? (choice.label | transloco) }}\n      </mat-option>\n    </mat-select>\n    } @else {\n    <ajf-checkbox-group class=\"ajf-choices-container\" [formControl]=\"ctrl!\">\n      <ajf-checkbox-group-item [value]=\"choice.value\" *ngFor=\"let choice of instance.filteredChoices\">\n        {{ choice.translatedLabel ?? (choice.label | transloco) }}\n      </ajf-checkbox-group-item>\n    </ajf-checkbox-group>\n    }\n\n    <!-- Dropping the whole selection, next to the per-chip buttons that drop one. -->\n    <button\n      type=\"button\"\n      class=\"ajf-btn--ghost ajf-clear-value\"\n      *ngIf=\"hasValue(ctrl) && !ctrl.disabled\"\n      (click)=\"clearValue(ctrl, $event)\"\n    >\n      {{ 'Clear' | transloco }}\n    </button>\n  </div>\n</ng-container>\n}\n", styles: [""], dependencies: [{ kind: "component", type: i2$6.CheckboxGroupItem, selector: "ajf-checkbox-group-item" }, { kind: "directive", type: i3$1.AjfCheckboxGroup, selector: "ajf-checkbox-group,[ajf-checkbox-group]", inputs: ["value", "name", "disabled"], outputs: ["change"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i6.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i9.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfMultipleChoiceFieldComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (instance) {\n  @if (instance.node.forceNarrow || instance.filteredChoices.length > expandThreshold) {\n    <mat-select *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\" [multiple]=\"true\">\n      <mat-option [style.backgroundColor]=\"'white'\">\n        <ngx-mat-select-search\n          [formControl]=\"searchFilterCtrl\"\n          [placeholderLabel]=\"'Search'|transloco\"\n          [noEntriesFoundLabel]=\"'Nothing found'|transloco\"\n          [enableClearOnEscapePressed]=\"true\">\n        </ngx-mat-select-search>\n      </mat-option>\n      <mat-option [value]=\"choice.value\" *ngFor=\"let choice of filteredChoices$ | async\">\n        {{ choice.translatedLabel ?? (choice.label|transloco) }}\n      </mat-option>\n    </mat-select>\n  } @else {\n    <ajf-checkbox-group *ngIf=\"control|async as ctrl\" class=\"ajf-choices-container\"\n        [formControl]=\"ctrl!\">\n      <ajf-checkbox-group-item [value]=\"choice.value\" *ngFor=\"let choice of instance.filteredChoices\">\n        {{ choice.translatedLabel ?? (choice.label|transloco) }}\n      </ajf-checkbox-group-item>\n    </ajf-checkbox-group>\n  }\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (instance) {\n<ng-container *ngIf=\"control | async as ctrl\">\n  <div class=\"ajf-choice-control\">\n    @if (isNarrow) {\n    <mat-select [formControl]=\"ctrl!\" panelClass=\"ajf-select-panel\" [multiple]=\"true\">\n      <mat-select-trigger>\n        <span class=\"ajf-chip ajf-chip--removable\" *ngFor=\"let value of ctrl.value\">\n          {{ labelFor(value) | transloco }}\n          <button\n            type=\"button\"\n            *ngIf=\"!ctrl.disabled\"\n            [attr.aria-label]=\"'Remove' | transloco\"\n            (click)=\"removeValue(ctrl!, value, $event)\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </span>\n      </mat-select-trigger>\n      <mat-option class=\"ajf-select-search-option\">\n        <ngx-mat-select-search\n          [formControl]=\"searchFilterCtrl\"\n          [placeholderLabel]=\"'Search' | transloco\"\n          [noEntriesFoundLabel]=\"'Nothing found' | transloco\"\n          [enableClearOnEscapePressed]=\"true\"\n        >\n        </ngx-mat-select-search>\n      </mat-option>\n      <mat-option [value]=\"choice.value\" *ngFor=\"let choice of filteredChoices$ | async\">\n        {{ choice.translatedLabel ?? (choice.label | transloco) }}\n      </mat-option>\n    </mat-select>\n    } @else {\n    <ajf-checkbox-group class=\"ajf-choices-container\" [formControl]=\"ctrl!\">\n      <ajf-checkbox-group-item [value]=\"choice.value\" *ngFor=\"let choice of instance.filteredChoices\">\n        {{ choice.translatedLabel ?? (choice.label | transloco) }}\n      </ajf-checkbox-group-item>\n    </ajf-checkbox-group>\n    }\n\n    <!-- Dropping the whole selection, next to the per-chip buttons that drop one. -->\n    <button\n      type=\"button\"\n      class=\"ajf-btn--ghost ajf-clear-value\"\n      *ngIf=\"hasValue(ctrl) && !ctrl.disabled\"\n      (click)=\"clearValue(ctrl, $event)\"\n    >\n      {{ 'Clear' | transloco }}\n    </button>\n  </div>\n</ng-container>\n}\n" }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }, { type: undefined, decorators: [{
@@ -579,13 +699,13 @@ class AjfRangeFieldComponent extends AjfRange {
         }
         return nums;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfRangeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfRangeFieldComponent, selector: "ajf-range", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"control|async as ctrl\">\n  <div\n    *ngIf=\"appearance !== 'rating'; else ratingTemplate\"\n    [class.ajf-range-no-value]=\"isEmpty(ctrl.value)\"\n  >\n    <mat-slider\n      discrete\n      showTickMarks\n      [step]=\"step\"\n      [min]=\"start\"\n      [max]=\"end\"\n      [attr.aria-label]=\"name\"\n      [attr.name]=\"name\"\n    ><input matSliderThumb [value]=\"value\" [formControl]=\"ctrl\" /></mat-slider>\n    <div class=\"ajf-range-label\">\n      <label>{{isEmpty(ctrl.value) ? ('No value selected'|transloco) : ctrl.value}}</label>\n    </div>\n  </div>\n  \n  <ng-template #ratingTemplate>\n    <div class=\"ajf-rating-container\">\n      <button type=\"button\"\n      *ngFor=\"let i of enumerateStars()\"\n      class=\"ajf-rating-star\"\n      [class.selected]=\"i <= ctrl.value\"\n      (click)=\"ctrl.setValue(i)\"\n      [attr.aria-label]=\"'Rate ' + i + ' out of ' + end\"\n      [attr.name]=\"name\">\n        <mat-icon>star</mat-icon>\n      </button>\n      <div class=\"ajf-range-label\">\n        <label>{{ctrl.value}}</label>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: ["ajf-range{display:inline-block;padding-top:20px}ajf-range .ajf-range-label{display:inline-block;padding:0 10px}ajf-range .ajf-range-no-value{--mdc-slider-handle-color: #9e9e9e;--mdc-slider-focus-handle-color: #9e9e9e;--mdc-slider-hover-handle-color: #9e9e9e;--mdc-slider-active-track-color: #9e9e9e;--mdc-slider-inactive-track-color: #9e9e9e;--mdc-slider-with-tick-marks-active-container-color: #fff;--mdc-slider-with-tick-marks-inactive-container-color: #9e9e9e;--mdc-slider-label-container-color: #9e9e9e;--mat-slider-ripple-color: #9e9e9e;--mat-slider-hover-state-layer-color: rgba(158, 158, 158, .05);--mat-slider-focus-state-layer-color: rgba(158, 158, 158, .2)}ajf-range .ajf-range-no-value .ajf-range-label{color:#9e9e9e}ajf-range .ajf-rating-container{display:flex;align-items:center;gap:8px;padding:8px 0}ajf-range .ajf-rating-container .ajf-rating-star{background:none;border:none;cursor:pointer;padding:0;color:#ccc;transition:color .2s}ajf-range .ajf-rating-container .ajf-rating-star.selected{color:gold}ajf-range .ajf-rating-container .ajf-rating-star mat-icon{font-size:32px;height:32px;width:32px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5$3.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i5$3.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "pipe", type: i8.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfRangeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfRangeFieldComponent, selector: "ajf-range", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"control | async as ctrl\">\n  <div\n    *ngIf=\"appearance !== 'rating'; else ratingTemplate\"\n    class=\"ajf-range\"\n    [class.ajf-range-no-value]=\"isEmpty(ctrl.value)\"\n  >\n    <div class=\"ajf-range-track\">\n      <mat-slider\n        discrete\n        showTickMarks\n        [step]=\"step\"\n        [min]=\"start\"\n        [max]=\"end\"\n        [attr.aria-label]=\"name\"\n        [attr.name]=\"name\"\n      >\n        <input matSliderThumb [value]=\"value\" [formControl]=\"ctrl\" />\n      </mat-slider>\n      <div class=\"ajf-range-bounds\">\n        <span>{{ start }}</span>\n        <span>{{ end }}</span>\n      </div>\n    </div>\n    <span class=\"ajf-range-value\">{{ isEmpty(ctrl.value) ? '&mdash;' : ctrl.value }}</span>\n  </div>\n\n  <ng-template #ratingTemplate>\n    <div class=\"ajf-rating-container\">\n      <button\n        type=\"button\"\n        *ngFor=\"let i of enumerateStars()\"\n        class=\"ajf-rating-star\"\n        [class.ajf-selected]=\"i <= ctrl.value\"\n        (click)=\"ctrl.setValue(i)\"\n        [attr.aria-label]=\"'Rate ' + i + ' out of ' + end\"\n        [attr.name]=\"name\"\n      >\n        <mat-icon>star</mat-icon>\n      </button>\n      <span class=\"ajf-rating-readout\">{{ ctrl.value || 0 }} / {{ end }}</span>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: ["ajf-range{display:block;width:100%}ajf-range .ajf-range{display:flex;align-items:center;gap:12px}ajf-range .ajf-range-track{flex:1 1 auto;min-width:180px;max-width:360px}ajf-range .ajf-range-track .mat-mdc-slider{width:100%;margin:0}ajf-range .ajf-range-bounds{display:flex;justify-content:space-between;margin-top:-6px;padding:0 8px;color:var(--ajf-text-muted);font-family:var(--ajf-font-mono);font-size:11px}ajf-range .ajf-range-value{box-sizing:border-box;min-height:var(--ajf-control-h);border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;line-height:calc(var(--ajf-control-h) - 2px);outline:none;min-width:44px;padding:0 8px;background:var(--ajf-band);font-family:var(--ajf-font-mono);text-align:center}ajf-range .ajf-range-value:focus,ajf-range .ajf-range-value:focus-within{border-color:var(--ajf-accent);box-shadow:0 0 0 2px var(--ajf-accent-soft)}ajf-range .ajf-range-value:disabled,ajf-range .ajf-range-value[readonly]{color:var(--ajf-text-muted);background:var(--ajf-band)}ajf-range .ajf-range-no-value .mat-mdc-slider{--mdc-slider-active-track-color: var(--ajf-border-strong);--mdc-slider-handle-color: var(--ajf-border-strong);--mdc-slider-focus-handle-color: var(--ajf-border-strong);--mdc-slider-hover-handle-color: var(--ajf-border-strong)}ajf-range .ajf-range-no-value .ajf-range-value{color:var(--ajf-text-faint)}ajf-range .ajf-rating-container{display:flex;align-items:center;gap:4px}ajf-range .ajf-rating-star{padding:0;border:0;background:none;color:var(--ajf-border-strong);cursor:pointer}ajf-range .ajf-rating-star.ajf-selected{color:var(--ajf-accent)}ajf-range .ajf-rating-star .mat-icon{width:26px;height:26px;font-size:26px}ajf-range .ajf-rating-readout{margin-left:8px;color:var(--ajf-text-muted);font-family:var(--ajf-font-mono);font-size:13px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i5$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i5$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfRangeFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ajf-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"control|async as ctrl\">\n  <div\n    *ngIf=\"appearance !== 'rating'; else ratingTemplate\"\n    [class.ajf-range-no-value]=\"isEmpty(ctrl.value)\"\n  >\n    <mat-slider\n      discrete\n      showTickMarks\n      [step]=\"step\"\n      [min]=\"start\"\n      [max]=\"end\"\n      [attr.aria-label]=\"name\"\n      [attr.name]=\"name\"\n    ><input matSliderThumb [value]=\"value\" [formControl]=\"ctrl\" /></mat-slider>\n    <div class=\"ajf-range-label\">\n      <label>{{isEmpty(ctrl.value) ? ('No value selected'|transloco) : ctrl.value}}</label>\n    </div>\n  </div>\n  \n  <ng-template #ratingTemplate>\n    <div class=\"ajf-rating-container\">\n      <button type=\"button\"\n      *ngFor=\"let i of enumerateStars()\"\n      class=\"ajf-rating-star\"\n      [class.selected]=\"i <= ctrl.value\"\n      (click)=\"ctrl.setValue(i)\"\n      [attr.aria-label]=\"'Rate ' + i + ' out of ' + end\"\n      [attr.name]=\"name\">\n        <mat-icon>star</mat-icon>\n      </button>\n      <div class=\"ajf-range-label\">\n        <label>{{ctrl.value}}</label>\n      </div>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: ["ajf-range{display:inline-block;padding-top:20px}ajf-range .ajf-range-label{display:inline-block;padding:0 10px}ajf-range .ajf-range-no-value{--mdc-slider-handle-color: #9e9e9e;--mdc-slider-focus-handle-color: #9e9e9e;--mdc-slider-hover-handle-color: #9e9e9e;--mdc-slider-active-track-color: #9e9e9e;--mdc-slider-inactive-track-color: #9e9e9e;--mdc-slider-with-tick-marks-active-container-color: #fff;--mdc-slider-with-tick-marks-inactive-container-color: #9e9e9e;--mdc-slider-label-container-color: #9e9e9e;--mat-slider-ripple-color: #9e9e9e;--mat-slider-hover-state-layer-color: rgba(158, 158, 158, .05);--mat-slider-focus-state-layer-color: rgba(158, 158, 158, .2)}ajf-range .ajf-range-no-value .ajf-range-label{color:#9e9e9e}ajf-range .ajf-rating-container{display:flex;align-items:center;gap:8px;padding:8px 0}ajf-range .ajf-rating-container .ajf-rating-star{background:none;border:none;cursor:pointer;padding:0;color:#ccc;transition:color .2s}ajf-range .ajf-rating-container .ajf-rating-star.selected{color:gold}ajf-range .ajf-rating-container .ajf-rating-star mat-icon{font-size:32px;height:32px;width:32px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+            args: [{ selector: 'ajf-range', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"control | async as ctrl\">\n  <div\n    *ngIf=\"appearance !== 'rating'; else ratingTemplate\"\n    class=\"ajf-range\"\n    [class.ajf-range-no-value]=\"isEmpty(ctrl.value)\"\n  >\n    <div class=\"ajf-range-track\">\n      <mat-slider\n        discrete\n        showTickMarks\n        [step]=\"step\"\n        [min]=\"start\"\n        [max]=\"end\"\n        [attr.aria-label]=\"name\"\n        [attr.name]=\"name\"\n      >\n        <input matSliderThumb [value]=\"value\" [formControl]=\"ctrl\" />\n      </mat-slider>\n      <div class=\"ajf-range-bounds\">\n        <span>{{ start }}</span>\n        <span>{{ end }}</span>\n      </div>\n    </div>\n    <span class=\"ajf-range-value\">{{ isEmpty(ctrl.value) ? '&mdash;' : ctrl.value }}</span>\n  </div>\n\n  <ng-template #ratingTemplate>\n    <div class=\"ajf-rating-container\">\n      <button\n        type=\"button\"\n        *ngFor=\"let i of enumerateStars()\"\n        class=\"ajf-rating-star\"\n        [class.ajf-selected]=\"i <= ctrl.value\"\n        (click)=\"ctrl.setValue(i)\"\n        [attr.aria-label]=\"'Rate ' + i + ' out of ' + end\"\n        [attr.name]=\"name\"\n      >\n        <mat-icon>star</mat-icon>\n      </button>\n      <span class=\"ajf-rating-readout\">{{ ctrl.value || 0 }} / {{ end }}</span>\n    </div>\n  </ng-template>\n</ng-container>\n", styles: ["ajf-range{display:block;width:100%}ajf-range .ajf-range{display:flex;align-items:center;gap:12px}ajf-range .ajf-range-track{flex:1 1 auto;min-width:180px;max-width:360px}ajf-range .ajf-range-track .mat-mdc-slider{width:100%;margin:0}ajf-range .ajf-range-bounds{display:flex;justify-content:space-between;margin-top:-6px;padding:0 8px;color:var(--ajf-text-muted);font-family:var(--ajf-font-mono);font-size:11px}ajf-range .ajf-range-value{box-sizing:border-box;min-height:var(--ajf-control-h);border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;line-height:calc(var(--ajf-control-h) - 2px);outline:none;min-width:44px;padding:0 8px;background:var(--ajf-band);font-family:var(--ajf-font-mono);text-align:center}ajf-range .ajf-range-value:focus,ajf-range .ajf-range-value:focus-within{border-color:var(--ajf-accent);box-shadow:0 0 0 2px var(--ajf-accent-soft)}ajf-range .ajf-range-value:disabled,ajf-range .ajf-range-value[readonly]{color:var(--ajf-text-muted);background:var(--ajf-band)}ajf-range .ajf-range-no-value .mat-mdc-slider{--mdc-slider-active-track-color: var(--ajf-border-strong);--mdc-slider-handle-color: var(--ajf-border-strong);--mdc-slider-focus-handle-color: var(--ajf-border-strong);--mdc-slider-hover-handle-color: var(--ajf-border-strong)}ajf-range .ajf-range-no-value .ajf-range-value{color:var(--ajf-text-faint)}ajf-range .ajf-rating-container{display:flex;align-items:center;gap:4px}ajf-range .ajf-rating-star{padding:0;border:0;background:none;color:var(--ajf-border-strong);cursor:pointer}ajf-range .ajf-rating-star.ajf-selected{color:var(--ajf-accent)}ajf-range .ajf-rating-star .mat-icon{width:26px;height:26px;font-size:26px}ajf-range .ajf-rating-readout{margin-left:8px;color:var(--ajf-text-muted);font-family:var(--ajf-font-mono);font-size:13px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }] });
@@ -613,6 +733,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  */
 const maxChoicesInDom = 40;
 class AjfSingleChoiceFieldComponent extends AjfFieldWithChoicesComponent {
+    /**
+     * Whether the choices collapse into a searchable dropdown. Below the search
+     * threshold they are laid out as buttons instead, which reads faster for a
+     * short list. `forceExpanded` wins over `forceNarrow`, so a schema can pin
+     * either presentation regardless of how many choices there are.
+     */
+    get isNarrow() {
+        const instance = this.instance;
+        if (instance == null) {
+            return false;
+        }
+        if (instance.node.forceExpanded) {
+            return false;
+        }
+        return instance.node.forceNarrow || instance.filteredChoices.length > this.expandThreshold;
+    }
     constructor(cdr, service, was, searchThreshold) {
         super(cdr, service, was, searchThreshold);
         this.expandThreshold = super.searchThreshold;
@@ -658,13 +794,13 @@ class AjfSingleChoiceFieldComponent extends AjfFieldWithChoicesComponent {
         this._instanceUpdateForChoicesSub.unsubscribe();
         this._choicesUpdate$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfSingleChoiceFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }, { token: AJF_SEARCH_ALERT_THRESHOLD, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AjfSingleChoiceFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (instance) {\n  @if (instance.node.forceNarrow || instance.filteredChoices.length > expandThreshold) {\n    <mat-select *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\">\n      <mat-option [style.backgroundColor]=\"'white'\">\n        <ngx-mat-select-search\n          [formControl]=\"searchFilterCtrl\"\n          [placeholderLabel]=\"'Search'|transloco\"\n          [noEntriesFoundLabel]=\"'Nothing found'|transloco\"\n          [enableClearOnEscapePressed]=\"true\">\n        </ngx-mat-select-search>\n      </mat-option>\n      <mat-option [value]=\"choice.value\" *ngFor=\"let choice of filteredChoices$ | async\">\n        {{ choice.translatedLabel ?? (choice.label|transloco) }}\n      </mat-option>\n    </mat-select>\n  } @else {\n    <mat-radio-group *ngIf=\"control|async as ctrl\" class=\"ajf-choices-container\"\n        [attr.aria-labelledby]=\"instance.node.name\"\n        [formControl]=\"ctrl!\">\n      <mat-radio-button [value]=\"choice.value\" *ngFor=\"let choice of instance.filteredChoices\">\n        {{ choice.translatedLabel ?? (choice.label|transloco) }}\n      </mat-radio-button>\n    </mat-radio-group>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: i5$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i8$1.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "pipe", type: i8.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfSingleChoiceFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }, { token: AJF_SEARCH_ALERT_THRESHOLD, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AjfSingleChoiceFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "@if (instance) {\n<ng-container *ngIf=\"control | async as ctrl\">\n  <div class=\"ajf-choice-control\">\n    @if (isNarrow) {\n    <mat-select [formControl]=\"ctrl!\" panelClass=\"ajf-select-panel\">\n      <mat-option class=\"ajf-select-search-option\">\n        <ngx-mat-select-search\n          [formControl]=\"searchFilterCtrl\"\n          [placeholderLabel]=\"'Search' | transloco\"\n          [noEntriesFoundLabel]=\"'Nothing found' | transloco\"\n          [enableClearOnEscapePressed]=\"true\"\n        >\n        </ngx-mat-select-search>\n      </mat-option>\n      <mat-option [value]=\"choice.value\" *ngFor=\"let choice of filteredChoices$ | async\">\n        {{ choice.translatedLabel ?? (choice.label | transloco) }}\n      </mat-option>\n    </mat-select>\n    } @else {\n    <div\n      class=\"ajf-segmented ajf-choices-container\"\n      role=\"radiogroup\"\n      [attr.aria-labelledby]=\"instance.node.name\"\n    >\n      <button\n        type=\"button\"\n        class=\"ajf-segment\"\n        role=\"radio\"\n        *ngFor=\"let choice of instance.filteredChoices\"\n        [attr.aria-checked]=\"ctrl.value === choice.value\"\n        [class.ajf-selected]=\"ctrl.value === choice.value\"\n        [disabled]=\"ctrl.disabled\"\n        (click)=\"ctrl.setValue(choice.value)\"\n      >\n        {{ choice.translatedLabel ?? (choice.label | transloco) }}\n      </button>\n    </div>\n    }\n\n    <!-- A picked radio cannot be unpicked, so emptying the field needs its own\n         action. -->\n    <button\n      type=\"button\"\n      class=\"ajf-btn--ghost ajf-clear-value\"\n      *ngIf=\"hasValue(ctrl) && !ctrl.disabled\"\n      (click)=\"clearValue(ctrl, $event)\"\n    >\n      {{ 'Clear' | transloco }}\n    </button>\n  </div>\n</ng-container>\n}\n", styles: [".ajf-choice-control{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.mat-mdc-select-panel.ajf-select-panel{border:1px solid var(--ajf-border, #e6e2dc);background:var(--ajf-surface, #ffffff)}.mat-mdc-select-panel.ajf-select-panel .mat-mdc-option{font-family:var(--ajf-font-sans, sans-serif)}.mat-mdc-select-panel.ajf-select-panel .mat-mdc-option .mdc-list-item__primary-text{color:var(--ajf-text, #1c1a17);font-size:14px}.mat-mdc-select-panel.ajf-select-panel .mat-mdc-option.ajf-select-search-option{min-height:0;padding:0;border-bottom:1px solid var(--ajf-border, #e6e2dc);background:var(--ajf-surface, #ffffff);pointer-events:auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i9.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfSingleChoiceFieldComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (instance) {\n  @if (instance.node.forceNarrow || instance.filteredChoices.length > expandThreshold) {\n    <mat-select *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\">\n      <mat-option [style.backgroundColor]=\"'white'\">\n        <ngx-mat-select-search\n          [formControl]=\"searchFilterCtrl\"\n          [placeholderLabel]=\"'Search'|transloco\"\n          [noEntriesFoundLabel]=\"'Nothing found'|transloco\"\n          [enableClearOnEscapePressed]=\"true\">\n        </ngx-mat-select-search>\n      </mat-option>\n      <mat-option [value]=\"choice.value\" *ngFor=\"let choice of filteredChoices$ | async\">\n        {{ choice.translatedLabel ?? (choice.label|transloco) }}\n      </mat-option>\n    </mat-select>\n  } @else {\n    <mat-radio-group *ngIf=\"control|async as ctrl\" class=\"ajf-choices-container\"\n        [attr.aria-labelledby]=\"instance.node.name\"\n        [formControl]=\"ctrl!\">\n      <mat-radio-button [value]=\"choice.value\" *ngFor=\"let choice of instance.filteredChoices\">\n        {{ choice.translatedLabel ?? (choice.label|transloco) }}\n      </mat-radio-button>\n    </mat-radio-group>\n  }\n}\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (instance) {\n<ng-container *ngIf=\"control | async as ctrl\">\n  <div class=\"ajf-choice-control\">\n    @if (isNarrow) {\n    <mat-select [formControl]=\"ctrl!\" panelClass=\"ajf-select-panel\">\n      <mat-option class=\"ajf-select-search-option\">\n        <ngx-mat-select-search\n          [formControl]=\"searchFilterCtrl\"\n          [placeholderLabel]=\"'Search' | transloco\"\n          [noEntriesFoundLabel]=\"'Nothing found' | transloco\"\n          [enableClearOnEscapePressed]=\"true\"\n        >\n        </ngx-mat-select-search>\n      </mat-option>\n      <mat-option [value]=\"choice.value\" *ngFor=\"let choice of filteredChoices$ | async\">\n        {{ choice.translatedLabel ?? (choice.label | transloco) }}\n      </mat-option>\n    </mat-select>\n    } @else {\n    <div\n      class=\"ajf-segmented ajf-choices-container\"\n      role=\"radiogroup\"\n      [attr.aria-labelledby]=\"instance.node.name\"\n    >\n      <button\n        type=\"button\"\n        class=\"ajf-segment\"\n        role=\"radio\"\n        *ngFor=\"let choice of instance.filteredChoices\"\n        [attr.aria-checked]=\"ctrl.value === choice.value\"\n        [class.ajf-selected]=\"ctrl.value === choice.value\"\n        [disabled]=\"ctrl.disabled\"\n        (click)=\"ctrl.setValue(choice.value)\"\n      >\n        {{ choice.translatedLabel ?? (choice.label | transloco) }}\n      </button>\n    </div>\n    }\n\n    <!-- A picked radio cannot be unpicked, so emptying the field needs its own\n         action. -->\n    <button\n      type=\"button\"\n      class=\"ajf-btn--ghost ajf-clear-value\"\n      *ngIf=\"hasValue(ctrl) && !ctrl.disabled\"\n      (click)=\"clearValue(ctrl, $event)\"\n    >\n      {{ 'Clear' | transloco }}\n    </button>\n  </div>\n</ng-container>\n}\n", styles: [".ajf-choice-control{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}.mat-mdc-select-panel.ajf-select-panel{border:1px solid var(--ajf-border, #e6e2dc);background:var(--ajf-surface, #ffffff)}.mat-mdc-select-panel.ajf-select-panel .mat-mdc-option{font-family:var(--ajf-font-sans, sans-serif)}.mat-mdc-select-panel.ajf-select-panel .mat-mdc-option .mdc-list-item__primary-text{color:var(--ajf-text, #1c1a17);font-size:14px}.mat-mdc-select-panel.ajf-select-panel .mat-mdc-option.ajf-select-search-option{min-height:0;padding:0;border-bottom:1px solid var(--ajf-border, #e6e2dc);background:var(--ajf-surface, #ffffff);pointer-events:auto}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }, { type: undefined, decorators: [{
@@ -699,13 +835,13 @@ class AjfTableFieldComponent extends AjfTableFieldComponent$1 {
     constructor(cdr, service, was) {
         super(cdr, service, was);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfTableFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfTableFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<table *ngIf=\"instance\" class=\"ajf-table-field\">\n  <ng-container *ngIf=\"instance.node as node\">\n    <ng-container *ngFor=\"let columns of instance.controls; let row = index\">\n      <tr [ngClass]=\"row | ajfTableRowClass\">\n        <td>\n          <ng-container *ngIf=\"columns.length > 0 && columns[0]\">\n            {{ columns[0] | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n          </ng-container>\n        </td>\n        <ng-container *ngIf=\"columns.length > 1\">\n          <td *ngFor=\"let c of columns[1]; let column = index\">\n            <ng-container *ngIf=\"row === 0; else controlCell\">\n              {{ c | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n            </ng-container>\n            <ng-template #controlCell>\n              <ng-container *ngIf=\"c|ajfGetTableCellControl as contr\">\n                <ng-container *ngIf=\"contr\">\n                  <ng-container *ngIf=\"contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell\">\n                    <ng-container *ngIf=\"contr.type === 'number';else genericInput\">\n                      <input (focusout)=\"contr!.show = false\" type=\"number\" [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\" autofocus />\n                    </ng-container>\n                    <ng-template #genericInput>\n                      <input (focusout)=\"contr!.show = false\" [type]=\"contr.type\" [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\" autofocus />\n                    </ng-template>\n                  </ng-container>\n\n                  <ng-template #plainTextCell>\n                    <span (click)=\"goToCell(row, column)\">{{ contr.control!.value |\n                      ajfTranslateIfString | ajfFormatIfNumber: '.0-2'\n                      }}</span>\n                  </ng-template>\n                </ng-container>\n              </ng-container>\n            </ng-template>\n          </td>\n        </ng-container>\n      </tr>\n    </ng-container>\n  </ng-container>\n</table>", styles: ["table.ajf-table-field{width:100%;border-collapse:collapse;table-layout:fixed}table.ajf-table-field .ajf-header-row{font-weight:700;background-color:#f9f9f9}table.ajf-table-field th,table.ajf-table-field td{padding:12px 15px;text-align:left;border-bottom:1px solid #ddd;border-top:solid 1px transparent;border-right:solid 1px #cccccc;border-left:solid 1px transparent;position:relative}table.ajf-table-field th span,table.ajf-table-field td span{display:inline-block;width:100%;box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:1.5;text-align:center;padding:12px 15px;word-wrap:break-word}table.ajf-table-field th input,table.ajf-table-field td input{cursor:text;position:absolute;width:100%;box-sizing:border-box;outline:none;inset:0;border-top:solid 1px transparent;border-right:solid 1px transparent;border-bottom:solid 1px transparent;border-left:solid 1px transparent;display:inline-block;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center;padding:12px 15px}table.ajf-table-field tr:hover{background-color:#f1f1f1}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i4$2.FormatIfNumber, name: "ajfFormatIfNumber" }, { kind: "pipe", type: i4$2.TranslateIfString, name: "ajfTranslateIfString" }, { kind: "pipe", type: i1.AjfGetTableCellControlPipe, name: "ajfGetTableCellControl" }, { kind: "pipe", type: i1.AjfIsCellEditablePipe, name: "ajfIsCellEditable" }, { kind: "pipe", type: i1.AjfTableRowClass, name: "ajfTableRowClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfTableFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfTableFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<table *ngIf=\"instance\" class=\"ajf-table-field\">\n  <ng-container *ngIf=\"instance.node as node\">\n    <ng-container *ngFor=\"let columns of instance.controls; let row = index\">\n      <tr [ngClass]=\"row | ajfTableRowClass\">\n        <td>\n          <ng-container *ngIf=\"columns.length > 0 && columns[0]\">\n            {{ columns[0] | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n          </ng-container>\n        </td>\n        <ng-container *ngIf=\"columns.length > 1\">\n          <td *ngFor=\"let c of columns[1]; let column = index\">\n            <ng-container *ngIf=\"row === 0; else controlCell\">\n              {{ c | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n            </ng-container>\n            <ng-template #controlCell>\n              <ng-container *ngIf=\"c|ajfGetTableCellControl as contr\">\n                <ng-container *ngIf=\"contr\">\n                  <ng-container *ngIf=\"contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell\">\n                    <ng-container *ngIf=\"contr.type === 'number';else genericInput\">\n                      <input (focusout)=\"contr!.show = false\" type=\"number\" [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\" autofocus />\n                    </ng-container>\n                    <ng-template #genericInput>\n                      <input (focusout)=\"contr!.show = false\" [type]=\"contr.type\" [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\" autofocus />\n                    </ng-template>\n                  </ng-container>\n\n                  <ng-template #plainTextCell>\n                    <span (click)=\"goToCell(row, column)\">{{ contr.control!.value |\n                      ajfTranslateIfString | ajfFormatIfNumber: '.0-2'\n                      }}</span>\n                  </ng-template>\n                </ng-container>\n              </ng-container>\n            </ng-template>\n          </td>\n        </ng-container>\n      </tr>\n    </ng-container>\n  </ng-container>\n</table>", styles: ["table.ajf-table-field{width:100%;border:1px solid var(--ajf-border);border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:13px}table.ajf-table-field .ajf-header-row{background:var(--ajf-band)}table.ajf-table-field .ajf-header-row td,table.ajf-table-field .ajf-header-row th{color:var(--ajf-text-muted);font-family:var(--ajf-font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase}table.ajf-table-field th,table.ajf-table-field td{position:relative;padding:9px 12px;border-right:1px solid var(--ajf-border);border-bottom:1px solid var(--ajf-border);text-align:left}table.ajf-table-field th:last-child,table.ajf-table-field td:last-child{border-right:0}table.ajf-table-field tr:last-child td{border-bottom:0}table.ajf-table-field tbody tr:hover:not(.ajf-header-row){background:var(--ajf-band)}table.ajf-table-field td span{display:block;width:100%;min-height:1.4em;box-sizing:border-box;font:inherit;cursor:text;outline:none}table.ajf-table-field td input{position:absolute;inset:0;width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--ajf-accent);background:var(--ajf-surface);color:var(--ajf-text);font:inherit;cursor:text;outline:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i4$2.FormatIfNumber, name: "ajfFormatIfNumber" }, { kind: "pipe", type: i4$2.TranslateIfString, name: "ajfTranslateIfString" }, { kind: "pipe", type: i1$1.AjfGetTableCellControlPipe, name: "ajfGetTableCellControl" }, { kind: "pipe", type: i1$1.AjfIsCellEditablePipe, name: "ajfIsCellEditable" }, { kind: "pipe", type: i1$1.AjfTableRowClass, name: "ajfTableRowClass" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfTableFieldComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<table *ngIf=\"instance\" class=\"ajf-table-field\">\n  <ng-container *ngIf=\"instance.node as node\">\n    <ng-container *ngFor=\"let columns of instance.controls; let row = index\">\n      <tr [ngClass]=\"row | ajfTableRowClass\">\n        <td>\n          <ng-container *ngIf=\"columns.length > 0 && columns[0]\">\n            {{ columns[0] | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n          </ng-container>\n        </td>\n        <ng-container *ngIf=\"columns.length > 1\">\n          <td *ngFor=\"let c of columns[1]; let column = index\">\n            <ng-container *ngIf=\"row === 0; else controlCell\">\n              {{ c | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n            </ng-container>\n            <ng-template #controlCell>\n              <ng-container *ngIf=\"c|ajfGetTableCellControl as contr\">\n                <ng-container *ngIf=\"contr\">\n                  <ng-container *ngIf=\"contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell\">\n                    <ng-container *ngIf=\"contr.type === 'number';else genericInput\">\n                      <input (focusout)=\"contr!.show = false\" type=\"number\" [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\" autofocus />\n                    </ng-container>\n                    <ng-template #genericInput>\n                      <input (focusout)=\"contr!.show = false\" [type]=\"contr.type\" [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\" autofocus />\n                    </ng-template>\n                  </ng-container>\n\n                  <ng-template #plainTextCell>\n                    <span (click)=\"goToCell(row, column)\">{{ contr.control!.value |\n                      ajfTranslateIfString | ajfFormatIfNumber: '.0-2'\n                      }}</span>\n                  </ng-template>\n                </ng-container>\n              </ng-container>\n            </ng-template>\n          </td>\n        </ng-container>\n      </tr>\n    </ng-container>\n  </ng-container>\n</table>", styles: ["table.ajf-table-field{width:100%;border-collapse:collapse;table-layout:fixed}table.ajf-table-field .ajf-header-row{font-weight:700;background-color:#f9f9f9}table.ajf-table-field th,table.ajf-table-field td{padding:12px 15px;text-align:left;border-bottom:1px solid #ddd;border-top:solid 1px transparent;border-right:solid 1px #cccccc;border-left:solid 1px transparent;position:relative}table.ajf-table-field th span,table.ajf-table-field td span{display:inline-block;width:100%;box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:1.5;text-align:center;padding:12px 15px;word-wrap:break-word}table.ajf-table-field th input,table.ajf-table-field td input{cursor:text;position:absolute;width:100%;box-sizing:border-box;outline:none;inset:0;border-top:solid 1px transparent;border-right:solid 1px transparent;border-bottom:solid 1px transparent;border-left:solid 1px transparent;display:inline-block;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center;padding:12px 15px}table.ajf-table-field tr:hover{background-color:#f1f1f1}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<table *ngIf=\"instance\" class=\"ajf-table-field\">\n  <ng-container *ngIf=\"instance.node as node\">\n    <ng-container *ngFor=\"let columns of instance.controls; let row = index\">\n      <tr [ngClass]=\"row | ajfTableRowClass\">\n        <td>\n          <ng-container *ngIf=\"columns.length > 0 && columns[0]\">\n            {{ columns[0] | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n          </ng-container>\n        </td>\n        <ng-container *ngIf=\"columns.length > 1\">\n          <td *ngFor=\"let c of columns[1]; let column = index\">\n            <ng-container *ngIf=\"row === 0; else controlCell\">\n              {{ c | ajfTranslateIfString | ajfFormatIfNumber: '.0-2' }}\n            </ng-container>\n            <ng-template #controlCell>\n              <ng-container *ngIf=\"c|ajfGetTableCellControl as contr\">\n                <ng-container *ngIf=\"contr\">\n                  <ng-container *ngIf=\"contr!.show && (node.rows[row-1][column]|ajfIsCellEditable); else plainTextCell\">\n                    <ng-container *ngIf=\"contr.type === 'number';else genericInput\">\n                      <input (focusout)=\"contr!.show = false\" type=\"number\" [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\" autofocus />\n                    </ng-container>\n                    <ng-template #genericInput>\n                      <input (focusout)=\"contr!.show = false\" [type]=\"contr.type\" [formControl]=\"contr.control\"\n                        (keydown.tab)=\"goToNextCell($event, row, column)\" autofocus />\n                    </ng-template>\n                  </ng-container>\n\n                  <ng-template #plainTextCell>\n                    <span (click)=\"goToCell(row, column)\">{{ contr.control!.value |\n                      ajfTranslateIfString | ajfFormatIfNumber: '.0-2'\n                      }}</span>\n                  </ng-template>\n                </ng-container>\n              </ng-container>\n            </ng-template>\n          </td>\n        </ng-container>\n      </tr>\n    </ng-container>\n  </ng-container>\n</table>", styles: ["table.ajf-table-field{width:100%;border:1px solid var(--ajf-border);border-collapse:collapse;border-spacing:0;table-layout:fixed;font-size:13px}table.ajf-table-field .ajf-header-row{background:var(--ajf-band)}table.ajf-table-field .ajf-header-row td,table.ajf-table-field .ajf-header-row th{color:var(--ajf-text-muted);font-family:var(--ajf-font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase}table.ajf-table-field th,table.ajf-table-field td{position:relative;padding:9px 12px;border-right:1px solid var(--ajf-border);border-bottom:1px solid var(--ajf-border);text-align:left}table.ajf-table-field th:last-child,table.ajf-table-field td:last-child{border-right:0}table.ajf-table-field tr:last-child td{border-bottom:0}table.ajf-table-field tbody tr:hover:not(.ajf-header-row){background:var(--ajf-band)}table.ajf-table-field td span{display:block;width:100%;min-height:1.4em;box-sizing:border-box;font:inherit;cursor:text;outline:none}table.ajf-table-field td input{position:absolute;inset:0;width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid var(--ajf-accent);background:var(--ajf-surface);color:var(--ajf-text);font:inherit;cursor:text;outline:none}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }] });
@@ -755,13 +891,13 @@ class AjfTextFieldComponent extends AjfInputFieldComponent$1 {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfTextFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfTextFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<quill-editor *ngIf=\"control | async as ctrl\" [formControl]=\"ctrl!\" [modules]=\"quillModules\" class=\"resizable-quill\"\n    placeholder=\"\">\n</quill-editor>", styles: [".resizable-quill{display:block;width:100%;max-width:800px}.resizable-quill .ql-toolbar{background-color:var(--mdc-filled-text-field-container-color, var(--mat-app-surface-variant))}.resizable-quill .ql-editor{min-height:11.36em;max-height:35.5em;overflow-y:auto;resize:vertical;font-size:var(--mat-form-field-container-text-size, var(--mat-app-body-large-size))}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfTextFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfTextFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<quill-editor *ngIf=\"control | async as ctrl\" [formControl]=\"ctrl!\" [modules]=\"quillModules\" class=\"resizable-quill\"\n    placeholder=\"\">\n</quill-editor>", styles: ["ajf-field .resizable-quill{display:block;width:100%;max-width:720px}ajf-field .resizable-quill .ql-toolbar.ql-snow,ajf-field .resizable-quill .ql-container.ql-snow{border-color:var(--ajf-border-strong)}ajf-field .resizable-quill .ql-toolbar.ql-snow{border-radius:var(--ajf-radius) var(--ajf-radius) 0 0;background:var(--ajf-band)}ajf-field .resizable-quill .ql-toolbar.ql-snow .ql-stroke{stroke:var(--ajf-text-muted)}ajf-field .resizable-quill .ql-toolbar.ql-snow .ql-fill{fill:var(--ajf-text-muted)}ajf-field .resizable-quill .ql-toolbar.ql-snow .ql-active .ql-stroke{stroke:var(--ajf-accent)}ajf-field .resizable-quill .ql-toolbar.ql-snow .ql-active .ql-fill{fill:var(--ajf-accent)}ajf-field .resizable-quill .ql-container.ql-snow{border-radius:0 0 var(--ajf-radius) var(--ajf-radius);background:var(--ajf-surface);font-family:var(--ajf-font-sans);font-size:14px}ajf-field .resizable-quill .ql-editor{min-height:7.5em;max-height:30em;resize:vertical}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$3.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfTextFieldComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<quill-editor *ngIf=\"control | async as ctrl\" [formControl]=\"ctrl!\" [modules]=\"quillModules\" class=\"resizable-quill\"\n    placeholder=\"\">\n</quill-editor>", styles: [".resizable-quill{display:block;width:100%;max-width:800px}.resizable-quill .ql-toolbar{background-color:var(--mdc-filled-text-field-container-color, var(--mat-app-surface-variant))}.resizable-quill .ql-editor{min-height:11.36em;max-height:35.5em;overflow-y:auto;resize:vertical;font-size:var(--mat-form-field-container-text-size, var(--mat-app-body-large-size))}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<quill-editor *ngIf=\"control | async as ctrl\" [formControl]=\"ctrl!\" [modules]=\"quillModules\" class=\"resizable-quill\"\n    placeholder=\"\">\n</quill-editor>", styles: ["ajf-field .resizable-quill{display:block;width:100%;max-width:720px}ajf-field .resizable-quill .ql-toolbar.ql-snow,ajf-field .resizable-quill .ql-container.ql-snow{border-color:var(--ajf-border-strong)}ajf-field .resizable-quill .ql-toolbar.ql-snow{border-radius:var(--ajf-radius) var(--ajf-radius) 0 0;background:var(--ajf-band)}ajf-field .resizable-quill .ql-toolbar.ql-snow .ql-stroke{stroke:var(--ajf-text-muted)}ajf-field .resizable-quill .ql-toolbar.ql-snow .ql-fill{fill:var(--ajf-text-muted)}ajf-field .resizable-quill .ql-toolbar.ql-snow .ql-active .ql-stroke{stroke:var(--ajf-accent)}ajf-field .resizable-quill .ql-toolbar.ql-snow .ql-active .ql-fill{fill:var(--ajf-accent)}ajf-field .resizable-quill .ql-container.ql-snow{border-radius:0 0 var(--ajf-radius) var(--ajf-radius);background:var(--ajf-surface);font-family:var(--ajf-font-sans);font-size:14px}ajf-field .resizable-quill .ql-editor{min-height:7.5em;max-height:30em;resize:vertical}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }] });
@@ -791,13 +927,13 @@ class AjfTimeFieldComponent extends AjfBaseFieldComponent {
     constructor(cdr, service, was) {
         super(cdr, service, was);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfTimeFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ajf-time *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\"></ajf-time>\n", styles: [""], dependencies: [{ kind: "component", type: i2$7.AjfTime, selector: "ajf-time" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfTimeFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfTimeFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ajf-time *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\"></ajf-time>\n", styles: [""], dependencies: [{ kind: "component", type: i2$8.AjfTime, selector: "ajf-time" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfTimeFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ajf-time *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\"></ajf-time>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }] });
@@ -827,16 +963,16 @@ class AjfVideoUrlFieldComponent extends AjfVideoUrlFieldComponent$1 {
     constructor(cdr, service, was, domSanitizer, httpClient) {
         super(cdr, service, was, domSanitizer, httpClient);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfVideoUrlFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }, { token: i2$8.DomSanitizer }, { token: i3$4.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfVideoUrlFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"control|async as ctrl\">\n  <mat-form-field class=\"ajf-video-input\">\n    <input matInput type=\"url\" [formControl]=\"ctrl!\">\n  </mat-form-field>\n  <div class=\"ajf-video-thumbnail\">\n    <ng-container *ngIf=\"validUrl|async\">\n      <a target=\"_blank\" [href]=\"ctrl.value\">\n        <img *ngIf=\"videoThumbnail|async as thumb\" [src]=\"thumb\" class=\"\" alt=\"\">\n      </a>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [".ajf-video-input{width:100%}.ajf-video-thumbnail{width:212px;height:120px;background-color:#eee;display:flex;align-items:center;justify-content:center}.ajf-video-thumbnail img{flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfVideoUrlFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }, { token: i2$9.DomSanitizer }, { token: i3$2.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfVideoUrlFieldComponent, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"control | async as ctrl\">\n  <input class=\"ajf-control ajf-video-input\" type=\"url\" [formControl]=\"ctrl!\" />\n  <div class=\"ajf-video-thumbnail\">\n    <ng-container *ngIf=\"validUrl | async\">\n      <a target=\"_blank\" [href]=\"ctrl.value\">\n        <img *ngIf=\"videoThumbnail | async as thumb\" [src]=\"thumb\" alt=\"\" />\n      </a>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: ["ajf-field .ajf-video-thumbnail img{max-width:160px;max-height:90px;border:1px solid var(--ajf-border);border-radius:var(--ajf-radius)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfVideoUrlFieldComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"control|async as ctrl\">\n  <mat-form-field class=\"ajf-video-input\">\n    <input matInput type=\"url\" [formControl]=\"ctrl!\">\n  </mat-form-field>\n  <div class=\"ajf-video-thumbnail\">\n    <ng-container *ngIf=\"validUrl|async\">\n      <a target=\"_blank\" [href]=\"ctrl.value\">\n        <img *ngIf=\"videoThumbnail|async as thumb\" [src]=\"thumb\" class=\"\" alt=\"\">\n      </a>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: [".ajf-video-input{width:100%}.ajf-video-thumbnail{width:212px;height:120px;background-color:#eee;display:flex;align-items:center;justify-content:center}.ajf-video-thumbnail img{flex:1 1 auto}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"control | async as ctrl\">\n  <input class=\"ajf-control ajf-video-input\" type=\"url\" [formControl]=\"ctrl!\" />\n  <div class=\"ajf-video-thumbnail\">\n    <ng-container *ngIf=\"validUrl | async\">\n      <a target=\"_blank\" [href]=\"ctrl.value\">\n        <img *ngIf=\"videoThumbnail | async as thumb\" [src]=\"thumb\" alt=\"\" />\n      </a>\n    </ng-container>\n  </div>\n</ng-container>\n", styles: ["ajf-field .ajf-video-thumbnail img{max-width:160px;max-height:90px;border:1px solid var(--ajf-border);border-radius:var(--ajf-radius)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
-                }] }, { type: i2$8.DomSanitizer }, { type: i3$4.HttpClient }] });
+                }] }, { type: i2$9.DomSanitizer }, { type: i3$2.HttpClient }] });
 
 /**
  * @license
@@ -869,13 +1005,13 @@ class AjfSignatureFieldComponent extends AjfBaseFieldComponent {
     constructor(cdr, service, was) {
         super(cdr, service, was);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfSignatureFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfSignatureFieldComponent, selector: "ajf-signature-field", usesInheritance: true, ngImport: i0, template: "<ajf-signature *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\"></ajf-signature>\n", styles: [""], dependencies: [{ kind: "component", type: i2$9.AjfSignatureComponent, selector: "ajf-signature" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfSignatureFieldComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.AjfFormRendererService }, { token: AJF_WARNING_ALERT_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfSignatureFieldComponent, selector: "ajf-signature-field", usesInheritance: true, ngImport: i0, template: "<ajf-signature *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\"></ajf-signature>\n", styles: [""], dependencies: [{ kind: "component", type: i2$a.AjfSignatureComponent, selector: "ajf-signature" }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfSignatureFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ajf-signature-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ajf-signature *ngIf=\"control|async as ctrl\" [formControl]=\"ctrl!\"></ajf-signature>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.AjfFormRendererService }, { type: AjfWarningAlertService, decorators: [{
                     type: Inject,
                     args: [AJF_WARNING_ALERT_SERVICE]
                 }] }] });
@@ -1030,13 +1166,380 @@ class AjfFormField extends AjfFormField$1 {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFormField, deps: [{ token: i0.ChangeDetectorRef }, { token: AjfFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFormField, selector: "ajf-field,ajf-form-field", usesInheritance: true, ngImport: i0, template: "<div\n    *ngIf=\"instance\"\n    [ngClass]=\"'ajf-field-' + (instance|ajfNodeCompleteName)\"\n    [class.ajf-validated]=\"instance.validationResults|ajfFieldIsValid\"\n    (keydown)=\"tabEvent($event, instance)\"\n>\n  <ng-template ajf-field-host></ng-template>\n</div>\n<ng-container *ngIf=\"instance && instance.node && instance.node.attachments\">\n  <a *ngFor=\"let attachment of instance.node.attachments\"\n    [href]=\"attachment.value\" target=\"_blank\">{{attachment.label | transloco}}</a>\n</ng-container>\n<div *ngIf=\"!readonly && instance && instance.validationResults\" class=\"ajf-errors\">\n  <ng-container *ngFor=\"let res of instance.validationResults\">\n    <div class=\"error\" *ngIf=\"!res.result\">\n      {{ res.error|transloco }}\n    </div>\n  </ng-container>\n</div>\n", styles: ["ajf-field .ajf-choices-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch}ajf-field .ajf-choices-container ajf-checkbox-group-item{width:100%}ajf-field .ajf-choices-container ajf-checkbox-group-item .mat-mdc-button{display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}ajf-field .ajf-item-container{position:relative}ajf-field .ajf-errors{font-style:italic;padding:5px}table{border-collapse:collapse;border-spacing:0}table tr td{position:relative}table tr td span{cursor:text;width:100%;box-sizing:border-box;outline:none;display:inline-block;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center}table tr td input{cursor:text;position:absolute;width:100%;box-sizing:border-box;outline:none;inset:0;display:inline-block;border-top:solid 1px transparent;border-right:solid 1px transparent;border-bottom:solid 1px transparent;border-left:solid 1px transparent;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center}table tr td:last-child span,table tr td:last-child input{border-right-color:#ccc}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.AjfFieldHost, selector: "[ajf-field-host]" }, { kind: "pipe", type: i8.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i1.AjfFieldIsValidPipe, name: "ajfFieldIsValid" }, { kind: "pipe", type: i1.AjfNodeCompleteNamePipe, name: "ajfNodeCompleteName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFormField, selector: "ajf-field,ajf-form-field", usesInheritance: true, ngImport: i0, template: "<div\n    *ngIf=\"instance\"\n    [ngClass]=\"'ajf-field-' + (instance|ajfNodeCompleteName)\"\n    [class.ajf-validated]=\"instance.validationResults|ajfFieldIsValid\"\n    (keydown)=\"tabEvent($event, instance)\"\n>\n  <ng-template ajf-field-host></ng-template>\n</div>\n<ng-container *ngIf=\"instance && instance.node && instance.node.attachments\">\n  <a *ngFor=\"let attachment of instance.node.attachments\"\n    [href]=\"attachment.value\" target=\"_blank\">{{attachment.label | transloco}}</a>\n</ng-container>\n<div *ngIf=\"!readonly && instance && instance.validationResults\" class=\"ajf-errors\">\n  <ng-container *ngFor=\"let res of instance.validationResults\">\n    <div class=\"error\" *ngIf=\"!res.result\">\n      {{ res.error|transloco }}\n    </div>\n  </ng-container>\n</div>\n", styles: [":root{--ajf-control-h: 44px;--ajf-slider-min-h: 420px;--ajf-label-col: 280px;--ajf-side-col: 260px;--ajf-gap: 12px;--ajf-radius: 4px;--ajf-font-sans: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;--ajf-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;--ajf-bg: var( --mat-sys-surface-container-low, var(--sys-surface-container-low, #f7f5f2) );--ajf-surface: var( --mat-sys-surface, var(--sys-surface, #ffffff) );--ajf-band: var( --mat-sys-surface-container, var(--sys-surface-container, #faf8f5) );--ajf-border: var( --mat-sys-outline-variant, var(--sys-outline-variant, #e6e2dc) );--ajf-border-strong: var( --mat-sys-outline, var(--sys-outline, #d5cfc6) );--ajf-accent: var( --mat-sys-primary, var(--sys-primary, #0f4c5c) );--ajf-accent-fg: var( --mat-sys-on-primary, var(--sys-on-primary, #ffffff) );--ajf-accent-soft: var( --mat-sys-primary-container, var(--sys-primary-container, #e8f1f5) );--ajf-accent-ink: var( --mat-sys-on-primary-container, var(--sys-on-primary-container, #2d6b7f) );--ajf-text: var( --mat-sys-on-surface, var(--sys-on-surface, #1c1a17) );--ajf-text-muted: var( --mat-sys-on-surface-variant, var(--sys-on-surface-variant, #7a736a) );--ajf-danger: var( --mat-sys-error, var(--sys-error, #b8362b) );--ajf-danger-bg: var( --mat-sys-error-container, var(--sys-error-container, #fdf1ef) );--ajf-text-faint: #a49c92;--ajf-accent-hover: #0c3d4a;--ajf-kbd-bg: rgba(255, 255, 255, .22);--ajf-disabled-bg: #e6e2dc;--ajf-disabled-fg: #5a544c}@media (prefers-color-scheme: dark){:root:not(.ajf-light){--ajf-bg: var( --mat-sys-surface-container-low, var(--sys-surface-container-low, #212121) );--ajf-surface: var( --mat-sys-surface, var(--sys-surface, #303030) );--ajf-band: var( --mat-sys-surface-container, var(--sys-surface-container, #303030) );--ajf-border: var( --mat-sys-outline-variant, var(--sys-outline-variant, #424242) );--ajf-border-strong: var( --mat-sys-outline, var(--sys-outline, #505050) );--ajf-accent: var( --mat-sys-primary, var(--sys-primary, #496fca) );--ajf-accent-fg: var( --mat-sys-on-primary, var(--sys-on-primary, #06232b) );--ajf-accent-soft: var( --mat-sys-primary-container, var(--sys-primary-container, #123641) );--ajf-accent-ink: var( --mat-sys-on-primary-container, var(--sys-on-primary-container, #9ad4e4) );--ajf-text: var( --mat-sys-on-surface, var(--sys-on-surface, #f2efe9) );--ajf-text-muted: var( --mat-sys-on-surface-variant, var(--sys-on-surface-variant, #a9a29a) );--ajf-danger: var( --mat-sys-error, var(--sys-error, #ff9b8f) );--ajf-danger-bg: var( --mat-sys-error-container, var(--sys-error-container, #3a201c) );--ajf-text-faint: #7a736a;--ajf-accent-hover: #8fcedf;--ajf-kbd-bg: rgba(0, 0, 0, .22);--ajf-disabled-bg: #424242;--ajf-disabled-fg: #c9c3bb}}.ajf-dark{--ajf-bg: var( --mat-sys-surface-container-low, var(--sys-surface-container-low, #212121) );--ajf-surface: var( --mat-sys-surface, var(--sys-surface, #303030) );--ajf-band: var( --mat-sys-surface-container, var(--sys-surface-container, #303030) );--ajf-border: var( --mat-sys-outline-variant, var(--sys-outline-variant, #424242) );--ajf-border-strong: var( --mat-sys-outline, var(--sys-outline, #505050) );--ajf-accent: var( --mat-sys-primary, var(--sys-primary, #496fca) );--ajf-accent-fg: var( --mat-sys-on-primary, var(--sys-on-primary, #06232b) );--ajf-accent-soft: var( --mat-sys-primary-container, var(--sys-primary-container, #123641) );--ajf-accent-ink: var( --mat-sys-on-primary-container, var(--sys-on-primary-container, #9ad4e4) );--ajf-text: var( --mat-sys-on-surface, var(--sys-on-surface, #f2efe9) );--ajf-text-muted: var( --mat-sys-on-surface-variant, var(--sys-on-surface-variant, #a9a29a) );--ajf-danger: var( --mat-sys-error, var(--sys-error, #ff9b8f) );--ajf-danger-bg: var( --mat-sys-error-container, var(--sys-error-container, #3a201c) );--ajf-text-faint: #7a736a;--ajf-accent-hover: #8fcedf;--ajf-kbd-bg: rgba(0, 0, 0, .22);--ajf-disabled-bg: #424242;--ajf-disabled-fg: #c9c3bb}.ajf-light{--ajf-bg: var( --mat-sys-surface-container-low, var(--sys-surface-container-low, #f7f5f2) );--ajf-surface: var( --mat-sys-surface, var(--sys-surface, #ffffff) );--ajf-band: var( --mat-sys-surface-container, var(--sys-surface-container, #faf8f5) );--ajf-border: var( --mat-sys-outline-variant, var(--sys-outline-variant, #e6e2dc) );--ajf-border-strong: var( --mat-sys-outline, var(--sys-outline, #d5cfc6) );--ajf-accent: var( --mat-sys-primary, var(--sys-primary, #0f4c5c) );--ajf-accent-fg: var( --mat-sys-on-primary, var(--sys-on-primary, #ffffff) );--ajf-accent-soft: var( --mat-sys-primary-container, var(--sys-primary-container, #e8f1f5) );--ajf-accent-ink: var( --mat-sys-on-primary-container, var(--sys-on-primary-container, #2d6b7f) );--ajf-text: var( --mat-sys-on-surface, var(--sys-on-surface, #1c1a17) );--ajf-text-muted: var( --mat-sys-on-surface-variant, var(--sys-on-surface-variant, #7a736a) );--ajf-danger: var( --mat-sys-error, var(--sys-error, #b8362b) );--ajf-danger-bg: var( --mat-sys-error-container, var(--sys-error-container, #fdf1ef) );--ajf-text-faint: #a49c92;--ajf-accent-hover: #0c3d4a;--ajf-kbd-bg: rgba(255, 255, 255, .22);--ajf-disabled-bg: #e6e2dc;--ajf-disabled-fg: #5a544c}.ajf-form-container,ajf-field{color-scheme:light dark}.ajf-dark .ajf-form-container,.ajf-dark ajf-field{color-scheme:dark}.ajf-light .ajf-form-container,.ajf-light ajf-field{color-scheme:light}.ajf-control{box-sizing:border-box;min-height:var(--ajf-control-h);padding:0 12px;border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;line-height:calc(var(--ajf-control-h) - 2px);outline:none;width:100%;max-width:360px}.ajf-control:focus,.ajf-control:focus-within{border-color:var(--ajf-accent);box-shadow:0 0 0 2px var(--ajf-accent-soft)}.ajf-control:disabled,.ajf-control[readonly]{color:var(--ajf-text-muted);background:var(--ajf-band)}.ajf-control--mono{font-family:var(--ajf-font-mono);font-size:13px;letter-spacing:.01em}.ajf-control--narrow{max-width:160px}.ajf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--ajf-control-h);padding:0 16px;border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;cursor:pointer}.ajf-btn:hover:not(:disabled){border-color:var(--ajf-accent)}.ajf-btn:disabled{color:var(--ajf-text-faint);cursor:default}.ajf-btn--primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--ajf-control-h);padding:0 16px;border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;cursor:pointer;border-color:var(--ajf-accent);background:var(--ajf-accent);color:var(--ajf-accent-fg)}.ajf-btn--primary:hover:not(:disabled){border-color:var(--ajf-accent)}.ajf-btn--primary:disabled{color:var(--ajf-text-faint);cursor:default}.ajf-btn--primary:hover:not(:disabled){border-color:var(--ajf-accent-hover);background:var(--ajf-accent-hover)}.ajf-btn--primary:disabled{border-color:var(--ajf-disabled-bg);background:var(--ajf-disabled-bg);color:var(--ajf-disabled-fg)}.ajf-btn--ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--ajf-control-h);border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;cursor:pointer;min-height:auto;padding:0 4px;border-color:transparent;background:none;color:var(--ajf-accent-ink);text-decoration:none}.ajf-btn--ghost:hover:not(:disabled){border-color:var(--ajf-accent)}.ajf-btn--ghost:disabled{color:var(--ajf-text-faint);cursor:default}.ajf-btn--ghost:hover:not(:disabled){border-color:transparent;text-decoration:underline}.ajf-btn--ghost.ajf-danger{color:var(--ajf-danger)}.ajf-segmented{display:inline-flex;flex-wrap:wrap;gap:8px}.ajf-segmented .ajf-segment{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--ajf-control-h);padding:0 16px;border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;cursor:pointer}.ajf-segmented .ajf-segment:hover:not(:disabled){border-color:var(--ajf-accent)}.ajf-segmented .ajf-segment:disabled{color:var(--ajf-text-faint);cursor:default}.ajf-segmented .ajf-segment.ajf-selected{border-color:var(--ajf-accent);background:var(--ajf-accent);color:var(--ajf-accent-fg)}.ajf-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--ajf-radius);background:var(--ajf-accent-soft);color:var(--ajf-accent-ink);font-size:13px;white-space:nowrap}.ajf-chip--removable button{display:inline-flex;align-items:center;padding:0;border:0;background:none;color:inherit;cursor:pointer;opacity:.7}.ajf-chip--removable button:hover{opacity:1}.ajf-chip--removable button .mat-icon{width:14px;height:14px;font-size:14px}.ajf-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--ajf-band);color:var(--ajf-text-muted);font-size:12px;white-space:nowrap}.ajf-pill--danger{background:var(--ajf-danger-bg);color:var(--ajf-danger);font-weight:500}.ajf-kbd{padding:1px 5px;border-radius:3px;background:var(--ajf-kbd-bg);font-family:var(--ajf-font-mono);font-size:10px}.ajf-input-group{display:inline-flex;align-items:center;overflow:hidden;box-sizing:border-box;min-height:var(--ajf-control-h);border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;line-height:calc(var(--ajf-control-h) - 2px);outline:none;padding:0}.ajf-input-group:focus,.ajf-input-group:focus-within{border-color:var(--ajf-accent);box-shadow:0 0 0 2px var(--ajf-accent-soft)}.ajf-input-group:disabled,.ajf-input-group[readonly]{color:var(--ajf-text-muted);background:var(--ajf-band)}.ajf-input-group>input{flex:1 1 auto;min-width:0;height:calc(var(--ajf-control-h) - 2px);padding:0 12px;border:0;background:none;color:inherit;font:inherit;outline:none}.ajf-input-group>.ajf-input-group-action{display:inline-flex;align-items:center;justify-content:center;align-self:stretch;padding:0 8px;border:0;border-left:1px solid var(--ajf-border);background:var(--ajf-band);color:var(--ajf-text-muted);cursor:pointer}.ajf-hatch{background-color:var(--ajf-band);background-image:repeating-linear-gradient(45deg,var(--ajf-border) 0,var(--ajf-border) 1px,transparent 1px,transparent 7px)}.ajf-micro-label{font-family:var(--ajf-font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ajf-text-muted)}ajf-field .mat-mdc-select{box-sizing:border-box;min-height:var(--ajf-control-h);padding:0 12px;border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;line-height:calc(var(--ajf-control-h) - 2px);outline:none;display:inline-flex;align-items:center;width:auto;min-width:240px;max-width:100%}ajf-field .mat-mdc-select:focus,ajf-field .mat-mdc-select:focus-within{border-color:var(--ajf-accent);box-shadow:0 0 0 2px var(--ajf-accent-soft)}ajf-field .mat-mdc-select:disabled,ajf-field .mat-mdc-select[readonly]{color:var(--ajf-text-muted);background:var(--ajf-band)}ajf-field .mat-mdc-select .mat-mdc-select-trigger{height:auto}ajf-field .mat-mdc-select .mat-mdc-select-value{color:var(--ajf-text);font-size:14px}ajf-field .mat-mdc-select .mat-mdc-select-arrow-wrapper{color:var(--ajf-text-muted)}ajf-field .mat-mdc-select-multiple{min-height:var(--ajf-control-h)}ajf-field .mat-mdc-select-multiple .mat-mdc-select-value{display:flex;flex-wrap:wrap;padding:5px 0}ajf-field .mat-mdc-select-multiple mat-select-trigger{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}ajf-field .mat-mdc-slide-toggle{--mdc-switch-selected-track-color: var(--ajf-accent);--mdc-switch-selected-handle-color: var(--ajf-surface);--mdc-switch-selected-hover-track-color: var(--ajf-accent);--mdc-switch-selected-focus-track-color: var(--ajf-accent);--mdc-switch-selected-pressed-track-color: var(--ajf-accent);--mdc-switch-selected-hover-handle-color: var(--ajf-surface);--mdc-switch-selected-focus-handle-color: var(--ajf-surface);--mdc-switch-selected-pressed-handle-color: var(--ajf-surface)}ajf-field .mat-mdc-slider{--mdc-slider-handle-color: var(--ajf-accent);--mdc-slider-focus-handle-color: var(--ajf-accent);--mdc-slider-hover-handle-color: var(--ajf-accent);--mdc-slider-active-track-color: var(--ajf-accent);--mdc-slider-inactive-track-color: var(--ajf-border);--mdc-slider-with-tick-marks-active-container-color: var(--ajf-accent-fg);--mdc-slider-with-tick-marks-inactive-container-color: var(--ajf-border-strong);--mdc-slider-handle-elevation: none;--mat-slider-ripple-color: var(--ajf-accent)}ajf-field .mat-datepicker-toggle .mat-mdc-icon-button{width:34px;height:34px;padding:5px;color:var(--ajf-text-muted)}ajf-field{display:block;min-width:0;font-family:var(--ajf-font-sans)}ajf-field .ajf-choices-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:8px}ajf-field .ajf-item-container{position:relative}ajf-field .ajf-errors{color:var(--ajf-danger);font-size:13px}ajf-field>a{color:var(--ajf-accent-ink);font-size:13px}ajf-field-row ajf-field .ajf-errors{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none;margin:0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.AjfFieldHost, selector: "[ajf-field-host]" }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i1$1.AjfFieldIsValidPipe, name: "ajfFieldIsValid" }, { kind: "pipe", type: i1$1.AjfNodeCompleteNamePipe, name: "ajfNodeCompleteName" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFormField, decorators: [{
             type: Component,
-            args: [{ selector: 'ajf-field,ajf-form-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    *ngIf=\"instance\"\n    [ngClass]=\"'ajf-field-' + (instance|ajfNodeCompleteName)\"\n    [class.ajf-validated]=\"instance.validationResults|ajfFieldIsValid\"\n    (keydown)=\"tabEvent($event, instance)\"\n>\n  <ng-template ajf-field-host></ng-template>\n</div>\n<ng-container *ngIf=\"instance && instance.node && instance.node.attachments\">\n  <a *ngFor=\"let attachment of instance.node.attachments\"\n    [href]=\"attachment.value\" target=\"_blank\">{{attachment.label | transloco}}</a>\n</ng-container>\n<div *ngIf=\"!readonly && instance && instance.validationResults\" class=\"ajf-errors\">\n  <ng-container *ngFor=\"let res of instance.validationResults\">\n    <div class=\"error\" *ngIf=\"!res.result\">\n      {{ res.error|transloco }}\n    </div>\n  </ng-container>\n</div>\n", styles: ["ajf-field .ajf-choices-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch}ajf-field .ajf-choices-container ajf-checkbox-group-item{width:100%}ajf-field .ajf-choices-container ajf-checkbox-group-item .mat-mdc-button{display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center}ajf-field .ajf-item-container{position:relative}ajf-field .ajf-errors{font-style:italic;padding:5px}table{border-collapse:collapse;border-spacing:0}table tr td{position:relative}table tr td span{cursor:text;width:100%;box-sizing:border-box;outline:none;display:inline-block;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center}table tr td input{cursor:text;position:absolute;width:100%;box-sizing:border-box;outline:none;inset:0;display:inline-block;border-top:solid 1px transparent;border-right:solid 1px transparent;border-bottom:solid 1px transparent;border-left:solid 1px transparent;font-family:inherit;font-size:inherit;line-height:inherit;text-align:center}table tr td:last-child span,table tr td:last-child input{border-right-color:#ccc}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
+            args: [{ selector: 'ajf-field,ajf-form-field', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    *ngIf=\"instance\"\n    [ngClass]=\"'ajf-field-' + (instance|ajfNodeCompleteName)\"\n    [class.ajf-validated]=\"instance.validationResults|ajfFieldIsValid\"\n    (keydown)=\"tabEvent($event, instance)\"\n>\n  <ng-template ajf-field-host></ng-template>\n</div>\n<ng-container *ngIf=\"instance && instance.node && instance.node.attachments\">\n  <a *ngFor=\"let attachment of instance.node.attachments\"\n    [href]=\"attachment.value\" target=\"_blank\">{{attachment.label | transloco}}</a>\n</ng-container>\n<div *ngIf=\"!readonly && instance && instance.validationResults\" class=\"ajf-errors\">\n  <ng-container *ngFor=\"let res of instance.validationResults\">\n    <div class=\"error\" *ngIf=\"!res.result\">\n      {{ res.error|transloco }}\n    </div>\n  </ng-container>\n</div>\n", styles: [":root{--ajf-control-h: 44px;--ajf-slider-min-h: 420px;--ajf-label-col: 280px;--ajf-side-col: 260px;--ajf-gap: 12px;--ajf-radius: 4px;--ajf-font-sans: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", sans-serif;--ajf-font-mono: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;--ajf-bg: var( --mat-sys-surface-container-low, var(--sys-surface-container-low, #f7f5f2) );--ajf-surface: var( --mat-sys-surface, var(--sys-surface, #ffffff) );--ajf-band: var( --mat-sys-surface-container, var(--sys-surface-container, #faf8f5) );--ajf-border: var( --mat-sys-outline-variant, var(--sys-outline-variant, #e6e2dc) );--ajf-border-strong: var( --mat-sys-outline, var(--sys-outline, #d5cfc6) );--ajf-accent: var( --mat-sys-primary, var(--sys-primary, #0f4c5c) );--ajf-accent-fg: var( --mat-sys-on-primary, var(--sys-on-primary, #ffffff) );--ajf-accent-soft: var( --mat-sys-primary-container, var(--sys-primary-container, #e8f1f5) );--ajf-accent-ink: var( --mat-sys-on-primary-container, var(--sys-on-primary-container, #2d6b7f) );--ajf-text: var( --mat-sys-on-surface, var(--sys-on-surface, #1c1a17) );--ajf-text-muted: var( --mat-sys-on-surface-variant, var(--sys-on-surface-variant, #7a736a) );--ajf-danger: var( --mat-sys-error, var(--sys-error, #b8362b) );--ajf-danger-bg: var( --mat-sys-error-container, var(--sys-error-container, #fdf1ef) );--ajf-text-faint: #a49c92;--ajf-accent-hover: #0c3d4a;--ajf-kbd-bg: rgba(255, 255, 255, .22);--ajf-disabled-bg: #e6e2dc;--ajf-disabled-fg: #5a544c}@media (prefers-color-scheme: dark){:root:not(.ajf-light){--ajf-bg: var( --mat-sys-surface-container-low, var(--sys-surface-container-low, #212121) );--ajf-surface: var( --mat-sys-surface, var(--sys-surface, #303030) );--ajf-band: var( --mat-sys-surface-container, var(--sys-surface-container, #303030) );--ajf-border: var( --mat-sys-outline-variant, var(--sys-outline-variant, #424242) );--ajf-border-strong: var( --mat-sys-outline, var(--sys-outline, #505050) );--ajf-accent: var( --mat-sys-primary, var(--sys-primary, #496fca) );--ajf-accent-fg: var( --mat-sys-on-primary, var(--sys-on-primary, #06232b) );--ajf-accent-soft: var( --mat-sys-primary-container, var(--sys-primary-container, #123641) );--ajf-accent-ink: var( --mat-sys-on-primary-container, var(--sys-on-primary-container, #9ad4e4) );--ajf-text: var( --mat-sys-on-surface, var(--sys-on-surface, #f2efe9) );--ajf-text-muted: var( --mat-sys-on-surface-variant, var(--sys-on-surface-variant, #a9a29a) );--ajf-danger: var( --mat-sys-error, var(--sys-error, #ff9b8f) );--ajf-danger-bg: var( --mat-sys-error-container, var(--sys-error-container, #3a201c) );--ajf-text-faint: #7a736a;--ajf-accent-hover: #8fcedf;--ajf-kbd-bg: rgba(0, 0, 0, .22);--ajf-disabled-bg: #424242;--ajf-disabled-fg: #c9c3bb}}.ajf-dark{--ajf-bg: var( --mat-sys-surface-container-low, var(--sys-surface-container-low, #212121) );--ajf-surface: var( --mat-sys-surface, var(--sys-surface, #303030) );--ajf-band: var( --mat-sys-surface-container, var(--sys-surface-container, #303030) );--ajf-border: var( --mat-sys-outline-variant, var(--sys-outline-variant, #424242) );--ajf-border-strong: var( --mat-sys-outline, var(--sys-outline, #505050) );--ajf-accent: var( --mat-sys-primary, var(--sys-primary, #496fca) );--ajf-accent-fg: var( --mat-sys-on-primary, var(--sys-on-primary, #06232b) );--ajf-accent-soft: var( --mat-sys-primary-container, var(--sys-primary-container, #123641) );--ajf-accent-ink: var( --mat-sys-on-primary-container, var(--sys-on-primary-container, #9ad4e4) );--ajf-text: var( --mat-sys-on-surface, var(--sys-on-surface, #f2efe9) );--ajf-text-muted: var( --mat-sys-on-surface-variant, var(--sys-on-surface-variant, #a9a29a) );--ajf-danger: var( --mat-sys-error, var(--sys-error, #ff9b8f) );--ajf-danger-bg: var( --mat-sys-error-container, var(--sys-error-container, #3a201c) );--ajf-text-faint: #7a736a;--ajf-accent-hover: #8fcedf;--ajf-kbd-bg: rgba(0, 0, 0, .22);--ajf-disabled-bg: #424242;--ajf-disabled-fg: #c9c3bb}.ajf-light{--ajf-bg: var( --mat-sys-surface-container-low, var(--sys-surface-container-low, #f7f5f2) );--ajf-surface: var( --mat-sys-surface, var(--sys-surface, #ffffff) );--ajf-band: var( --mat-sys-surface-container, var(--sys-surface-container, #faf8f5) );--ajf-border: var( --mat-sys-outline-variant, var(--sys-outline-variant, #e6e2dc) );--ajf-border-strong: var( --mat-sys-outline, var(--sys-outline, #d5cfc6) );--ajf-accent: var( --mat-sys-primary, var(--sys-primary, #0f4c5c) );--ajf-accent-fg: var( --mat-sys-on-primary, var(--sys-on-primary, #ffffff) );--ajf-accent-soft: var( --mat-sys-primary-container, var(--sys-primary-container, #e8f1f5) );--ajf-accent-ink: var( --mat-sys-on-primary-container, var(--sys-on-primary-container, #2d6b7f) );--ajf-text: var( --mat-sys-on-surface, var(--sys-on-surface, #1c1a17) );--ajf-text-muted: var( --mat-sys-on-surface-variant, var(--sys-on-surface-variant, #7a736a) );--ajf-danger: var( --mat-sys-error, var(--sys-error, #b8362b) );--ajf-danger-bg: var( --mat-sys-error-container, var(--sys-error-container, #fdf1ef) );--ajf-text-faint: #a49c92;--ajf-accent-hover: #0c3d4a;--ajf-kbd-bg: rgba(255, 255, 255, .22);--ajf-disabled-bg: #e6e2dc;--ajf-disabled-fg: #5a544c}.ajf-form-container,ajf-field{color-scheme:light dark}.ajf-dark .ajf-form-container,.ajf-dark ajf-field{color-scheme:dark}.ajf-light .ajf-form-container,.ajf-light ajf-field{color-scheme:light}.ajf-control{box-sizing:border-box;min-height:var(--ajf-control-h);padding:0 12px;border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;line-height:calc(var(--ajf-control-h) - 2px);outline:none;width:100%;max-width:360px}.ajf-control:focus,.ajf-control:focus-within{border-color:var(--ajf-accent);box-shadow:0 0 0 2px var(--ajf-accent-soft)}.ajf-control:disabled,.ajf-control[readonly]{color:var(--ajf-text-muted);background:var(--ajf-band)}.ajf-control--mono{font-family:var(--ajf-font-mono);font-size:13px;letter-spacing:.01em}.ajf-control--narrow{max-width:160px}.ajf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--ajf-control-h);padding:0 16px;border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;cursor:pointer}.ajf-btn:hover:not(:disabled){border-color:var(--ajf-accent)}.ajf-btn:disabled{color:var(--ajf-text-faint);cursor:default}.ajf-btn--primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--ajf-control-h);padding:0 16px;border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;cursor:pointer;border-color:var(--ajf-accent);background:var(--ajf-accent);color:var(--ajf-accent-fg)}.ajf-btn--primary:hover:not(:disabled){border-color:var(--ajf-accent)}.ajf-btn--primary:disabled{color:var(--ajf-text-faint);cursor:default}.ajf-btn--primary:hover:not(:disabled){border-color:var(--ajf-accent-hover);background:var(--ajf-accent-hover)}.ajf-btn--primary:disabled{border-color:var(--ajf-disabled-bg);background:var(--ajf-disabled-bg);color:var(--ajf-disabled-fg)}.ajf-btn--ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--ajf-control-h);border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;cursor:pointer;min-height:auto;padding:0 4px;border-color:transparent;background:none;color:var(--ajf-accent-ink);text-decoration:none}.ajf-btn--ghost:hover:not(:disabled){border-color:var(--ajf-accent)}.ajf-btn--ghost:disabled{color:var(--ajf-text-faint);cursor:default}.ajf-btn--ghost:hover:not(:disabled){border-color:transparent;text-decoration:underline}.ajf-btn--ghost.ajf-danger{color:var(--ajf-danger)}.ajf-segmented{display:inline-flex;flex-wrap:wrap;gap:8px}.ajf-segmented .ajf-segment{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--ajf-control-h);padding:0 16px;border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;cursor:pointer}.ajf-segmented .ajf-segment:hover:not(:disabled){border-color:var(--ajf-accent)}.ajf-segmented .ajf-segment:disabled{color:var(--ajf-text-faint);cursor:default}.ajf-segmented .ajf-segment.ajf-selected{border-color:var(--ajf-accent);background:var(--ajf-accent);color:var(--ajf-accent-fg)}.ajf-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--ajf-radius);background:var(--ajf-accent-soft);color:var(--ajf-accent-ink);font-size:13px;white-space:nowrap}.ajf-chip--removable button{display:inline-flex;align-items:center;padding:0;border:0;background:none;color:inherit;cursor:pointer;opacity:.7}.ajf-chip--removable button:hover{opacity:1}.ajf-chip--removable button .mat-icon{width:14px;height:14px;font-size:14px}.ajf-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--ajf-band);color:var(--ajf-text-muted);font-size:12px;white-space:nowrap}.ajf-pill--danger{background:var(--ajf-danger-bg);color:var(--ajf-danger);font-weight:500}.ajf-kbd{padding:1px 5px;border-radius:3px;background:var(--ajf-kbd-bg);font-family:var(--ajf-font-mono);font-size:10px}.ajf-input-group{display:inline-flex;align-items:center;overflow:hidden;box-sizing:border-box;min-height:var(--ajf-control-h);border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;line-height:calc(var(--ajf-control-h) - 2px);outline:none;padding:0}.ajf-input-group:focus,.ajf-input-group:focus-within{border-color:var(--ajf-accent);box-shadow:0 0 0 2px var(--ajf-accent-soft)}.ajf-input-group:disabled,.ajf-input-group[readonly]{color:var(--ajf-text-muted);background:var(--ajf-band)}.ajf-input-group>input{flex:1 1 auto;min-width:0;height:calc(var(--ajf-control-h) - 2px);padding:0 12px;border:0;background:none;color:inherit;font:inherit;outline:none}.ajf-input-group>.ajf-input-group-action{display:inline-flex;align-items:center;justify-content:center;align-self:stretch;padding:0 8px;border:0;border-left:1px solid var(--ajf-border);background:var(--ajf-band);color:var(--ajf-text-muted);cursor:pointer}.ajf-hatch{background-color:var(--ajf-band);background-image:repeating-linear-gradient(45deg,var(--ajf-border) 0,var(--ajf-border) 1px,transparent 1px,transparent 7px)}.ajf-micro-label{font-family:var(--ajf-font-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ajf-text-muted)}ajf-field .mat-mdc-select{box-sizing:border-box;min-height:var(--ajf-control-h);padding:0 12px;border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;line-height:calc(var(--ajf-control-h) - 2px);outline:none;display:inline-flex;align-items:center;width:auto;min-width:240px;max-width:100%}ajf-field .mat-mdc-select:focus,ajf-field .mat-mdc-select:focus-within{border-color:var(--ajf-accent);box-shadow:0 0 0 2px var(--ajf-accent-soft)}ajf-field .mat-mdc-select:disabled,ajf-field .mat-mdc-select[readonly]{color:var(--ajf-text-muted);background:var(--ajf-band)}ajf-field .mat-mdc-select .mat-mdc-select-trigger{height:auto}ajf-field .mat-mdc-select .mat-mdc-select-value{color:var(--ajf-text);font-size:14px}ajf-field .mat-mdc-select .mat-mdc-select-arrow-wrapper{color:var(--ajf-text-muted)}ajf-field .mat-mdc-select-multiple{min-height:var(--ajf-control-h)}ajf-field .mat-mdc-select-multiple .mat-mdc-select-value{display:flex;flex-wrap:wrap;padding:5px 0}ajf-field .mat-mdc-select-multiple mat-select-trigger{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}ajf-field .mat-mdc-slide-toggle{--mdc-switch-selected-track-color: var(--ajf-accent);--mdc-switch-selected-handle-color: var(--ajf-surface);--mdc-switch-selected-hover-track-color: var(--ajf-accent);--mdc-switch-selected-focus-track-color: var(--ajf-accent);--mdc-switch-selected-pressed-track-color: var(--ajf-accent);--mdc-switch-selected-hover-handle-color: var(--ajf-surface);--mdc-switch-selected-focus-handle-color: var(--ajf-surface);--mdc-switch-selected-pressed-handle-color: var(--ajf-surface)}ajf-field .mat-mdc-slider{--mdc-slider-handle-color: var(--ajf-accent);--mdc-slider-focus-handle-color: var(--ajf-accent);--mdc-slider-hover-handle-color: var(--ajf-accent);--mdc-slider-active-track-color: var(--ajf-accent);--mdc-slider-inactive-track-color: var(--ajf-border);--mdc-slider-with-tick-marks-active-container-color: var(--ajf-accent-fg);--mdc-slider-with-tick-marks-inactive-container-color: var(--ajf-border-strong);--mdc-slider-handle-elevation: none;--mat-slider-ripple-color: var(--ajf-accent)}ajf-field .mat-datepicker-toggle .mat-mdc-icon-button{width:34px;height:34px;padding:5px;color:var(--ajf-text-muted)}ajf-field{display:block;min-width:0;font-family:var(--ajf-font-sans)}ajf-field .ajf-choices-container{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:8px}ajf-field .ajf-item-container{position:relative}ajf-field .ajf-errors{color:var(--ajf-danger);font-size:13px}ajf-field>a{color:var(--ajf-accent-ink);font-size:13px}ajf-field-row ajf-field .ajf-errors{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none;margin:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: AjfFieldService }] });
 
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+/**
+ * One field of a slide, laid out as a row: type badge, label, control, and a
+ * right-hand column carrying either the field description or its validation
+ * error.
+ *
+ * Both the plain and the repeating slide branches of the renderer render through
+ * this component, so the row layout is defined in exactly one place.
+ */
+class AjfFieldRow {
+    set instance(instance) {
+        this._instance = instance;
+        // Validity, visibility and the error list are mutated in place on the
+        // instance, so the row has to be told to re-check itself the same way the
+        // field components do.
+        this._instanceSub.unsubscribe();
+        this._instanceSub = instance
+            ? instance.updatedEvt.subscribe(() => this._cdr.markForCheck())
+            : Subscription.EMPTY;
+    }
+    get instance() {
+        return this._instance;
+    }
+    constructor(_cdr) {
+        this._cdr = _cdr;
+        this._instanceSub = Subscription.EMPTY;
+        this._readonly = false;
+    }
+    ngOnDestroy() {
+        this._instanceSub.unsubscribe();
+    }
+    set readonly(readonly) {
+        this._readonly = coerceBooleanProperty(readonly);
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    /**
+     * Rows drop out on the host element rather than inside it, so that a hidden
+     * field leaves no empty cell behind when rows are laid out in columns.
+     *
+     * Three kinds of node carry no information of their own and are kept out of
+     * the layout: a container node, which is only a bracket around the fields it
+     * holds and has no fieldType to render; a formula field with no label, which
+     * only feeds other fields; and a note with no body -- the renderer synthesises
+     * one of those to carry a node group's label, and a group is meant to show
+     * nothing of itself.
+     */
+    get hidden() {
+        const node = this.instance?.node;
+        // Truthy, not `=== false`: a visibility condition is an arbitrary expression
+        // and the renderer stores whatever it returns, so an unanswered field can
+        // leave `visible` at null rather than at false.
+        if (node == null || !this.instance.visible) {
+            return true;
+        }
+        if (node.nodeType !== AjfNodeType.AjfField) {
+            return true;
+        }
+        if (node.fieldType === AjfFieldType.Empty) {
+            return !node.HTML;
+        }
+        return node.fieldType === AjfFieldType.Formula && node.label === '';
+    }
+    /** Notes render their own block and never get a control border around it. */
+    get isNote() {
+        return this.instance?.node.fieldType === AjfFieldType.Empty;
+    }
+    get required() {
+        return this.instance?.node.validation?.notEmpty != null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFieldRow, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFieldRow, selector: "ajf-field-row", inputs: { instance: "instance", readonly: "readonly" }, host: { properties: { "class.ajf-hidden-row": "this.hidden" } }, ngImport: i0, template: "<div\n  *ngIf=\"!hidden\"\n  class=\"ajf-field-row\"\n  [class.ajf-invalid]=\"!instance.valid\"\n  [class.ajf-readonly]=\"readonly\"\n  [class.ajf-note-row]=\"isNote\"\n  [ngClass]=\"'ajf-' + instance.node.size + ' ajf-field-type-' + instance.node.fieldType\"\n>\n  <div class=\"ajf-field-label\">\n    <span class=\"ajf-field-label-line\">\n      <label [attr.id]=\"instance.node.name\" [innerHTML]=\"instance.node.label | transloco\"></label>\n      <span class=\"ajf-required\" *ngIf=\"required\" aria-hidden=\"true\">*</span>\n      <mat-icon\n        class=\"ajf-hint-icon\"\n        *ngIf=\"instance.node.hint as hint\"\n        [matTooltip]=\"hint | transloco\"\n        matTooltipPosition=\"right\"\n        >{{ instance.node.hintIcon || 'help' }}</mat-icon\n      >\n    </span>\n    <!-- A note carries prose, not a value, so naming its type says nothing. -->\n    <ng-container *ngIf=\"!isNote\">\n      <span class=\"ajf-field-type-name\" *ngIf=\"instance | ajfFieldTypeLabel as type\"\n        >{{ type.name | transloco }}<ng-container *ngIf=\"type.detailValue\"> &middot;\n          {{ type.detailValue }}<ng-container *ngIf=\"type.detailUnit\">\n            {{ type.detailUnit | transloco }}</ng-container\n          ></ng-container\n        ></span\n      >\n    </ng-container>\n  </div>\n\n  <div class=\"ajf-field-control\">\n    <ajf-field\n      [instance]=\"instance\"\n      [readonly]=\"readonly\"\n      [id]=\"'field_entry_' + instance.node.id\"\n    ></ajf-field>\n  </div>\n\n  <div class=\"ajf-field-side\">\n    <span class=\"ajf-field-error-message\" *ngIf=\"!instance.valid\">{{\n      instance | ajfAsFieldInstanceErrors | transloco\n    }}</span>\n    <span class=\"ajf-field-hint-text\" *ngIf=\"instance.valid && instance.node.description\">{{\n      instance.node.description | transloco\n    }}</span>\n  </div>\n</div>\n", styles: ["ajf-field-row{display:block}ajf-field-row.ajf-hidden-row{display:none}ajf-field-row .ajf-field-row{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:var(--ajf-gap);box-sizing:border-box;padding:10px 20px;border-bottom:1px solid var(--ajf-border);background:var(--ajf-surface);font-family:var(--ajf-font-sans)}ajf-field-row .ajf-field-label{display:flex;flex:0 0 var(--ajf-label-col);flex-direction:column;justify-content:center;gap:2px;min-height:var(--ajf-control-h);max-width:var(--ajf-label-col)}ajf-field-row .ajf-field-label .ajf-field-label-line{display:flex;align-items:center;gap:6px}ajf-field-row .ajf-field-label label{color:var(--ajf-text);font-size:14px;font-weight:500;line-height:1.35}ajf-field-row .ajf-field-label .ajf-field-type-name{color:var(--ajf-text-muted);font-size:12px;line-height:1.3}ajf-field-row .ajf-field-label .ajf-required{color:var(--ajf-danger);font-weight:600}ajf-field-row .ajf-field-label .ajf-hint-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--ajf-text-muted);font-size:16px;line-height:1;cursor:help}ajf-field-row .ajf-field-control{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}ajf-field-row .ajf-field-control>ajf-field{flex:1 1 auto;min-width:0}ajf-field-row .ajf-field-side{display:flex;flex:0 0 var(--ajf-side-col);align-items:center;min-height:var(--ajf-control-h);max-width:var(--ajf-side-col)}ajf-field-row .ajf-field-side .ajf-field-hint-text{color:var(--ajf-text-muted);font-size:13px}ajf-field-row .ajf-field-side .ajf-field-error-message{color:var(--ajf-danger);font-size:13px}ajf-field-row .ajf-normal .ajf-field-control{max-width:none}ajf-field-row .ajf-small .ajf-field-control{max-width:420px}ajf-field-row .ajf-smaller .ajf-field-control{max-width:320px}ajf-field-row .ajf-tiny .ajf-field-control{max-width:220px}ajf-field-row .ajf-mini .ajf-field-control{max-width:140px}ajf-field-row .ajf-field-row.ajf-invalid{background:color-mix(in srgb,var(--ajf-danger-bg) 45%,var(--ajf-surface))}ajf-field-row .ajf-field-row.ajf-invalid .ajf-control,ajf-field-row .ajf-field-row.ajf-invalid input.ajf-control,ajf-field-row .ajf-field-row.ajf-invalid .mat-mdc-select-trigger{border-color:var(--ajf-danger)}ajf-field-row .ajf-field-row.ajf-readonly .ajf-field-side{flex-basis:auto}ajf-field-row .ajf-note-row .ajf-field-control,ajf-field-row .ajf-field-type-1 .ajf-field-control,ajf-field-row .ajf-field-type-11 .ajf-field-control{max-width:none}@media (width <= 900px){ajf-field-row .ajf-field-row{flex-wrap:wrap;padding:12px 16px}ajf-field-row .ajf-field-label,ajf-field-row .ajf-field-side{flex-basis:100%;max-width:none;min-height:0}ajf-field-row .ajf-field-control{flex-basis:100%}}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: AjfFormField, selector: "ajf-field,ajf-form-field" }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i1$1.AjfAsFieldInstanceErrorsPipe, name: "ajfAsFieldInstanceErrors" }, { kind: "pipe", type: i1$1.AjfFieldTypeLabelPipe, name: "ajfFieldTypeLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFieldRow, decorators: [{
+            type: Component,
+            args: [{ selector: 'ajf-field-row', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n  *ngIf=\"!hidden\"\n  class=\"ajf-field-row\"\n  [class.ajf-invalid]=\"!instance.valid\"\n  [class.ajf-readonly]=\"readonly\"\n  [class.ajf-note-row]=\"isNote\"\n  [ngClass]=\"'ajf-' + instance.node.size + ' ajf-field-type-' + instance.node.fieldType\"\n>\n  <div class=\"ajf-field-label\">\n    <span class=\"ajf-field-label-line\">\n      <label [attr.id]=\"instance.node.name\" [innerHTML]=\"instance.node.label | transloco\"></label>\n      <span class=\"ajf-required\" *ngIf=\"required\" aria-hidden=\"true\">*</span>\n      <mat-icon\n        class=\"ajf-hint-icon\"\n        *ngIf=\"instance.node.hint as hint\"\n        [matTooltip]=\"hint | transloco\"\n        matTooltipPosition=\"right\"\n        >{{ instance.node.hintIcon || 'help' }}</mat-icon\n      >\n    </span>\n    <!-- A note carries prose, not a value, so naming its type says nothing. -->\n    <ng-container *ngIf=\"!isNote\">\n      <span class=\"ajf-field-type-name\" *ngIf=\"instance | ajfFieldTypeLabel as type\"\n        >{{ type.name | transloco }}<ng-container *ngIf=\"type.detailValue\"> &middot;\n          {{ type.detailValue }}<ng-container *ngIf=\"type.detailUnit\">\n            {{ type.detailUnit | transloco }}</ng-container\n          ></ng-container\n        ></span\n      >\n    </ng-container>\n  </div>\n\n  <div class=\"ajf-field-control\">\n    <ajf-field\n      [instance]=\"instance\"\n      [readonly]=\"readonly\"\n      [id]=\"'field_entry_' + instance.node.id\"\n    ></ajf-field>\n  </div>\n\n  <div class=\"ajf-field-side\">\n    <span class=\"ajf-field-error-message\" *ngIf=\"!instance.valid\">{{\n      instance | ajfAsFieldInstanceErrors | transloco\n    }}</span>\n    <span class=\"ajf-field-hint-text\" *ngIf=\"instance.valid && instance.node.description\">{{\n      instance.node.description | transloco\n    }}</span>\n  </div>\n</div>\n", styles: ["ajf-field-row{display:block}ajf-field-row.ajf-hidden-row{display:none}ajf-field-row .ajf-field-row{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:var(--ajf-gap);box-sizing:border-box;padding:10px 20px;border-bottom:1px solid var(--ajf-border);background:var(--ajf-surface);font-family:var(--ajf-font-sans)}ajf-field-row .ajf-field-label{display:flex;flex:0 0 var(--ajf-label-col);flex-direction:column;justify-content:center;gap:2px;min-height:var(--ajf-control-h);max-width:var(--ajf-label-col)}ajf-field-row .ajf-field-label .ajf-field-label-line{display:flex;align-items:center;gap:6px}ajf-field-row .ajf-field-label label{color:var(--ajf-text);font-size:14px;font-weight:500;line-height:1.35}ajf-field-row .ajf-field-label .ajf-field-type-name{color:var(--ajf-text-muted);font-size:12px;line-height:1.3}ajf-field-row .ajf-field-label .ajf-required{color:var(--ajf-danger);font-weight:600}ajf-field-row .ajf-field-label .ajf-hint-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:var(--ajf-text-muted);font-size:16px;line-height:1;cursor:help}ajf-field-row .ajf-field-control{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}ajf-field-row .ajf-field-control>ajf-field{flex:1 1 auto;min-width:0}ajf-field-row .ajf-field-side{display:flex;flex:0 0 var(--ajf-side-col);align-items:center;min-height:var(--ajf-control-h);max-width:var(--ajf-side-col)}ajf-field-row .ajf-field-side .ajf-field-hint-text{color:var(--ajf-text-muted);font-size:13px}ajf-field-row .ajf-field-side .ajf-field-error-message{color:var(--ajf-danger);font-size:13px}ajf-field-row .ajf-normal .ajf-field-control{max-width:none}ajf-field-row .ajf-small .ajf-field-control{max-width:420px}ajf-field-row .ajf-smaller .ajf-field-control{max-width:320px}ajf-field-row .ajf-tiny .ajf-field-control{max-width:220px}ajf-field-row .ajf-mini .ajf-field-control{max-width:140px}ajf-field-row .ajf-field-row.ajf-invalid{background:color-mix(in srgb,var(--ajf-danger-bg) 45%,var(--ajf-surface))}ajf-field-row .ajf-field-row.ajf-invalid .ajf-control,ajf-field-row .ajf-field-row.ajf-invalid input.ajf-control,ajf-field-row .ajf-field-row.ajf-invalid .mat-mdc-select-trigger{border-color:var(--ajf-danger)}ajf-field-row .ajf-field-row.ajf-readonly .ajf-field-side{flex-basis:auto}ajf-field-row .ajf-note-row .ajf-field-control,ajf-field-row .ajf-field-type-1 .ajf-field-control,ajf-field-row .ajf-field-type-11 .ajf-field-control{max-width:none}@media (width <= 900px){ajf-field-row .ajf-field-row{flex-wrap:wrap;padding:12px 16px}ajf-field-row .ajf-field-label,ajf-field-row .ajf-field-side{flex-basis:100%;max-width:none;min-height:0}ajf-field-row .ajf-field-control{flex-basis:100%}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { instance: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], hidden: [{
+                type: HostBinding,
+                args: ['class.ajf-hidden-row']
+            }] } });
+
+/**
+ * The pager for a repeating slide: one button per repetition plus add and remove
+ * actions. The renderer keeps one page per repetition, so picking a number here
+ * is a page change, which the renderer performs.
+ */
+class AjfRepStrip {
+    constructor() {
+        /** The repetition currently on screen, zero based. */
+        this.current = 0;
+        this._readonly = false;
+        this.goTo = new EventEmitter();
+        this.add = new EventEmitter();
+        this.remove = new EventEmitter();
+    }
+    set readonly(readonly) {
+        this._readonly = coerceBooleanProperty(readonly);
+    }
+    get readonly() {
+        return this._readonly;
+    }
+    /**
+     * A repetition count driven by a formula is not the reader's to change:
+     * `AjfFormRendererService.addGroup` and `removeGroup` both refuse the call
+     * outright, so without this the buttons would sit enabled and do nothing.
+     */
+    get manualReps() {
+        return this.slide.formulaReps == null;
+    }
+    get canAdd() {
+        return this.manualReps && !!this.slide.canAdd;
+    }
+    get canRemove() {
+        return this.manualReps && !!this.slide.canRemove;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfRepStrip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfRepStrip, selector: "ajf-rep-strip", inputs: { slide: "slide", current: "current", readonly: "readonly" }, outputs: { goTo: "goTo", add: "add", remove: "remove" }, ngImport: i0, template: "<div class=\"ajf-rep-strip\">\n  <span class=\"ajf-micro-label ajf-rep-strip-label\"\n    >{{ 'Number of' | transloco }} {{ slide.node.label | transloco }}</span\n  >\n\n  <div class=\"ajf-rep-pager\">\n    <button\n      type=\"button\"\n      class=\"ajf-btn\"\n      [disabled]=\"current === 0\"\n      (click)=\"goTo.emit(current - 1)\"\n      [attr.aria-label]=\"'Back' | transloco\"\n    >\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button\n      type=\"button\"\n      class=\"ajf-btn ajf-rep-page\"\n      *ngFor=\"let rep of (slide.reps | ajfRange); let idx = index\"\n      [class.ajf-selected]=\"idx === current\"\n      (click)=\"goTo.emit(idx)\"\n    >\n      {{ idx + 1 }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"ajf-btn\"\n      [disabled]=\"current >= slide.reps - 1\"\n      (click)=\"goTo.emit(current + 1)\"\n      [attr.aria-label]=\"'Forward' | transloco\"\n    >\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n\n    <ng-container *ngIf=\"!readonly\">\n      <button\n        type=\"button\"\n        class=\"ajf-btn\"\n        [disabled]=\"!canAdd\"\n        (click)=\"add.emit()\"\n        [attr.aria-label]=\"'Add' | transloco\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ajf-btn\"\n        [disabled]=\"!canRemove\"\n        (click)=\"remove.emit()\"\n        [attr.aria-label]=\"'Remove' | transloco\"\n      >\n        <mat-icon>remove</mat-icon>\n      </button>\n    </ng-container>\n  </div>\n\n  <span class=\"ajf-rep-strip-context\">\n    <span [innerHTML]=\"slide.node.label | transloco\"></span>\n    {{ current + 1 }} {{ 'of' | transloco }} {{ slide.reps }}\n  </span>\n</div>\n", styles: ["ajf-rep-strip{display:block}ajf-rep-strip .ajf-rep-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 20px;border-bottom:1px solid var(--ajf-border);background:var(--ajf-band);font-family:var(--ajf-font-sans)}ajf-rep-strip .ajf-rep-strip-label{flex:0 0 auto}ajf-rep-strip .ajf-rep-pager{display:flex;flex-wrap:wrap;gap:6px}ajf-rep-strip .ajf-rep-pager .ajf-btn{min-width:32px;min-height:32px;padding:0 6px;font-size:13px}ajf-rep-strip .ajf-rep-pager .ajf-btn .mat-icon{width:18px;height:18px;font-size:18px}ajf-rep-strip .ajf-rep-pager .ajf-rep-page.ajf-selected{border-color:var(--ajf-accent);background:var(--ajf-accent);color:var(--ajf-accent-fg)}ajf-rep-strip .ajf-rep-strip-context{margin-left:auto;color:var(--ajf-text-muted);font-size:13px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i1$1.AjfRangePipe, name: "ajfRange" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfRepStrip, decorators: [{
+            type: Component,
+            args: [{ selector: 'ajf-rep-strip', encapsulation: ViewEncapsulation.None, template: "<div class=\"ajf-rep-strip\">\n  <span class=\"ajf-micro-label ajf-rep-strip-label\"\n    >{{ 'Number of' | transloco }} {{ slide.node.label | transloco }}</span\n  >\n\n  <div class=\"ajf-rep-pager\">\n    <button\n      type=\"button\"\n      class=\"ajf-btn\"\n      [disabled]=\"current === 0\"\n      (click)=\"goTo.emit(current - 1)\"\n      [attr.aria-label]=\"'Back' | transloco\"\n    >\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button\n      type=\"button\"\n      class=\"ajf-btn ajf-rep-page\"\n      *ngFor=\"let rep of (slide.reps | ajfRange); let idx = index\"\n      [class.ajf-selected]=\"idx === current\"\n      (click)=\"goTo.emit(idx)\"\n    >\n      {{ idx + 1 }}\n    </button>\n    <button\n      type=\"button\"\n      class=\"ajf-btn\"\n      [disabled]=\"current >= slide.reps - 1\"\n      (click)=\"goTo.emit(current + 1)\"\n      [attr.aria-label]=\"'Forward' | transloco\"\n    >\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n\n    <ng-container *ngIf=\"!readonly\">\n      <button\n        type=\"button\"\n        class=\"ajf-btn\"\n        [disabled]=\"!canAdd\"\n        (click)=\"add.emit()\"\n        [attr.aria-label]=\"'Add' | transloco\"\n      >\n        <mat-icon>add</mat-icon>\n      </button>\n      <button\n        type=\"button\"\n        class=\"ajf-btn\"\n        [disabled]=\"!canRemove\"\n        (click)=\"remove.emit()\"\n        [attr.aria-label]=\"'Remove' | transloco\"\n      >\n        <mat-icon>remove</mat-icon>\n      </button>\n    </ng-container>\n  </div>\n\n  <span class=\"ajf-rep-strip-context\">\n    <span [innerHTML]=\"slide.node.label | transloco\"></span>\n    {{ current + 1 }} {{ 'of' | transloco }} {{ slide.reps }}\n  </span>\n</div>\n", styles: ["ajf-rep-strip{display:block}ajf-rep-strip .ajf-rep-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:8px 20px;border-bottom:1px solid var(--ajf-border);background:var(--ajf-band);font-family:var(--ajf-font-sans)}ajf-rep-strip .ajf-rep-strip-label{flex:0 0 auto}ajf-rep-strip .ajf-rep-pager{display:flex;flex-wrap:wrap;gap:6px}ajf-rep-strip .ajf-rep-pager .ajf-btn{min-width:32px;min-height:32px;padding:0 6px;font-size:13px}ajf-rep-strip .ajf-rep-pager .ajf-btn .mat-icon{width:18px;height:18px;font-size:18px}ajf-rep-strip .ajf-rep-pager .ajf-rep-page.ajf-selected{border-color:var(--ajf-accent);background:var(--ajf-accent);color:var(--ajf-accent-fg)}ajf-rep-strip .ajf-rep-strip-context{margin-left:auto;color:var(--ajf-text-muted);font-size:13px}\n"] }]
+        }], propDecorators: { slide: [{
+                type: Input
+            }], current: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], goTo: [{
+                type: Output
+            }], add: [{
+                type: Output
+            }], remove: [{
+                type: Output
+            }] } });
+
+/**
+ * The bar at the top of every slide: its number and title, a menu to jump to any
+ * other slide, previous/next paging, and a slot for the form's own action
+ * buttons.
+ *
+ * What the form still has failing is reported by the footer alone. Naming it
+ * here too cost a phone's whole header width to repeat something already on
+ * screen.
+ *
+ * Paging belongs to the renderer, which owns the page slider, so it is raised
+ * as an event rather than handled here.
+ */
+class AjfSlideHeader {
+    constructor() {
+        /** Absent while a start or end message page is on screen. */
+        this.slide = null;
+        /** The number shown in the badge, already offset by any start message. */
+        this.displayNumber = 1;
+        /** Every slide of the form, for the jump menu. */
+        this.slides = [];
+        /** How many pages the slider holds, repetitions and message pages included. */
+        this.pages = 0;
+        this.jumpTo = new EventEmitter();
+        this.prev = new EventEmitter();
+        this.next = new EventEmitter();
+    }
+    /**
+     * Whether the form has anywhere to page to. A single page form gets no arrows
+     * and no "slide 1 of 1": both are controls that cannot do anything.
+     */
+    get canNavigate() {
+        return this.pages > 1;
+    }
+    /**
+     * Whether the jump menu is worth opening. Counted over the visible slides, the
+     * only ones the menu can actually reach.
+     */
+    get canJump() {
+        return this.slides.filter(s => s.visible !== false).length > 1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfSlideHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfSlideHeader, selector: "ajf-slide-header", inputs: { slide: "slide", displayNumber: "displayNumber", slides: "slides", pages: "pages" }, outputs: { jumpTo: "jumpTo", prev: "prev", next: "next" }, ngImport: i0, template: "<div class=\"ajf-slide-header\">\n  <button\n    type=\"button\"\n    class=\"ajf-slide-title\"\n    [class.ajf-slide-title-static]=\"!slide || !canJump\"\n    [disabled]=\"!slide || !canJump\"\n    [matMenuTriggerFor]=\"slideMenu\"\n    [attr.aria-label]=\"'Go to slide' | transloco\"\n  >\n    <span class=\"ajf-slide-number\">{{ displayNumber }}</span>\n\n    <!-- Every slide title is laid out in the same grid cell, so the trigger is as\n         wide as the longest of them and keeps that width while paging. Only the\n         current title is visible; the rest just hold the space open. -->\n    <span class=\"ajf-slide-label-stack\">\n      <span\n        class=\"ajf-slide-label\"\n        *ngFor=\"let s of slides\"\n        [class.ajf-current]=\"s === slide\"\n        [innerHTML]=\"s.node.label | transloco\"\n      ></span>\n    </span>\n    <mat-icon class=\"ajf-slide-caret\" *ngIf=\"slide && canJump\">arrow_drop_down</mat-icon>\n  </button>\n\n  <mat-menu #slideMenu=\"matMenu\">\n    <button\n      mat-menu-item\n      *ngFor=\"let s of slides\"\n      [disabled]=\"s.visible === false\"\n      (click)=\"jumpTo.emit(s)\"\n    >\n      <mat-icon [class.ajf-invalid]=\"!s.valid\">{{ s.valid ? 'check' : 'warning' }}</mat-icon>\n      <span [innerHTML]=\"s.node.label | transloco\"></span>\n    </button>\n  </mat-menu>\n\n  <!-- Nothing to page through in a single page form. -->\n  <div class=\"ajf-slide-nav\" *ngIf=\"canNavigate\">\n    <button\n      type=\"button\"\n      class=\"ajf-btn\"\n      (click)=\"prev.emit()\"\n      [attr.aria-label]=\"'Back' | transloco\"\n    >\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button\n      type=\"button\"\n      class=\"ajf-btn\"\n      (click)=\"next.emit()\"\n      [attr.aria-label]=\"'Forward' | transloco\"\n    >\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n  </div>\n\n  <span class=\"ajf-slide-header-spacer\"></span>\n\n  <ng-content></ng-content>\n</div>\n", styles: ["ajf-slide-header{display:block}ajf-slide-header .ajf-slide-header{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 20px;background:var(--ajf-surface);font-family:var(--ajf-font-sans)}ajf-slide-header .ajf-slide-header-spacer{flex:1 1 auto}ajf-slide-header .ajf-slide-title{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--ajf-control-h);border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;cursor:pointer;flex:0 1 auto;justify-content:flex-start;gap:10px;max-width:100%;padding:0 12px}ajf-slide-header .ajf-slide-title:hover:not(:disabled){border-color:var(--ajf-accent)}ajf-slide-header .ajf-slide-title:disabled{color:var(--ajf-text-faint);cursor:default}ajf-slide-header .ajf-slide-title .ajf-slide-number{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--ajf-accent);color:var(--ajf-accent-fg);font-size:12px;font-weight:600}ajf-slide-header .ajf-slide-title .ajf-slide-label-stack{display:grid;min-width:0;max-width:340px;text-align:left}ajf-slide-header .ajf-slide-title .ajf-slide-label{grid-area:1/1;overflow:hidden;visibility:hidden;font-size:16px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}ajf-slide-header .ajf-slide-title .ajf-slide-label.ajf-current{visibility:visible}ajf-slide-header .ajf-slide-title .ajf-slide-caret{width:20px;height:20px;margin-left:auto;color:var(--ajf-text-muted);font-size:20px}ajf-slide-header .ajf-slide-title-static{cursor:default}ajf-slide-header .ajf-slide-title-static:hover{border-color:var(--ajf-border-strong)}ajf-slide-header .ajf-slide-nav{display:flex;gap:8px}ajf-slide-header .ajf-slide-nav .ajf-btn{width:var(--ajf-control-h);padding:0}.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon.ajf-invalid{color:var(--ajf-danger)}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i3$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfSlideHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'ajf-slide-header', encapsulation: ViewEncapsulation.None, template: "<div class=\"ajf-slide-header\">\n  <button\n    type=\"button\"\n    class=\"ajf-slide-title\"\n    [class.ajf-slide-title-static]=\"!slide || !canJump\"\n    [disabled]=\"!slide || !canJump\"\n    [matMenuTriggerFor]=\"slideMenu\"\n    [attr.aria-label]=\"'Go to slide' | transloco\"\n  >\n    <span class=\"ajf-slide-number\">{{ displayNumber }}</span>\n\n    <!-- Every slide title is laid out in the same grid cell, so the trigger is as\n         wide as the longest of them and keeps that width while paging. Only the\n         current title is visible; the rest just hold the space open. -->\n    <span class=\"ajf-slide-label-stack\">\n      <span\n        class=\"ajf-slide-label\"\n        *ngFor=\"let s of slides\"\n        [class.ajf-current]=\"s === slide\"\n        [innerHTML]=\"s.node.label | transloco\"\n      ></span>\n    </span>\n    <mat-icon class=\"ajf-slide-caret\" *ngIf=\"slide && canJump\">arrow_drop_down</mat-icon>\n  </button>\n\n  <mat-menu #slideMenu=\"matMenu\">\n    <button\n      mat-menu-item\n      *ngFor=\"let s of slides\"\n      [disabled]=\"s.visible === false\"\n      (click)=\"jumpTo.emit(s)\"\n    >\n      <mat-icon [class.ajf-invalid]=\"!s.valid\">{{ s.valid ? 'check' : 'warning' }}</mat-icon>\n      <span [innerHTML]=\"s.node.label | transloco\"></span>\n    </button>\n  </mat-menu>\n\n  <!-- Nothing to page through in a single page form. -->\n  <div class=\"ajf-slide-nav\" *ngIf=\"canNavigate\">\n    <button\n      type=\"button\"\n      class=\"ajf-btn\"\n      (click)=\"prev.emit()\"\n      [attr.aria-label]=\"'Back' | transloco\"\n    >\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n    <button\n      type=\"button\"\n      class=\"ajf-btn\"\n      (click)=\"next.emit()\"\n      [attr.aria-label]=\"'Forward' | transloco\"\n    >\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n  </div>\n\n  <span class=\"ajf-slide-header-spacer\"></span>\n\n  <ng-content></ng-content>\n</div>\n", styles: ["ajf-slide-header{display:block}ajf-slide-header .ajf-slide-header{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 20px;background:var(--ajf-surface);font-family:var(--ajf-font-sans)}ajf-slide-header .ajf-slide-header-spacer{flex:1 1 auto}ajf-slide-header .ajf-slide-title{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--ajf-control-h);border:1px solid var(--ajf-border-strong);border-radius:var(--ajf-radius);background:var(--ajf-surface);color:var(--ajf-text);font-family:var(--ajf-font-sans);font-size:14px;cursor:pointer;flex:0 1 auto;justify-content:flex-start;gap:10px;max-width:100%;padding:0 12px}ajf-slide-header .ajf-slide-title:hover:not(:disabled){border-color:var(--ajf-accent)}ajf-slide-header .ajf-slide-title:disabled{color:var(--ajf-text-faint);cursor:default}ajf-slide-header .ajf-slide-title .ajf-slide-number{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--ajf-accent);color:var(--ajf-accent-fg);font-size:12px;font-weight:600}ajf-slide-header .ajf-slide-title .ajf-slide-label-stack{display:grid;min-width:0;max-width:340px;text-align:left}ajf-slide-header .ajf-slide-title .ajf-slide-label{grid-area:1/1;overflow:hidden;visibility:hidden;font-size:16px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}ajf-slide-header .ajf-slide-title .ajf-slide-label.ajf-current{visibility:visible}ajf-slide-header .ajf-slide-title .ajf-slide-caret{width:20px;height:20px;margin-left:auto;color:var(--ajf-text-muted);font-size:20px}ajf-slide-header .ajf-slide-title-static{cursor:default}ajf-slide-header .ajf-slide-title-static:hover{border-color:var(--ajf-border-strong)}ajf-slide-header .ajf-slide-nav{display:flex;gap:8px}ajf-slide-header .ajf-slide-nav .ajf-btn{width:var(--ajf-control-h);padding:0}.mat-mdc-menu-panel .mat-mdc-menu-item .mat-icon.ajf-invalid{color:var(--ajf-danger)}\n"] }]
+        }], propDecorators: { slide: [{
+                type: Input
+            }], displayNumber: [{
+                type: Input
+            }], slides: [{
+                type: Input
+            }], pages: [{
+                type: Input
+            }], jumpTo: [{
+                type: Output
+            }], prev: [{
+                type: Output
+            }], next: [{
+                type: Output
+            }] } });
+
+/**
+ * @license
+ * Copyright (C) Gnucoop soc. coop.
+ *
+ * This file is part of the Advanced JSON forms (ajf).
+ *
+ * Advanced JSON forms (ajf) is free software: you can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the License,
+ * or (at your option) any later version.
+ *
+ * Advanced JSON forms (ajf) is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Advanced JSON forms (ajf).
+ * If not, see http://www.gnu.org/licenses/.
+ *
+ */
+/**
+ * The fields a slide header counts. `slideNodes` is indexed per repetition, and
+ * a non-repeating slide keeps its only set of nodes at index 0, so both kinds of
+ * slide are read the same way.
+ */
+const countableFields = (slide, idx) => {
+    const nodes = (slide.slideNodes && slide.slideNodes[idx]) || slide.flatNodes || [];
+    return nodes.filter(n => n.visible && isFieldInstance(n) && n.node.fieldType !== AjfFieldType.Empty);
+};
+/**
+ * Whether a field holds anything.
+ *
+ * The value is read off the form group, not off `AjfFieldInstance.value`: the
+ * instance's own `value` is only written at initialisation and by formulas, so it
+ * does not follow what the user types. The group is flat and keyed by each
+ * instance's complete name, which is how `AjfFormRendererService.getControl`
+ * resolves a control too.
+ */
+const isFilled = (field, formGroup) => {
+    const name = nodeInstanceCompleteName(field);
+    const control = formGroup != null && formGroup.contains(name) ? formGroup.controls[name] : null;
+    const value = control != null ? control.value : field.value;
+    if (value == null || value === '') {
+        return false;
+    }
+    if (Array.isArray(value)) {
+        return value.length > 0;
+    }
+    return true;
+};
+/**
+ * How many of a slide's fields carry a value, out of how many are on it. Notes
+ * (`AjfFieldType.Empty`) hold no value and are left out of both numbers.
+ *
+ * Impure because it reads mutable instance state, in the same way as
+ * `ajfValidSlide` and `ajfAsFieldInstanceErrors`. Returns a memoized object; see
+ * the note inside.
+ */
+class AjfSlideCompletionPipe {
+    constructor() {
+        this._last = null;
+    }
+    transform(slide, idx = 0, formGroup = null) {
+        const fields = countableFields(slide, idx);
+        const done = fields.filter(f => isFilled(f, formGroup)).length;
+        const total = fields.length;
+        // Hand back the same object while the counts hold, or the fresh identity on
+        // every check would trip Angular's "expression has changed" guard.
+        if (this._last != null && this._last.done === done && this._last.total === total) {
+            return this._last;
+        }
+        this._last = { done, total };
+        return this._last;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfSlideCompletionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AjfSlideCompletionPipe, name: "ajfSlideCompletion", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfSlideCompletionPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ajfSlideCompletion', pure: false }]
+        }] });
+/**
+ * How many of a slide's visible fields are failing validation.
+ */
+class AjfSlideIssuesPipe {
+    transform(slide, idx = 0) {
+        return countableFields(slide, idx).filter(f => !f.valid).length;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfSlideIssuesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AjfSlideIssuesPipe, name: "ajfSlideIssues", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfSlideIssuesPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ajfSlideIssues', pure: false }]
+        }] });
+/**
+ * The form's outstanding work in one place. A per-slide count only tells the
+ * reader about the slide they are already looking at, which is the one place
+ * they can see the failing fields for themselves.
+ *
+ * Counted here rather than taken from `AjfFormRendererService.errors`, which
+ * counts invalid slide pages and says nothing about how many fields are behind
+ * them.
+ *
+ * Impure and memoized, like its neighbours above.
+ */
+class AjfFormIssuesPipe {
+    constructor() {
+        this._last = { fields: 0, slides: 0 };
+    }
+    transform(slides) {
+        let fields = 0;
+        let slideCount = 0;
+        (slides || [])
+            .filter(slide => slide.visible !== false)
+            .forEach(slide => {
+            // Every repetition of a repeating slide carries its own set of fields,
+            // and any of them can be the one failing.
+            const reps = isRepeatingSlideInstance(slide)
+                ? Math.max(1, slide.reps)
+                : 1;
+            let slideFields = 0;
+            for (let idx = 0; idx < reps; idx++) {
+                slideFields += countableFields(slide, idx).filter(f => !f.valid).length;
+            }
+            if (slideFields > 0) {
+                fields += slideFields;
+                slideCount++;
+            }
+        });
+        if (this._last.fields === fields && this._last.slides === slideCount) {
+            return this._last;
+        }
+        this._last = { fields, slides: slideCount };
+        return this._last;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFormIssuesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AjfFormIssuesPipe, name: "ajfFormIssues", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFormIssuesPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'ajfFormIssues', pure: false }]
+        }] });
+
 /**
  * @license
  * Copyright (C) Gnucoop soc. coop.
@@ -1061,9 +1564,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class AjfFormRenderer extends AjfFormRenderer$1 {
     constructor(rendererService, changeDetectorRef) {
         super(rendererService, changeDetectorRef);
+        /**
+         * @deprecated The slide strip has been replaced by the jump menu in the slide
+         * header, which is always available. Kept so that existing templates still
+         * compile.
+         */
         this.topBar = false;
+        /**
+         * @deprecated Field rows align their labels and controls on a shared grid, so
+         * there is nothing left to centre.
+         */
         this.centeredFieldsContent = false;
+        /** How many field rows sit side by side. */
         this.maxColumns = 1;
+        /**
+         * The page the slider is showing. The slide header is rendered once, above the
+         * slider, so it needs to know which slide is on screen; the page slider only
+         * reports that imperatively, hence the mirrored property.
+         */
+        this.currentPage = 0;
+        this._slideList = [];
+        this._validitySubscription = Subscription.EMPTY;
+        this._slidesSubscription = Subscription.EMPTY;
+        this._valueSubscription = Subscription.EMPTY;
+        this._pageSubscription = Subscription.EMPTY;
+        this._pageInit = false;
+        this._slidesSubscription = this.slides.subscribe(slides => {
+            this._slideList = slides || [];
+        });
+        // This component is OnPush, and children are only visited when it is
+        // checked. The slide header reports live state -- how many fields are
+        // filled, how many are failing -- so a value change anywhere in the form has
+        // to bring the renderer back into the check.
+        this._valueSubscription = this.formGroup
+            .pipe(switchMap(fg => (fg ? fg.valueChanges : EMPTY)))
+            .subscribe(() => this._changeDetectorRef.markForCheck());
+        // Validity moves without a value moving with it -- a visibility change or a
+        // recalculated formula is enough -- and the issue counts are read through
+        // impure pipes, so this brings the renderer back into the check too.
+        this._validitySubscription = this.errors.subscribe(() => this._changeDetectorRef.markForCheck());
+    }
+    ngAfterViewChecked() {
+        super.ngAfterViewChecked();
+        if (!this._pageInit && this.formSlider != null) {
+            this._pageInit = true;
+            this.currentPage = this.formSlider.currentPage;
+            this._pageSubscription = this.formSlider.pageScrollFinish.subscribe(() => {
+                this.currentPage = this.formSlider.currentPage;
+                this._changeDetectorRef.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this._slidesSubscription.unsubscribe();
+        this._valueSubscription.unsubscribe();
+        this._validitySubscription.unsubscribe();
+        this._pageSubscription.unsubscribe();
+        super.ngOnDestroy();
     }
     fieldStyle(field) {
         if (field.node.fieldType === AjfFieldType.Formula && field.node.label === '') {
@@ -1071,13 +1628,52 @@ class AjfFormRenderer extends AjfFormRenderer$1 {
         }
         return {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFormRenderer, deps: [{ token: i1.AjfFormRendererService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFormRenderer, selector: "ajf-form", inputs: { topBar: "topBar", centeredFieldsContent: "centeredFieldsContent", maxColumns: "maxColumns" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"formGroup|async as fg\">\n  <form [class.ajf-form-readonly]=\"readonly\" novalidate [formGroup]=\"fg!\">\n    <div class=\"ajf-form-container\">\n      <mat-toolbar *ngIf=\"!hideTopToolbar && topBar\" class=\"ajf-btn-strip\">\n        <mat-button-toggle-group>\n          <ng-container\n            *ngFor=\"let slideInstance of (slides|async); let idx = index; trackBy: trackNodeById\"\n          >\n            <mat-button-toggle\n              *ngIf=\"slideInstance.node.label && slideInstance.node.label.length > 0\"\n              class=\"ajf-topbar-button\"\n              (click)=\"scrollToSlide(slideInstance)\"\n              [checked]=\"isSlideToggleChecked(slideInstance, formSlider.currentPage)\"\n              [disabled]=\"slideInstance.visible === false\"\n            >\n              {{slideInstance.node.label | transloco}} {{ getRepeatingSlideRepIndex(slideInstance,\n              formSlider.currentPage)|async}}\n              <mat-icon\n                *ngIf=\"!slideInstance.valid && slideInstance.visible !== false\"\n                class=\"ajf-warning\"\n                >warning</mat-icon\n              >\n              <mat-icon\n                *ngIf=\"slideInstance.valid && slideInstance.visible !== false\"\n                class=\"ajf-success\"\n                >check</mat-icon\n              >\n            </mat-button-toggle>\n          </ng-container>\n        </mat-button-toggle-group>\n      </mat-toolbar>\n      <mat-toolbar *ngIf=\"!hideTopToolbar\">\n        {{ title }}\n        <span class=\"ajf-spacer\"></span>\n        <!-- this content projection allow to add buttons on toolbar -->\n        <ng-content select=\"[ajfFormTopToolbarButtons]\"></ng-content>\n        <!-- apply a default save button only when ajfFormSaveButton is empty -->\n        <span *ngIf=\"!saveDisabled\" (click)=\"onSave($event)\">\n          <span #saveButton><ng-content select=\"[ajfFormSaveButton]\"></ng-content></span>\n          <button\n            *ngIf=\"saveButton && saveButton.childNodes && saveButton.childNodes.length === 0\"\n            mat-button\n            default\n          >\n            {{'Save'|transloco}}\n          </button>\n        </span>\n      </mat-toolbar>\n      <div class=\"ajf-slider-container\">\n        <ajf-page-slider\n          (orientationChange)=\"orientationChangeHandler($event)\"\n          [fixedOrientation]=\"fixedOrientation\"\n          [hideNavigationButtons]=\"hideNavigationButtons\"\n          [orientation]=\"orientation\"\n          #formSlider\n        >\n          <ng-container *ngIf=\"(slides|async) as curSlides\">\n            <ng-container *ngIf=\"curSlides!.length > 0 && hasStartMessage\">\n              <ajf-page-slider-item>\n                <div class=\"ajf-form-page\">\n                  <mat-card appearance=\"outlined\">\n                    <mat-card-header>\n                      <div class=\"ajf-page-slider-item-header\">\n                        <h2>\n                          <span class=\"ajf-form-header-number\"> 1 &rarr; </span>\n                          <span class=\"ajf-title\">\n                            <ng-content select=\"[ajfFormStartMessageTitle]\"></ng-content>\n                          </span>\n                        </h2>\n                      </div>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <ng-content select=\"[ajfFormStartMessage]\"></ng-content>\n                    </mat-card-content>\n                  </mat-card>\n                </div>\n              </ajf-page-slider-item>\n            </ng-container>\n            <ng-container *ngFor=\"let slideInstance of curSlides; trackBy:trackNodeById\">\n              <!-- non repeating slides -->\n              <ng-container *ngIf=\"slideInstance.visible\">\n                <ng-container *ngIf=\"!(slideInstance|ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item>\n                    <div class=\"ajf-form-page\">\n                      <mat-card appearance=\"outlined\">\n                        <mat-card-header>\n                          <div class=\"ajf-page-slider-item-header\">\n                            <h2>\n                              <span class=\"ajf-form-header-number\"\n                                >{{ slideInstance.position + (hasStartMessage | ajfBoolToInt) }}\n                                &rarr;</span\n                              >\n                              <span [innerHTML]=\"slideInstance.node.label | transloco\"></span>\n                            </h2>\n                            <mat-icon class=\"ajf-warning\" *ngIf=\"!slideInstance.valid\"\n                              >warning</mat-icon\n                            >\n                            <mat-icon class=\"ajf-success\" *ngIf=\"slideInstance.valid\"\n                              >check</mat-icon\n                            >\n                          </div>\n                        </mat-card-header>\n                        <mat-card-content>\n                          <ng-template\n                            ngFor\n                            let-fieldInstance\n                            [ngForOf]=\"slideInstance.flatNodes\"\n                            [ngForTrackBy]=\"trackNodeById\"\n                          >\n                            <mat-card\n                              appearance=\"outlined\"\n                              [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +\n                              ' ajf-max-columns-' + maxColumns +\n                              (centeredFieldsContent ? ' ajf-centered-field' : '')\"\n                              class=\"ajf-field-entry\"\n                              *ngIf=\"fieldInstance.visible\"\n                              [ngStyle]=\"fieldStyle(fieldInstance|ajfAsFieldInstance)\"\n                            >\n                              <i\n                                [class]=\"(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon\"\n                                item-right\n                              ></i>\n                              <p>\n                                {{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |\n                                transloco }}\n                              </p>\n\n                              <mat-card-header>\n                                <mat-card-title>\n                                  <label\n                                    [attr.id]=\"fieldInstance.node.name\"\n                                    *ngIf=\"(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7\"\n                                    [innerHTML]=\"fieldInstance.node.label | transloco\"\n                                  ></label>\n                                </mat-card-title>\n                                <mat-icon\n                                  class=\"ajf-tooltip-icon\"\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance).node?.hint as hint\"\n                                  [matTooltip]=\"hint | transloco\"\n                                  matTooltipPosition=\"right\"\n                                >\n                                  {{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||\n                                  'help'}}</mat-icon\n                                ></mat-card-header\n                              >\n                              <mat-card-content>\n                                <ajf-field\n                                  [instance]=\"fieldInstance|ajfAsFieldInstance\"\n                                  [readonly]=\"readonly || !slideInstance.editable\"\n                                  [id]=\"'field_entry_' + fieldInstance.node.id\"\n                                >\n                                </ajf-field>\n                              </mat-card-content>\n                              <mat-card-actions\n                                [ngClass]=\"(fieldInstance|ajfAsFieldInstance)?.valid ?\n                                'ajf-valid-field'\n                                : 'ajf-invalid-field'\"\n                              >\n                                <ng-container\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate\"\n                                >\n                                  <span class=\"ajf-field-error-message\"\n                                    >{{(fieldInstance|ajfAsFieldInstanceErrors|transloco)}}</span\n                                  >\n                                  <mat-icon class=\"ajf-warning\">warning</mat-icon>\n                                </ng-container>\n                                <ng-template #ajfValidFieldTemplate>\n                                  <mat-icon class=\"ajf-success\">check</mat-icon>\n                                </ng-template>\n                              </mat-card-actions>\n                            </mat-card>\n                          </ng-template>\n                        </mat-card-content>\n                      </mat-card>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n                <!-- repeating slides -->\n                <ng-container *ngIf=\"(slideInstance|ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item\n                    *ngFor=\"let curRep of ((slideInstance|ajfAsRepeatingSlideInstance).reps|ajfRange); let idx = index; let lastSlide = last\"\n                    [isRepeating]=\"true\"\n                    [isRepeatingLast]=\"lastSlide\"\n                  >\n                    <div class=\"ajf-form-page\">\n                      <mat-card appearance=\"outlined\">\n                        <mat-card-header>\n                          <div class=\"ajf-page-slider-item-header\">\n                            <h2>\n                              <span class=\"ajf-form-header-number\"\n                                >{{ slideInstance.position|ajfIncrement:idx + (hasStartMessage |\n                                ajfBoolToInt) }} &rarr;</span\n                              >\n                              <span [innerHTML]=\"slideInstance.node.label | transloco\"></span>\n                            </h2>\n                            <mat-icon class=\"ajf-warning\" *ngIf=\"!(slideInstance|ajfValidSlide:idx)\"\n                              >warning</mat-icon\n                            >\n                            <mat-icon class=\"ajf-success\" *ngIf=\"(slideInstance|ajfValidSlide:idx)\"\n                              >check</mat-icon\n                            >\n                          </div>\n                        </mat-card-header>\n                        <mat-card-content>\n                          <div *ngIf=\"!readonly\" class=\"ajf-group-actions\">\n                            <button\n                              *ngIf=\"lastSlide\"\n                              (click)=\"addGroup(slideInstance)\"\n                              [disabled]=\"!(slideInstance|ajfAsRepeatingSlideInstance).canAdd || ((slideInstance|ajfAsRepeatingSlideInstance).node.disableRemoval && !slideInstance.valid)\"\n                              mat-mini-fab\n                            >\n                              <mat-icon>add</mat-icon>\n                            </button>\n                            <button\n                              (click)=\"removeGroup(slideInstance, idx)\"\n                              [disabled]=\"!(slideInstance|ajfAsRepeatingSlideInstance).canRemove || (slideInstance|ajfAsRepeatingSlideInstance).node.disableRemoval\"\n                              mat-mini-fab\n                            >\n                              <mat-icon>remove</mat-icon>\n                            </button>\n                          </div>\n                          <ng-template\n                            ngFor\n                            let-fieldInstance\n                            [ngForOf]=\"slideInstance.slideNodes[idx]\"\n                            [ngForTrackBy]=\"trackNodeById\"\n                          >\n                            <mat-card\n                              appearance=\"outlined\"\n                              [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +\n                              ' ajf-max-columns-' + maxColumns +\n                              (centeredFieldsContent ? ' ajf-centered-field' : '')\"\n                              class=\"ajf-field-entry\"\n                              *ngIf=\"fieldInstance.visible\"\n                              [ngStyle]=\"fieldStyle(fieldInstance|ajfAsFieldInstance)\"\n                            >\n                              <i\n                                [class]=\"(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon\"\n                                item-right\n                              ></i>\n                              <p>\n                                {{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |\n                                transloco }}\n                              </p>\n\n                              <mat-card-header>\n                                <mat-card-title>\n                                  <label\n                                    [attr.id]=\"fieldInstance.node.name\"\n                                    *ngIf=\"(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7\"\n                                    [innerHTML]=\"fieldInstance.node.label | transloco\"\n                                  ></label>\n                                </mat-card-title>\n                                <mat-icon\n                                  class=\"ajf-tooltip-icon\"\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance).node?.hint as hint\"\n                                  [matTooltip]=\"hint | transloco\"\n                                  matTooltipPosition=\"right\"\n                                >\n                                  {{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||\n                                  'help'}}</mat-icon\n                                ></mat-card-header\n                              >\n                              <mat-card-content>\n                                <ajf-field\n                                  [instance]=\"fieldInstance|ajfAsFieldInstance\"\n                                  [readonly]=\"readonly || !slideInstance.editable\"\n                                  [id]=\"'field_entry_' + fieldInstance.node.id\"\n                                >\n                                </ajf-field>\n                              </mat-card-content>\n                              <mat-card-actions\n                                [ngClass]=\"(fieldInstance|ajfAsFieldInstance)?.valid ?\n                                'ajf-valid-field'\n                                : 'ajf-invalid-field'\"\n                              >\n                                <ng-container\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate\"\n                                >\n                                  <span class=\"ajf-field-error-message\"\n                                    >{{(fieldInstance|ajfAsFieldInstanceErrors)}}</span\n                                  >\n                                  <mat-icon class=\"ajf-warning\">warning</mat-icon>\n                                </ng-container>\n                                <ng-template #ajfValidFieldTemplate>\n                                  <mat-icon class=\"ajf-success\">check</mat-icon>\n                                </ng-template>\n                              </mat-card-actions>\n                            </mat-card>\n                          </ng-template>\n                        </mat-card-content>\n                      </mat-card>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"curSlides && curSlides!.length > 0 && hasEndMessage\">\n              <ajf-page-slider-item>\n                <div class=\"ajf-form-page\">\n                  <mat-card appearance=\"outlined\">\n                    <mat-card-header>\n                      <div class=\"ajf-page-slider-item-header\">\n                        <h2>\n                          <span *ngIf=\"(slidesNum|async) as snum\" class=\"ajf-form-header-number\">\n                            {{ snum! + (hasStartMessage | ajfBoolToInt ) + 1 }} &rarr;\n                          </span>\n                          <span class=\"ajf-title\">\n                            <ng-content select=\"[ajfFormEndMessageTitle]\"></ng-content>\n                          </span>\n                        </h2>\n                      </div>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <ng-content select=\"[ajfFormEndMessage]\"></ng-content>\n                    </mat-card-content>\n                  </mat-card>\n                </div>\n              </ajf-page-slider-item>\n            </ng-container>\n          </ng-container>\n          <div ajfPageSliderBar *ngIf=\"!hideBottomToolbar\">\n            <div class=\"ajf-left-bar\">\n              <div class=\"ajf-errors\" *ngIf=\"((errors | async) || 0) > 0\">\n                <button mat-button (click)=\"goToPrevError()\" danger>\n                  <mat-icon>arrow_upward</mat-icon>\n                </button>\n                <button mat-button (click)=\"goToNextError()\" danger>\n                  <mat-icon>arrow_downward</mat-icon>\n                </button>\n              </div>\n              <div class=\"ajf-info-box ajf-error\">\n                <div class=\"ajf-title\">{{'Errors'|transloco}}</div>\n                <div class=\"ajf-content\">{{ errors | async }} / {{ slidesNum|async }}</div>\n              </div>\n            </div>\n          </div>\n        </ajf-page-slider>\n      </div>\n    </div>\n  </form>\n</ng-container>\n", styles: ["ajf-form{display:block}ajf-form .ajf-form-readonly .ajf-field-entry>label{font-weight:700}ajf-form .ajf-form-container{display:flex;flex-direction:column;position:absolute;inset:0}ajf-form .ajf-form-container mat-toolbar.ajf-hidden{opacity:0}ajf-form .ajf-form-container .ajf-btn-strip .mat-button-toggle-group{overflow-x:auto}ajf-form .ajf-form-container .ajf-topbar-button{font-size:.8em}ajf-form .ajf-form-container mat-icon.ajf-warning{color:#f53d3d}ajf-form .ajf-form-container mat-icon.ajf-success{color:#32db64}ajf-form .ajf-form-container>.ajf-slider-container{flex:1;position:relative}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider{height:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content{padding:16px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page{flex:1;max-height:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card{margin:1em 0 3em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content{display:flex;flex-wrap:wrap;flex-direction:row;align-content:flex-start;position:relative}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content .ajf-group-actions{position:absolute;right:0;top:-30px;padding:15px;z-index:10}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry{padding-right:10px;min-width:350px;display:flex;flex-direction:column;margin:5px;border-left:3px solid;border-radius:5px;min-height:30vh;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-icon{vertical-align:bottom;margin-left:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-1{flex:1 0 100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-2{flex:1 0 45%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-3{flex:1 0 30%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-normal{width:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-small{width:50%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-smaller{width:33%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-tiny{width:25%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-mini{width:20%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions{position:absolute;bottom:0;width:100%;display:flex;justify-content:flex-start;align-items:center;align-content:center;border-bottom-left-radius:5px;border-bottom-right-radius:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-valid-field{background-color:#32db6433}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-invalid-field{background-color:#f53d3d33}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-invalid-field .ajf-field-error-message{margin-left:8px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions .mat-icon{margin-left:auto}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-radio-button,ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry ajf-checkbox-group-item .mat-mdc-button{background-color:inherit!important}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-header{margin-bottom:15px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-header .ajf-tooltip-icon{align-self:center;min-width:24px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content{position:relative;flex:1;flex-flow:row wrap;justify-content:flex-start;align-items:flex-start;padding-top:2%;padding-bottom:10%;overflow-y:auto;max-width:95%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-select{margin:20px 0}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-radio-group{display:flex;flex-flow:column wrap;justify-content:space-between}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-radio-group .mat-mdc-radio-button{flex:1 1 30%;padding:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .ajf-errors .error{display:none}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .mat-mdc-card-content,ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .mat-mdc-card-header{justify-content:center;text-align:center}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .ajf-choices-container .mat-mdc-radio-button{text-align:start}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .ajf-field-range{margin-top:30px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header{display:flex;align-items:center;width:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header>h2{flex:1}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header>h2>.ajf-form-header-number{margin-right:.5em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header h2>.ajf-title{display:inline-block;margin-right:40px;white-space:normal;vertical-align:top}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar{display:flex;align-items:flex-start;flex-direction:row;position:absolute;bottom:0}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-right-button{float:right}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-button-icon-only ion-icon{padding:0 .1em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box{height:40px;padding:4px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box>div{height:16px;line-height:16px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box>div.ajf-content{font-weight:700}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box.ajf-error{order:2;color:red}ajf-form .ajf-form-container .ajf-spacer{flex:1 0 auto}\n"], dependencies: [{ kind: "component", type: i2$a.AjfPageSliderItem, selector: "ajf-page-slider-item", inputs: ["isRepeating", "isRepeatingLast"], outputs: ["scroll"] }, { kind: "component", type: i3$5.AjfPageSlider, selector: "ajf-page-slider" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "directive", type: i6$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i6$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i7.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i7.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i3$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AjfFormField, selector: "ajf-field,ajf-form-field" }, { kind: "pipe", type: i8.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AjfAsFieldInstancePipe, name: "ajfAsFieldInstance" }, { kind: "pipe", type: i1.AjfAsFieldInstanceErrorsPipe, name: "ajfAsFieldInstanceErrors" }, { kind: "pipe", type: i1.AjfAsRepeatingSlideInstancePipe, name: "ajfAsRepeatingSlideInstance" }, { kind: "pipe", type: i1.AjfBoolToIntPipe, name: "ajfBoolToInt" }, { kind: "pipe", type: i1.AjfFieldIconPipe, name: "ajfFieldIcon" }, { kind: "pipe", type: i1.AjfIncrementPipe, name: "ajfIncrement" }, { kind: "pipe", type: i1.AjfIsRepeatingSlideInstancePipe, name: "ajfIsRepeatingSlideInstance" }, { kind: "pipe", type: i1.AjfRangePipe, name: "ajfRange" }, { kind: "pipe", type: i1.AjfValidSlidePipe, name: "ajfValidSlide" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** Page to the first page of a slide, from the header's jump menu. */
+    goToSlide(slide) {
+        this._slideTo(this._pageOf(slide));
+    }
+    /** Page to one repetition of the repeating slide currently on screen. */
+    goToRep(slide, repIndex) {
+        this._slideTo(this._pageOf(slide) + repIndex);
+    }
+    goToPrevSlide() {
+        this.formSlider?.slide({ dir: 'up' });
+    }
+    goToNextSlide() {
+        this.formSlider?.slide({ dir: 'down' });
+    }
+    /**
+     * The slider page a slide starts on. `AjfSlideInstance.position` cannot be
+     * used directly here: it does not account for a start message page, and this
+     * has to agree with the page arithmetic used by `ajfCurrentSlide`.
+     */
+    _pageOf(slide) {
+        let page = this.hasStartMessage ? 1 : 0;
+        for (const cur of this._slideList) {
+            if (cur.visible === false) {
+                continue;
+            }
+            if (cur === slide) {
+                break;
+            }
+            page += isRepeatingSlideInstance(cur)
+                ? Math.max(1, cur.reps)
+                : 1;
+        }
+        return page;
+    }
+    _slideTo(page) {
+        if (this.formSlider != null) {
+            this.formSlider.slide({ to: page });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFormRenderer, deps: [{ token: i1$1.AjfFormRendererService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFormRenderer, selector: "ajf-form", inputs: { topBar: "topBar", centeredFieldsContent: "centeredFieldsContent", maxColumns: "maxColumns" }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"formGroup | async as fg\">\n  <form [class.ajf-form-readonly]=\"readonly\" novalidate [formGroup]=\"fg!\">\n    <div class=\"ajf-form-container\">\n      <ng-container *ngIf=\"slides | async as curSlides\">\n        <ng-container\n          *ngIf=\"curSlides | ajfCurrentSlide : currentPage : hasStartMessage : hasEndMessage as cur\"\n        >\n          <div class=\"ajf-form-bar\" *ngIf=\"!hideTopToolbar\">\n            <ajf-slide-header\n              [slide]=\"cur.slide\"\n              [slides]=\"curSlides\"\n              [displayNumber]=\"cur.displayNumber\"\n              [pages]=\"cur.pages\"\n              (jumpTo)=\"goToSlide($event)\"\n              (prev)=\"goToPrevSlide()\"\n              (next)=\"goToNextSlide()\"\n            >\n              <!-- this content projection allows to add buttons on the slide header -->\n              <ng-content select=\"[ajfFormTopToolbarButtons]\"></ng-content>\n              <!-- The renderer has nowhere to save to: clicking here only emits\n                   `formAction`. So it ships no button of its own and holds the\n                   slot open instead -- a host that handles the event projects the\n                   button it wants, and gets the click through this wrapper. -->\n              <span class=\"ajf-form-save\" *ngIf=\"!saveDisabled\" (click)=\"onSave($event)\">\n                <ng-content select=\"[ajfFormSaveButton]\"></ng-content>\n              </span>\n            </ajf-slide-header>\n\n            <ajf-rep-strip\n              *ngIf=\"cur.slide && cur.reps > 0\"\n              [slide]=\"cur.slide! | ajfAsRepeatingSlideInstance\"\n              [current]=\"cur.repIndex\"\n              [readonly]=\"readonly\"\n              (goTo)=\"goToRep(cur.slide!, $event)\"\n              (add)=\"addGroup(cur.slide!)\"\n              (remove)=\"removeGroup(cur.slide!, cur.repIndex)\"\n            ></ajf-rep-strip>\n          </div>\n        </ng-container>\n\n        <div class=\"ajf-slider-container\">\n          <ajf-page-slider\n            (orientationChange)=\"orientationChangeHandler($event)\"\n            [fixedOrientation]=\"fixedOrientation\"\n            [hideNavigationButtons]=\"hideNavigationButtons\"\n            [orientation]=\"orientation\"\n            #formSlider\n          >\n            <ajf-page-slider-item *ngIf=\"curSlides!.length > 0 && hasStartMessage\">\n              <div class=\"ajf-form-page ajf-form-message\">\n                <h2 class=\"ajf-message-title\">\n                  <ng-content select=\"[ajfFormStartMessageTitle]\"></ng-content>\n                </h2>\n                <div class=\"ajf-message-body\">\n                  <ng-content select=\"[ajfFormStartMessage]\"></ng-content>\n                </div>\n              </div>\n            </ajf-page-slider-item>\n\n            <ng-container *ngFor=\"let slideInstance of curSlides; trackBy: trackNodeById\">\n              <ng-container *ngIf=\"slideInstance.visible\">\n                <!-- non repeating slides -->\n                <ng-container *ngIf=\"!(slideInstance | ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item>\n                    <div class=\"ajf-form-page\" [ngClass]=\"'ajf-max-columns-' + maxColumns\">\n                      <ajf-field-row\n                        *ngFor=\"let fieldInstance of slideInstance.flatNodes; trackBy: trackNodeById\"\n                        [instance]=\"fieldInstance | ajfAsFieldInstance\"\n                        [readonly]=\"readonly || !slideInstance.editable\"\n                      ></ajf-field-row>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n\n                <!-- repeating slides: one page per repetition -->\n                <ng-container *ngIf=\"slideInstance | ajfIsRepeatingSlideInstance\">\n                  <ajf-page-slider-item\n                    *ngFor=\"\n                      let curRep of (slideInstance | ajfAsRepeatingSlideInstance).reps | ajfRange;\n                      let idx = index;\n                      let lastSlide = last\n                    \"\n                    [isRepeating]=\"true\"\n                    [isRepeatingLast]=\"lastSlide\"\n                  >\n                    <div class=\"ajf-form-page\" [ngClass]=\"'ajf-max-columns-' + maxColumns\">\n                      <ajf-field-row\n                        *ngFor=\"\n                          let fieldInstance of slideInstance.slideNodes[idx];\n                          trackBy: trackNodeById\n                        \"\n                        [instance]=\"fieldInstance | ajfAsFieldInstance\"\n                        [readonly]=\"readonly || !slideInstance.editable\"\n                      ></ajf-field-row>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n\n            <ajf-page-slider-item *ngIf=\"curSlides && curSlides!.length > 0 && hasEndMessage\">\n              <div class=\"ajf-form-page ajf-form-message\">\n                <h2 class=\"ajf-message-title\">\n                  <ng-content select=\"[ajfFormEndMessageTitle]\"></ng-content>\n                </h2>\n                <div class=\"ajf-message-body\">\n                  <ng-content select=\"[ajfFormEndMessage]\"></ng-content>\n                </div>\n              </div>\n            </ajf-page-slider-item>\n\n            <div ajfPageSliderBar *ngIf=\"!hideBottomToolbar\" class=\"ajf-form-footer\">\n              <ng-container *ngIf=\"curSlides | ajfFormIssues as issues\">\n                <!-- The count is the control: reading that something needs\n                     attention and asking to be taken there is one intention, so\n                     it is one target rather than a label with arrows beside it. -->\n                <button\n                  type=\"button\"\n                  class=\"ajf-form-footer-status\"\n                  *ngIf=\"issues.fields > 0\"\n                  (click)=\"goToNextError()\"\n                >\n                  <mat-icon>error</mat-icon>\n                  <span class=\"ajf-form-footer-message\"\n                    >{{ '{{fields}} fields in {{slides}} slides need attention' | transloco :\n                    {fields: issues.fields, slides: issues.slides} }}</span\n                  >\n                </button>\n              </ng-container>\n\n              <!-- Pushed to the far end of the bar by its auto margin, so it sits\n                   next to the slider's own paging buttons rather than next to the\n                   error status. -->\n              <ng-container\n                *ngIf=\"\n                  curSlides | ajfCurrentSlide : currentPage : hasStartMessage : hasEndMessage as cur\n                \"\n              >\n                <span class=\"ajf-slide-count\" *ngIf=\"cur.pages > 1 && cur.total > 0\"\n                  >{{ 'slide' | transloco }} {{ cur.displayNumber }} {{ 'of' | transloco }} {{\n                  cur.total }}</span\n                >\n              </ng-container>\n            </div>\n          </ajf-page-slider>\n        </div>\n      </ng-container>\n    </div>\n  </form>\n</ng-container>\n", styles: ["ajf-form{display:block;height:100%}ajf-form .ajf-form-container{display:flex;flex-direction:column;box-sizing:border-box;height:100%;background:var(--ajf-bg);color:var(--ajf-text);font-family:var(--ajf-font-sans)}ajf-form .ajf-form-bar{flex:0 0 auto;border-bottom:1px solid var(--ajf-border);background:var(--ajf-surface)}ajf-form .ajf-form-save{display:inline-flex;align-items:center;gap:8px}ajf-form .ajf-form-save:empty{display:none}ajf-form>form{height:100%}ajf-form .ajf-slider-container{position:relative;flex:1 1 auto;min-height:var(--ajf-slider-min-h)}ajf-form .ajf-slider-container>ajf-page-slider{position:absolute;inset:0}ajf-form .ajf-form-page{display:flex;flex-direction:column;align-self:stretch;box-sizing:border-box;width:100%;background:var(--ajf-surface)}ajf-form .ajf-form-page.ajf-max-columns-2,ajf-form .ajf-form-page.ajf-max-columns-3{display:grid;align-content:start}ajf-form .ajf-form-page.ajf-max-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}ajf-form .ajf-form-page.ajf-max-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}@media (width <= 900px){ajf-form .ajf-form-page.ajf-max-columns-2,ajf-form .ajf-form-page.ajf-max-columns-3{grid-template-columns:minmax(0,1fr)}}ajf-form .ajf-form-message{gap:12px;padding:24px 20px}ajf-form .ajf-form-message .ajf-message-title{margin:0;font-size:20px;font-weight:600}ajf-form .ajf-form-message .ajf-message-body{color:var(--ajf-text-muted)}ajf-form ajf-page-slider>mat-toolbar.ajf-toolbar{flex-wrap:wrap;row-gap:4px;height:auto;min-height:48px;padding:6px 12px;white-space:normal;border-top:1px solid var(--ajf-border);background:var(--ajf-band);color:var(--ajf-text-muted);font-family:var(--ajf-font-sans);font-size:13px}ajf-form ajf-page-slider>mat-toolbar.ajf-toolbar .mat-mdc-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:36px;min-width:0;height:36px;min-height:0;padding:0;border:0;border-radius:50%;background:none;color:var(--ajf-text-muted);text-decoration:none}ajf-form ajf-page-slider>mat-toolbar.ajf-toolbar .mat-mdc-button .mat-icon{width:18px;height:18px;margin:0;font-size:18px}ajf-form ajf-page-slider>mat-toolbar.ajf-toolbar .mat-mdc-button:hover:not(:disabled){border-color:transparent;text-decoration:none}ajf-form ajf-page-slider>mat-toolbar.ajf-toolbar .mat-mdc-button{--mat-text-button-state-layer-color: var(--ajf-text)}ajf-form .ajf-form-footer{display:contents}ajf-form ajf-page-slider>mat-toolbar.ajf-toolbar:has(.ajf-slide-count) .ajf-spacer{flex-grow:0}ajf-form .ajf-slide-count{font-family:var(--ajf-font-mono);margin-right:8px;margin-left:auto;color:var(--ajf-text-faint)}ajf-form .ajf-form-footer-status{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;padding:0;border:0;background:none;color:var(--ajf-danger);font:inherit;text-align:left;cursor:pointer}ajf-form .ajf-form-footer-status .mat-icon{width:16px;height:16px;font-size:16px}ajf-form .ajf-form-footer-status:hover .ajf-form-footer-message,ajf-form .ajf-form-footer-status:focus-visible .ajf-form-footer-message{text-decoration:underline}ajf-form .ajf-form-readonly .ajf-field-label label{font-weight:600}\n"], dependencies: [{ kind: "component", type: i2$b.AjfPageSliderItem, selector: "ajf-page-slider-item", inputs: ["isRepeating", "isRepeatingLast"], outputs: ["scroll"] }, { kind: "component", type: i3$5.AjfPageSlider, selector: "ajf-page-slider" }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AjfFieldRow, selector: "ajf-field-row", inputs: ["instance", "readonly"] }, { kind: "component", type: AjfRepStrip, selector: "ajf-rep-strip", inputs: ["slide", "current", "readonly"], outputs: ["goTo", "add", "remove"] }, { kind: "component", type: AjfSlideHeader, selector: "ajf-slide-header", inputs: ["slide", "displayNumber", "slides", "pages"], outputs: ["jumpTo", "prev", "next"] }, { kind: "pipe", type: i5.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i2$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.AjfAsFieldInstancePipe, name: "ajfAsFieldInstance" }, { kind: "pipe", type: i1$1.AjfAsRepeatingSlideInstancePipe, name: "ajfAsRepeatingSlideInstance" }, { kind: "pipe", type: i1$1.AjfIsRepeatingSlideInstancePipe, name: "ajfIsRepeatingSlideInstance" }, { kind: "pipe", type: i1$1.AjfRangePipe, name: "ajfRange" }, { kind: "pipe", type: AjfCurrentSlidePipe, name: "ajfCurrentSlide" }, { kind: "pipe", type: AjfFormIssuesPipe, name: "ajfFormIssues" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFormRenderer, decorators: [{
             type: Component,
-            args: [{ selector: 'ajf-form', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"formGroup|async as fg\">\n  <form [class.ajf-form-readonly]=\"readonly\" novalidate [formGroup]=\"fg!\">\n    <div class=\"ajf-form-container\">\n      <mat-toolbar *ngIf=\"!hideTopToolbar && topBar\" class=\"ajf-btn-strip\">\n        <mat-button-toggle-group>\n          <ng-container\n            *ngFor=\"let slideInstance of (slides|async); let idx = index; trackBy: trackNodeById\"\n          >\n            <mat-button-toggle\n              *ngIf=\"slideInstance.node.label && slideInstance.node.label.length > 0\"\n              class=\"ajf-topbar-button\"\n              (click)=\"scrollToSlide(slideInstance)\"\n              [checked]=\"isSlideToggleChecked(slideInstance, formSlider.currentPage)\"\n              [disabled]=\"slideInstance.visible === false\"\n            >\n              {{slideInstance.node.label | transloco}} {{ getRepeatingSlideRepIndex(slideInstance,\n              formSlider.currentPage)|async}}\n              <mat-icon\n                *ngIf=\"!slideInstance.valid && slideInstance.visible !== false\"\n                class=\"ajf-warning\"\n                >warning</mat-icon\n              >\n              <mat-icon\n                *ngIf=\"slideInstance.valid && slideInstance.visible !== false\"\n                class=\"ajf-success\"\n                >check</mat-icon\n              >\n            </mat-button-toggle>\n          </ng-container>\n        </mat-button-toggle-group>\n      </mat-toolbar>\n      <mat-toolbar *ngIf=\"!hideTopToolbar\">\n        {{ title }}\n        <span class=\"ajf-spacer\"></span>\n        <!-- this content projection allow to add buttons on toolbar -->\n        <ng-content select=\"[ajfFormTopToolbarButtons]\"></ng-content>\n        <!-- apply a default save button only when ajfFormSaveButton is empty -->\n        <span *ngIf=\"!saveDisabled\" (click)=\"onSave($event)\">\n          <span #saveButton><ng-content select=\"[ajfFormSaveButton]\"></ng-content></span>\n          <button\n            *ngIf=\"saveButton && saveButton.childNodes && saveButton.childNodes.length === 0\"\n            mat-button\n            default\n          >\n            {{'Save'|transloco}}\n          </button>\n        </span>\n      </mat-toolbar>\n      <div class=\"ajf-slider-container\">\n        <ajf-page-slider\n          (orientationChange)=\"orientationChangeHandler($event)\"\n          [fixedOrientation]=\"fixedOrientation\"\n          [hideNavigationButtons]=\"hideNavigationButtons\"\n          [orientation]=\"orientation\"\n          #formSlider\n        >\n          <ng-container *ngIf=\"(slides|async) as curSlides\">\n            <ng-container *ngIf=\"curSlides!.length > 0 && hasStartMessage\">\n              <ajf-page-slider-item>\n                <div class=\"ajf-form-page\">\n                  <mat-card appearance=\"outlined\">\n                    <mat-card-header>\n                      <div class=\"ajf-page-slider-item-header\">\n                        <h2>\n                          <span class=\"ajf-form-header-number\"> 1 &rarr; </span>\n                          <span class=\"ajf-title\">\n                            <ng-content select=\"[ajfFormStartMessageTitle]\"></ng-content>\n                          </span>\n                        </h2>\n                      </div>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <ng-content select=\"[ajfFormStartMessage]\"></ng-content>\n                    </mat-card-content>\n                  </mat-card>\n                </div>\n              </ajf-page-slider-item>\n            </ng-container>\n            <ng-container *ngFor=\"let slideInstance of curSlides; trackBy:trackNodeById\">\n              <!-- non repeating slides -->\n              <ng-container *ngIf=\"slideInstance.visible\">\n                <ng-container *ngIf=\"!(slideInstance|ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item>\n                    <div class=\"ajf-form-page\">\n                      <mat-card appearance=\"outlined\">\n                        <mat-card-header>\n                          <div class=\"ajf-page-slider-item-header\">\n                            <h2>\n                              <span class=\"ajf-form-header-number\"\n                                >{{ slideInstance.position + (hasStartMessage | ajfBoolToInt) }}\n                                &rarr;</span\n                              >\n                              <span [innerHTML]=\"slideInstance.node.label | transloco\"></span>\n                            </h2>\n                            <mat-icon class=\"ajf-warning\" *ngIf=\"!slideInstance.valid\"\n                              >warning</mat-icon\n                            >\n                            <mat-icon class=\"ajf-success\" *ngIf=\"slideInstance.valid\"\n                              >check</mat-icon\n                            >\n                          </div>\n                        </mat-card-header>\n                        <mat-card-content>\n                          <ng-template\n                            ngFor\n                            let-fieldInstance\n                            [ngForOf]=\"slideInstance.flatNodes\"\n                            [ngForTrackBy]=\"trackNodeById\"\n                          >\n                            <mat-card\n                              appearance=\"outlined\"\n                              [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +\n                              ' ajf-max-columns-' + maxColumns +\n                              (centeredFieldsContent ? ' ajf-centered-field' : '')\"\n                              class=\"ajf-field-entry\"\n                              *ngIf=\"fieldInstance.visible\"\n                              [ngStyle]=\"fieldStyle(fieldInstance|ajfAsFieldInstance)\"\n                            >\n                              <i\n                                [class]=\"(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon\"\n                                item-right\n                              ></i>\n                              <p>\n                                {{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |\n                                transloco }}\n                              </p>\n\n                              <mat-card-header>\n                                <mat-card-title>\n                                  <label\n                                    [attr.id]=\"fieldInstance.node.name\"\n                                    *ngIf=\"(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7\"\n                                    [innerHTML]=\"fieldInstance.node.label | transloco\"\n                                  ></label>\n                                </mat-card-title>\n                                <mat-icon\n                                  class=\"ajf-tooltip-icon\"\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance).node?.hint as hint\"\n                                  [matTooltip]=\"hint | transloco\"\n                                  matTooltipPosition=\"right\"\n                                >\n                                  {{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||\n                                  'help'}}</mat-icon\n                                ></mat-card-header\n                              >\n                              <mat-card-content>\n                                <ajf-field\n                                  [instance]=\"fieldInstance|ajfAsFieldInstance\"\n                                  [readonly]=\"readonly || !slideInstance.editable\"\n                                  [id]=\"'field_entry_' + fieldInstance.node.id\"\n                                >\n                                </ajf-field>\n                              </mat-card-content>\n                              <mat-card-actions\n                                [ngClass]=\"(fieldInstance|ajfAsFieldInstance)?.valid ?\n                                'ajf-valid-field'\n                                : 'ajf-invalid-field'\"\n                              >\n                                <ng-container\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate\"\n                                >\n                                  <span class=\"ajf-field-error-message\"\n                                    >{{(fieldInstance|ajfAsFieldInstanceErrors|transloco)}}</span\n                                  >\n                                  <mat-icon class=\"ajf-warning\">warning</mat-icon>\n                                </ng-container>\n                                <ng-template #ajfValidFieldTemplate>\n                                  <mat-icon class=\"ajf-success\">check</mat-icon>\n                                </ng-template>\n                              </mat-card-actions>\n                            </mat-card>\n                          </ng-template>\n                        </mat-card-content>\n                      </mat-card>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n                <!-- repeating slides -->\n                <ng-container *ngIf=\"(slideInstance|ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item\n                    *ngFor=\"let curRep of ((slideInstance|ajfAsRepeatingSlideInstance).reps|ajfRange); let idx = index; let lastSlide = last\"\n                    [isRepeating]=\"true\"\n                    [isRepeatingLast]=\"lastSlide\"\n                  >\n                    <div class=\"ajf-form-page\">\n                      <mat-card appearance=\"outlined\">\n                        <mat-card-header>\n                          <div class=\"ajf-page-slider-item-header\">\n                            <h2>\n                              <span class=\"ajf-form-header-number\"\n                                >{{ slideInstance.position|ajfIncrement:idx + (hasStartMessage |\n                                ajfBoolToInt) }} &rarr;</span\n                              >\n                              <span [innerHTML]=\"slideInstance.node.label | transloco\"></span>\n                            </h2>\n                            <mat-icon class=\"ajf-warning\" *ngIf=\"!(slideInstance|ajfValidSlide:idx)\"\n                              >warning</mat-icon\n                            >\n                            <mat-icon class=\"ajf-success\" *ngIf=\"(slideInstance|ajfValidSlide:idx)\"\n                              >check</mat-icon\n                            >\n                          </div>\n                        </mat-card-header>\n                        <mat-card-content>\n                          <div *ngIf=\"!readonly\" class=\"ajf-group-actions\">\n                            <button\n                              *ngIf=\"lastSlide\"\n                              (click)=\"addGroup(slideInstance)\"\n                              [disabled]=\"!(slideInstance|ajfAsRepeatingSlideInstance).canAdd || ((slideInstance|ajfAsRepeatingSlideInstance).node.disableRemoval && !slideInstance.valid)\"\n                              mat-mini-fab\n                            >\n                              <mat-icon>add</mat-icon>\n                            </button>\n                            <button\n                              (click)=\"removeGroup(slideInstance, idx)\"\n                              [disabled]=\"!(slideInstance|ajfAsRepeatingSlideInstance).canRemove || (slideInstance|ajfAsRepeatingSlideInstance).node.disableRemoval\"\n                              mat-mini-fab\n                            >\n                              <mat-icon>remove</mat-icon>\n                            </button>\n                          </div>\n                          <ng-template\n                            ngFor\n                            let-fieldInstance\n                            [ngForOf]=\"slideInstance.slideNodes[idx]\"\n                            [ngForTrackBy]=\"trackNodeById\"\n                          >\n                            <mat-card\n                              appearance=\"outlined\"\n                              [ngClass]=\"'ajf-' + (fieldInstance|ajfAsFieldInstance).node.size +\n                              ' ajf-max-columns-' + maxColumns +\n                              (centeredFieldsContent ? ' ajf-centered-field' : '')\"\n                              class=\"ajf-field-entry\"\n                              *ngIf=\"fieldInstance.visible\"\n                              [ngStyle]=\"fieldStyle(fieldInstance|ajfAsFieldInstance)\"\n                            >\n                              <i\n                                [class]=\"(fieldInstance|ajfAsFieldInstance).node.fieldType | ajfFieldIcon\"\n                                item-right\n                              ></i>\n                              <p>\n                                {{ ((fieldInstance|ajfAsFieldInstance).node.description || '') |\n                                transloco }}\n                              </p>\n\n                              <mat-card-header>\n                                <mat-card-title>\n                                  <label\n                                    [attr.id]=\"fieldInstance.node.name\"\n                                    *ngIf=\"(fieldInstance|ajfAsFieldInstance).node.fieldType !== 7\"\n                                    [innerHTML]=\"fieldInstance.node.label | transloco\"\n                                  ></label>\n                                </mat-card-title>\n                                <mat-icon\n                                  class=\"ajf-tooltip-icon\"\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance).node?.hint as hint\"\n                                  [matTooltip]=\"hint | transloco\"\n                                  matTooltipPosition=\"right\"\n                                >\n                                  {{(fieldInstance|ajfAsFieldInstance).node.hintIcon ||\n                                  'help'}}</mat-icon\n                                ></mat-card-header\n                              >\n                              <mat-card-content>\n                                <ajf-field\n                                  [instance]=\"fieldInstance|ajfAsFieldInstance\"\n                                  [readonly]=\"readonly || !slideInstance.editable\"\n                                  [id]=\"'field_entry_' + fieldInstance.node.id\"\n                                >\n                                </ajf-field>\n                              </mat-card-content>\n                              <mat-card-actions\n                                [ngClass]=\"(fieldInstance|ajfAsFieldInstance)?.valid ?\n                                'ajf-valid-field'\n                                : 'ajf-invalid-field'\"\n                              >\n                                <ng-container\n                                  *ngIf=\"(fieldInstance|ajfAsFieldInstance)?.valid !== true; else ajfValidFieldTemplate\"\n                                >\n                                  <span class=\"ajf-field-error-message\"\n                                    >{{(fieldInstance|ajfAsFieldInstanceErrors)}}</span\n                                  >\n                                  <mat-icon class=\"ajf-warning\">warning</mat-icon>\n                                </ng-container>\n                                <ng-template #ajfValidFieldTemplate>\n                                  <mat-icon class=\"ajf-success\">check</mat-icon>\n                                </ng-template>\n                              </mat-card-actions>\n                            </mat-card>\n                          </ng-template>\n                        </mat-card-content>\n                      </mat-card>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n            <ng-container *ngIf=\"curSlides && curSlides!.length > 0 && hasEndMessage\">\n              <ajf-page-slider-item>\n                <div class=\"ajf-form-page\">\n                  <mat-card appearance=\"outlined\">\n                    <mat-card-header>\n                      <div class=\"ajf-page-slider-item-header\">\n                        <h2>\n                          <span *ngIf=\"(slidesNum|async) as snum\" class=\"ajf-form-header-number\">\n                            {{ snum! + (hasStartMessage | ajfBoolToInt ) + 1 }} &rarr;\n                          </span>\n                          <span class=\"ajf-title\">\n                            <ng-content select=\"[ajfFormEndMessageTitle]\"></ng-content>\n                          </span>\n                        </h2>\n                      </div>\n                    </mat-card-header>\n                    <mat-card-content>\n                      <ng-content select=\"[ajfFormEndMessage]\"></ng-content>\n                    </mat-card-content>\n                  </mat-card>\n                </div>\n              </ajf-page-slider-item>\n            </ng-container>\n          </ng-container>\n          <div ajfPageSliderBar *ngIf=\"!hideBottomToolbar\">\n            <div class=\"ajf-left-bar\">\n              <div class=\"ajf-errors\" *ngIf=\"((errors | async) || 0) > 0\">\n                <button mat-button (click)=\"goToPrevError()\" danger>\n                  <mat-icon>arrow_upward</mat-icon>\n                </button>\n                <button mat-button (click)=\"goToNextError()\" danger>\n                  <mat-icon>arrow_downward</mat-icon>\n                </button>\n              </div>\n              <div class=\"ajf-info-box ajf-error\">\n                <div class=\"ajf-title\">{{'Errors'|transloco}}</div>\n                <div class=\"ajf-content\">{{ errors | async }} / {{ slidesNum|async }}</div>\n              </div>\n            </div>\n          </div>\n        </ajf-page-slider>\n      </div>\n    </div>\n  </form>\n</ng-container>\n", styles: ["ajf-form{display:block}ajf-form .ajf-form-readonly .ajf-field-entry>label{font-weight:700}ajf-form .ajf-form-container{display:flex;flex-direction:column;position:absolute;inset:0}ajf-form .ajf-form-container mat-toolbar.ajf-hidden{opacity:0}ajf-form .ajf-form-container .ajf-btn-strip .mat-button-toggle-group{overflow-x:auto}ajf-form .ajf-form-container .ajf-topbar-button{font-size:.8em}ajf-form .ajf-form-container mat-icon.ajf-warning{color:#f53d3d}ajf-form .ajf-form-container mat-icon.ajf-success{color:#32db64}ajf-form .ajf-form-container>.ajf-slider-container{flex:1;position:relative}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider{height:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content{padding:16px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page{flex:1;max-height:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card{margin:1em 0 3em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content{display:flex;flex-wrap:wrap;flex-direction:row;align-content:flex-start;position:relative}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content .ajf-group-actions{position:absolute;right:0;top:-30px;padding:15px;z-index:10}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry{padding-right:10px;min-width:350px;display:flex;flex-direction:column;margin:5px;border-left:3px solid;border-radius:5px;min-height:30vh;box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-icon{vertical-align:bottom;margin-left:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-1{flex:1 0 100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-2{flex:1 0 45%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-max-columns-3{flex:1 0 30%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-normal{width:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-small{width:50%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-smaller{width:33%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-tiny{width:25%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-mini{width:20%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions{position:absolute;bottom:0;width:100%;display:flex;justify-content:flex-start;align-items:center;align-content:center;border-bottom-left-radius:5px;border-bottom-right-radius:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-valid-field{background-color:#32db6433}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-invalid-field{background-color:#f53d3d33}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions.ajf-invalid-field .ajf-field-error-message{margin-left:8px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-actions .mat-icon{margin-left:auto}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-radio-button,ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry ajf-checkbox-group-item .mat-mdc-button{background-color:inherit!important}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-header{margin-bottom:15px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-header .ajf-tooltip-icon{align-self:center;min-width:24px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content{position:relative;flex:1;flex-flow:row wrap;justify-content:flex-start;align-items:flex-start;padding-top:2%;padding-bottom:10%;overflow-y:auto;max-width:95%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-select{margin:20px 0}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-radio-group{display:flex;flex-flow:column wrap;justify-content:space-between}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .mat-mdc-radio-group .mat-mdc-radio-button{flex:1 1 30%;padding:5px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .mat-mdc-card-content .ajf-errors .error{display:none}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .mat-mdc-card-content,ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .mat-mdc-card-header{justify-content:center;text-align:center}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry.ajf-centered-field .ajf-choices-container .mat-mdc-radio-button{text-align:start}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider ajf-page-slider-item .ajf-page-slider-item-content .ajf-form-page>mat-card>mat-card-content>.ajf-field-entry .ajf-field-range{margin-top:30px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header{display:flex;align-items:center;width:100%}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header>h2{flex:1}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header>h2>.ajf-form-header-number{margin-right:.5em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider .ajf-page-slider-item-header h2>.ajf-title{display:inline-block;margin-right:40px;white-space:normal;vertical-align:top}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar{display:flex;align-items:flex-start;flex-direction:row;position:absolute;bottom:0}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-right-button{float:right}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-button-icon-only ion-icon{padding:0 .1em}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box{height:40px;padding:4px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box>div{height:16px;line-height:16px}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box>div.ajf-content{font-weight:700}ajf-form .ajf-form-container>.ajf-slider-container>ajf-page-slider [ajfPageSliderBar] .ajf-left-bar .ajf-info-box.ajf-error{order:2;color:red}ajf-form .ajf-form-container .ajf-spacer{flex:1 0 auto}\n"] }]
-        }], ctorParameters: () => [{ type: i1.AjfFormRendererService }, { type: i0.ChangeDetectorRef }], propDecorators: { topBar: [{
+            args: [{ selector: 'ajf-form', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"formGroup | async as fg\">\n  <form [class.ajf-form-readonly]=\"readonly\" novalidate [formGroup]=\"fg!\">\n    <div class=\"ajf-form-container\">\n      <ng-container *ngIf=\"slides | async as curSlides\">\n        <ng-container\n          *ngIf=\"curSlides | ajfCurrentSlide : currentPage : hasStartMessage : hasEndMessage as cur\"\n        >\n          <div class=\"ajf-form-bar\" *ngIf=\"!hideTopToolbar\">\n            <ajf-slide-header\n              [slide]=\"cur.slide\"\n              [slides]=\"curSlides\"\n              [displayNumber]=\"cur.displayNumber\"\n              [pages]=\"cur.pages\"\n              (jumpTo)=\"goToSlide($event)\"\n              (prev)=\"goToPrevSlide()\"\n              (next)=\"goToNextSlide()\"\n            >\n              <!-- this content projection allows to add buttons on the slide header -->\n              <ng-content select=\"[ajfFormTopToolbarButtons]\"></ng-content>\n              <!-- The renderer has nowhere to save to: clicking here only emits\n                   `formAction`. So it ships no button of its own and holds the\n                   slot open instead -- a host that handles the event projects the\n                   button it wants, and gets the click through this wrapper. -->\n              <span class=\"ajf-form-save\" *ngIf=\"!saveDisabled\" (click)=\"onSave($event)\">\n                <ng-content select=\"[ajfFormSaveButton]\"></ng-content>\n              </span>\n            </ajf-slide-header>\n\n            <ajf-rep-strip\n              *ngIf=\"cur.slide && cur.reps > 0\"\n              [slide]=\"cur.slide! | ajfAsRepeatingSlideInstance\"\n              [current]=\"cur.repIndex\"\n              [readonly]=\"readonly\"\n              (goTo)=\"goToRep(cur.slide!, $event)\"\n              (add)=\"addGroup(cur.slide!)\"\n              (remove)=\"removeGroup(cur.slide!, cur.repIndex)\"\n            ></ajf-rep-strip>\n          </div>\n        </ng-container>\n\n        <div class=\"ajf-slider-container\">\n          <ajf-page-slider\n            (orientationChange)=\"orientationChangeHandler($event)\"\n            [fixedOrientation]=\"fixedOrientation\"\n            [hideNavigationButtons]=\"hideNavigationButtons\"\n            [orientation]=\"orientation\"\n            #formSlider\n          >\n            <ajf-page-slider-item *ngIf=\"curSlides!.length > 0 && hasStartMessage\">\n              <div class=\"ajf-form-page ajf-form-message\">\n                <h2 class=\"ajf-message-title\">\n                  <ng-content select=\"[ajfFormStartMessageTitle]\"></ng-content>\n                </h2>\n                <div class=\"ajf-message-body\">\n                  <ng-content select=\"[ajfFormStartMessage]\"></ng-content>\n                </div>\n              </div>\n            </ajf-page-slider-item>\n\n            <ng-container *ngFor=\"let slideInstance of curSlides; trackBy: trackNodeById\">\n              <ng-container *ngIf=\"slideInstance.visible\">\n                <!-- non repeating slides -->\n                <ng-container *ngIf=\"!(slideInstance | ajfIsRepeatingSlideInstance)\">\n                  <ajf-page-slider-item>\n                    <div class=\"ajf-form-page\" [ngClass]=\"'ajf-max-columns-' + maxColumns\">\n                      <ajf-field-row\n                        *ngFor=\"let fieldInstance of slideInstance.flatNodes; trackBy: trackNodeById\"\n                        [instance]=\"fieldInstance | ajfAsFieldInstance\"\n                        [readonly]=\"readonly || !slideInstance.editable\"\n                      ></ajf-field-row>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n\n                <!-- repeating slides: one page per repetition -->\n                <ng-container *ngIf=\"slideInstance | ajfIsRepeatingSlideInstance\">\n                  <ajf-page-slider-item\n                    *ngFor=\"\n                      let curRep of (slideInstance | ajfAsRepeatingSlideInstance).reps | ajfRange;\n                      let idx = index;\n                      let lastSlide = last\n                    \"\n                    [isRepeating]=\"true\"\n                    [isRepeatingLast]=\"lastSlide\"\n                  >\n                    <div class=\"ajf-form-page\" [ngClass]=\"'ajf-max-columns-' + maxColumns\">\n                      <ajf-field-row\n                        *ngFor=\"\n                          let fieldInstance of slideInstance.slideNodes[idx];\n                          trackBy: trackNodeById\n                        \"\n                        [instance]=\"fieldInstance | ajfAsFieldInstance\"\n                        [readonly]=\"readonly || !slideInstance.editable\"\n                      ></ajf-field-row>\n                    </div>\n                  </ajf-page-slider-item>\n                </ng-container>\n              </ng-container>\n            </ng-container>\n\n            <ajf-page-slider-item *ngIf=\"curSlides && curSlides!.length > 0 && hasEndMessage\">\n              <div class=\"ajf-form-page ajf-form-message\">\n                <h2 class=\"ajf-message-title\">\n                  <ng-content select=\"[ajfFormEndMessageTitle]\"></ng-content>\n                </h2>\n                <div class=\"ajf-message-body\">\n                  <ng-content select=\"[ajfFormEndMessage]\"></ng-content>\n                </div>\n              </div>\n            </ajf-page-slider-item>\n\n            <div ajfPageSliderBar *ngIf=\"!hideBottomToolbar\" class=\"ajf-form-footer\">\n              <ng-container *ngIf=\"curSlides | ajfFormIssues as issues\">\n                <!-- The count is the control: reading that something needs\n                     attention and asking to be taken there is one intention, so\n                     it is one target rather than a label with arrows beside it. -->\n                <button\n                  type=\"button\"\n                  class=\"ajf-form-footer-status\"\n                  *ngIf=\"issues.fields > 0\"\n                  (click)=\"goToNextError()\"\n                >\n                  <mat-icon>error</mat-icon>\n                  <span class=\"ajf-form-footer-message\"\n                    >{{ '{{fields}} fields in {{slides}} slides need attention' | transloco :\n                    {fields: issues.fields, slides: issues.slides} }}</span\n                  >\n                </button>\n              </ng-container>\n\n              <!-- Pushed to the far end of the bar by its auto margin, so it sits\n                   next to the slider's own paging buttons rather than next to the\n                   error status. -->\n              <ng-container\n                *ngIf=\"\n                  curSlides | ajfCurrentSlide : currentPage : hasStartMessage : hasEndMessage as cur\n                \"\n              >\n                <span class=\"ajf-slide-count\" *ngIf=\"cur.pages > 1 && cur.total > 0\"\n                  >{{ 'slide' | transloco }} {{ cur.displayNumber }} {{ 'of' | transloco }} {{\n                  cur.total }}</span\n                >\n              </ng-container>\n            </div>\n          </ajf-page-slider>\n        </div>\n      </ng-container>\n    </div>\n  </form>\n</ng-container>\n", styles: ["ajf-form{display:block;height:100%}ajf-form .ajf-form-container{display:flex;flex-direction:column;box-sizing:border-box;height:100%;background:var(--ajf-bg);color:var(--ajf-text);font-family:var(--ajf-font-sans)}ajf-form .ajf-form-bar{flex:0 0 auto;border-bottom:1px solid var(--ajf-border);background:var(--ajf-surface)}ajf-form .ajf-form-save{display:inline-flex;align-items:center;gap:8px}ajf-form .ajf-form-save:empty{display:none}ajf-form>form{height:100%}ajf-form .ajf-slider-container{position:relative;flex:1 1 auto;min-height:var(--ajf-slider-min-h)}ajf-form .ajf-slider-container>ajf-page-slider{position:absolute;inset:0}ajf-form .ajf-form-page{display:flex;flex-direction:column;align-self:stretch;box-sizing:border-box;width:100%;background:var(--ajf-surface)}ajf-form .ajf-form-page.ajf-max-columns-2,ajf-form .ajf-form-page.ajf-max-columns-3{display:grid;align-content:start}ajf-form .ajf-form-page.ajf-max-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}ajf-form .ajf-form-page.ajf-max-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}@media (width <= 900px){ajf-form .ajf-form-page.ajf-max-columns-2,ajf-form .ajf-form-page.ajf-max-columns-3{grid-template-columns:minmax(0,1fr)}}ajf-form .ajf-form-message{gap:12px;padding:24px 20px}ajf-form .ajf-form-message .ajf-message-title{margin:0;font-size:20px;font-weight:600}ajf-form .ajf-form-message .ajf-message-body{color:var(--ajf-text-muted)}ajf-form ajf-page-slider>mat-toolbar.ajf-toolbar{flex-wrap:wrap;row-gap:4px;height:auto;min-height:48px;padding:6px 12px;white-space:normal;border-top:1px solid var(--ajf-border);background:var(--ajf-band);color:var(--ajf-text-muted);font-family:var(--ajf-font-sans);font-size:13px}ajf-form ajf-page-slider>mat-toolbar.ajf-toolbar .mat-mdc-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:36px;min-width:0;height:36px;min-height:0;padding:0;border:0;border-radius:50%;background:none;color:var(--ajf-text-muted);text-decoration:none}ajf-form ajf-page-slider>mat-toolbar.ajf-toolbar .mat-mdc-button .mat-icon{width:18px;height:18px;margin:0;font-size:18px}ajf-form ajf-page-slider>mat-toolbar.ajf-toolbar .mat-mdc-button:hover:not(:disabled){border-color:transparent;text-decoration:none}ajf-form ajf-page-slider>mat-toolbar.ajf-toolbar .mat-mdc-button{--mat-text-button-state-layer-color: var(--ajf-text)}ajf-form .ajf-form-footer{display:contents}ajf-form ajf-page-slider>mat-toolbar.ajf-toolbar:has(.ajf-slide-count) .ajf-spacer{flex-grow:0}ajf-form .ajf-slide-count{font-family:var(--ajf-font-mono);margin-right:8px;margin-left:auto;color:var(--ajf-text-faint)}ajf-form .ajf-form-footer-status{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;padding:0;border:0;background:none;color:var(--ajf-danger);font:inherit;text-align:left;cursor:pointer}ajf-form .ajf-form-footer-status .mat-icon{width:16px;height:16px;font-size:16px}ajf-form .ajf-form-footer-status:hover .ajf-form-footer-message,ajf-form .ajf-form-footer-status:focus-visible .ajf-form-footer-message{text-decoration:underline}ajf-form .ajf-form-readonly .ajf-field-label label{font-weight:600}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.AjfFormRendererService }, { type: i0.ChangeDetectorRef }], propDecorators: { topBar: [{
                 type: Input
             }], centeredFieldsContent: [{
                 type: Input
@@ -1115,20 +1711,27 @@ class AjfFormsModule {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AjfFormsModule, declarations: [AjfAudioFieldComponent,
+            AjfCurrentSlidePipe,
             AjfBarcodeFieldComponent,
             AjfBooleanFieldComponent,
             AjfDateFieldComponent,
             AjfDateInputFieldComponent,
             AjfEmptyFieldComponent,
+            AjfFieldRow,
             AjfFieldWarningDialog,
             AjfFormField,
+            AjfFormIssuesPipe,
             AjfFormRenderer,
             AjfGeolocationFieldComponent,
             AjfInputFieldComponent,
             AjfMultipleChoiceFieldComponent,
             AjfRangeFieldComponent,
+            AjfRepStrip,
             AjfSignatureFieldComponent,
             AjfSingleChoiceFieldComponent,
+            AjfSlideCompletionPipe,
+            AjfSlideHeader,
+            AjfSlideIssuesPipe,
             AjfTableFieldComponent,
             AjfTextFieldComponent,
             AjfTimeFieldComponent,
@@ -1153,6 +1756,7 @@ class AjfFormsModule {
             MatFormFieldModule,
             MatIconModule,
             MatInputModule,
+            MatMenuModule,
             MatNativeDateModule,
             MatRadioModule,
             MatSelectModule,
@@ -1162,7 +1766,7 @@ class AjfFormsModule {
             ReactiveFormsModule,
             TextFieldModule,
             MatSliderModule,
-            NgxMatSelectSearchModule, i4$3.QuillModule], exports: [AjfFormField, AjfFormRenderer] }); }
+            NgxMatSelectSearchModule, i4$3.QuillModule], exports: [AjfFieldRow, AjfFormField, AjfFormRenderer, AjfRepStrip, AjfSlideHeader] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFormsModule, providers: [
             AjfFieldService,
             { provide: AJF_WARNING_ALERT_SERVICE, useClass: AjfWarningAlertService },
@@ -1186,6 +1790,7 @@ class AjfFormsModule {
             MatFormFieldModule,
             MatIconModule,
             MatInputModule,
+            MatMenuModule,
             MatNativeDateModule,
             MatRadioModule,
             MatSelectModule,
@@ -1222,6 +1827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatFormFieldModule,
                         MatIconModule,
                         MatInputModule,
+                        MatMenuModule,
                         MatNativeDateModule,
                         MatRadioModule,
                         MatSelectModule,
@@ -1236,27 +1842,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     ],
                     declarations: [
                         AjfAudioFieldComponent,
+                        AjfCurrentSlidePipe,
                         AjfBarcodeFieldComponent,
                         AjfBooleanFieldComponent,
                         AjfDateFieldComponent,
                         AjfDateInputFieldComponent,
                         AjfEmptyFieldComponent,
+                        AjfFieldRow,
                         AjfFieldWarningDialog,
                         AjfFormField,
+                        AjfFormIssuesPipe,
                         AjfFormRenderer,
                         AjfGeolocationFieldComponent,
                         AjfInputFieldComponent,
                         AjfMultipleChoiceFieldComponent,
                         AjfRangeFieldComponent,
+                        AjfRepStrip,
                         AjfSignatureFieldComponent,
                         AjfSingleChoiceFieldComponent,
+                        AjfSlideCompletionPipe,
+                        AjfSlideHeader,
+                        AjfSlideIssuesPipe,
                         AjfTableFieldComponent,
                         AjfTextFieldComponent,
                         AjfTimeFieldComponent,
                         AjfVideoUrlFieldComponent,
                         AjfDisplayFieldComponent,
                     ],
-                    exports: [AjfFormField, AjfFormRenderer],
+                    exports: [AjfFieldRow, AjfFormField, AjfFormRenderer, AjfRepStrip, AjfSlideHeader],
                     providers: [
                         AjfFieldService,
                         { provide: AJF_WARNING_ALERT_SERVICE, useClass: AjfWarningAlertService },
@@ -1290,5 +1903,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AjfBooleanFieldComponent, AjfDateFieldComponent, AjfDateInputFieldComponent, AjfEmptyFieldComponent, AjfFieldService, AjfFieldWarningDialog, AjfFormField, AjfFormRenderer, AjfFormsModule, AjfInputFieldComponent, AjfMultipleChoiceFieldComponent, AjfSingleChoiceFieldComponent, AjfTableFieldComponent, AjfTimeFieldComponent, AjfWarningAlertService };
+export { AjfBooleanFieldComponent, AjfCurrentSlidePipe, AjfDateFieldComponent, AjfDateInputFieldComponent, AjfEmptyFieldComponent, AjfFieldRow, AjfFieldService, AjfFieldWarningDialog, AjfFormField, AjfFormIssuesPipe, AjfFormRenderer, AjfFormsModule, AjfInputFieldComponent, AjfMultipleChoiceFieldComponent, AjfRepStrip, AjfSingleChoiceFieldComponent, AjfSlideCompletionPipe, AjfSlideHeader, AjfSlideIssuesPipe, AjfTableFieldComponent, AjfTimeFieldComponent, AjfWarningAlertService };
 //# sourceMappingURL=ajf-material-forms.mjs.map