@ajf/material 18.3.2 → 18.4.1

package/fesm2022/ajf-material-form-builder.mjs

@@ -9,31 +9,29 @@ import * as i0 from '@angular/core';
 import { Input, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, Injectable, ViewChild, ElementRef, forwardRef, ViewChildren, Pipe, Output, NgModule } from '@angular/core';
 import * as i3$1 from '@angular/forms';
 import { FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i4 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i5 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i6$2 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i8$2 from '@angular/material/checkbox';
+import * as i8$3 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i7$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 import * as i2 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
-import * as i8$1 from '@angular/material/expansion';
+import * as i8$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i9 from '@angular/material/form-field';
+import * as i7 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i10 from '@angular/material/icon';
+import * as i5$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i7$1 from '@angular/material/list';
+import * as i7$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i10$1 from '@angular/material/menu';
+import * as i10 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i12 from '@angular/material/select';
+import * as i8$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i11 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -41,22 +39,24 @@ import * as i14 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i13 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
-import * as i7 from '@angular/material/table';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import * as i12$1 from '@angular/material/toolbar';
+import * as i7$1 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i12 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i8 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i9 from 'ngx-mat-select-search';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import * as i1 from '@ajf/core/forms';
 import { isChoicesFixedOrigin, isContainerNode, AjfFieldType, AjfNodeType, createField, createContainerNode, createForm, createChoicesFixedOrigin, isSlidesNode, isFieldWithChoices, isRepeatingContainerNode, isField, createValidationGroup, notEmptyValidation, minValidation, maxValidation, minDigitsValidation, maxDigitsValidation, createValidation, createWarningGroup, notEmptyWarning, createWarning, isRangeField, isEmptyField, isTableField, isNumberField } from '@ajf/core/forms';
 import { DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject, of, Subject, Subscription, combineLatest, firstValueFrom } from 'rxjs';
 import * as i6$1 from '@ngneat/transloco';
-import { take, filter, map, scan, shareReplay, withLatestFrom, finalize, switchMap, startWith, pairwise, distinctUntilChanged, sample } from 'rxjs/operators';
+import { take, filter, map, scan, shareReplay, withLatestFrom, debounceTime, distinctUntilChanged, startWith, finalize, switchMap, pairwise, sample } from 'rxjs/operators';
 import { createFormula, createCondition, alwaysCondition, neverCondition } from '@ajf/core/models';
 import { deepCopy } from '@ajf/core/utils';
-import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import * as i5$1 from '@angular/material/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i4 from '@angular/material/core';
 
 /**
  * @license
@@ -245,7 +245,7 @@ class AjfFbChoicesOriginEditor {
         this._choices.updateChoices(this._choicesArr);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbChoicesOriginEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbChoicesOriginEditor, selector: "ajf-fb-choices-origin-editor", inputs: { choicesOrigin: "choicesOrigin", nameDuplicate: "nameDuplicate" }, ngImport: i0, template: "<div>\n  <mat-form-field>\n    <input matInput [(ngModel)]=\"name\" [placeholder]=\"'Name' | transloco\" required #nameInput=\"ngModel\" />\n    <mat-error *ngIf=\"nameInput.invalid && nameInput.touched\">\n      {{'Name is required' | transloco}}\n    </mat-error>\n  </mat-form-field>\n  <span class=\"ajf-fb-field-error\" *ngIf=\"nameDuplicate && name.trim()\">\n    {{'Name already exists' | transloco}}\n  </span>\n  <mat-form-field>\n    <input matInput [(ngModel)]=\"label\" [placeholder]=\"'Label' | transloco\" />\n  </mat-form-field>\n  <ng-template [ngIf]=\"canEditChoices\">\n    <button (click)=\"addRow()\" mat-button>\n      <mat-icon>add</mat-icon>\n      <span>{{'Add value'|transloco}}</span>\n    </button>\n    <mat-table [dataSource]=\"choices\">\n      <ng-container matColumnDef=\"value\">\n        <mat-header-cell *matHeaderCellDef\n          >{{'Name'|transloco}}</mat-header-cell\n        >\n        <mat-cell *matCellDef=\"let row; let idx = index\">\n          <input matInput [(ngModel)]=\"row.value\" type=\"text\"\n            [class.ajf-fb-choice-invalid]=\"isChoiceValueInvalid(row.value, idx)\"/>\n        </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"label\">\n        <mat-header-cell *matHeaderCellDef\n          >{{'Label'|transloco}}</mat-header-cell\n        >\n        <mat-cell *matCellDef=\"let row; let idx = index\">\n          <input matInput [(ngModel)]=\"row.label\" type=\"text\" />\n        </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"delete\">\n        <mat-header-cell *matHeaderCellDef\n          >{{'Delete'|transloco}}</mat-header-cell\n        >\n        <mat-cell *matCellDef=\"let row; let idx = index\">\n          <mat-icon (click)=\"deleteRow(idx)\">delete</mat-icon>\n        </mat-cell>\n      </ng-container>\n\n      <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n      <mat-row *matRowDef=\"let row; columns: displayedColumns;\"></mat-row>\n    </mat-table>\n  </ng-template>\n</div>\n", styles: ["ajf-fb-choices-origin-editor mat-form-field+mat-form-field{margin-left:1em}ajf-fb-choices-origin-editor .mat-mdc-table{max-height:300px}ajf-fb-choices-origin-editor .mat-mdc-table mat-icon{cursor:pointer}ajf-fb-choices-origin-editor .mat-mdc-input-element{max-width:100%}ajf-fb-choices-origin-editor .ajf-fb-field-error{color:var(--mdc-theme-error, #f44336);font-size:12px;margin-left:1em;vertical-align:middle}ajf-fb-choices-origin-editor .ajf-fb-choice-invalid{border-bottom-color:var(--mdc-theme-error, #f44336)!important;caret-color:var(--mdc-theme-error, #f44336)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbChoicesOriginEditor, selector: "ajf-fb-choices-origin-editor", inputs: { choicesOrigin: "choicesOrigin", nameDuplicate: "nameDuplicate" }, ngImport: i0, template: "<div>\n  <mat-form-field>\n    <input matInput [(ngModel)]=\"name\" [placeholder]=\"'Name' | transloco\" required #nameInput=\"ngModel\" />\n    <mat-error *ngIf=\"nameInput.invalid && nameInput.touched\">\n      {{'Name is required' | transloco}}\n    </mat-error>\n  </mat-form-field>\n  <span class=\"ajf-fb-field-error\" *ngIf=\"nameDuplicate && name.trim()\">\n    {{'Name already exists' | transloco}}\n  </span>\n  <mat-form-field>\n    <input matInput [(ngModel)]=\"label\" [placeholder]=\"'Label' | transloco\" />\n  </mat-form-field>\n  <ng-template [ngIf]=\"canEditChoices\">\n    <button (click)=\"addRow()\" mat-button>\n      <mat-icon>add</mat-icon>\n      <span>{{'Add value'|transloco}}</span>\n    </button>\n    <mat-table [dataSource]=\"choices\">\n      <ng-container matColumnDef=\"value\">\n        <mat-header-cell *matHeaderCellDef\n          >{{'Name'|transloco}}</mat-header-cell\n        >\n        <mat-cell *matCellDef=\"let row; let idx = index\">\n          <input matInput [(ngModel)]=\"row.value\" type=\"text\"\n            [class.ajf-fb-choice-invalid]=\"isChoiceValueInvalid(row.value, idx)\"/>\n        </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"label\">\n        <mat-header-cell *matHeaderCellDef\n          >{{'Label'|transloco}}</mat-header-cell\n        >\n        <mat-cell *matCellDef=\"let row; let idx = index\">\n          <input matInput [(ngModel)]=\"row.label\" type=\"text\" />\n        </mat-cell>\n      </ng-container>\n      <ng-container matColumnDef=\"delete\">\n        <mat-header-cell *matHeaderCellDef\n          >{{'Delete'|transloco}}</mat-header-cell\n        >\n        <mat-cell *matCellDef=\"let row; let idx = index\">\n          <mat-icon (click)=\"deleteRow(idx)\">delete</mat-icon>\n        </mat-cell>\n      </ng-container>\n\n      <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n      <mat-row *matRowDef=\"let row; columns: displayedColumns;\"></mat-row>\n    </mat-table>\n  </ng-template>\n</div>\n", styles: ["ajf-fb-choices-origin-editor mat-form-field+mat-form-field{margin-left:1em}ajf-fb-choices-origin-editor .mat-mdc-table{max-height:300px}ajf-fb-choices-origin-editor .mat-mdc-table mat-icon{cursor:pointer}ajf-fb-choices-origin-editor .mat-mdc-input-element{max-width:100%}ajf-fb-choices-origin-editor .ajf-fb-field-error{color:var(--mdc-theme-error, #f44336);font-size:12px;margin-left:1em;vertical-align:middle}ajf-fb-choices-origin-editor .ajf-fb-choice-invalid{border-bottom-color:var(--mdc-theme-error, #f44336)!important;caret-color:var(--mdc-theme-error, #f44336)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i7$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbChoicesOriginEditor, decorators: [{
             type: Component,
@@ -277,6 +277,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * If not, see http://www.gnu.org/licenses/.
  *
  */
+/**
+ * The categories the entries of the form builder field types palette are
+ * grouped into, in display order. The values are translation keys, rendered as
+ * the header of each group.
+ */
+const AjfFormBuilderNodeTypeCategories = {
+    structure: 'Structure',
+    text: 'Text',
+    numeric: 'Numeric',
+    // Deliberately not 'Choices', which is already used by the choices origins
+    // menu of the toolbar and has a different meaning.
+    choices: 'Choice fields',
+    dateTime: 'Date & time',
+    advanced: 'Advanced',
+};
 function getNodeContainer(c, node) {
     if (c.nodes.indexOf(node) > -1 || c.nodes.map(n => n.id).indexOf(node?.id) > -1) {
         return c;
@@ -488,92 +503,118 @@ class AjfFormBuilderService {
         return this._afterNodeUpdateObs;
     }
     constructor() {
+        /**
+         * The node types available in the palette, listed by category in display
+         * order. Entries of the same category are rendered under a common header, see
+         * {@link AjfFormBuilderNodeTypeCategories}.
+         */
         this._availableNodeTypes = [
             {
                 label: 'Slide',
                 nodeType: { node: AjfNodeType.AjfSlide },
                 isSlide: true,
+                category: AjfFormBuilderNodeTypeCategories.structure,
             },
             {
                 label: 'Repeating slide',
                 nodeType: { node: AjfNodeType.AjfRepeatingSlide },
                 isSlide: true,
+                category: AjfFormBuilderNodeTypeCategories.structure,
             },
             {
                 label: 'String',
                 nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.String },
+                category: AjfFormBuilderNodeTypeCategories.text,
             },
             {
                 label: 'Text',
                 nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Text },
+                category: AjfFormBuilderNodeTypeCategories.text,
+            },
+            {
+                label: 'Note',
+                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Empty },
+                category: AjfFormBuilderNodeTypeCategories.text,
             },
             {
                 label: 'Number',
                 nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Number },
+                category: AjfFormBuilderNodeTypeCategories.numeric,
             },
             {
                 label: 'Boolean',
                 nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Boolean },
+                category: AjfFormBuilderNodeTypeCategories.choices,
             },
             {
                 label: 'Single choice',
                 nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.SingleChoice },
+                category: AjfFormBuilderNodeTypeCategories.choices,
             },
             {
                 label: 'Multiple choice',
                 nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.MultipleChoice },
+                category: AjfFormBuilderNodeTypeCategories.choices,
             },
             {
-                label: 'Formula',
-                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Formula },
-            },
-            {
-                label: 'Note',
-                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Empty },
+                label: 'Range',
+                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Range },
+                category: AjfFormBuilderNodeTypeCategories.choices,
             },
             {
-                label: 'Date',
+                label: 'Date range',
                 nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.DateRange },
+                category: AjfFormBuilderNodeTypeCategories.dateTime,
             },
             {
                 label: 'Date input',
                 nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.DateInput },
+                category: AjfFormBuilderNodeTypeCategories.dateTime,
             },
             {
                 label: 'Time',
                 nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Time },
-            },
-            {
-                label: 'Table',
-                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Table },
+                category: AjfFormBuilderNodeTypeCategories.dateTime,
             },
             {
                 label: 'Geolocation',
                 nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Geolocation },
+                category: AjfFormBuilderNodeTypeCategories.advanced,
+            },
+            {
+                label: 'Image',
+                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Image },
+                category: AjfFormBuilderNodeTypeCategories.advanced,
             },
             {
                 label: 'Barcode',
                 nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Barcode },
+                category: AjfFormBuilderNodeTypeCategories.advanced,
             },
             {
-                label: 'Signature',
-                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Signature },
+                label: 'Formula',
+                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Formula },
+                category: AjfFormBuilderNodeTypeCategories.advanced,
             },
             {
-                label: 'File',
-                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.File },
+                label: 'Table',
+                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Table },
+                category: AjfFormBuilderNodeTypeCategories.advanced,
             },
             {
-                label: 'Image',
-                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Image },
+                label: 'File',
+                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.File },
+                category: AjfFormBuilderNodeTypeCategories.advanced,
             },
             {
-                label: 'Range',
-                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Range },
+                label: 'Signature',
+                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Signature },
+                category: AjfFormBuilderNodeTypeCategories.advanced,
             },
             {
                 label: 'Audio',
                 nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Audio },
+                category: AjfFormBuilderNodeTypeCategories.advanced,
             },
         ];
         this._form = new BehaviorSubject(null);
@@ -1426,7 +1467,7 @@ class AjfFbConditionEditor {
         this.formulaEditorControl.setValue(newValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbConditionEditor, deps: [{ token: i1.AjfValidationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbConditionEditor, selector: "ajf-condition-editor", inputs: { fields: "fields", condition: "condition" }, ngImport: i0, template: "<div class=\"ajf-editor\">\n  <mat-form-field class=\"ajf-formula-editor\">\n    <code><input matInput type=\"text\" [formControl]=\"formulaEditorControl\" /></code>\n  </mat-form-field>\n</div>\n<div class=\"ajf-editor-panel\">\n  <ng-container *ngIf=\"fields as curFields\">\n    <mat-nav-list dense *ngIf=\"curFields!.length > 0\">\n      <a\n        mat-list-item\n        (click)=\"insertVariable(field.name)\"\n        [matTooltip]=\"field.label\"\n        *ngFor=\"let field of curFields!\"\n      >\n        <ajf-node-icon [node]=\"field\"></ajf-node-icon>\n        {{ field.name }}\n      </a>\n    </mat-nav-list>\n  </ng-container>\n</div>\n", styles: ["ajf-condition-editor{display:flex;flex-direction:row;align-items:stretch;max-height:512px}ajf-condition-editor .ajf-editor{flex:.75 0 auto;display:flex;flex-direction:row;align-items:stretch}ajf-condition-editor .ajf-editor-panel{flex:.25 0 auto;overflow-y:auto}ajf-condition-editor .ajf-editor-panel .mat-mdc-nav-list{max-height:30vh;overflow-y:auto}ajf-condition-editor .ajf-formula-editor{min-width:40vw}\n"], dependencies: [{ kind: "component", type: i2$1.AjfNodeIcon, selector: "ajf-node-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i9.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: "component", type: i7$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i7$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbConditionEditor, selector: "ajf-condition-editor", inputs: { fields: "fields", condition: "condition" }, ngImport: i0, template: "<div class=\"ajf-editor\">\n  <mat-form-field class=\"ajf-formula-editor\">\n    <code><input matInput type=\"text\" [formControl]=\"formulaEditorControl\" /></code>\n  </mat-form-field>\n</div>\n<div class=\"ajf-editor-panel\">\n  <ng-container *ngIf=\"fields as curFields\">\n    <mat-nav-list dense *ngIf=\"curFields!.length > 0\">\n      <a\n        mat-list-item\n        (click)=\"insertVariable(field.name)\"\n        [matTooltip]=\"field.label\"\n        *ngFor=\"let field of curFields!\"\n      >\n        <ajf-node-icon [node]=\"field\"></ajf-node-icon>\n        {{ field.name }}\n      </a>\n    </mat-nav-list>\n  </ng-container>\n</div>\n", styles: ["ajf-condition-editor{display:flex;flex-direction:row;align-items:stretch;max-height:512px}ajf-condition-editor .ajf-editor{flex:.75 0 auto;display:flex;flex-direction:row;align-items:stretch}ajf-condition-editor .ajf-editor-panel{flex:.25 0 auto;overflow-y:auto}ajf-condition-editor .ajf-editor-panel .mat-mdc-nav-list{max-height:30vh;overflow-y:auto}ajf-condition-editor .ajf-formula-editor{min-width:40vw}\n"], dependencies: [{ kind: "component", type: i2$1.AjfNodeIcon, selector: "ajf-node-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "component", type: i7.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: "component", type: i7$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i7$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbConditionEditor, decorators: [{
             type: Component,
@@ -1532,62 +1573,51 @@ function disableFieldDropPredicate(item) {
 }
 
 class AjfFbStringIdentifierDialogComponent {
-    constructor(_service, _cdr) {
+    constructor(_service) {
         this._service = _service;
-        this._cdr = _cdr;
-        this.dataSource = new MatTableDataSource();
-        this.displayedColumns = ['label', 'value', 'show', 'delete'];
-        this.separatorKeysCodes = [ENTER, COMMA];
+        this.searchFilterCtrl = new FormControl('', { nonNullable: true });
+        this.selectedFieldNames = [];
+        this._fields = [];
+        this._fieldsSub = Subscription.EMPTY;
         this._stringIdentifierSub = Subscription.EMPTY;
+        this.fields$ = _service.flatFields.pipe(map(fields => fields
+            .filter(f => f.name.length > 0)
+            .sort((f1, f2) => (f1.label || f1.name).localeCompare(f2.label || f2.name))), shareReplay(1));
+        this._fieldsSub = this.fields$.subscribe(fields => {
+            this._fields = fields;
+        });
         this._stringIdentifierSub = _service.stringIdentifier.subscribe(identifier => {
-            this.dataSource.data = [...identifier];
+            this.selectedFieldNames = identifier
+                .map(entry => entry.value[0])
+                .filter((name) => name != null);
         });
-        this.fields$ = _service.flatFields.pipe(map(fields => fields
-            .sort((f1, f2) => f1.name.localeCompare(f2.name))
-            .map(f => f.name)
-            .filter(f => f.length > 0)), shareReplay(1));
-    }
-    addRow() {
-        this.dataSource.data = [...this.dataSource.data, { label: '', value: [], show: undefined }];
-    }
-    deleteRow(rowIdx) {
-        this.dataSource.data = [
-            ...this.dataSource.data.slice(0, rowIdx),
-            ...this.dataSource.data.slice(rowIdx + 1),
-        ];
-    }
-    addValue(row, evt, valueInput) {
-        if (evt.value.length === 0) {
-            return;
-        }
-        row.value = [...row.value, evt.value];
-        valueInput.value = '';
-        this._cdr.markForCheck();
-    }
-    removeValue(row, value) {
-        const idx = row.value.indexOf(value);
-        if (idx > -1) {
-            row.value = [...row.value.slice(0, idx), ...row.value.slice(idx + 1)];
-            this._cdr.markForCheck();
-        }
+        this.filteredFields$ = this.searchFilterCtrl.valueChanges.pipe(debounceTime(150), distinctUntilChanged(), startWith(''), map(search => {
+            const fields = this._fields;
+            if (!search) {
+                return fields;
+            }
+            const lowerSearch = search.toLowerCase();
+            return fields.filter(f => (f.label || f.name).toLowerCase().includes(lowerSearch));
+        }));
     }
     ngOnDestroy() {
+        this._fieldsSub.unsubscribe();
         this._stringIdentifierSub.unsubscribe();
     }
     saveStringIdentifier() {
-        this._service.saveStringIdentifier(this.dataSource.data);
-    }
-    selected(row, evt) {
-        row.value = [...row.value, evt.option.value];
-        this._cdr.markForCheck();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbStringIdentifierDialogComponent, deps: [{ token: AjfFormBuilderService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbStringIdentifierDialogComponent, selector: "ajf-fb-string-identifier-dialog", ngImport: i0, template: "<h3 matDialogTitle>{{'Edit identifier'|transloco}}</h3>\n<mat-dialog-content>\n  <button (click)=\"addRow()\" mat-button>\n    <mat-icon>add</mat-icon>\n    <span>{{'Add value'|transloco}}</span>\n  </button>\n  <mat-table [dataSource]=\"dataSource\">\n    <ng-container matColumnDef=\"label\">\n      <mat-header-cell *matHeaderCellDef>{{'Label'|transloco}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let row; let idx = index\">\n        <mat-form-field>\n          <input\n            matInput\n            [placeholder]=\"'Label'|transloco\"\n            autofocus\n            [(ngModel)]=\"row.label\"\n          />\n        </mat-form-field>\n      </mat-cell>\n    </ng-container>\n    <ng-container matColumnDef=\"value\">\n      <mat-header-cell *matHeaderCellDef>{{'Value'|transloco}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let row; let idx = index\">\n        <mat-form-field>\n          <mat-chip-grid #chipList>\n            <mat-chip-row\n              *ngFor=\"let field of row.value\"\n              (removed)=\"removeValue(row, field)\"\n            >\n              {{ field }}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip-row>\n          </mat-chip-grid>\n          <input\n            #valueInput\n            [ngModel]=\"row.value\"\n            [matAutocomplete]=\"valueAc\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addValue(row, $event, valueInput)\"\n            [placeholder]=\"'Value'|transloco\"\n          />\n          <mat-autocomplete\n            #valueAc=\"matAutocomplete\"\n            (optionSelected)=\"selected(row, $event)\"\n          >\n            <mat-option *ngFor=\"let field of fields$ | async\" [value]=\"field\"\n              >{{field}}</mat-option\n            >\n          </mat-autocomplete>\n        </mat-form-field>\n      </mat-cell>\n    </ng-container>\n    <ng-container matColumnDef=\"show\">\n      <mat-header-cell *matHeaderCellDef>{{'Show'|transloco}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let row; let idx = index\">\n        <mat-form-field>\n          <mat-select matNativeControl [(ngModel)]=\"row.show\">\n            <mat-option value=\"all\">{{'All'|transloco}}</mat-option>\n            <mat-option value=\"first\">{{'First'|transloco}}</mat-option>\n            <mat-option value=\"last\">{{'Last'|transloco}}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </mat-cell>\n    </ng-container>\n    <ng-container matColumnDef=\"delete\">\n      <mat-header-cell *matHeaderCellDef\n        >{{'Delete'|transloco}}</mat-header-cell\n      >\n      <mat-cell *matCellDef=\"let row; let idx = index\">\n        <mat-icon (click)=\"deleteRow(idx)\">delete</mat-icon>\n      </mat-cell>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns;\"></mat-row>\n  </mat-table>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button matDialogClose (click)=\"saveStringIdentifier()\">\n    {{'Save'|transloco}}\n  </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: i7$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i7$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i7$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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]" }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i12.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.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        const identifier = this.selectedFieldNames
+            .map(name => this._fields.find(f => f.name === name))
+            .filter((f) => f != null)
+            .map(f => ({ label: f.label || f.name, value: [f.name] }));
+        this._service.saveStringIdentifier(identifier);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbStringIdentifierDialogComponent, deps: [{ token: AjfFormBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbStringIdentifierDialogComponent, selector: "ajf-fb-string-identifier-dialog", ngImport: i0, template: "<h3 matDialogTitle>{{'Default columns'|transloco}}</h3>\n<mat-dialog-content>\n  <p>{{'Select the fields that will be shown as columns in the form list page'|transloco}}</p>\n  <mat-form-field class=\"ajf-string-identifier-select\">\n    <mat-select multiple [(ngModel)]=\"selectedFieldNames\">\n      <mat-option>\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 *ngFor=\"let field of filteredFields$ | async\" [value]=\"field.name\">\n        {{field.label || field.name}}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-raised-button color=\"warn\" matDialogClose>\n    {{'Close'|transloco}}\n  </button>\n  <button mat-raised-button color=\"primary\" matDialogClose (click)=\"saveStringIdentifier()\">\n    {{'Save'|transloco}}\n  </button>\n</mat-dialog-actions>\n", styles: ["ajf-fb-string-identifier-dialog h3,ajf-fb-string-identifier-dialog p{text-align:center}ajf-fb-string-identifier-dialog .ajf-string-identifier-select{display:block;min-width:200px;width:70%;margin:20px auto}ajf-fb-string-identifier-dialog mat-dialog-actions.mat-mdc-dialog-actions{display:flex;justify-content:space-evenly;align-items:center}ajf-fb-string-identifier-dialog mat-dialog-actions.mat-mdc-dialog-actions .mat-mdc-button-base{min-width:100px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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]" }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i8$1.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: 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: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbStringIdentifierDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ajf-fb-string-identifier-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<h3 matDialogTitle>{{'Edit identifier'|transloco}}</h3>\n<mat-dialog-content>\n  <button (click)=\"addRow()\" mat-button>\n    <mat-icon>add</mat-icon>\n    <span>{{'Add value'|transloco}}</span>\n  </button>\n  <mat-table [dataSource]=\"dataSource\">\n    <ng-container matColumnDef=\"label\">\n      <mat-header-cell *matHeaderCellDef>{{'Label'|transloco}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let row; let idx = index\">\n        <mat-form-field>\n          <input\n            matInput\n            [placeholder]=\"'Label'|transloco\"\n            autofocus\n            [(ngModel)]=\"row.label\"\n          />\n        </mat-form-field>\n      </mat-cell>\n    </ng-container>\n    <ng-container matColumnDef=\"value\">\n      <mat-header-cell *matHeaderCellDef>{{'Value'|transloco}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let row; let idx = index\">\n        <mat-form-field>\n          <mat-chip-grid #chipList>\n            <mat-chip-row\n              *ngFor=\"let field of row.value\"\n              (removed)=\"removeValue(row, field)\"\n            >\n              {{ field }}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip-row>\n          </mat-chip-grid>\n          <input\n            #valueInput\n            [ngModel]=\"row.value\"\n            [matAutocomplete]=\"valueAc\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            [matChipInputAddOnBlur]=\"true\"\n            (matChipInputTokenEnd)=\"addValue(row, $event, valueInput)\"\n            [placeholder]=\"'Value'|transloco\"\n          />\n          <mat-autocomplete\n            #valueAc=\"matAutocomplete\"\n            (optionSelected)=\"selected(row, $event)\"\n          >\n            <mat-option *ngFor=\"let field of fields$ | async\" [value]=\"field\"\n              >{{field}}</mat-option\n            >\n          </mat-autocomplete>\n        </mat-form-field>\n      </mat-cell>\n    </ng-container>\n    <ng-container matColumnDef=\"show\">\n      <mat-header-cell *matHeaderCellDef>{{'Show'|transloco}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let row; let idx = index\">\n        <mat-form-field>\n          <mat-select matNativeControl [(ngModel)]=\"row.show\">\n            <mat-option value=\"all\">{{'All'|transloco}}</mat-option>\n            <mat-option value=\"first\">{{'First'|transloco}}</mat-option>\n            <mat-option value=\"last\">{{'Last'|transloco}}</mat-option>\n          </mat-select>\n        </mat-form-field>\n      </mat-cell>\n    </ng-container>\n    <ng-container matColumnDef=\"delete\">\n      <mat-header-cell *matHeaderCellDef\n        >{{'Delete'|transloco}}</mat-header-cell\n      >\n      <mat-cell *matCellDef=\"let row; let idx = index\">\n        <mat-icon (click)=\"deleteRow(idx)\">delete</mat-icon>\n      </mat-cell>\n    </ng-container>\n\n    <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n    <mat-row *matRowDef=\"let row; columns: displayedColumns;\"></mat-row>\n  </mat-table>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button matDialogClose (click)=\"saveStringIdentifier()\">\n    {{'Save'|transloco}}\n  </button>\n</mat-dialog-actions>\n" }]
-        }], ctorParameters: () => [{ type: AjfFormBuilderService }, { type: i0.ChangeDetectorRef }] });
+            args: [{ selector: 'ajf-fb-string-identifier-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<h3 matDialogTitle>{{'Default columns'|transloco}}</h3>\n<mat-dialog-content>\n  <p>{{'Select the fields that will be shown as columns in the form list page'|transloco}}</p>\n  <mat-form-field class=\"ajf-string-identifier-select\">\n    <mat-select multiple [(ngModel)]=\"selectedFieldNames\">\n      <mat-option>\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 *ngFor=\"let field of filteredFields$ | async\" [value]=\"field.name\">\n        {{field.label || field.name}}\n      </mat-option>\n    </mat-select>\n  </mat-form-field>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-raised-button color=\"warn\" matDialogClose>\n    {{'Close'|transloco}}\n  </button>\n  <button mat-raised-button color=\"primary\" matDialogClose (click)=\"saveStringIdentifier()\">\n    {{'Save'|transloco}}\n  </button>\n</mat-dialog-actions>\n", styles: ["ajf-fb-string-identifier-dialog h3,ajf-fb-string-identifier-dialog p{text-align:center}ajf-fb-string-identifier-dialog .ajf-string-identifier-select{display:block;min-width:200px;width:70%;margin:20px auto}ajf-fb-string-identifier-dialog mat-dialog-actions.mat-mdc-dialog-actions{display:flex;justify-content:space-evenly;align-items:center}ajf-fb-string-identifier-dialog mat-dialog-actions.mat-mdc-dialog-actions .mat-mdc-button-base{min-width:100px}\n"] }]
+        }], ctorParameters: () => [{ type: AjfFormBuilderService }] });
 
 /**
  * @license
@@ -1818,11 +1848,11 @@ class AjfFbNodeEntry {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbNodeEntry, deps: [{ token: AjfFormBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbNodeEntry, selector: "ajf-fb-node-entry", inputs: { isFirst: "isFirst", nodeEntry: "nodeEntry", level: "level", isDraggable: "isDraggable", originOffset: "originOffset", firstBranchColor: "firstBranchColor" }, host: { listeners: { "window.resize": "onResize()" } }, viewQueries: [{ propertyName: "branchLines", predicate: AjfFbBranchLine, descendants: true }, { propertyName: "childEntries", predicate: i0.forwardRef(() => AjfFbNodeEntry), descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container *ngIf=\"nodeEntry; else rootEmpty\">\n  <ng-template [ngIf]=\"isNodeEntry && !isLastNode()\">\n    <ajf-fb-branch-line\n      *ngFor=\"let childNodeEntry of realNodeEntry.children; let idx = index\"\n      [offset]=\"idx\"\n      [color]=\"branchColors[idx]\"\n    ></ajf-fb-branch-line>\n  </ng-template>\n\n  <div\n    class=\"mat-card-container\"\n    [class.ajf-highlighted-formbuilder-node]=\"(currentEditedNode|async) === nodeEntry\"\n  >\n    <div\n      *ngIf=\"!isFirst\"\n      class=\"ajf-origin-line\"\n      [style.margin-left]=\"originLeftMargin\"\n      [style.border-color]=\"firstBranchColor\"\n    ></div>\n    <ng-template [ngIf]=\"isNodeEntry\">\n      <ng-container *ngIf=\"!isDraggable; else draggable\">\n        <mat-card appearance=\"outlined\">\n          <ng-container *ngTemplateOutlet=\"cardTitle\"></ng-container>\n          <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n        </mat-card>\n      </ng-container>\n\n      <ng-template #draggable>\n        <mat-card\n          appearance=\"outlined\"\n          cdkDrag\n          [cdkDragData]=\"realNodeEntry\"\n          class=\"ajf-draggable-box\"\n        >\n          <ng-container *ngIf=\"isSlide(realNodeEntry.node); else fieldPanel\">\n            <ng-container *ngTemplateOutlet=\"slidePanel\"></ng-container>\n          </ng-container>\n        </mat-card>\n      </ng-template>\n\n      <ng-template #slidePanel>\n        <mat-expansion-panel\n          [expanded]=\"isExpanded()|async\"\n          (opened)=\"updateExpandedStatus(true)\"\n          (closed)=\"updateExpandedStatus(false)\"\n          class=\"mat-elevation-z\"\n        >\n          <mat-expansion-panel-header>\n            <ng-container *ngTemplateOutlet=\"cardTitle\"></ng-container>\n          </mat-expansion-panel-header>\n          <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n        </mat-expansion-panel>\n      </ng-template>\n\n      <ng-template #fieldPanel>\n        <ng-container *ngTemplateOutlet=\"cardTitle\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n      </ng-template>\n\n      <ng-template #cardTitle>\n        <div class=\"ajf-title-row\" [ngClass]=\"{ 'ajf-title-row-error': isInvalid(realNodeEntry.node) }\">\n          <ajf-node-icon [node]=\"realNodeEntry.node\"></ajf-node-icon>\n          &nbsp;\n          <span\n            class=\"ajf-title\"\n            [innerHTML]=\"(realNodeEntry.node.label || realNodeEntry.node.name)  | transloco\"\n          ></span>\n          <span\n            *ngIf=\"realNodeEntry.node.visibility && realNodeEntry.node.visibility?.condition !== 'true'\"\n            class=\"ajf-visibility-condition\"\n            [innerHTML]=\"'Condition: (' + realNodeEntry.node.visibility.condition + ')'\"\n          >\n          </span>\n          <span class=\"ajf-actions\">\n            <button\n              [disabled]=\"(currentEditedNode|async) === nodeEntry\"\n              (click)=\"edit($event)\"\n              mat-icon-button\n            >\n              <mat-icon>edit</mat-icon>\n            </button>\n            <button (click)=\"delete($event)\" mat-icon-button>\n              <mat-icon>delete</mat-icon>\n            </button>\n          </span>\n        </div>\n      </ng-template>\n\n      <ng-template #cardContent>\n        <div *ngIf=\"hasContent\">\n          <ajf-fb-node-entry\n            cdkDropList\n            class=\"ajf-fields-list\"\n            *ngFor=\"let contentEntry of realNodeEntry.content; let isFirstChild = first; let idx = index\"\n            [id]=\"assignId()\"\n            [level]=\"level + 1\"\n            [isFirst]=\"isFirstChild\"\n            [firstBranchColor]=\"branchColors[idx]\"\n            [nodeEntry]=\"contentEntry\"\n            [cdkDropListEnterPredicate]=\"disableSlideDrop\"\n            (cdkDropListDropped)=\"onDrop($event, true)\"\n          ></ajf-fb-node-entry>\n          <mat-card\n            appearance=\"outlined\"\n            class=\"ajf-empty\"\n            *ngIf=\"realNodeEntry.content.length === 0\"\n            cdkDropList\n            [id]=\"assignId(true)\"\n            [cdkDropListEnterPredicate]=\"disableSlideDrop\"\n            (cdkDropListDropped)=\"onDrop($event, true)\"\n            ><mat-card-title>Drop your fields here</mat-card-title></mat-card\n          >\n        </div>\n      </ng-template>\n    </ng-template>\n  </div>\n\n  <ng-template [ngIf]=\"isNodeEntry\">\n    <ng-container *ngFor=\"let childNodeEntry of realNodeEntry.children; let idx = index\">\n      <ajf-fb-node-entry\n        *ngIf=\"!isLastNode()\"\n        [level]=\"level\"\n        [originOffset]=\"idx\"\n        [firstBranchColor]=\"branchColors[idx]\"\n        [nodeEntry]=\"childNodeEntry\"\n      ></ajf-fb-node-entry>\n    </ng-container>\n  </ng-template>\n</ng-container>\n\n<ng-template #rootEmpty>\n  <div class=\"mat-card-container\">\n    <mat-card\n      appearance=\"outlined\"\n      class=\"ajf-empty\"\n      cdkDropList\n      [cdkDropListEnterPredicate]=\"emptyAreaDropPredicate()\"\n      (cdkDropListDropped)=\"onDrop($event)\"\n      ><mat-card-title>Drop your slides here</mat-card-title>\n    </mat-card>\n  </div>\n</ng-template>\n", styles: ["ajf-fb-node-entry{display:block;position:relative}ajf-fb-node-entry .mat-card-container{position:relative}ajf-fb-node-entry .mat-card-container .ajf-origin-line{position:absolute;top:0;left:25px;width:25px;height:25px;border-bottom:2px solid;border-left:2px solid;border-bottom-left-radius:.5em}ajf-fb-node-entry .mat-card-container .mat-mdc-card{margin-left:50px;padding:.5em 1em}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row{display:flex;flex:1 1 auto;flex-direction:row wrap;align-items:center}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row>.ajf-title{flex:1 1 auto;max-width:25vw;margin-right:10px}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row>.ajf-visibility-condition{flex:1 1 auto;font-size:10px;color:#999;max-height:100px;max-width:25vw;overflow:hidden;text-overflow:ellipsis}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row>.ajf-actions{flex:1 1 auto;display:flex;justify-content:flex-end;white-space:nowrap;justify-self:flex-end}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row-error{color:var(--palette-warn-500, #c62828)}ajf-fb-node-entry .mat-card-container .mat-mdc-card.ajf-empty{line-height:36px;border:2px dashed;box-shadow:none;box-sizing:border-box;text-align:center;color:#ccc}ajf-fb-node-entry .mat-card-container .mat-mdc-card.ajf-draggable-box{padding:5px;border-bottom:solid 1px #ccc;border-right:solid 1px #ccc;box-sizing:border-box;cursor:move;font-size:14px}ajf-fb-node-entry .mat-card-container.ajf-highlighted-formbuilder-node>mat-card{background-color:var(--palette-primary-100, #fff9c4)!important;color:var(--palette-primary-500)}ajf-fb-node-entry .ajf-highlighted-formbuilder-node .mat-mdc-card .mat-expansion-panel .mat-expansion-panel-header{background-color:var(--palette-primary-100, #fff9c4)!important;color:var(--palette-primary-500)}ajf-fb-node-entry.ajf-fields-list{max-width:80%;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}ajf-fb-node-entry .cdk-drag-placeholder{opacity:.4;min-height:60px;margin-left:50px;border:1px solid #ccc;border-radius:4px;background-color:#fff9c4}ajf-fb-node-entry .ajf-fields-list.cdk-drop-list-dragging .ajf-draggable-box:not(.cdk-drag-placeholder),ajf-fb-node-entry .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: i2$1.AjfNodeIcon, selector: "ajf-node-icon" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "component", type: AjfFbBranchLine, selector: "ajf-fb-branch-line", inputs: ["offset", "color", "height"] }, { kind: "component", type: AjfFbNodeEntry, selector: "ajf-fb-node-entry", inputs: ["isFirst", "nodeEntry", "level", "isDraggable", "originOffset", "firstBranchColor"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbNodeEntry, selector: "ajf-fb-node-entry", inputs: { isFirst: "isFirst", nodeEntry: "nodeEntry", level: "level", isDraggable: "isDraggable", originOffset: "originOffset", firstBranchColor: "firstBranchColor" }, host: { listeners: { "window.resize": "onResize()" } }, viewQueries: [{ propertyName: "branchLines", predicate: AjfFbBranchLine, descendants: true }, { propertyName: "childEntries", predicate: i0.forwardRef(() => AjfFbNodeEntry), descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container *ngIf=\"nodeEntry; else rootEmpty\">\n  <ng-template [ngIf]=\"isNodeEntry && !isLastNode()\">\n    <ajf-fb-branch-line\n      *ngFor=\"let childNodeEntry of realNodeEntry.children; let idx = index\"\n      [offset]=\"idx\"\n      [color]=\"branchColors[idx]\"\n    ></ajf-fb-branch-line>\n  </ng-template>\n\n  <div\n    class=\"mat-card-container\"\n    [class.ajf-highlighted-formbuilder-node]=\"(currentEditedNode|async) === nodeEntry\"\n  >\n    <div\n      *ngIf=\"!isFirst\"\n      class=\"ajf-origin-line\"\n      [style.margin-left]=\"originLeftMargin\"\n      [style.border-color]=\"firstBranchColor\"\n    ></div>\n    <ng-template [ngIf]=\"isNodeEntry\">\n      <ng-container *ngIf=\"!isDraggable; else draggable\">\n        <mat-card appearance=\"outlined\">\n          <ng-container *ngTemplateOutlet=\"cardTitle\"></ng-container>\n          <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n        </mat-card>\n      </ng-container>\n\n      <ng-template #draggable>\n        <mat-card\n          appearance=\"outlined\"\n          cdkDrag\n          [cdkDragData]=\"realNodeEntry\"\n          class=\"ajf-draggable-box\"\n        >\n          <ng-container *ngIf=\"isSlide(realNodeEntry.node); else fieldPanel\">\n            <ng-container *ngTemplateOutlet=\"slidePanel\"></ng-container>\n          </ng-container>\n        </mat-card>\n      </ng-template>\n\n      <ng-template #slidePanel>\n        <mat-expansion-panel\n          [expanded]=\"isExpanded()|async\"\n          (opened)=\"updateExpandedStatus(true)\"\n          (closed)=\"updateExpandedStatus(false)\"\n          class=\"mat-elevation-z\"\n        >\n          <mat-expansion-panel-header>\n            <ng-container *ngTemplateOutlet=\"cardTitle\"></ng-container>\n          </mat-expansion-panel-header>\n          <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n        </mat-expansion-panel>\n      </ng-template>\n\n      <ng-template #fieldPanel>\n        <ng-container *ngTemplateOutlet=\"cardTitle\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n      </ng-template>\n\n      <ng-template #cardTitle>\n        <div class=\"ajf-title-row\" [ngClass]=\"{ 'ajf-title-row-error': isInvalid(realNodeEntry.node) }\">\n          <ajf-node-icon [node]=\"realNodeEntry.node\"></ajf-node-icon>\n          &nbsp;\n          <span\n            class=\"ajf-title\"\n            [innerHTML]=\"(realNodeEntry.node.label || realNodeEntry.node.name)  | transloco\"\n          ></span>\n          <span\n            *ngIf=\"realNodeEntry.node.visibility && realNodeEntry.node.visibility?.condition !== 'true'\"\n            class=\"ajf-visibility-condition\"\n            [innerHTML]=\"'Condition: (' + realNodeEntry.node.visibility.condition + ')'\"\n          >\n          </span>\n          <span class=\"ajf-actions\">\n            <button\n              [disabled]=\"(currentEditedNode|async) === nodeEntry\"\n              (click)=\"edit($event)\"\n              mat-icon-button\n            >\n              <mat-icon>edit</mat-icon>\n            </button>\n            <button (click)=\"delete($event)\" mat-icon-button>\n              <mat-icon>delete</mat-icon>\n            </button>\n          </span>\n        </div>\n      </ng-template>\n\n      <ng-template #cardContent>\n        <div *ngIf=\"hasContent\">\n          <ajf-fb-node-entry\n            cdkDropList\n            class=\"ajf-fields-list\"\n            *ngFor=\"let contentEntry of realNodeEntry.content; let isFirstChild = first; let idx = index\"\n            [id]=\"assignId()\"\n            [level]=\"level + 1\"\n            [isFirst]=\"isFirstChild\"\n            [firstBranchColor]=\"branchColors[idx]\"\n            [nodeEntry]=\"contentEntry\"\n            [cdkDropListEnterPredicate]=\"disableSlideDrop\"\n            (cdkDropListDropped)=\"onDrop($event, true)\"\n          ></ajf-fb-node-entry>\n          <mat-card\n            appearance=\"outlined\"\n            class=\"ajf-empty\"\n            *ngIf=\"realNodeEntry.content.length === 0\"\n            cdkDropList\n            [id]=\"assignId(true)\"\n            [cdkDropListEnterPredicate]=\"disableSlideDrop\"\n            (cdkDropListDropped)=\"onDrop($event, true)\"\n            ><mat-card-title>Drop your fields here</mat-card-title></mat-card\n          >\n        </div>\n      </ng-template>\n    </ng-template>\n  </div>\n\n  <ng-template [ngIf]=\"isNodeEntry\">\n    <ng-container *ngFor=\"let childNodeEntry of realNodeEntry.children; let idx = index\">\n      <ajf-fb-node-entry\n        *ngIf=\"!isLastNode()\"\n        [level]=\"level\"\n        [originOffset]=\"idx\"\n        [firstBranchColor]=\"branchColors[idx]\"\n        [nodeEntry]=\"childNodeEntry\"\n      ></ajf-fb-node-entry>\n    </ng-container>\n  </ng-template>\n</ng-container>\n\n<ng-template #rootEmpty>\n  <div class=\"mat-card-container\">\n    <mat-card\n      appearance=\"outlined\"\n      class=\"ajf-empty\"\n      cdkDropList\n      [cdkDropListEnterPredicate]=\"emptyAreaDropPredicate()\"\n      (cdkDropListDropped)=\"onDrop($event)\"\n      ><mat-card-title>Drop your slides here</mat-card-title>\n    </mat-card>\n  </div>\n</ng-template>\n", styles: ["ajf-fb-node-entry{display:block;position:relative}ajf-fb-node-entry .mat-card-container{position:relative}ajf-fb-node-entry .mat-card-container .ajf-origin-line{position:absolute;top:0;left:25px;width:25px;height:25px;border-bottom:2px solid;border-left:2px solid;border-bottom-left-radius:.5em}ajf-fb-node-entry .mat-card-container .mat-mdc-card{margin-left:50px;padding:.5em 1em}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row{display:flex;flex:1 1 auto;flex-direction:row wrap;align-items:center}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row>.ajf-title{flex:1 1 auto;max-width:25vw;margin-right:10px}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row>.ajf-visibility-condition{flex:1 1 auto;font-size:10px;color:color-mix(in srgb,currentColor 60%,transparent);max-height:100px;max-width:25vw;overflow:hidden;text-overflow:ellipsis}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row>.ajf-actions{flex:1 1 auto;display:flex;justify-content:flex-end;white-space:nowrap;justify-self:flex-end}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row-error{color:rgb(var(--palette-warn-500, 198 40 40))}ajf-fb-node-entry .mat-card-container .mat-mdc-card.ajf-empty{line-height:36px;border:2px dashed;box-shadow:none;box-sizing:border-box;text-align:center;color:color-mix(in srgb,currentColor 40%,transparent)}ajf-fb-node-entry .mat-card-container .mat-mdc-card.ajf-draggable-box{padding:5px;border-bottom:solid 1px color-mix(in srgb,currentColor 12%,transparent);border-right:solid 1px color-mix(in srgb,currentColor 12%,transparent);box-sizing:border-box;cursor:move;font-size:14px}ajf-fb-node-entry .mat-card-container.ajf-highlighted-formbuilder-node>.mat-mdc-card{outline:2px solid currentColor;outline-offset:-1px}ajf-fb-node-entry.ajf-fields-list{max-width:80%;min-height:60px;display:block;background:color-mix(in srgb,currentColor 4%,transparent);border-radius:4px;overflow:hidden}ajf-fb-node-entry .cdk-drag-placeholder{opacity:.4;min-height:60px;margin-left:50px;border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:4px;background-color:color-mix(in srgb,currentColor 12%,transparent)}ajf-fb-node-entry .ajf-fields-list.cdk-drop-list-dragging .ajf-draggable-box:not(.cdk-drag-placeholder),ajf-fb-node-entry .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "component", type: i2$1.AjfNodeIcon, selector: "ajf-node-icon" }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "component", type: AjfFbBranchLine, selector: "ajf-fb-branch-line", inputs: ["offset", "color", "height"] }, { kind: "component", type: AjfFbNodeEntry, selector: "ajf-fb-node-entry", inputs: ["isFirst", "nodeEntry", "level", "isDraggable", "originOffset", "firstBranchColor"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbNodeEntry, decorators: [{
             type: Component,
-            args: [{ selector: 'ajf-fb-node-entry', host: { '(window.resize)': 'onResize()' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"nodeEntry; else rootEmpty\">\n  <ng-template [ngIf]=\"isNodeEntry && !isLastNode()\">\n    <ajf-fb-branch-line\n      *ngFor=\"let childNodeEntry of realNodeEntry.children; let idx = index\"\n      [offset]=\"idx\"\n      [color]=\"branchColors[idx]\"\n    ></ajf-fb-branch-line>\n  </ng-template>\n\n  <div\n    class=\"mat-card-container\"\n    [class.ajf-highlighted-formbuilder-node]=\"(currentEditedNode|async) === nodeEntry\"\n  >\n    <div\n      *ngIf=\"!isFirst\"\n      class=\"ajf-origin-line\"\n      [style.margin-left]=\"originLeftMargin\"\n      [style.border-color]=\"firstBranchColor\"\n    ></div>\n    <ng-template [ngIf]=\"isNodeEntry\">\n      <ng-container *ngIf=\"!isDraggable; else draggable\">\n        <mat-card appearance=\"outlined\">\n          <ng-container *ngTemplateOutlet=\"cardTitle\"></ng-container>\n          <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n        </mat-card>\n      </ng-container>\n\n      <ng-template #draggable>\n        <mat-card\n          appearance=\"outlined\"\n          cdkDrag\n          [cdkDragData]=\"realNodeEntry\"\n          class=\"ajf-draggable-box\"\n        >\n          <ng-container *ngIf=\"isSlide(realNodeEntry.node); else fieldPanel\">\n            <ng-container *ngTemplateOutlet=\"slidePanel\"></ng-container>\n          </ng-container>\n        </mat-card>\n      </ng-template>\n\n      <ng-template #slidePanel>\n        <mat-expansion-panel\n          [expanded]=\"isExpanded()|async\"\n          (opened)=\"updateExpandedStatus(true)\"\n          (closed)=\"updateExpandedStatus(false)\"\n          class=\"mat-elevation-z\"\n        >\n          <mat-expansion-panel-header>\n            <ng-container *ngTemplateOutlet=\"cardTitle\"></ng-container>\n          </mat-expansion-panel-header>\n          <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n        </mat-expansion-panel>\n      </ng-template>\n\n      <ng-template #fieldPanel>\n        <ng-container *ngTemplateOutlet=\"cardTitle\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n      </ng-template>\n\n      <ng-template #cardTitle>\n        <div class=\"ajf-title-row\" [ngClass]=\"{ 'ajf-title-row-error': isInvalid(realNodeEntry.node) }\">\n          <ajf-node-icon [node]=\"realNodeEntry.node\"></ajf-node-icon>\n          &nbsp;\n          <span\n            class=\"ajf-title\"\n            [innerHTML]=\"(realNodeEntry.node.label || realNodeEntry.node.name)  | transloco\"\n          ></span>\n          <span\n            *ngIf=\"realNodeEntry.node.visibility && realNodeEntry.node.visibility?.condition !== 'true'\"\n            class=\"ajf-visibility-condition\"\n            [innerHTML]=\"'Condition: (' + realNodeEntry.node.visibility.condition + ')'\"\n          >\n          </span>\n          <span class=\"ajf-actions\">\n            <button\n              [disabled]=\"(currentEditedNode|async) === nodeEntry\"\n              (click)=\"edit($event)\"\n              mat-icon-button\n            >\n              <mat-icon>edit</mat-icon>\n            </button>\n            <button (click)=\"delete($event)\" mat-icon-button>\n              <mat-icon>delete</mat-icon>\n            </button>\n          </span>\n        </div>\n      </ng-template>\n\n      <ng-template #cardContent>\n        <div *ngIf=\"hasContent\">\n          <ajf-fb-node-entry\n            cdkDropList\n            class=\"ajf-fields-list\"\n            *ngFor=\"let contentEntry of realNodeEntry.content; let isFirstChild = first; let idx = index\"\n            [id]=\"assignId()\"\n            [level]=\"level + 1\"\n            [isFirst]=\"isFirstChild\"\n            [firstBranchColor]=\"branchColors[idx]\"\n            [nodeEntry]=\"contentEntry\"\n            [cdkDropListEnterPredicate]=\"disableSlideDrop\"\n            (cdkDropListDropped)=\"onDrop($event, true)\"\n          ></ajf-fb-node-entry>\n          <mat-card\n            appearance=\"outlined\"\n            class=\"ajf-empty\"\n            *ngIf=\"realNodeEntry.content.length === 0\"\n            cdkDropList\n            [id]=\"assignId(true)\"\n            [cdkDropListEnterPredicate]=\"disableSlideDrop\"\n            (cdkDropListDropped)=\"onDrop($event, true)\"\n            ><mat-card-title>Drop your fields here</mat-card-title></mat-card\n          >\n        </div>\n      </ng-template>\n    </ng-template>\n  </div>\n\n  <ng-template [ngIf]=\"isNodeEntry\">\n    <ng-container *ngFor=\"let childNodeEntry of realNodeEntry.children; let idx = index\">\n      <ajf-fb-node-entry\n        *ngIf=\"!isLastNode()\"\n        [level]=\"level\"\n        [originOffset]=\"idx\"\n        [firstBranchColor]=\"branchColors[idx]\"\n        [nodeEntry]=\"childNodeEntry\"\n      ></ajf-fb-node-entry>\n    </ng-container>\n  </ng-template>\n</ng-container>\n\n<ng-template #rootEmpty>\n  <div class=\"mat-card-container\">\n    <mat-card\n      appearance=\"outlined\"\n      class=\"ajf-empty\"\n      cdkDropList\n      [cdkDropListEnterPredicate]=\"emptyAreaDropPredicate()\"\n      (cdkDropListDropped)=\"onDrop($event)\"\n      ><mat-card-title>Drop your slides here</mat-card-title>\n    </mat-card>\n  </div>\n</ng-template>\n", styles: ["ajf-fb-node-entry{display:block;position:relative}ajf-fb-node-entry .mat-card-container{position:relative}ajf-fb-node-entry .mat-card-container .ajf-origin-line{position:absolute;top:0;left:25px;width:25px;height:25px;border-bottom:2px solid;border-left:2px solid;border-bottom-left-radius:.5em}ajf-fb-node-entry .mat-card-container .mat-mdc-card{margin-left:50px;padding:.5em 1em}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row{display:flex;flex:1 1 auto;flex-direction:row wrap;align-items:center}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row>.ajf-title{flex:1 1 auto;max-width:25vw;margin-right:10px}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row>.ajf-visibility-condition{flex:1 1 auto;font-size:10px;color:#999;max-height:100px;max-width:25vw;overflow:hidden;text-overflow:ellipsis}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row>.ajf-actions{flex:1 1 auto;display:flex;justify-content:flex-end;white-space:nowrap;justify-self:flex-end}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row-error{color:var(--palette-warn-500, #c62828)}ajf-fb-node-entry .mat-card-container .mat-mdc-card.ajf-empty{line-height:36px;border:2px dashed;box-shadow:none;box-sizing:border-box;text-align:center;color:#ccc}ajf-fb-node-entry .mat-card-container .mat-mdc-card.ajf-draggable-box{padding:5px;border-bottom:solid 1px #ccc;border-right:solid 1px #ccc;box-sizing:border-box;cursor:move;font-size:14px}ajf-fb-node-entry .mat-card-container.ajf-highlighted-formbuilder-node>mat-card{background-color:var(--palette-primary-100, #fff9c4)!important;color:var(--palette-primary-500)}ajf-fb-node-entry .ajf-highlighted-formbuilder-node .mat-mdc-card .mat-expansion-panel .mat-expansion-panel-header{background-color:var(--palette-primary-100, #fff9c4)!important;color:var(--palette-primary-500)}ajf-fb-node-entry.ajf-fields-list{max-width:80%;min-height:60px;display:block;background:#fff;border-radius:4px;overflow:hidden}ajf-fb-node-entry .cdk-drag-placeholder{opacity:.4;min-height:60px;margin-left:50px;border:1px solid #ccc;border-radius:4px;background-color:#fff9c4}ajf-fb-node-entry .ajf-fields-list.cdk-drop-list-dragging .ajf-draggable-box:not(.cdk-drag-placeholder),ajf-fb-node-entry .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
+            args: [{ selector: 'ajf-fb-node-entry', host: { '(window.resize)': 'onResize()' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"nodeEntry; else rootEmpty\">\n  <ng-template [ngIf]=\"isNodeEntry && !isLastNode()\">\n    <ajf-fb-branch-line\n      *ngFor=\"let childNodeEntry of realNodeEntry.children; let idx = index\"\n      [offset]=\"idx\"\n      [color]=\"branchColors[idx]\"\n    ></ajf-fb-branch-line>\n  </ng-template>\n\n  <div\n    class=\"mat-card-container\"\n    [class.ajf-highlighted-formbuilder-node]=\"(currentEditedNode|async) === nodeEntry\"\n  >\n    <div\n      *ngIf=\"!isFirst\"\n      class=\"ajf-origin-line\"\n      [style.margin-left]=\"originLeftMargin\"\n      [style.border-color]=\"firstBranchColor\"\n    ></div>\n    <ng-template [ngIf]=\"isNodeEntry\">\n      <ng-container *ngIf=\"!isDraggable; else draggable\">\n        <mat-card appearance=\"outlined\">\n          <ng-container *ngTemplateOutlet=\"cardTitle\"></ng-container>\n          <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n        </mat-card>\n      </ng-container>\n\n      <ng-template #draggable>\n        <mat-card\n          appearance=\"outlined\"\n          cdkDrag\n          [cdkDragData]=\"realNodeEntry\"\n          class=\"ajf-draggable-box\"\n        >\n          <ng-container *ngIf=\"isSlide(realNodeEntry.node); else fieldPanel\">\n            <ng-container *ngTemplateOutlet=\"slidePanel\"></ng-container>\n          </ng-container>\n        </mat-card>\n      </ng-template>\n\n      <ng-template #slidePanel>\n        <mat-expansion-panel\n          [expanded]=\"isExpanded()|async\"\n          (opened)=\"updateExpandedStatus(true)\"\n          (closed)=\"updateExpandedStatus(false)\"\n          class=\"mat-elevation-z\"\n        >\n          <mat-expansion-panel-header>\n            <ng-container *ngTemplateOutlet=\"cardTitle\"></ng-container>\n          </mat-expansion-panel-header>\n          <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n        </mat-expansion-panel>\n      </ng-template>\n\n      <ng-template #fieldPanel>\n        <ng-container *ngTemplateOutlet=\"cardTitle\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n      </ng-template>\n\n      <ng-template #cardTitle>\n        <div class=\"ajf-title-row\" [ngClass]=\"{ 'ajf-title-row-error': isInvalid(realNodeEntry.node) }\">\n          <ajf-node-icon [node]=\"realNodeEntry.node\"></ajf-node-icon>\n          &nbsp;\n          <span\n            class=\"ajf-title\"\n            [innerHTML]=\"(realNodeEntry.node.label || realNodeEntry.node.name)  | transloco\"\n          ></span>\n          <span\n            *ngIf=\"realNodeEntry.node.visibility && realNodeEntry.node.visibility?.condition !== 'true'\"\n            class=\"ajf-visibility-condition\"\n            [innerHTML]=\"'Condition: (' + realNodeEntry.node.visibility.condition + ')'\"\n          >\n          </span>\n          <span class=\"ajf-actions\">\n            <button\n              [disabled]=\"(currentEditedNode|async) === nodeEntry\"\n              (click)=\"edit($event)\"\n              mat-icon-button\n            >\n              <mat-icon>edit</mat-icon>\n            </button>\n            <button (click)=\"delete($event)\" mat-icon-button>\n              <mat-icon>delete</mat-icon>\n            </button>\n          </span>\n        </div>\n      </ng-template>\n\n      <ng-template #cardContent>\n        <div *ngIf=\"hasContent\">\n          <ajf-fb-node-entry\n            cdkDropList\n            class=\"ajf-fields-list\"\n            *ngFor=\"let contentEntry of realNodeEntry.content; let isFirstChild = first; let idx = index\"\n            [id]=\"assignId()\"\n            [level]=\"level + 1\"\n            [isFirst]=\"isFirstChild\"\n            [firstBranchColor]=\"branchColors[idx]\"\n            [nodeEntry]=\"contentEntry\"\n            [cdkDropListEnterPredicate]=\"disableSlideDrop\"\n            (cdkDropListDropped)=\"onDrop($event, true)\"\n          ></ajf-fb-node-entry>\n          <mat-card\n            appearance=\"outlined\"\n            class=\"ajf-empty\"\n            *ngIf=\"realNodeEntry.content.length === 0\"\n            cdkDropList\n            [id]=\"assignId(true)\"\n            [cdkDropListEnterPredicate]=\"disableSlideDrop\"\n            (cdkDropListDropped)=\"onDrop($event, true)\"\n            ><mat-card-title>Drop your fields here</mat-card-title></mat-card\n          >\n        </div>\n      </ng-template>\n    </ng-template>\n  </div>\n\n  <ng-template [ngIf]=\"isNodeEntry\">\n    <ng-container *ngFor=\"let childNodeEntry of realNodeEntry.children; let idx = index\">\n      <ajf-fb-node-entry\n        *ngIf=\"!isLastNode()\"\n        [level]=\"level\"\n        [originOffset]=\"idx\"\n        [firstBranchColor]=\"branchColors[idx]\"\n        [nodeEntry]=\"childNodeEntry\"\n      ></ajf-fb-node-entry>\n    </ng-container>\n  </ng-template>\n</ng-container>\n\n<ng-template #rootEmpty>\n  <div class=\"mat-card-container\">\n    <mat-card\n      appearance=\"outlined\"\n      class=\"ajf-empty\"\n      cdkDropList\n      [cdkDropListEnterPredicate]=\"emptyAreaDropPredicate()\"\n      (cdkDropListDropped)=\"onDrop($event)\"\n      ><mat-card-title>Drop your slides here</mat-card-title>\n    </mat-card>\n  </div>\n</ng-template>\n", styles: ["ajf-fb-node-entry{display:block;position:relative}ajf-fb-node-entry .mat-card-container{position:relative}ajf-fb-node-entry .mat-card-container .ajf-origin-line{position:absolute;top:0;left:25px;width:25px;height:25px;border-bottom:2px solid;border-left:2px solid;border-bottom-left-radius:.5em}ajf-fb-node-entry .mat-card-container .mat-mdc-card{margin-left:50px;padding:.5em 1em}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row{display:flex;flex:1 1 auto;flex-direction:row wrap;align-items:center}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row>.ajf-title{flex:1 1 auto;max-width:25vw;margin-right:10px}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row>.ajf-visibility-condition{flex:1 1 auto;font-size:10px;color:color-mix(in srgb,currentColor 60%,transparent);max-height:100px;max-width:25vw;overflow:hidden;text-overflow:ellipsis}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row>.ajf-actions{flex:1 1 auto;display:flex;justify-content:flex-end;white-space:nowrap;justify-self:flex-end}ajf-fb-node-entry .mat-card-container .mat-mdc-card .ajf-title-row-error{color:rgb(var(--palette-warn-500, 198 40 40))}ajf-fb-node-entry .mat-card-container .mat-mdc-card.ajf-empty{line-height:36px;border:2px dashed;box-shadow:none;box-sizing:border-box;text-align:center;color:color-mix(in srgb,currentColor 40%,transparent)}ajf-fb-node-entry .mat-card-container .mat-mdc-card.ajf-draggable-box{padding:5px;border-bottom:solid 1px color-mix(in srgb,currentColor 12%,transparent);border-right:solid 1px color-mix(in srgb,currentColor 12%,transparent);box-sizing:border-box;cursor:move;font-size:14px}ajf-fb-node-entry .mat-card-container.ajf-highlighted-formbuilder-node>.mat-mdc-card{outline:2px solid currentColor;outline-offset:-1px}ajf-fb-node-entry.ajf-fields-list{max-width:80%;min-height:60px;display:block;background:color-mix(in srgb,currentColor 4%,transparent);border-radius:4px;overflow:hidden}ajf-fb-node-entry .cdk-drag-placeholder{opacity:.4;min-height:60px;margin-left:50px;border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:4px;background-color:color-mix(in srgb,currentColor 12%,transparent)}ajf-fb-node-entry .ajf-fields-list.cdk-drop-list-dragging .ajf-draggable-box:not(.cdk-drag-placeholder),ajf-fb-node-entry .cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: () => [{ type: AjfFormBuilderService }], propDecorators: { branchLines: [{
                 type: ViewChildren,
                 args: [AjfFbBranchLine]
@@ -1864,7 +1894,7 @@ class AjfFbValidationConditionEditorDialog {
         this.dialogRef.close(this.editor.formulaEditorControl.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbValidationConditionEditorDialog, deps: [{ token: AjfFormBuilderService }, { token: i2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbValidationConditionEditorDialog, selector: "ajf-fb-validation-condition-editor-dialog", viewQueries: [{ propertyName: "editor", first: true, predicate: AjfFbConditionEditor, descendants: true }], ngImport: i0, template: "<h3 matDialogTitle>{{'Edit condition'|transloco}}</h3>\n<mat-dialog-content>\n  <mat-form-field>\n    <input\n      matInput\n      [(ngModel)]=\"errorMessage\"\n      [placeholder]=\"'Error message'|transloco\"\n    />\n  </mat-form-field>\n  <ajf-condition-editor\n    *ngIf=\"fields|async as curFields\"\n    [fields]=\"curFields!\"\n    [condition]=\"condition\"\n  ></ajf-condition-editor>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button (click)=\"saveCondition()\">{{'Save'|transloco}}</button>\n  <button mat-button (click)=\"closeDialog()\">{{'Close'|transloco}}</button>\n</mat-dialog-actions>\n", styles: ["ajf-fb-validation-condition-editor-dialog .mat-mdc-dialog-content{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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]" }, { kind: "component", type: i9.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: "component", type: AjfFbConditionEditor, selector: "ajf-condition-editor", inputs: ["fields", "condition"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbValidationConditionEditorDialog, selector: "ajf-fb-validation-condition-editor-dialog", viewQueries: [{ propertyName: "editor", first: true, predicate: AjfFbConditionEditor, descendants: true }], ngImport: i0, template: "<h3 matDialogTitle>{{'Edit condition'|transloco}}</h3>\n<mat-dialog-content>\n  <mat-form-field>\n    <input\n      matInput\n      [(ngModel)]=\"errorMessage\"\n      [placeholder]=\"'Error message'|transloco\"\n    />\n  </mat-form-field>\n  <ajf-condition-editor\n    *ngIf=\"fields|async as curFields\"\n    [fields]=\"curFields!\"\n    [condition]=\"condition\"\n  ></ajf-condition-editor>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button (click)=\"saveCondition()\">{{'Save'|transloco}}</button>\n  <button mat-button (click)=\"closeDialog()\">{{'Close'|transloco}}</button>\n</mat-dialog-actions>\n", styles: ["ajf-fb-validation-condition-editor-dialog .mat-mdc-dialog-content{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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]" }, { kind: "component", type: i7.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: "component", type: AjfFbConditionEditor, selector: "ajf-condition-editor", inputs: ["fields", "condition"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbValidationConditionEditorDialog, decorators: [{
             type: Component,
@@ -1895,7 +1925,7 @@ class AjfFbWarningConditionEditorDialog {
         this.dialogRef.close(this.editor.formulaEditorControl.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbWarningConditionEditorDialog, deps: [{ token: AjfFormBuilderService }, { token: i2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbWarningConditionEditorDialog, selector: "ajf-fb-warning-condition-editor-dialog", viewQueries: [{ propertyName: "editor", first: true, predicate: AjfFbConditionEditor, descendants: true }], ngImport: i0, template: "<h3 matDialogTitle>{{'Edit condition'|transloco}}</h3>\n<mat-dialog-content>\n  <mat-form-field>\n    <input\n      matInput\n      [(ngModel)]=\"warningMessage\"\n      [placeholder]=\"'Warning message' | transloco\"\n    />\n  </mat-form-field>\n  <ajf-condition-editor\n    *ngIf=\"fields|async as curFields\"\n    [fields]=\"curFields!\"\n    [condition]=\"condition\"\n  ></ajf-condition-editor>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button (click)=\"saveCondition()\">{{'Save'|transloco}}</button>\n  <button mat-button (click)=\"closeDialog()\">{{'Close'|transloco}}</button>\n</mat-dialog-actions>\n", styles: ["ajf-fb-warning-condition-editor-dialog .mat-mdc-dialog-content{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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]" }, { kind: "component", type: i9.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: "component", type: AjfFbConditionEditor, selector: "ajf-condition-editor", inputs: ["fields", "condition"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbWarningConditionEditorDialog, selector: "ajf-fb-warning-condition-editor-dialog", viewQueries: [{ propertyName: "editor", first: true, predicate: AjfFbConditionEditor, descendants: true }], ngImport: i0, template: "<h3 matDialogTitle>{{'Edit condition'|transloco}}</h3>\n<mat-dialog-content>\n  <mat-form-field>\n    <input\n      matInput\n      [(ngModel)]=\"warningMessage\"\n      [placeholder]=\"'Warning message' | transloco\"\n    />\n  </mat-form-field>\n  <ajf-condition-editor\n    *ngIf=\"fields|async as curFields\"\n    [fields]=\"curFields!\"\n    [condition]=\"condition\"\n  ></ajf-condition-editor>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-button (click)=\"saveCondition()\">{{'Save'|transloco}}</button>\n  <button mat-button (click)=\"closeDialog()\">{{'Close'|transloco}}</button>\n</mat-dialog-actions>\n", styles: ["ajf-fb-warning-condition-editor-dialog .mat-mdc-dialog-content{overflow:visible}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { 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]" }, { kind: "component", type: i7.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: "component", type: AjfFbConditionEditor, selector: "ajf-condition-editor", inputs: ["fields", "condition"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbWarningConditionEditorDialog, decorators: [{
             type: Component,
@@ -3056,11 +3086,11 @@ class AjfFbNodeProperties {
         return 'condition';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbNodeProperties, deps: [{ token: i0.ChangeDetectorRef }, { token: AjfFormBuilderService }, { token: i2.MatDialog }, { token: i3$1.UntypedFormBuilder }, { token: AjfNodePropertiesNameMatchValidator }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbNodeProperties, selector: "ajf-fb-node-properties", ngImport: i0, template: "<div [style.display]=\"(enabled|async) ? 'none' : 'block'\" class=\"ajf-disabled-overlay\"></div>\n<ng-container *ngIf=\"nodeEntry|async as ne\">\n  <ng-container *ngIf=\"propertiesForm|async as pf\">\n    <div class=\"ajf-header\">\n      <h3>{{'Properties'|transloco}}</h3>\n      <button\n        mat-icon-button\n        [disabled]=\"pf.status !== 'VALID'\"\n        (click)=\"save()\"\n      >\n        <mat-icon>save</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"cancel()\">\n        <mat-icon>cancel</mat-icon>\n      </button>  \n    </div>\n    <mat-error *ngIf=\"pf?.invalid\">\n      {{allErrorMessages(pf)}}\n    </mat-error>\n    <form [formGroup]=\"pf!\" novalidate>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <input matInput formControlName=\"name\" [placeholder]=\"'Name' | transloco\" />\n          <mat-error *ngIf=\"pf.get('name')?.invalid\">\n            {{fieldErrorMessage(pf.get('name'), 'Name')}}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <input matInput formControlName=\"label\" [placeholder]=\"'Label' | transloco\" />\n          <mat-error *ngIf=\"pf.get('label')?.invalid\">\n            {{fieldErrorMessage(pf.get('label'), 'Label')}}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <ng-template [ngIf]=\"isEmptyField(ne!.node)\">\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input matInput formControlName=\"HTML\" [placeholder]=\"'HTML' | transloco\" />\n          </mat-form-field>\n        </div>\n      </ng-template>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <mat-label>{{'Visibility'|transloco}}</mat-label>\n          <mat-select formControlName=\"visibilityOpt\" [placeholder]=\"'Visible' | transloco\">\n            <mat-option value=\"always\">{{'Always'|transloco}}</mat-option>\n            <mat-option value=\"never\">{{'Never'|transloco}}</mat-option>\n            <mat-option value=\"condition\">{{'Condition...'|transloco}}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <button\n          (click)=\"editVisibility()\"\n          [disabled]=\"pf!.value.visibilityOpt !== 'condition'\"\n          mat-raised-button\n          [matTooltip]=\"curVisibility || ''\"\n        >\n          <div class=\"ajf-icon-cont\">\n            <mat-icon>edit</mat-icon>\n            <span><code>{{ curVisibility }}</code></span>\n          </div>\n        </button>\n      </div>\n      <div class=\"ajf-prop\">\n        <div><label>{{'Branches'|transloco}}</label></div>\n        <div>\n          <mat-slider discrete min=\"1\" max=\"5\" step=\"1\"\n            ><input matSliderThumb formControlName=\"conditionalBranchesNum\"\n          /></mat-slider>\n        </div>\n        <div *ngFor=\"let branch of conditionalBranches; let idx = index\">\n          <button (click)=\"editConditionalBranch(idx)\" mat-raised-button [matTooltip]=\"branch\">\n            <div class=\"ajf-icon-cont\">\n              <mat-icon>edit</mat-icon>\n              <span><code>{{ branch }}</code></span>\n            </div>\n          </button>\n        </div>\n      </div>\n      <ng-template [ngIf]=\"isRepeatingContainerNode(ne)\">\n        <div class=\"ajf-prop\">\n          <div><label>{{'Min repetitions'|transloco}}</label></div>\n          <div>\n            <mat-slider discrete min=\"1\" max=\"5\" step=\"1\"\n              ><input  formControlName=\"minReps\" matSliderThumb\n            /></mat-slider>\n          </div>\n          <div><label>{{'Max repetitions'|transloco}}</label></div>\n          <div>\n            <mat-slider discrete min=\"1\" max=\"5\" step=\"1\"\n              ><input formControlName=\"maxReps\" matSliderThumb\n            /></mat-slider>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template [ngIf]=\"isField(ne)\">\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"readonlyField\">{{'Readonly'|transloco}}</mat-checkbox>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <mat-label>{{'Field size'|transloco}}</mat-label>\n            <mat-select formControlName=\"size\" [placeholder]=\"'Size' | transloco\">\n              <mat-option *ngFor=\"let fieldSize of fieldSizes\" [value]=\"fieldSize.value\">\n                {{ fieldSize.label|transloco }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input matInput formControlName=\"hint\" [placeholder]=\"'Hint' | transloco\" />\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <textarea\n              matInput\n              formControlName=\"description\"\n              [placeholder]=\"'Description' | transloco\"\n            ></textarea>\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input\n              matInput\n              formControlName=\"defaultValue\"\n              [placeholder]=\"'Default value' | transloco\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <div><label>{{'Formula'|transloco}}</label></div>\n          <div>\n            <button (click)=\"editFormula()\" mat-raised-button [matTooltip]=\"curFormula || ''\">\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ curFormula }}</code></span>\n              </div>\n            </button>\n          </div>\n        </div>\n        <!-- <div class=\"ajf-prop\">\n          <div><label>{{'Force value'|translco}}</label></div>\n          <div>\n            <button (click)=\"editForceValue()\" mat-raised-button [matTooltip]=\"curForceValue\">\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ curForceValue }}</span>\n              </div>\n            </button>\n          </div>\n        </div> -->\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"notEmpty\">{{'Not empty'|transloco}}</mat-checkbox>\n        </div>\n        <ng-template [ngIf]=\"isNumericField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input matInput formControlName=\"minValue\" [placeholder]=\"'Min value' | transloco\" />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input matInput formControlName=\"maxValue\" [placeholder]=\"'Max value' | transloco\" />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"minDigits\"\n                [placeholder]=\"'Min digits' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"maxDigits\"\n                [placeholder]=\"'Max digits' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n        </ng-template>\n        <ng-template [ngIf]=\"isRangeField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"start\"\n                [placeholder]=\"'Start' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"end\"\n                [placeholder]=\"'End' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"step\"\n                [placeholder]=\"'Step' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <mat-select formControlName=\"appearance\" [placeholder]=\"'Appearance' | transloco\">\n                <mat-option [value]=\"null\">{{'Default'|transloco}}</mat-option>\n                <mat-option value=\"rating\">{{'Rating'|transloco}}</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </ng-template>\n        <div class=\"ajf-prop\">\n          <div class=\"ajf-header\">\n            <label>{{ 'Validation' | transloco }}</label>\n            <mat-icon class=\"ajf-pointer\" (click)=\"addValidationCondition()\"\n              >add_circle_outline</mat-icon\n            >\n          </div>\n          <div *ngIf=\"validationConditions.length === 0\" class=\"ajf-validation-row ajf-emph\">\n            {{'No conditions'|transloco}}\n          </div>\n          <div\n            class=\"ajf-validation-row\"\n            *ngFor=\"let validationCondition of validationConditions; let idx = index\"\n          >\n            <button\n              (click)=\"editValidationCondition(idx)\"\n              mat-raised-button\n              [matTooltip]=\"validationCondition.condition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ validationCondition.condition }}</code></span>\n              </div>\n            </button>\n            <mat-icon class=\"ajf-pointer\" (click)=\"removeValidationCondition(idx)\"\n              >remove_circle_outline</mat-icon\n            >\n          </div>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"notEmptyWarning\"\n            >{{'Not empty warning'|transloco}}</mat-checkbox\n          >\n        </div>\n        <div class=\"ajf-prop\">\n          <div class=\"ajf-header\">\n            <label>{{'Warnings'|transloco}}</label>\n            <mat-icon class=\"ajf-pointer\" (click)=\"addWarningCondition()\"\n              >add_circle_outline</mat-icon\n            >\n          </div>\n          <div *ngIf=\"warningConditions.length === 0\" class=\"ajf-validation-row ajf-emph\">\n            {{'No warnings'|transloco}}\n          </div>\n          <div\n            class=\"ajf-validation-row\"\n            *ngFor=\"let warningCondition of warningConditions; let idx = index\"\n          >\n            <button\n              (click)=\"editWarningCondition(idx)\"\n              mat-raised-button\n              [matTooltip]=\"warningCondition.condition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ warningCondition.condition }}</code></span>\n              </div>\n            </button>\n            <mat-icon class=\"ajf-pointer\" (click)=\"removeWarningCondition(idx)\"\n              >remove_circle_outline</mat-icon\n            >\n          </div>\n        </div>\n        <div class=\"ajf-prop\">\n          <div><label>{{'Go to next slide condition'|transloco}}</label></div>\n          <div>\n            <button\n              (click)=\"editNextSlideCondition()\"\n              mat-raised-button\n              [matTooltip]=\"nextSlideCondition || ''\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ nextSlideCondition }}</code></span>\n              </div>\n            </button>\n          </div>\n        </div>\n        <ng-template [ngIf]=\"isFieldWithChoices(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <mat-label>{{'Choices origins'|transloco}}</mat-label>\n              <mat-select formControlName=\"choicesOriginRef\" [placeholder]=\"'Choices' | transloco\">\n                <mat-option\n                  *ngFor=\"let choicesOrigin of choicesOrigins\"\n                  [value]=\"choicesOrigin.name\"\n                >\n                  {{ (choicesOrigin.label || choicesOrigin.name)|transloco }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"pf.get('choicesOriginRef')?.invalid\">\n                {{fieldErrorMessage(pf.get('choicesOriginRef'), 'choicesOriginRef')}}\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <div><label>{{'Choices filter'|transloco}}</label></div>\n            <div>\n              <button\n                (click)=\"editChoicesFilter()\"\n                mat-raised-button\n                [matTooltip]=\"curChoicesFilter || ''\"\n              >\n                <div class=\"ajf-icon-cont\">\n                  <mat-icon>edit</mat-icon>\n                  <span><code>{{ curChoicesFilter }}</code></span>\n                </div>\n              </button>\n            </div>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-checkbox\n              formControlName=\"forceExpanded\"\n              #forceExpanded\n              (change)=\"forceCheckbox($event.checked, forceNarrow)\"\n              >{{'Force expanded selection'|transloco}}</mat-checkbox\n            >\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-checkbox\n              formControlName=\"forceNarrow\"\n              #forceNarrow\n              (change)=\"forceCheckbox($event.checked, forceExpanded)\"\n              >{{'Force narrow selection'|transloco}}</mat-checkbox\n            >\n          </div>\n          <div class=\"ajf-prop\">\n            <div class=\"ajf-header\">\n              <label>{{'Trigger selection'|transloco}}</label>\n              <mat-icon class=\"ajf-pointer\" (click)=\"addTriggerCondition()\"\n                >add_circle_outline</mat-icon\n              >\n            </div>\n            <div\n              *ngIf=\"!triggerConditions || triggerConditions.length === 0\"\n              class=\"ajf-validation-row ajf-emph\"\n            >\n              {{'No trigger condition'|transloco}}\n            </div>\n            <div\n              class=\"ajf-validation-row\"\n              *ngFor=\"let triggerCondition of triggerConditions; let idx = index\"\n            >\n              <button\n                (click)=\"editTriggerCondition(idx)\"\n                mat-raised-button\n                [matTooltip]=\"triggerCondition\"\n              >\n                <div class=\"ajf-icon-cont\">\n                  <mat-icon>edit</mat-icon>\n                  <span><code>{{ triggerCondition }}</code></span>\n                </div>\n              </button>\n              <mat-icon class=\"pointer\" (click)=\"removeTriggerCondition(idx)\"\n                >remove_circle_outline</mat-icon\n              >\n            </div>\n          </div>\n        </ng-template>\n        <ng-container *ngIf=\"isTableField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-checkbox formControlName=\"hideEmptyRows\"\n              >{{'Hide empty rows'|transloco}}</mat-checkbox\n            >\n            <mat-form-field>\n              <textarea\n                matInput\n                formControlName=\"tableDef\"\n                [placeholder]=\"'Table definition' | transloco\"\n              ></textarea>\n              <mat-error *ngIf=\"pf.get('tableDef')?.invalid\">\n                {{fieldErrorMessage(pf.get('tableDef'), 'tableDef')}}\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </ng-container>\n      </ng-template>\n    </form>\n  </ng-container>\n</ng-container>\n", styles: ["ajf-fb-node-properties{display:block;padding:2px 2px 2px 5px;position:relative}ajf-fb-node-properties mat-icon{cursor:pointer}ajf-fb-node-properties .ajf-header{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}ajf-fb-node-properties .ajf-header>h3,ajf-fb-node-properties .ajf-header>label{flex:1 0 auto;margin-right:.5em}ajf-fb-node-properties .ajf-header>mat-icon{flex:0 0 auto;margin-left:.5em}ajf-fb-node-properties .ajf-disabled-overlay{position:absolute;inset:0;opacity:.4;background-color:#fff}ajf-fb-node-properties .ajf-emph{font-style:italic}ajf-fb-node-properties [mat-raised-button]{margin:.5em 0}ajf-fb-node-properties [mat-raised-button].ajf-pointer{cursor:pointer}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont{display:flex;flex-direction:row;align-items:center;position:relative}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;display:block;margin:auto;position:relative;max-height:30px;max-width:100%}ajf-fb-node-properties .ajf-validation-row{margin:.5em 0;display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties .ajf-validation-row button{flex:1 1 auto}ajf-fb-node-properties .ajf-validation-row mat-icon{flex:0 0 auto}ajf-fb-node-properties .ajf-prop{margin:.5em 0}ajf-fb-node-properties .ajf-prop .mdc-button__label{max-width:100%}ajf-fb-node-properties mat-form-field,ajf-fb-node-properties mat-slider,ajf-fb-node-properties [mat-raised-button]{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "directive", type: i9.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i12.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: i13.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i13.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbNodeProperties, selector: "ajf-fb-node-properties", ngImport: i0, template: "<div [style.display]=\"(enabled|async) ? 'none' : 'block'\" class=\"ajf-disabled-overlay\"></div>\n<ng-container *ngIf=\"nodeEntry|async as ne\">\n  <ng-container *ngIf=\"propertiesForm|async as pf\">\n    <div class=\"ajf-header\">\n      <h3>{{'Properties'|transloco}}</h3>\n      <button\n        mat-icon-button\n        [disabled]=\"pf.status !== 'VALID'\"\n        (click)=\"save()\"\n      >\n        <mat-icon>save</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"cancel()\">\n        <mat-icon>cancel</mat-icon>\n      </button>  \n    </div>\n    <mat-error *ngIf=\"pf?.invalid\">\n      {{allErrorMessages(pf)}}\n    </mat-error>\n    <form [formGroup]=\"pf!\" novalidate>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <input matInput formControlName=\"name\" [placeholder]=\"'Name' | transloco\" />\n          <mat-error *ngIf=\"pf.get('name')?.invalid\">\n            {{fieldErrorMessage(pf.get('name'), 'Name')}}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <input matInput formControlName=\"label\" [placeholder]=\"'Label' | transloco\" />\n          <mat-error *ngIf=\"pf.get('label')?.invalid\">\n            {{fieldErrorMessage(pf.get('label'), 'Label')}}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <ng-template [ngIf]=\"isEmptyField(ne!.node)\">\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input matInput formControlName=\"HTML\" [placeholder]=\"'HTML' | transloco\" />\n          </mat-form-field>\n        </div>\n      </ng-template>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <mat-label>{{'Visibility'|transloco}}</mat-label>\n          <mat-select formControlName=\"visibilityOpt\" [placeholder]=\"'Visible' | transloco\">\n            <mat-option value=\"always\">{{'Always'|transloco}}</mat-option>\n            <mat-option value=\"never\">{{'Never'|transloco}}</mat-option>\n            <mat-option value=\"condition\">{{'Condition...'|transloco}}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <button\n          (click)=\"editVisibility()\"\n          [disabled]=\"pf!.value.visibilityOpt !== 'condition'\"\n          mat-raised-button\n          [matTooltip]=\"curVisibility || ''\"\n        >\n          <div class=\"ajf-icon-cont\">\n            <mat-icon>edit</mat-icon>\n            <span><code>{{ curVisibility }}</code></span>\n          </div>\n        </button>\n      </div>\n      <div class=\"ajf-prop\">\n        <div><label>{{'Branches'|transloco}}</label></div>\n        <div>\n          <mat-slider discrete min=\"1\" max=\"5\" step=\"1\"\n            ><input matSliderThumb formControlName=\"conditionalBranchesNum\"\n          /></mat-slider>\n        </div>\n        <div *ngFor=\"let branch of conditionalBranches; let idx = index\">\n          <button (click)=\"editConditionalBranch(idx)\" mat-raised-button [matTooltip]=\"branch\">\n            <div class=\"ajf-icon-cont\">\n              <mat-icon>edit</mat-icon>\n              <span><code>{{ branch }}</code></span>\n            </div>\n          </button>\n        </div>\n      </div>\n      <ng-template [ngIf]=\"isRepeatingContainerNode(ne)\">\n        <div class=\"ajf-prop\">\n          <div><label>{{'Min repetitions'|transloco}}</label></div>\n          <div>\n            <mat-slider discrete min=\"1\" max=\"5\" step=\"1\"\n              ><input  formControlName=\"minReps\" matSliderThumb\n            /></mat-slider>\n          </div>\n          <div><label>{{'Max repetitions'|transloco}}</label></div>\n          <div>\n            <mat-slider discrete min=\"1\" max=\"5\" step=\"1\"\n              ><input formControlName=\"maxReps\" matSliderThumb\n            /></mat-slider>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template [ngIf]=\"isField(ne)\">\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"readonlyField\">{{'Readonly'|transloco}}</mat-checkbox>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <mat-label>{{'Field size'|transloco}}</mat-label>\n            <mat-select formControlName=\"size\" [placeholder]=\"'Size' | transloco\">\n              <mat-option *ngFor=\"let fieldSize of fieldSizes\" [value]=\"fieldSize.value\">\n                {{ fieldSize.label|transloco }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input matInput formControlName=\"hint\" [placeholder]=\"'Hint' | transloco\" />\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <textarea\n              matInput\n              formControlName=\"description\"\n              [placeholder]=\"'Description' | transloco\"\n            ></textarea>\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input\n              matInput\n              formControlName=\"defaultValue\"\n              [placeholder]=\"'Default value' | transloco\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <div><label>{{'Formula'|transloco}}</label></div>\n          <div>\n            <button (click)=\"editFormula()\" mat-raised-button [matTooltip]=\"curFormula || ''\">\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ curFormula }}</code></span>\n              </div>\n            </button>\n          </div>\n        </div>\n        <!-- <div class=\"ajf-prop\">\n          <div><label>{{'Force value'|translco}}</label></div>\n          <div>\n            <button (click)=\"editForceValue()\" mat-raised-button [matTooltip]=\"curForceValue\">\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ curForceValue }}</span>\n              </div>\n            </button>\n          </div>\n        </div> -->\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"notEmpty\">{{'Not empty'|transloco}}</mat-checkbox>\n        </div>\n        <ng-template [ngIf]=\"isNumericField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input matInput formControlName=\"minValue\" [placeholder]=\"'Min value' | transloco\" />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input matInput formControlName=\"maxValue\" [placeholder]=\"'Max value' | transloco\" />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"minDigits\"\n                [placeholder]=\"'Min digits' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"maxDigits\"\n                [placeholder]=\"'Max digits' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n        </ng-template>\n        <ng-template [ngIf]=\"isRangeField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"start\"\n                [placeholder]=\"'Start' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"end\"\n                [placeholder]=\"'End' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"step\"\n                [placeholder]=\"'Step' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <mat-select formControlName=\"appearance\" [placeholder]=\"'Appearance' | transloco\">\n                <mat-option [value]=\"null\">{{'Default'|transloco}}</mat-option>\n                <mat-option value=\"rating\">{{'Rating'|transloco}}</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </ng-template>\n        <div class=\"ajf-prop\">\n          <div class=\"ajf-header\">\n            <label>{{ 'Validation' | transloco }}</label>\n            <mat-icon class=\"ajf-pointer\" (click)=\"addValidationCondition()\"\n              >add_circle_outline</mat-icon\n            >\n          </div>\n          <div *ngIf=\"validationConditions.length === 0\" class=\"ajf-validation-row ajf-emph\">\n            {{'No conditions'|transloco}}\n          </div>\n          <div\n            class=\"ajf-validation-row\"\n            *ngFor=\"let validationCondition of validationConditions; let idx = index\"\n          >\n            <button\n              (click)=\"editValidationCondition(idx)\"\n              mat-raised-button\n              [matTooltip]=\"validationCondition.condition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ validationCondition.condition }}</code></span>\n              </div>\n            </button>\n            <mat-icon class=\"ajf-pointer\" (click)=\"removeValidationCondition(idx)\"\n              >remove_circle_outline</mat-icon\n            >\n          </div>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"notEmptyWarning\"\n            >{{'Not empty warning'|transloco}}</mat-checkbox\n          >\n        </div>\n        <div class=\"ajf-prop\">\n          <div class=\"ajf-header\">\n            <label>{{'Warnings'|transloco}}</label>\n            <mat-icon class=\"ajf-pointer\" (click)=\"addWarningCondition()\"\n              >add_circle_outline</mat-icon\n            >\n          </div>\n          <div *ngIf=\"warningConditions.length === 0\" class=\"ajf-validation-row ajf-emph\">\n            {{'No warnings'|transloco}}\n          </div>\n          <div\n            class=\"ajf-validation-row\"\n            *ngFor=\"let warningCondition of warningConditions; let idx = index\"\n          >\n            <button\n              (click)=\"editWarningCondition(idx)\"\n              mat-raised-button\n              [matTooltip]=\"warningCondition.condition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ warningCondition.condition }}</code></span>\n              </div>\n            </button>\n            <mat-icon class=\"ajf-pointer\" (click)=\"removeWarningCondition(idx)\"\n              >remove_circle_outline</mat-icon\n            >\n          </div>\n        </div>\n        <div class=\"ajf-prop\">\n          <div><label>{{'Go to next slide condition'|transloco}}</label></div>\n          <div>\n            <button\n              (click)=\"editNextSlideCondition()\"\n              mat-raised-button\n              [matTooltip]=\"nextSlideCondition || ''\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ nextSlideCondition }}</code></span>\n              </div>\n            </button>\n          </div>\n        </div>\n        <ng-template [ngIf]=\"isFieldWithChoices(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <mat-label>{{'Choices origins'|transloco}}</mat-label>\n              <mat-select formControlName=\"choicesOriginRef\" [placeholder]=\"'Choices' | transloco\">\n                <mat-option\n                  *ngFor=\"let choicesOrigin of choicesOrigins\"\n                  [value]=\"choicesOrigin.name\"\n                >\n                  {{ (choicesOrigin.label || choicesOrigin.name)|transloco }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"pf.get('choicesOriginRef')?.invalid\">\n                {{fieldErrorMessage(pf.get('choicesOriginRef'), 'choicesOriginRef')}}\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <div><label>{{'Choices filter'|transloco}}</label></div>\n            <div>\n              <button\n                (click)=\"editChoicesFilter()\"\n                mat-raised-button\n                [matTooltip]=\"curChoicesFilter || ''\"\n              >\n                <div class=\"ajf-icon-cont\">\n                  <mat-icon>edit</mat-icon>\n                  <span><code>{{ curChoicesFilter }}</code></span>\n                </div>\n              </button>\n            </div>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-checkbox\n              formControlName=\"forceExpanded\"\n              #forceExpanded\n              (change)=\"forceCheckbox($event.checked, forceNarrow)\"\n              >{{'Force expanded selection'|transloco}}</mat-checkbox\n            >\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-checkbox\n              formControlName=\"forceNarrow\"\n              #forceNarrow\n              (change)=\"forceCheckbox($event.checked, forceExpanded)\"\n              >{{'Force narrow selection'|transloco}}</mat-checkbox\n            >\n          </div>\n          <div class=\"ajf-prop\">\n            <div class=\"ajf-header\">\n              <label>{{'Trigger selection'|transloco}}</label>\n              <mat-icon class=\"ajf-pointer\" (click)=\"addTriggerCondition()\"\n                >add_circle_outline</mat-icon\n              >\n            </div>\n            <div\n              *ngIf=\"!triggerConditions || triggerConditions.length === 0\"\n              class=\"ajf-validation-row ajf-emph\"\n            >\n              {{'No trigger condition'|transloco}}\n            </div>\n            <div\n              class=\"ajf-validation-row\"\n              *ngFor=\"let triggerCondition of triggerConditions; let idx = index\"\n            >\n              <button\n                (click)=\"editTriggerCondition(idx)\"\n                mat-raised-button\n                [matTooltip]=\"triggerCondition\"\n              >\n                <div class=\"ajf-icon-cont\">\n                  <mat-icon>edit</mat-icon>\n                  <span><code>{{ triggerCondition }}</code></span>\n                </div>\n              </button>\n              <mat-icon class=\"pointer\" (click)=\"removeTriggerCondition(idx)\"\n                >remove_circle_outline</mat-icon\n              >\n            </div>\n          </div>\n        </ng-template>\n        <ng-container *ngIf=\"isTableField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-checkbox formControlName=\"hideEmptyRows\"\n              >{{'Hide empty rows'|transloco}}</mat-checkbox\n            >\n            <mat-form-field>\n              <textarea\n                matInput\n                formControlName=\"tableDef\"\n                [placeholder]=\"'Table definition' | transloco\"\n              ></textarea>\n              <mat-error *ngIf=\"pf.get('tableDef')?.invalid\">\n                {{fieldErrorMessage(pf.get('tableDef'), 'tableDef')}}\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </ng-container>\n      </ng-template>\n    </form>\n  </ng-container>\n</ng-container>\n", styles: ["ajf-fb-node-properties{display:block;padding:2px 2px 2px 5px;position:relative}ajf-fb-node-properties mat-icon{cursor:pointer}ajf-fb-node-properties .ajf-header{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}ajf-fb-node-properties .ajf-header>h3,ajf-fb-node-properties .ajf-header>label{flex:1 0 auto;margin-right:.5em}ajf-fb-node-properties .ajf-header>mat-icon{flex:0 0 auto;margin-left:.5em}ajf-fb-node-properties .ajf-disabled-overlay{position:absolute;inset:0;opacity:.4;background-color:currentColor}ajf-fb-node-properties .ajf-emph{font-style:italic}ajf-fb-node-properties [mat-raised-button]{margin:.5em 0}ajf-fb-node-properties [mat-raised-button].ajf-pointer{cursor:pointer}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont{display:flex;flex-direction:row;align-items:center;position:relative}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;display:block;margin:auto;position:relative;max-height:30px;max-width:100%}ajf-fb-node-properties .ajf-validation-row{margin:.5em 0;display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties .ajf-validation-row button{flex:1 1 auto}ajf-fb-node-properties .ajf-validation-row mat-icon{flex:0 0 auto}ajf-fb-node-properties .ajf-prop{margin:.5em 0}ajf-fb-node-properties .ajf-prop .mdc-button__label{max-width:100%}ajf-fb-node-properties mat-form-field,ajf-fb-node-properties mat-slider,ajf-fb-node-properties [mat-raised-button]{width:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.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: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "directive", type: i7.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i8$1.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: i13.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i13.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbNodeProperties, decorators: [{
             type: Component,
-            args: [{ selector: 'ajf-fb-node-properties', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.display]=\"(enabled|async) ? 'none' : 'block'\" class=\"ajf-disabled-overlay\"></div>\n<ng-container *ngIf=\"nodeEntry|async as ne\">\n  <ng-container *ngIf=\"propertiesForm|async as pf\">\n    <div class=\"ajf-header\">\n      <h3>{{'Properties'|transloco}}</h3>\n      <button\n        mat-icon-button\n        [disabled]=\"pf.status !== 'VALID'\"\n        (click)=\"save()\"\n      >\n        <mat-icon>save</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"cancel()\">\n        <mat-icon>cancel</mat-icon>\n      </button>  \n    </div>\n    <mat-error *ngIf=\"pf?.invalid\">\n      {{allErrorMessages(pf)}}\n    </mat-error>\n    <form [formGroup]=\"pf!\" novalidate>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <input matInput formControlName=\"name\" [placeholder]=\"'Name' | transloco\" />\n          <mat-error *ngIf=\"pf.get('name')?.invalid\">\n            {{fieldErrorMessage(pf.get('name'), 'Name')}}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <input matInput formControlName=\"label\" [placeholder]=\"'Label' | transloco\" />\n          <mat-error *ngIf=\"pf.get('label')?.invalid\">\n            {{fieldErrorMessage(pf.get('label'), 'Label')}}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <ng-template [ngIf]=\"isEmptyField(ne!.node)\">\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input matInput formControlName=\"HTML\" [placeholder]=\"'HTML' | transloco\" />\n          </mat-form-field>\n        </div>\n      </ng-template>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <mat-label>{{'Visibility'|transloco}}</mat-label>\n          <mat-select formControlName=\"visibilityOpt\" [placeholder]=\"'Visible' | transloco\">\n            <mat-option value=\"always\">{{'Always'|transloco}}</mat-option>\n            <mat-option value=\"never\">{{'Never'|transloco}}</mat-option>\n            <mat-option value=\"condition\">{{'Condition...'|transloco}}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <button\n          (click)=\"editVisibility()\"\n          [disabled]=\"pf!.value.visibilityOpt !== 'condition'\"\n          mat-raised-button\n          [matTooltip]=\"curVisibility || ''\"\n        >\n          <div class=\"ajf-icon-cont\">\n            <mat-icon>edit</mat-icon>\n            <span><code>{{ curVisibility }}</code></span>\n          </div>\n        </button>\n      </div>\n      <div class=\"ajf-prop\">\n        <div><label>{{'Branches'|transloco}}</label></div>\n        <div>\n          <mat-slider discrete min=\"1\" max=\"5\" step=\"1\"\n            ><input matSliderThumb formControlName=\"conditionalBranchesNum\"\n          /></mat-slider>\n        </div>\n        <div *ngFor=\"let branch of conditionalBranches; let idx = index\">\n          <button (click)=\"editConditionalBranch(idx)\" mat-raised-button [matTooltip]=\"branch\">\n            <div class=\"ajf-icon-cont\">\n              <mat-icon>edit</mat-icon>\n              <span><code>{{ branch }}</code></span>\n            </div>\n          </button>\n        </div>\n      </div>\n      <ng-template [ngIf]=\"isRepeatingContainerNode(ne)\">\n        <div class=\"ajf-prop\">\n          <div><label>{{'Min repetitions'|transloco}}</label></div>\n          <div>\n            <mat-slider discrete min=\"1\" max=\"5\" step=\"1\"\n              ><input  formControlName=\"minReps\" matSliderThumb\n            /></mat-slider>\n          </div>\n          <div><label>{{'Max repetitions'|transloco}}</label></div>\n          <div>\n            <mat-slider discrete min=\"1\" max=\"5\" step=\"1\"\n              ><input formControlName=\"maxReps\" matSliderThumb\n            /></mat-slider>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template [ngIf]=\"isField(ne)\">\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"readonlyField\">{{'Readonly'|transloco}}</mat-checkbox>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <mat-label>{{'Field size'|transloco}}</mat-label>\n            <mat-select formControlName=\"size\" [placeholder]=\"'Size' | transloco\">\n              <mat-option *ngFor=\"let fieldSize of fieldSizes\" [value]=\"fieldSize.value\">\n                {{ fieldSize.label|transloco }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input matInput formControlName=\"hint\" [placeholder]=\"'Hint' | transloco\" />\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <textarea\n              matInput\n              formControlName=\"description\"\n              [placeholder]=\"'Description' | transloco\"\n            ></textarea>\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input\n              matInput\n              formControlName=\"defaultValue\"\n              [placeholder]=\"'Default value' | transloco\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <div><label>{{'Formula'|transloco}}</label></div>\n          <div>\n            <button (click)=\"editFormula()\" mat-raised-button [matTooltip]=\"curFormula || ''\">\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ curFormula }}</code></span>\n              </div>\n            </button>\n          </div>\n        </div>\n        <!-- <div class=\"ajf-prop\">\n          <div><label>{{'Force value'|translco}}</label></div>\n          <div>\n            <button (click)=\"editForceValue()\" mat-raised-button [matTooltip]=\"curForceValue\">\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ curForceValue }}</span>\n              </div>\n            </button>\n          </div>\n        </div> -->\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"notEmpty\">{{'Not empty'|transloco}}</mat-checkbox>\n        </div>\n        <ng-template [ngIf]=\"isNumericField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input matInput formControlName=\"minValue\" [placeholder]=\"'Min value' | transloco\" />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input matInput formControlName=\"maxValue\" [placeholder]=\"'Max value' | transloco\" />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"minDigits\"\n                [placeholder]=\"'Min digits' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"maxDigits\"\n                [placeholder]=\"'Max digits' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n        </ng-template>\n        <ng-template [ngIf]=\"isRangeField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"start\"\n                [placeholder]=\"'Start' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"end\"\n                [placeholder]=\"'End' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"step\"\n                [placeholder]=\"'Step' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <mat-select formControlName=\"appearance\" [placeholder]=\"'Appearance' | transloco\">\n                <mat-option [value]=\"null\">{{'Default'|transloco}}</mat-option>\n                <mat-option value=\"rating\">{{'Rating'|transloco}}</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </ng-template>\n        <div class=\"ajf-prop\">\n          <div class=\"ajf-header\">\n            <label>{{ 'Validation' | transloco }}</label>\n            <mat-icon class=\"ajf-pointer\" (click)=\"addValidationCondition()\"\n              >add_circle_outline</mat-icon\n            >\n          </div>\n          <div *ngIf=\"validationConditions.length === 0\" class=\"ajf-validation-row ajf-emph\">\n            {{'No conditions'|transloco}}\n          </div>\n          <div\n            class=\"ajf-validation-row\"\n            *ngFor=\"let validationCondition of validationConditions; let idx = index\"\n          >\n            <button\n              (click)=\"editValidationCondition(idx)\"\n              mat-raised-button\n              [matTooltip]=\"validationCondition.condition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ validationCondition.condition }}</code></span>\n              </div>\n            </button>\n            <mat-icon class=\"ajf-pointer\" (click)=\"removeValidationCondition(idx)\"\n              >remove_circle_outline</mat-icon\n            >\n          </div>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"notEmptyWarning\"\n            >{{'Not empty warning'|transloco}}</mat-checkbox\n          >\n        </div>\n        <div class=\"ajf-prop\">\n          <div class=\"ajf-header\">\n            <label>{{'Warnings'|transloco}}</label>\n            <mat-icon class=\"ajf-pointer\" (click)=\"addWarningCondition()\"\n              >add_circle_outline</mat-icon\n            >\n          </div>\n          <div *ngIf=\"warningConditions.length === 0\" class=\"ajf-validation-row ajf-emph\">\n            {{'No warnings'|transloco}}\n          </div>\n          <div\n            class=\"ajf-validation-row\"\n            *ngFor=\"let warningCondition of warningConditions; let idx = index\"\n          >\n            <button\n              (click)=\"editWarningCondition(idx)\"\n              mat-raised-button\n              [matTooltip]=\"warningCondition.condition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ warningCondition.condition }}</code></span>\n              </div>\n            </button>\n            <mat-icon class=\"ajf-pointer\" (click)=\"removeWarningCondition(idx)\"\n              >remove_circle_outline</mat-icon\n            >\n          </div>\n        </div>\n        <div class=\"ajf-prop\">\n          <div><label>{{'Go to next slide condition'|transloco}}</label></div>\n          <div>\n            <button\n              (click)=\"editNextSlideCondition()\"\n              mat-raised-button\n              [matTooltip]=\"nextSlideCondition || ''\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ nextSlideCondition }}</code></span>\n              </div>\n            </button>\n          </div>\n        </div>\n        <ng-template [ngIf]=\"isFieldWithChoices(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <mat-label>{{'Choices origins'|transloco}}</mat-label>\n              <mat-select formControlName=\"choicesOriginRef\" [placeholder]=\"'Choices' | transloco\">\n                <mat-option\n                  *ngFor=\"let choicesOrigin of choicesOrigins\"\n                  [value]=\"choicesOrigin.name\"\n                >\n                  {{ (choicesOrigin.label || choicesOrigin.name)|transloco }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"pf.get('choicesOriginRef')?.invalid\">\n                {{fieldErrorMessage(pf.get('choicesOriginRef'), 'choicesOriginRef')}}\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <div><label>{{'Choices filter'|transloco}}</label></div>\n            <div>\n              <button\n                (click)=\"editChoicesFilter()\"\n                mat-raised-button\n                [matTooltip]=\"curChoicesFilter || ''\"\n              >\n                <div class=\"ajf-icon-cont\">\n                  <mat-icon>edit</mat-icon>\n                  <span><code>{{ curChoicesFilter }}</code></span>\n                </div>\n              </button>\n            </div>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-checkbox\n              formControlName=\"forceExpanded\"\n              #forceExpanded\n              (change)=\"forceCheckbox($event.checked, forceNarrow)\"\n              >{{'Force expanded selection'|transloco}}</mat-checkbox\n            >\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-checkbox\n              formControlName=\"forceNarrow\"\n              #forceNarrow\n              (change)=\"forceCheckbox($event.checked, forceExpanded)\"\n              >{{'Force narrow selection'|transloco}}</mat-checkbox\n            >\n          </div>\n          <div class=\"ajf-prop\">\n            <div class=\"ajf-header\">\n              <label>{{'Trigger selection'|transloco}}</label>\n              <mat-icon class=\"ajf-pointer\" (click)=\"addTriggerCondition()\"\n                >add_circle_outline</mat-icon\n              >\n            </div>\n            <div\n              *ngIf=\"!triggerConditions || triggerConditions.length === 0\"\n              class=\"ajf-validation-row ajf-emph\"\n            >\n              {{'No trigger condition'|transloco}}\n            </div>\n            <div\n              class=\"ajf-validation-row\"\n              *ngFor=\"let triggerCondition of triggerConditions; let idx = index\"\n            >\n              <button\n                (click)=\"editTriggerCondition(idx)\"\n                mat-raised-button\n                [matTooltip]=\"triggerCondition\"\n              >\n                <div class=\"ajf-icon-cont\">\n                  <mat-icon>edit</mat-icon>\n                  <span><code>{{ triggerCondition }}</code></span>\n                </div>\n              </button>\n              <mat-icon class=\"pointer\" (click)=\"removeTriggerCondition(idx)\"\n                >remove_circle_outline</mat-icon\n              >\n            </div>\n          </div>\n        </ng-template>\n        <ng-container *ngIf=\"isTableField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-checkbox formControlName=\"hideEmptyRows\"\n              >{{'Hide empty rows'|transloco}}</mat-checkbox\n            >\n            <mat-form-field>\n              <textarea\n                matInput\n                formControlName=\"tableDef\"\n                [placeholder]=\"'Table definition' | transloco\"\n              ></textarea>\n              <mat-error *ngIf=\"pf.get('tableDef')?.invalid\">\n                {{fieldErrorMessage(pf.get('tableDef'), 'tableDef')}}\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </ng-container>\n      </ng-template>\n    </form>\n  </ng-container>\n</ng-container>\n", styles: ["ajf-fb-node-properties{display:block;padding:2px 2px 2px 5px;position:relative}ajf-fb-node-properties mat-icon{cursor:pointer}ajf-fb-node-properties .ajf-header{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}ajf-fb-node-properties .ajf-header>h3,ajf-fb-node-properties .ajf-header>label{flex:1 0 auto;margin-right:.5em}ajf-fb-node-properties .ajf-header>mat-icon{flex:0 0 auto;margin-left:.5em}ajf-fb-node-properties .ajf-disabled-overlay{position:absolute;inset:0;opacity:.4;background-color:#fff}ajf-fb-node-properties .ajf-emph{font-style:italic}ajf-fb-node-properties [mat-raised-button]{margin:.5em 0}ajf-fb-node-properties [mat-raised-button].ajf-pointer{cursor:pointer}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont{display:flex;flex-direction:row;align-items:center;position:relative}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;display:block;margin:auto;position:relative;max-height:30px;max-width:100%}ajf-fb-node-properties .ajf-validation-row{margin:.5em 0;display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties .ajf-validation-row button{flex:1 1 auto}ajf-fb-node-properties .ajf-validation-row mat-icon{flex:0 0 auto}ajf-fb-node-properties .ajf-prop{margin:.5em 0}ajf-fb-node-properties .ajf-prop .mdc-button__label{max-width:100%}ajf-fb-node-properties mat-form-field,ajf-fb-node-properties mat-slider,ajf-fb-node-properties [mat-raised-button]{width:100%}\n"] }]
+            args: [{ selector: 'ajf-fb-node-properties', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.display]=\"(enabled|async) ? 'none' : 'block'\" class=\"ajf-disabled-overlay\"></div>\n<ng-container *ngIf=\"nodeEntry|async as ne\">\n  <ng-container *ngIf=\"propertiesForm|async as pf\">\n    <div class=\"ajf-header\">\n      <h3>{{'Properties'|transloco}}</h3>\n      <button\n        mat-icon-button\n        [disabled]=\"pf.status !== 'VALID'\"\n        (click)=\"save()\"\n      >\n        <mat-icon>save</mat-icon>\n      </button>\n      <button mat-icon-button (click)=\"cancel()\">\n        <mat-icon>cancel</mat-icon>\n      </button>  \n    </div>\n    <mat-error *ngIf=\"pf?.invalid\">\n      {{allErrorMessages(pf)}}\n    </mat-error>\n    <form [formGroup]=\"pf!\" novalidate>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <input matInput formControlName=\"name\" [placeholder]=\"'Name' | transloco\" />\n          <mat-error *ngIf=\"pf.get('name')?.invalid\">\n            {{fieldErrorMessage(pf.get('name'), 'Name')}}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <input matInput formControlName=\"label\" [placeholder]=\"'Label' | transloco\" />\n          <mat-error *ngIf=\"pf.get('label')?.invalid\">\n            {{fieldErrorMessage(pf.get('label'), 'Label')}}\n          </mat-error>\n        </mat-form-field>\n      </div>\n      <ng-template [ngIf]=\"isEmptyField(ne!.node)\">\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input matInput formControlName=\"HTML\" [placeholder]=\"'HTML' | transloco\" />\n          </mat-form-field>\n        </div>\n      </ng-template>\n      <div class=\"ajf-prop\">\n        <mat-form-field>\n          <mat-label>{{'Visibility'|transloco}}</mat-label>\n          <mat-select formControlName=\"visibilityOpt\" [placeholder]=\"'Visible' | transloco\">\n            <mat-option value=\"always\">{{'Always'|transloco}}</mat-option>\n            <mat-option value=\"never\">{{'Never'|transloco}}</mat-option>\n            <mat-option value=\"condition\">{{'Condition...'|transloco}}</mat-option>\n          </mat-select>\n        </mat-form-field>\n        <button\n          (click)=\"editVisibility()\"\n          [disabled]=\"pf!.value.visibilityOpt !== 'condition'\"\n          mat-raised-button\n          [matTooltip]=\"curVisibility || ''\"\n        >\n          <div class=\"ajf-icon-cont\">\n            <mat-icon>edit</mat-icon>\n            <span><code>{{ curVisibility }}</code></span>\n          </div>\n        </button>\n      </div>\n      <div class=\"ajf-prop\">\n        <div><label>{{'Branches'|transloco}}</label></div>\n        <div>\n          <mat-slider discrete min=\"1\" max=\"5\" step=\"1\"\n            ><input matSliderThumb formControlName=\"conditionalBranchesNum\"\n          /></mat-slider>\n        </div>\n        <div *ngFor=\"let branch of conditionalBranches; let idx = index\">\n          <button (click)=\"editConditionalBranch(idx)\" mat-raised-button [matTooltip]=\"branch\">\n            <div class=\"ajf-icon-cont\">\n              <mat-icon>edit</mat-icon>\n              <span><code>{{ branch }}</code></span>\n            </div>\n          </button>\n        </div>\n      </div>\n      <ng-template [ngIf]=\"isRepeatingContainerNode(ne)\">\n        <div class=\"ajf-prop\">\n          <div><label>{{'Min repetitions'|transloco}}</label></div>\n          <div>\n            <mat-slider discrete min=\"1\" max=\"5\" step=\"1\"\n              ><input  formControlName=\"minReps\" matSliderThumb\n            /></mat-slider>\n          </div>\n          <div><label>{{'Max repetitions'|transloco}}</label></div>\n          <div>\n            <mat-slider discrete min=\"1\" max=\"5\" step=\"1\"\n              ><input formControlName=\"maxReps\" matSliderThumb\n            /></mat-slider>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template [ngIf]=\"isField(ne)\">\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"readonlyField\">{{'Readonly'|transloco}}</mat-checkbox>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <mat-label>{{'Field size'|transloco}}</mat-label>\n            <mat-select formControlName=\"size\" [placeholder]=\"'Size' | transloco\">\n              <mat-option *ngFor=\"let fieldSize of fieldSizes\" [value]=\"fieldSize.value\">\n                {{ fieldSize.label|transloco }}\n              </mat-option>\n            </mat-select>\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input matInput formControlName=\"hint\" [placeholder]=\"'Hint' | transloco\" />\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <textarea\n              matInput\n              formControlName=\"description\"\n              [placeholder]=\"'Description' | transloco\"\n            ></textarea>\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-form-field>\n            <input\n              matInput\n              formControlName=\"defaultValue\"\n              [placeholder]=\"'Default value' | transloco\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"ajf-prop\">\n          <div><label>{{'Formula'|transloco}}</label></div>\n          <div>\n            <button (click)=\"editFormula()\" mat-raised-button [matTooltip]=\"curFormula || ''\">\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ curFormula }}</code></span>\n              </div>\n            </button>\n          </div>\n        </div>\n        <!-- <div class=\"ajf-prop\">\n          <div><label>{{'Force value'|translco}}</label></div>\n          <div>\n            <button (click)=\"editForceValue()\" mat-raised-button [matTooltip]=\"curForceValue\">\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span>{{ curForceValue }}</span>\n              </div>\n            </button>\n          </div>\n        </div> -->\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"notEmpty\">{{'Not empty'|transloco}}</mat-checkbox>\n        </div>\n        <ng-template [ngIf]=\"isNumericField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input matInput formControlName=\"minValue\" [placeholder]=\"'Min value' | transloco\" />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input matInput formControlName=\"maxValue\" [placeholder]=\"'Max value' | transloco\" />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"minDigits\"\n                [placeholder]=\"'Min digits' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                formControlName=\"maxDigits\"\n                [placeholder]=\"'Max digits' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n        </ng-template>\n        <ng-template [ngIf]=\"isRangeField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"start\"\n                [placeholder]=\"'Start' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"end\"\n                [placeholder]=\"'End' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <input\n                matInput\n                type=\"number\"\n                formControlName=\"step\"\n                [placeholder]=\"'Step' | transloco\"\n              />\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <mat-select formControlName=\"appearance\" [placeholder]=\"'Appearance' | transloco\">\n                <mat-option [value]=\"null\">{{'Default'|transloco}}</mat-option>\n                <mat-option value=\"rating\">{{'Rating'|transloco}}</mat-option>\n              </mat-select>\n            </mat-form-field>\n          </div>\n        </ng-template>\n        <div class=\"ajf-prop\">\n          <div class=\"ajf-header\">\n            <label>{{ 'Validation' | transloco }}</label>\n            <mat-icon class=\"ajf-pointer\" (click)=\"addValidationCondition()\"\n              >add_circle_outline</mat-icon\n            >\n          </div>\n          <div *ngIf=\"validationConditions.length === 0\" class=\"ajf-validation-row ajf-emph\">\n            {{'No conditions'|transloco}}\n          </div>\n          <div\n            class=\"ajf-validation-row\"\n            *ngFor=\"let validationCondition of validationConditions; let idx = index\"\n          >\n            <button\n              (click)=\"editValidationCondition(idx)\"\n              mat-raised-button\n              [matTooltip]=\"validationCondition.condition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ validationCondition.condition }}</code></span>\n              </div>\n            </button>\n            <mat-icon class=\"ajf-pointer\" (click)=\"removeValidationCondition(idx)\"\n              >remove_circle_outline</mat-icon\n            >\n          </div>\n        </div>\n        <div class=\"ajf-prop\">\n          <mat-checkbox formControlName=\"notEmptyWarning\"\n            >{{'Not empty warning'|transloco}}</mat-checkbox\n          >\n        </div>\n        <div class=\"ajf-prop\">\n          <div class=\"ajf-header\">\n            <label>{{'Warnings'|transloco}}</label>\n            <mat-icon class=\"ajf-pointer\" (click)=\"addWarningCondition()\"\n              >add_circle_outline</mat-icon\n            >\n          </div>\n          <div *ngIf=\"warningConditions.length === 0\" class=\"ajf-validation-row ajf-emph\">\n            {{'No warnings'|transloco}}\n          </div>\n          <div\n            class=\"ajf-validation-row\"\n            *ngFor=\"let warningCondition of warningConditions; let idx = index\"\n          >\n            <button\n              (click)=\"editWarningCondition(idx)\"\n              mat-raised-button\n              [matTooltip]=\"warningCondition.condition\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ warningCondition.condition }}</code></span>\n              </div>\n            </button>\n            <mat-icon class=\"ajf-pointer\" (click)=\"removeWarningCondition(idx)\"\n              >remove_circle_outline</mat-icon\n            >\n          </div>\n        </div>\n        <div class=\"ajf-prop\">\n          <div><label>{{'Go to next slide condition'|transloco}}</label></div>\n          <div>\n            <button\n              (click)=\"editNextSlideCondition()\"\n              mat-raised-button\n              [matTooltip]=\"nextSlideCondition || ''\"\n            >\n              <div class=\"ajf-icon-cont\">\n                <mat-icon>edit</mat-icon>\n                <span><code>{{ nextSlideCondition }}</code></span>\n              </div>\n            </button>\n          </div>\n        </div>\n        <ng-template [ngIf]=\"isFieldWithChoices(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-form-field>\n              <mat-label>{{'Choices origins'|transloco}}</mat-label>\n              <mat-select formControlName=\"choicesOriginRef\" [placeholder]=\"'Choices' | transloco\">\n                <mat-option\n                  *ngFor=\"let choicesOrigin of choicesOrigins\"\n                  [value]=\"choicesOrigin.name\"\n                >\n                  {{ (choicesOrigin.label || choicesOrigin.name)|transloco }}\n                </mat-option>\n              </mat-select>\n              <mat-error *ngIf=\"pf.get('choicesOriginRef')?.invalid\">\n                {{fieldErrorMessage(pf.get('choicesOriginRef'), 'choicesOriginRef')}}\n              </mat-error>\n            </mat-form-field>\n          </div>\n          <div class=\"ajf-prop\">\n            <div><label>{{'Choices filter'|transloco}}</label></div>\n            <div>\n              <button\n                (click)=\"editChoicesFilter()\"\n                mat-raised-button\n                [matTooltip]=\"curChoicesFilter || ''\"\n              >\n                <div class=\"ajf-icon-cont\">\n                  <mat-icon>edit</mat-icon>\n                  <span><code>{{ curChoicesFilter }}</code></span>\n                </div>\n              </button>\n            </div>\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-checkbox\n              formControlName=\"forceExpanded\"\n              #forceExpanded\n              (change)=\"forceCheckbox($event.checked, forceNarrow)\"\n              >{{'Force expanded selection'|transloco}}</mat-checkbox\n            >\n          </div>\n          <div class=\"ajf-prop\">\n            <mat-checkbox\n              formControlName=\"forceNarrow\"\n              #forceNarrow\n              (change)=\"forceCheckbox($event.checked, forceExpanded)\"\n              >{{'Force narrow selection'|transloco}}</mat-checkbox\n            >\n          </div>\n          <div class=\"ajf-prop\">\n            <div class=\"ajf-header\">\n              <label>{{'Trigger selection'|transloco}}</label>\n              <mat-icon class=\"ajf-pointer\" (click)=\"addTriggerCondition()\"\n                >add_circle_outline</mat-icon\n              >\n            </div>\n            <div\n              *ngIf=\"!triggerConditions || triggerConditions.length === 0\"\n              class=\"ajf-validation-row ajf-emph\"\n            >\n              {{'No trigger condition'|transloco}}\n            </div>\n            <div\n              class=\"ajf-validation-row\"\n              *ngFor=\"let triggerCondition of triggerConditions; let idx = index\"\n            >\n              <button\n                (click)=\"editTriggerCondition(idx)\"\n                mat-raised-button\n                [matTooltip]=\"triggerCondition\"\n              >\n                <div class=\"ajf-icon-cont\">\n                  <mat-icon>edit</mat-icon>\n                  <span><code>{{ triggerCondition }}</code></span>\n                </div>\n              </button>\n              <mat-icon class=\"pointer\" (click)=\"removeTriggerCondition(idx)\"\n                >remove_circle_outline</mat-icon\n              >\n            </div>\n          </div>\n        </ng-template>\n        <ng-container *ngIf=\"isTableField(ne!.node)\">\n          <div class=\"ajf-prop\">\n            <mat-checkbox formControlName=\"hideEmptyRows\"\n              >{{'Hide empty rows'|transloco}}</mat-checkbox\n            >\n            <mat-form-field>\n              <textarea\n                matInput\n                formControlName=\"tableDef\"\n                [placeholder]=\"'Table definition' | transloco\"\n              ></textarea>\n              <mat-error *ngIf=\"pf.get('tableDef')?.invalid\">\n                {{fieldErrorMessage(pf.get('tableDef'), 'tableDef')}}\n              </mat-error>\n            </mat-form-field>\n          </div>\n        </ng-container>\n      </ng-template>\n    </form>\n  </ng-container>\n</ng-container>\n", styles: ["ajf-fb-node-properties{display:block;padding:2px 2px 2px 5px;position:relative}ajf-fb-node-properties mat-icon{cursor:pointer}ajf-fb-node-properties .ajf-header{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}ajf-fb-node-properties .ajf-header>h3,ajf-fb-node-properties .ajf-header>label{flex:1 0 auto;margin-right:.5em}ajf-fb-node-properties .ajf-header>mat-icon{flex:0 0 auto;margin-left:.5em}ajf-fb-node-properties .ajf-disabled-overlay{position:absolute;inset:0;opacity:.4;background-color:currentColor}ajf-fb-node-properties .ajf-emph{font-style:italic}ajf-fb-node-properties [mat-raised-button]{margin:.5em 0}ajf-fb-node-properties [mat-raised-button].ajf-pointer{cursor:pointer}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont{display:flex;flex-direction:row;align-items:center;position:relative}ajf-fb-node-properties [mat-raised-button] .ajf-icon-cont span{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;display:block;margin:auto;position:relative;max-height:30px;max-width:100%}ajf-fb-node-properties .ajf-validation-row{margin:.5em 0;display:flex;flex-direction:row;align-items:center}ajf-fb-node-properties .ajf-validation-row button{flex:1 1 auto}ajf-fb-node-properties .ajf-validation-row mat-icon{flex:0 0 auto}ajf-fb-node-properties .ajf-prop{margin:.5em 0}ajf-fb-node-properties .ajf-prop .mdc-button__label{max-width:100%}ajf-fb-node-properties mat-form-field,ajf-fb-node-properties mat-slider,ajf-fb-node-properties [mat-raised-button]{width:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: AjfFormBuilderService }, { type: i2.MatDialog }, { type: i3$1.UntypedFormBuilder }, { type: AjfNodePropertiesNameMatchValidator }] });
 
 /**
@@ -3099,11 +3129,11 @@ class AjfFbNodeTypeEntry {
         this._cdr = _cdr;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbNodeTypeEntry, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbNodeTypeEntry, selector: "ajf-fb-node-type-entry", inputs: { nodeType: "nodeType" }, ngImport: i0, template: "<ng-container *ngIf=\"nodeType\">\n  <ajf-node-icon [node]=\"node\"></ajf-node-icon>&nbsp;{{nodeType.label}}\n</ng-container>\n", styles: ["ajf-fb-node-type-entry{display:block;padding:1em 1.5em}ajf-fb-node-type-entry mat-icon{vertical-align:middle}\n"], dependencies: [{ kind: "component", type: i2$1.AjfNodeIcon, selector: "ajf-node-icon" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFbNodeTypeEntry, selector: "ajf-fb-node-type-entry", inputs: { nodeType: "nodeType" }, ngImport: i0, template: "<ng-container *ngIf=\"nodeType\">\n  <ajf-node-icon [node]=\"node\"></ajf-node-icon><span class=\"ajf-node-type-label\">{{nodeType.label}}</span>\n</ng-container>\n", styles: ["ajf-fb-node-type-entry{display:flex;align-items:center;gap:11px;padding:7px 8px;margin-bottom:2px;border-radius:8px;font-size:13.5px;cursor:pointer}ajf-fb-node-type-entry ajf-node-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:7px;background:color-mix(in srgb,currentColor 12%,transparent)}ajf-fb-node-type-entry .ajf-node-type-label{min-width:0;line-height:1.25}ajf-fb-node-type-entry mat-icon{vertical-align:middle;font-size:18px;width:18px;height:18px}\n"], dependencies: [{ kind: "component", type: i2$1.AjfNodeIcon, selector: "ajf-node-icon" }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFbNodeTypeEntry, decorators: [{
             type: Component,
-            args: [{ selector: 'ajf-fb-node-type-entry', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"nodeType\">\n  <ajf-node-icon [node]=\"node\"></ajf-node-icon>&nbsp;{{nodeType.label}}\n</ng-container>\n", styles: ["ajf-fb-node-type-entry{display:block;padding:1em 1.5em}ajf-fb-node-type-entry mat-icon{vertical-align:middle}\n"] }]
+            args: [{ selector: 'ajf-fb-node-type-entry', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"nodeType\">\n  <ajf-node-icon [node]=\"node\"></ajf-node-icon><span class=\"ajf-node-type-label\">{{nodeType.label}}</span>\n</ng-container>\n", styles: ["ajf-fb-node-type-entry{display:flex;align-items:center;gap:11px;padding:7px 8px;margin-bottom:2px;border-radius:8px;font-size:13.5px;cursor:pointer}ajf-fb-node-type-entry ajf-node-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:7px;background:color-mix(in srgb,currentColor 12%,transparent)}ajf-fb-node-type-entry .ajf-node-type-label{min-width:0;line-height:1.25}ajf-fb-node-type-entry mat-icon{vertical-align:middle;font-size:18px;width:18px;height:18px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { nodeType: [{
                 type: Input
             }] } });
@@ -3128,6 +3158,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
+/**
+ * @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/.
+ *
+ */
+/**
+ * Groups the node types of the palette by category, keeping the categories in
+ * the order of their first entry. Applied after the search filter, so that the
+ * categories left without entries produce no header.
+ */
+class NodeTypeGroupsPipe {
+    transform(nodeTypes) {
+        if (!nodeTypes) {
+            return [];
+        }
+        const groups = [];
+        const groupsByCategory = new Map();
+        // Entries with no category are collected in a trailing group with no
+        // header, so that the node types added by the host app are never hidden.
+        const uncategorized = [];
+        nodeTypes.forEach(nodeType => {
+            const category = nodeType.category;
+            if (!category) {
+                uncategorized.push(nodeType);
+                return;
+            }
+            let group = groupsByCategory.get(category);
+            if (group == null) {
+                group = { category, nodeTypes: [] };
+                groupsByCategory.set(category, group);
+                groups.push(group);
+            }
+            group.nodeTypes.push(nodeType);
+        });
+        if (uncategorized.length > 0) {
+            groups.push({ category: '', nodeTypes: uncategorized });
+        }
+        return groups;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeTypeGroupsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NodeTypeGroupsPipe, name: "nodeTypeGroups" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NodeTypeGroupsPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'nodeTypeGroups' }]
+        }] });
+
 class AjfFormBuilder {
     get form() {
         return this._form;
@@ -3140,6 +3233,19 @@ class AjfFormBuilder {
             }
         }
     }
+    get expandSlides() {
+        return this._expandSlides;
+    }
+    set expandSlides(expandSlides) {
+        this._setSlidesExpanded(coerceBooleanProperty(expandSlides));
+    }
+    get fillHeight() {
+        return this._fillHeight;
+    }
+    set fillHeight(fillHeight) {
+        this._fillHeight = coerceBooleanProperty(fillHeight);
+        this._cdr.markForCheck();
+    }
     get nodeTypes() {
         return this._nodeTypes;
     }
@@ -3156,6 +3262,26 @@ class AjfFormBuilder {
         this._service = _service;
         this._dialog = _dialog;
         this._cdr = _cdr;
+        /**
+         * True when the slides of the designer are kept expanded. Slides added later
+         * follow this state as well.
+         * It drives the "expand slides" toggle of the toolbar and can be set by the
+         * host, both one-way (`[expandSlides]="true"`) and two-way
+         * (`[(expandSlides)]="expanded"`).
+         */
+        this._expandSlides = false;
+        /**
+         * Emits whenever the slides expansion state is changed from inside the form
+         * builder, i.e. by the toolbar controls.
+         */
+        this.expandSlidesChange = new EventEmitter();
+        /**
+         * When true the form builder fills the whole height of its container: the
+         * field types palette, the designer and the properties panel stretch to the
+         * available height and scroll internally, instead of growing with their
+         * content. Requires the container to have a definite height.
+         */
+        this._fillHeight = false;
         /**
          * Called to set form builder validation errors
          */
@@ -3227,6 +3353,10 @@ class AjfFormBuilder {
         this._vc.emit();
     }
     ngAfterContentInit() {
+        // The expanded status of the slides lives in the service, which outlives a
+        // single form builder instance: re-apply the current state, so that a newly
+        // created form builder always matches its own expandSlides value.
+        this._setSlidesExpanded(this._expandSlides);
         this._setCurrentForm();
         this._init = true;
     }
@@ -3266,24 +3396,43 @@ class AjfFormBuilder {
             this._stringIdentifierDialog = null;
         }
         this._stringIdentifierDialog = this._dialog.open(AjfFbStringIdentifierDialogComponent, {
-            disableClose: true,
             width: '60%',
             height: '60%',
         });
     }
+    /**
+     * Expands all the slides of the designer and keeps the slides added later expanded.
+     */
     expandAll() {
-        this._service.expandAll();
+        this._setSlidesExpanded(true, true);
     }
+    /**
+     * Collapses all the slides of the designer and keeps the slides added later collapsed.
+     */
     collapseAll() {
-        this._service.collapseAll();
+        this._setSlidesExpanded(false, true);
     }
     expandToggle(evt) {
-        if (evt.checked) {
-            this.expandAll();
+        this._setSlidesExpanded(evt.checked, true);
+    }
+    /**
+     * Applies the slides expansion state to the service.
+     * @param expanded True to keep the slides expanded
+     * @param notify True to emit expandSlidesChange when the state changes
+     */
+    _setSlidesExpanded(expanded, notify = false) {
+        const changed = this._expandSlides !== expanded;
+        this._expandSlides = expanded;
+        if (expanded) {
+            this._service.expandAll();
         }
         else {
-            this.collapseAll();
+            this._service.collapseAll();
         }
+        if (notify && changed) {
+            this.expandSlidesChange.emit(expanded);
+        }
+        this._cdr.markForCheck();
     }
     async downloadAsXlsform() {
         this.xlsformDownloading = true;
@@ -3323,16 +3472,22 @@ class AjfFormBuilder {
         this._service.setForm(this._form);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFormBuilder, deps: [{ token: AjfFormBuilderService }, { token: i2.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFormBuilder, selector: "ajf-form-builder", inputs: { form: "form" }, outputs: { formBuilderValidation: "formBuilderValidation" }, viewQueries: [{ propertyName: "designerCont", first: true, predicate: ["designer"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar class=\"ajf-formbuilder-toolbar\">\n  <button mat-icon-button (click)=\"leftSidenav.toggle()\" aria-label=\"Toggle side navigation\">\n    <mat-icon>add_box</mat-icon>\n  </button>\n  <button mat-button [matMenuTriggerFor]=\"choicesMenu\">\n    {{ 'Choices' | transloco }}\n  </button>\n  <button mat-button (click)=\"editStringIdentifier()\">\n    {{ 'Identifier' | transloco }}\n  </button>\n\n  <div class=\"ajf-toolbar-group\">\n    <button\n      mat-icon-button\n      aria-label=\"Collapse all slides\"\n      matTooltip=\"Keep slides collapsed\"\n    >\n      <mat-icon>unfold_less</mat-icon>\n    </button>\n\n    <mat-slide-toggle\n      color=\"primary\"\n      (change)=\"expandToggle($event)\"\n      aria-label=\"Toggle slide expansion\"\n    ></mat-slide-toggle>\n\n    <button\n      mat-icon-button\n      aria-label=\"Expand all slides\"\n      matTooltip=\"Keep slides expanded\"\n    >\n      <mat-icon>unfold_more</mat-icon>\n    </button>\n  </div>\n\n  <span class=\"ajf-spacer\"></span>\n\n  <button mat-button (click)=\"downloadAsXlsform()\" [disabled]=\"xlsformDownloading\">\n    {{ 'Download as XLSForm' | transloco }}\n  </button>\n\n  <mat-menu #choicesMenu=\"matMenu\">\n    <button mat-menu-item (click)=\"createChoicesOrigin()\">\n      {{ 'New..' | transloco }}\n    </button>\n    <ng-container *ngIf=\"choicesOrigins | async as cos\">\n      <button\n        mat-menu-item\n        *ngFor=\"let choicesOrigin of cos\"\n        (click)=\"editChoicesOrigin(choicesOrigin)\"\n      >\n        {{ (choicesOrigin.label || choicesOrigin.name) | transloco }}\n      </button>\n    </ng-container>\n  </mat-menu>\n</mat-toolbar>\n\n<div class=\"ajf-formtree-container\">\n  <mat-drawer-container\n    cdkDropListGroup\n    class=\"ajf-formtree-drawer-container\"\n  >\n    <mat-drawer #leftSidenav position=\"start\" mode=\"over\" class=\"ajf-sidenav-modern\">\n      <div class=\"ajf-drawer-header\">\n        <mat-form-field class=\"ajf-search-field\" floatLabel=\"auto\">\n          <mat-icon matPrefix>search</mat-icon>\n          <input\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"searchTerm\"\n            placeholder=\"{{ 'Search elements...' | transloco }}\"\n          />\n          <button\n            *ngIf=\"searchTerm\"\n            matSuffix\n            mat-icon-button\n            aria-label=\"Clear\"\n            (click)=\"searchTerm=''\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n    \n      <div\n        #sourceDropList\n        class=\"ajf-drawer-content\"\n        cdkDropList\n        [cdkDropListConnectedTo]=\"(connectedDropLists | async)!\"\n        [cdkDropListEnterPredicate]=\"disableDrop\"\n        [cdkDropListData]=\"nodeTypes\"\n      >\n        <ajf-fb-node-type-entry\n          *ngFor=\"let nodeType of nodeTypes | nodeTypeFilter: searchTerm\"\n          cdkDrag\n          [cdkDragData]=\"nodeType\"\n          (cdkDragStarted)=\"leftSidenav.close()\"\n          [nodeType]=\"nodeType\"\n        ></ajf-fb-node-type-entry>\n      </div>\n    </mat-drawer>\n    \n    <div #designer class=\"ajf-designer\">\n      <ajf-fb-node-entry\n        id=\"slides-list\"\n        cdkDropList\n        (cdkDropListDropped)=\"onDrop($event)\"\n        [cdkDropListEnterPredicate]=\"disableFieldDrop\"\n        *ngFor=\"let nodeEntry of (nodeEntriesTree | async); let isFirst = first\"\n        [isFirst]=\"isFirst\"\n        [nodeEntry]=\"nodeEntry\"\n      ></ajf-fb-node-entry>\n    </div>\n  </mat-drawer-container>\n\n  <div class=\"ajf-formtree-properties\" #rightSidenav position=\"end\" mode=\"side\">\n    <ajf-fb-node-properties></ajf-fb-node-properties>\n  </div>\n</div>\n", styles: ["ajf-form-builder{display:flex;flex-direction:column;align-items:stretch;position:relative;min-height:300px}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;padding:.5rem 1rem;box-shadow:0 2px 6px #00000014;border-bottom:1px solid rgba(0,0,0,.06);gap:.75rem}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar button[mat-icon-button] mat-icon{transition:transform .2s ease,color .2s ease}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar button[mat-icon-button]:hover mat-icon{transform:scale(1.1)}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar .ajf-toolbar-group{display:flex;align-items:center;gap:.5rem;border-radius:100vmax;padding:.25rem .5rem;background-color:#00000008}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar .ajf-spacer{flex:1 1 auto}ajf-form-builder .ajf-formtree-container{display:flex;flex-flow:row;align-items:flex-start;justify-content:space-between;gap:1.25rem;padding:1rem;box-sizing:border-box}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container{flex:1 1 auto;min-height:47vh;border-radius:1rem;border:1px solid #ccc;overflow:hidden;transition:box-shadow .25s ease-in-out}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container mat-drawer{max-width:20%;min-width:240px;border-right:1px solid rgba(0,0,0,.08)}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .ajf-designer{flex:1;padding:1rem;overflow-y:auto}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .mat-expansion-panel-body{padding:12px}ajf-form-builder .ajf-formtree-container .ajf-formtree-properties{flex:0 1 auto;max-width:24%;min-width:260px;max-height:70vh;overflow-y:auto;position:sticky;top:64px;border-radius:1rem;border:1px solid #ccc;padding:1rem;transition:box-shadow .3s ease,transform .3s ease}ajf-form-builder .ajf-formtree-container .ajf-formtree-properties:hover{box-shadow:0 0 14px #0000001a}ajf-form-builder .ajf-sidenav-modern{display:flex;flex-direction:column;max-width:22%;min-width:220px;border-right:1px solid rgba(0,0,0,.08);box-shadow:inset -1px 0 #0000000d}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-header{position:sticky;top:0;z-index:2;padding:.5rem;border-bottom:1px solid rgba(0,0,0,.08)}ajf-form-builder .ajf-sidenav-modern .ajf-search-field{width:100%;margin:0}ajf-form-builder .ajf-sidenav-modern .ajf-search-field input{font-size:.9rem}ajf-form-builder .ajf-sidenav-modern .ajf-search-field mat-icon{color:#0000008a}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content{flex:1 1 auto;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.25rem;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.25) transparent}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content::-webkit-scrollbar{width:6px}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content::-webkit-scrollbar-thumb{background:#00000040;border-radius:4px}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content::-webkit-scrollbar-thumb:hover{background:#0006}ajf-form-builder .ajf-sidenav-modern ajf-fb-node-type-entry{border-radius:8px;transition:background-color .15s ease,transform .15s ease;cursor:pointer}ajf-form-builder .ajf-sidenav-modern ajf-fb-node-type-entry:hover{background-color:#0000000d;transform:scale(1.02)}@media (max-height: 700px){ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content{padding:.25rem}}@media (max-width: 900px){ajf-form-builder .ajf-sidenav-modern{max-width:240px;min-width:180px}ajf-form-builder .ajf-sidenav-modern .ajf-search-field input{font-size:.8rem}}@media (max-width: 1024px){ajf-form-builder .ajf-formtree-container{flex-direction:column;gap:1rem}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container{min-height:40vh;border-radius:.75rem}ajf-form-builder .ajf-formtree-container .ajf-formtree-properties{max-width:100%;position:relative;top:0;border-radius:.75rem}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar{flex-wrap:wrap;justify-content:center}}ajf-form-builder *{scroll-behavior:smooth}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i9.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i10$1.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: i10$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i11.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i11.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i12$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i14.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: "component", type: AjfFbNodeEntry, selector: "ajf-fb-node-entry", inputs: ["isFirst", "nodeEntry", "level", "isDraggable", "originOffset", "firstBranchColor"] }, { kind: "component", type: AjfFbNodeProperties, selector: "ajf-fb-node-properties" }, { kind: "component", type: AjfFbNodeTypeEntry, selector: "ajf-fb-node-type-entry", inputs: ["nodeType"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: NodeTypeFilterPipe, name: "nodeTypeFilter" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfFormBuilder, selector: "ajf-form-builder", inputs: { form: "form", expandSlides: "expandSlides", fillHeight: "fillHeight" }, outputs: { expandSlidesChange: "expandSlidesChange", formBuilderValidation: "formBuilderValidation" }, host: { properties: { "class.ajf-form-builder-fill-height": "fillHeight" } }, viewQueries: [{ propertyName: "designerCont", first: true, predicate: ["designer"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar class=\"ajf-formbuilder-toolbar\">\n  <button mat-icon-button (click)=\"leftSidenav.toggle()\" aria-label=\"Toggle side navigation\">\n    <mat-icon>add_box</mat-icon>\n  </button>\n  <button mat-button [matMenuTriggerFor]=\"choicesMenu\">\n    {{ 'Choices' | transloco }}\n  </button>\n  <button mat-button (click)=\"editStringIdentifier()\">\n    {{ 'Default columns' | transloco }}\n  </button>\n\n  <div class=\"ajf-toolbar-group\">\n    <button\n      mat-icon-button\n      aria-label=\"Collapse all slides\"\n      matTooltip=\"Keep slides collapsed\"\n      (click)=\"collapseAll()\"\n    >\n      <mat-icon>unfold_less</mat-icon>\n    </button>\n\n    <mat-slide-toggle\n      color=\"primary\"\n      [checked]=\"expandSlides\"\n      (change)=\"expandToggle($event)\"\n      aria-label=\"Toggle slide expansion\"\n    ></mat-slide-toggle>\n\n    <button\n      mat-icon-button\n      aria-label=\"Expand all slides\"\n      matTooltip=\"Keep slides expanded\"\n      (click)=\"expandAll()\"\n    >\n      <mat-icon>unfold_more</mat-icon>\n    </button>\n  </div>\n\n  <span class=\"ajf-spacer\"></span>\n\n  <button mat-button (click)=\"downloadAsXlsform()\" [disabled]=\"xlsformDownloading\">\n    {{ 'Download as XLSForm' | transloco }}\n  </button>\n\n  <mat-menu #choicesMenu=\"matMenu\">\n    <button mat-menu-item (click)=\"createChoicesOrigin()\">\n      {{ 'New..' | transloco }}\n    </button>\n    <ng-container *ngIf=\"choicesOrigins | async as cos\">\n      <button\n        mat-menu-item\n        *ngFor=\"let choicesOrigin of cos\"\n        (click)=\"editChoicesOrigin(choicesOrigin)\"\n      >\n        {{ (choicesOrigin.label || choicesOrigin.name) | transloco }}\n      </button>\n    </ng-container>\n  </mat-menu>\n</mat-toolbar>\n\n<div class=\"ajf-formtree-container\">\n  <mat-drawer-container\n    cdkDropListGroup\n    class=\"ajf-formtree-drawer-container\"\n  >\n    <mat-drawer #leftSidenav position=\"start\" mode=\"over\" class=\"ajf-sidenav-modern\">\n      <div class=\"ajf-drawer-header\">\n        <mat-form-field class=\"ajf-search-field\" floatLabel=\"auto\">\n          <mat-icon matPrefix>search</mat-icon>\n          <input\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"searchTerm\"\n            placeholder=\"{{ 'Search elements...' | transloco }}\"\n          />\n          <button\n            *ngIf=\"searchTerm\"\n            matSuffix\n            mat-icon-button\n            aria-label=\"Clear\"\n            (click)=\"searchTerm=''\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n    \n      <div\n        #sourceDropList\n        class=\"ajf-drawer-content\"\n        cdkDropList\n        [cdkDropListConnectedTo]=\"(connectedDropLists | async)!\"\n        [cdkDropListEnterPredicate]=\"disableDrop\"\n        [cdkDropListData]=\"nodeTypes\"\n      >\n        <ng-container *ngFor=\"let group of nodeTypes | nodeTypeFilter: searchTerm | nodeTypeGroups\">\n          <div class=\"ajf-fb-category-header\" *ngIf=\"group.category\">\n            {{ group.category | transloco }}\n          </div>\n          <ajf-fb-node-type-entry\n            *ngFor=\"let nodeType of group.nodeTypes\"\n            cdkDrag\n            [cdkDragData]=\"nodeType\"\n            (cdkDragStarted)=\"leftSidenav.close()\"\n            [nodeType]=\"nodeType\"\n          ></ajf-fb-node-type-entry>\n        </ng-container>\n      </div>\n    </mat-drawer>\n    \n    <div #designer class=\"ajf-designer\">\n      <ajf-fb-node-entry\n        id=\"slides-list\"\n        cdkDropList\n        (cdkDropListDropped)=\"onDrop($event)\"\n        [cdkDropListEnterPredicate]=\"disableFieldDrop\"\n        *ngFor=\"let nodeEntry of (nodeEntriesTree | async); let isFirst = first\"\n        [isFirst]=\"isFirst\"\n        [nodeEntry]=\"nodeEntry\"\n      ></ajf-fb-node-entry>\n    </div>\n  </mat-drawer-container>\n\n  <div class=\"ajf-formtree-properties\" #rightSidenav position=\"end\" mode=\"side\">\n    <ajf-fb-node-properties></ajf-fb-node-properties>\n  </div>\n</div>\n", styles: ["ajf-form-builder{display:flex;flex-direction:column;align-items:stretch;position:relative;min-height:300px}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;height:48px;min-height:48px;padding:0 1rem;box-shadow:none;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent);gap:.75rem}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar button[mat-icon-button] mat-icon{transition:transform .2s ease,color .2s ease}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar button[mat-icon-button]:hover mat-icon{transform:scale(1.1)}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar .ajf-toolbar-group{display:flex;align-items:center;gap:.5rem;border-radius:100vmax;padding:.25rem .5rem;background-color:color-mix(in srgb,currentColor 4%,transparent)}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar .ajf-spacer{flex:1 1 auto}ajf-form-builder .ajf-formtree-container{display:flex;flex-flow:row;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 22px;box-sizing:border-box}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container{flex:1 1 auto;min-height:47vh;border:none;border-radius:0;background:transparent;overflow:hidden;transition:box-shadow .25s ease-in-out}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .ajf-designer{flex:1;padding:4px 2px;overflow-y:auto}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .ajf-designer .mat-card-container .mat-mdc-card{border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:10px;box-shadow:0 1px 2px #0000000d}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .ajf-designer .mat-expansion-panel-header{background:color-mix(in srgb,currentColor 4%,transparent)}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .ajf-designer .mat-expansion-panel-header:hover{background:color-mix(in srgb,currentColor 6%,transparent)}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .ajf-designer .mat-expansion-panel-header-title{font-size:14.5px;font-weight:600}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .mat-expansion-panel-body{padding:12px}ajf-form-builder .ajf-formtree-container .ajf-formtree-properties{flex:0 1 auto;min-width:312px;max-width:312px;max-height:70vh;overflow-y:auto;position:sticky;top:64px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 12%,transparent);padding:1rem;transition:box-shadow .3s ease,transform .3s ease}ajf-form-builder .ajf-formtree-container .ajf-formtree-properties:hover{box-shadow:0 0 14px #0000001a}ajf-form-builder .ajf-sidenav-modern{display:flex;flex-direction:column;min-width:250px;max-width:250px;border-right:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:10px 0 0 10px}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-header{position:sticky;top:0;z-index:2;padding:.5rem;border-bottom:1px solid color-mix(in srgb,currentColor 8%,transparent)}ajf-form-builder .ajf-sidenav-modern .ajf-search-field{width:100%;margin:0}ajf-form-builder .ajf-sidenav-modern .ajf-search-field input{font-size:.9rem}ajf-form-builder .ajf-sidenav-modern .ajf-search-field mat-icon{color:color-mix(in srgb,currentColor 60%,transparent)}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content{flex:1 1 auto;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.25rem;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,currentColor 25%,transparent) transparent}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content::-webkit-scrollbar{width:6px}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content::-webkit-scrollbar-thumb{background:color-mix(in srgb,currentColor 25%,transparent);border-radius:4px}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,currentColor 40%,transparent)}ajf-form-builder .ajf-sidenav-modern .ajf-fb-category-header{padding:14px 8px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,currentColor 60%,transparent);-webkit-user-select:none;user-select:none;pointer-events:none}ajf-form-builder .ajf-sidenav-modern .ajf-fb-category-header:first-child{padding-top:4px}ajf-form-builder .ajf-sidenav-modern ajf-fb-node-type-entry{transition:background-color .15s ease,transform .15s ease}ajf-form-builder .ajf-sidenav-modern ajf-fb-node-type-entry:hover{background-color:color-mix(in srgb,currentColor 6%,transparent);transform:scale(1.02)}@media (max-height: 700px){ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content{padding:.25rem}}@media (max-width: 900px){ajf-form-builder .ajf-sidenav-modern{max-width:240px;min-width:180px}ajf-form-builder .ajf-sidenav-modern .ajf-search-field input{font-size:.8rem}}@media (max-width: 1024px){ajf-form-builder .ajf-formtree-container{flex-direction:column;gap:1rem}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container{min-height:40vh}ajf-form-builder .ajf-formtree-container .ajf-formtree-properties{min-width:0;max-width:100%;position:relative;top:0}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar{flex-wrap:wrap;justify-content:center}}ajf-form-builder.ajf-form-builder-fill-height{flex:1 1 auto;height:100%;min-height:0}ajf-form-builder.ajf-form-builder-fill-height .ajf-formtree-container{flex:1 1 auto;min-height:0;align-items:stretch}ajf-form-builder.ajf-form-builder-fill-height mat-drawer-container.ajf-formtree-drawer-container{min-height:0;height:100%}ajf-form-builder.ajf-form-builder-fill-height mat-drawer-container.ajf-formtree-drawer-container .ajf-designer{height:100%;box-sizing:border-box}ajf-form-builder.ajf-form-builder-fill-height .ajf-formtree-properties{position:static;top:auto;max-height:none}ajf-form-builder *{scroll-behavior:smooth}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4$1.CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: i4$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$1.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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "component", type: i10.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: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i11.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i11.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i12.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i14.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: "component", type: AjfFbNodeEntry, selector: "ajf-fb-node-entry", inputs: ["isFirst", "nodeEntry", "level", "isDraggable", "originOffset", "firstBranchColor"] }, { kind: "component", type: AjfFbNodeProperties, selector: "ajf-fb-node-properties" }, { kind: "component", type: AjfFbNodeTypeEntry, selector: "ajf-fb-node-type-entry", inputs: ["nodeType"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6$1.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: NodeTypeFilterPipe, name: "nodeTypeFilter" }, { kind: "pipe", type: NodeTypeGroupsPipe, name: "nodeTypeGroups" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfFormBuilder, decorators: [{
             type: Component,
-            args: [{ selector: 'ajf-form-builder', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-toolbar class=\"ajf-formbuilder-toolbar\">\n  <button mat-icon-button (click)=\"leftSidenav.toggle()\" aria-label=\"Toggle side navigation\">\n    <mat-icon>add_box</mat-icon>\n  </button>\n  <button mat-button [matMenuTriggerFor]=\"choicesMenu\">\n    {{ 'Choices' | transloco }}\n  </button>\n  <button mat-button (click)=\"editStringIdentifier()\">\n    {{ 'Identifier' | transloco }}\n  </button>\n\n  <div class=\"ajf-toolbar-group\">\n    <button\n      mat-icon-button\n      aria-label=\"Collapse all slides\"\n      matTooltip=\"Keep slides collapsed\"\n    >\n      <mat-icon>unfold_less</mat-icon>\n    </button>\n\n    <mat-slide-toggle\n      color=\"primary\"\n      (change)=\"expandToggle($event)\"\n      aria-label=\"Toggle slide expansion\"\n    ></mat-slide-toggle>\n\n    <button\n      mat-icon-button\n      aria-label=\"Expand all slides\"\n      matTooltip=\"Keep slides expanded\"\n    >\n      <mat-icon>unfold_more</mat-icon>\n    </button>\n  </div>\n\n  <span class=\"ajf-spacer\"></span>\n\n  <button mat-button (click)=\"downloadAsXlsform()\" [disabled]=\"xlsformDownloading\">\n    {{ 'Download as XLSForm' | transloco }}\n  </button>\n\n  <mat-menu #choicesMenu=\"matMenu\">\n    <button mat-menu-item (click)=\"createChoicesOrigin()\">\n      {{ 'New..' | transloco }}\n    </button>\n    <ng-container *ngIf=\"choicesOrigins | async as cos\">\n      <button\n        mat-menu-item\n        *ngFor=\"let choicesOrigin of cos\"\n        (click)=\"editChoicesOrigin(choicesOrigin)\"\n      >\n        {{ (choicesOrigin.label || choicesOrigin.name) | transloco }}\n      </button>\n    </ng-container>\n  </mat-menu>\n</mat-toolbar>\n\n<div class=\"ajf-formtree-container\">\n  <mat-drawer-container\n    cdkDropListGroup\n    class=\"ajf-formtree-drawer-container\"\n  >\n    <mat-drawer #leftSidenav position=\"start\" mode=\"over\" class=\"ajf-sidenav-modern\">\n      <div class=\"ajf-drawer-header\">\n        <mat-form-field class=\"ajf-search-field\" floatLabel=\"auto\">\n          <mat-icon matPrefix>search</mat-icon>\n          <input\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"searchTerm\"\n            placeholder=\"{{ 'Search elements...' | transloco }}\"\n          />\n          <button\n            *ngIf=\"searchTerm\"\n            matSuffix\n            mat-icon-button\n            aria-label=\"Clear\"\n            (click)=\"searchTerm=''\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n    \n      <div\n        #sourceDropList\n        class=\"ajf-drawer-content\"\n        cdkDropList\n        [cdkDropListConnectedTo]=\"(connectedDropLists | async)!\"\n        [cdkDropListEnterPredicate]=\"disableDrop\"\n        [cdkDropListData]=\"nodeTypes\"\n      >\n        <ajf-fb-node-type-entry\n          *ngFor=\"let nodeType of nodeTypes | nodeTypeFilter: searchTerm\"\n          cdkDrag\n          [cdkDragData]=\"nodeType\"\n          (cdkDragStarted)=\"leftSidenav.close()\"\n          [nodeType]=\"nodeType\"\n        ></ajf-fb-node-type-entry>\n      </div>\n    </mat-drawer>\n    \n    <div #designer class=\"ajf-designer\">\n      <ajf-fb-node-entry\n        id=\"slides-list\"\n        cdkDropList\n        (cdkDropListDropped)=\"onDrop($event)\"\n        [cdkDropListEnterPredicate]=\"disableFieldDrop\"\n        *ngFor=\"let nodeEntry of (nodeEntriesTree | async); let isFirst = first\"\n        [isFirst]=\"isFirst\"\n        [nodeEntry]=\"nodeEntry\"\n      ></ajf-fb-node-entry>\n    </div>\n  </mat-drawer-container>\n\n  <div class=\"ajf-formtree-properties\" #rightSidenav position=\"end\" mode=\"side\">\n    <ajf-fb-node-properties></ajf-fb-node-properties>\n  </div>\n</div>\n", styles: ["ajf-form-builder{display:flex;flex-direction:column;align-items:stretch;position:relative;min-height:300px}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;padding:.5rem 1rem;box-shadow:0 2px 6px #00000014;border-bottom:1px solid rgba(0,0,0,.06);gap:.75rem}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar button[mat-icon-button] mat-icon{transition:transform .2s ease,color .2s ease}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar button[mat-icon-button]:hover mat-icon{transform:scale(1.1)}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar .ajf-toolbar-group{display:flex;align-items:center;gap:.5rem;border-radius:100vmax;padding:.25rem .5rem;background-color:#00000008}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar .ajf-spacer{flex:1 1 auto}ajf-form-builder .ajf-formtree-container{display:flex;flex-flow:row;align-items:flex-start;justify-content:space-between;gap:1.25rem;padding:1rem;box-sizing:border-box}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container{flex:1 1 auto;min-height:47vh;border-radius:1rem;border:1px solid #ccc;overflow:hidden;transition:box-shadow .25s ease-in-out}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container mat-drawer{max-width:20%;min-width:240px;border-right:1px solid rgba(0,0,0,.08)}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .ajf-designer{flex:1;padding:1rem;overflow-y:auto}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .mat-expansion-panel-body{padding:12px}ajf-form-builder .ajf-formtree-container .ajf-formtree-properties{flex:0 1 auto;max-width:24%;min-width:260px;max-height:70vh;overflow-y:auto;position:sticky;top:64px;border-radius:1rem;border:1px solid #ccc;padding:1rem;transition:box-shadow .3s ease,transform .3s ease}ajf-form-builder .ajf-formtree-container .ajf-formtree-properties:hover{box-shadow:0 0 14px #0000001a}ajf-form-builder .ajf-sidenav-modern{display:flex;flex-direction:column;max-width:22%;min-width:220px;border-right:1px solid rgba(0,0,0,.08);box-shadow:inset -1px 0 #0000000d}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-header{position:sticky;top:0;z-index:2;padding:.5rem;border-bottom:1px solid rgba(0,0,0,.08)}ajf-form-builder .ajf-sidenav-modern .ajf-search-field{width:100%;margin:0}ajf-form-builder .ajf-sidenav-modern .ajf-search-field input{font-size:.9rem}ajf-form-builder .ajf-sidenav-modern .ajf-search-field mat-icon{color:#0000008a}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content{flex:1 1 auto;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.25rem;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.25) transparent}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content::-webkit-scrollbar{width:6px}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content::-webkit-scrollbar-thumb{background:#00000040;border-radius:4px}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content::-webkit-scrollbar-thumb:hover{background:#0006}ajf-form-builder .ajf-sidenav-modern ajf-fb-node-type-entry{border-radius:8px;transition:background-color .15s ease,transform .15s ease;cursor:pointer}ajf-form-builder .ajf-sidenav-modern ajf-fb-node-type-entry:hover{background-color:#0000000d;transform:scale(1.02)}@media (max-height: 700px){ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content{padding:.25rem}}@media (max-width: 900px){ajf-form-builder .ajf-sidenav-modern{max-width:240px;min-width:180px}ajf-form-builder .ajf-sidenav-modern .ajf-search-field input{font-size:.8rem}}@media (max-width: 1024px){ajf-form-builder .ajf-formtree-container{flex-direction:column;gap:1rem}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container{min-height:40vh;border-radius:.75rem}ajf-form-builder .ajf-formtree-container .ajf-formtree-properties{max-width:100%;position:relative;top:0;border-radius:.75rem}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar{flex-wrap:wrap;justify-content:center}}ajf-form-builder *{scroll-behavior:smooth}\n"] }]
+            args: [{ selector: 'ajf-form-builder', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class.ajf-form-builder-fill-height]': 'fillHeight' }, template: "<mat-toolbar class=\"ajf-formbuilder-toolbar\">\n  <button mat-icon-button (click)=\"leftSidenav.toggle()\" aria-label=\"Toggle side navigation\">\n    <mat-icon>add_box</mat-icon>\n  </button>\n  <button mat-button [matMenuTriggerFor]=\"choicesMenu\">\n    {{ 'Choices' | transloco }}\n  </button>\n  <button mat-button (click)=\"editStringIdentifier()\">\n    {{ 'Default columns' | transloco }}\n  </button>\n\n  <div class=\"ajf-toolbar-group\">\n    <button\n      mat-icon-button\n      aria-label=\"Collapse all slides\"\n      matTooltip=\"Keep slides collapsed\"\n      (click)=\"collapseAll()\"\n    >\n      <mat-icon>unfold_less</mat-icon>\n    </button>\n\n    <mat-slide-toggle\n      color=\"primary\"\n      [checked]=\"expandSlides\"\n      (change)=\"expandToggle($event)\"\n      aria-label=\"Toggle slide expansion\"\n    ></mat-slide-toggle>\n\n    <button\n      mat-icon-button\n      aria-label=\"Expand all slides\"\n      matTooltip=\"Keep slides expanded\"\n      (click)=\"expandAll()\"\n    >\n      <mat-icon>unfold_more</mat-icon>\n    </button>\n  </div>\n\n  <span class=\"ajf-spacer\"></span>\n\n  <button mat-button (click)=\"downloadAsXlsform()\" [disabled]=\"xlsformDownloading\">\n    {{ 'Download as XLSForm' | transloco }}\n  </button>\n\n  <mat-menu #choicesMenu=\"matMenu\">\n    <button mat-menu-item (click)=\"createChoicesOrigin()\">\n      {{ 'New..' | transloco }}\n    </button>\n    <ng-container *ngIf=\"choicesOrigins | async as cos\">\n      <button\n        mat-menu-item\n        *ngFor=\"let choicesOrigin of cos\"\n        (click)=\"editChoicesOrigin(choicesOrigin)\"\n      >\n        {{ (choicesOrigin.label || choicesOrigin.name) | transloco }}\n      </button>\n    </ng-container>\n  </mat-menu>\n</mat-toolbar>\n\n<div class=\"ajf-formtree-container\">\n  <mat-drawer-container\n    cdkDropListGroup\n    class=\"ajf-formtree-drawer-container\"\n  >\n    <mat-drawer #leftSidenav position=\"start\" mode=\"over\" class=\"ajf-sidenav-modern\">\n      <div class=\"ajf-drawer-header\">\n        <mat-form-field class=\"ajf-search-field\" floatLabel=\"auto\">\n          <mat-icon matPrefix>search</mat-icon>\n          <input\n            matInput\n            type=\"text\"\n            [(ngModel)]=\"searchTerm\"\n            placeholder=\"{{ 'Search elements...' | transloco }}\"\n          />\n          <button\n            *ngIf=\"searchTerm\"\n            matSuffix\n            mat-icon-button\n            aria-label=\"Clear\"\n            (click)=\"searchTerm=''\"\n          >\n            <mat-icon>close</mat-icon>\n          </button>\n        </mat-form-field>\n      </div>\n    \n      <div\n        #sourceDropList\n        class=\"ajf-drawer-content\"\n        cdkDropList\n        [cdkDropListConnectedTo]=\"(connectedDropLists | async)!\"\n        [cdkDropListEnterPredicate]=\"disableDrop\"\n        [cdkDropListData]=\"nodeTypes\"\n      >\n        <ng-container *ngFor=\"let group of nodeTypes | nodeTypeFilter: searchTerm | nodeTypeGroups\">\n          <div class=\"ajf-fb-category-header\" *ngIf=\"group.category\">\n            {{ group.category | transloco }}\n          </div>\n          <ajf-fb-node-type-entry\n            *ngFor=\"let nodeType of group.nodeTypes\"\n            cdkDrag\n            [cdkDragData]=\"nodeType\"\n            (cdkDragStarted)=\"leftSidenav.close()\"\n            [nodeType]=\"nodeType\"\n          ></ajf-fb-node-type-entry>\n        </ng-container>\n      </div>\n    </mat-drawer>\n    \n    <div #designer class=\"ajf-designer\">\n      <ajf-fb-node-entry\n        id=\"slides-list\"\n        cdkDropList\n        (cdkDropListDropped)=\"onDrop($event)\"\n        [cdkDropListEnterPredicate]=\"disableFieldDrop\"\n        *ngFor=\"let nodeEntry of (nodeEntriesTree | async); let isFirst = first\"\n        [isFirst]=\"isFirst\"\n        [nodeEntry]=\"nodeEntry\"\n      ></ajf-fb-node-entry>\n    </div>\n  </mat-drawer-container>\n\n  <div class=\"ajf-formtree-properties\" #rightSidenav position=\"end\" mode=\"side\">\n    <ajf-fb-node-properties></ajf-fb-node-properties>\n  </div>\n</div>\n", styles: ["ajf-form-builder{display:flex;flex-direction:column;align-items:stretch;position:relative;min-height:300px}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;height:48px;min-height:48px;padding:0 1rem;box-shadow:none;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent);gap:.75rem}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar button[mat-icon-button] mat-icon{transition:transform .2s ease,color .2s ease}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar button[mat-icon-button]:hover mat-icon{transform:scale(1.1)}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar .ajf-toolbar-group{display:flex;align-items:center;gap:.5rem;border-radius:100vmax;padding:.25rem .5rem;background-color:color-mix(in srgb,currentColor 4%,transparent)}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar .ajf-spacer{flex:1 1 auto}ajf-form-builder .ajf-formtree-container{display:flex;flex-flow:row;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px 22px;box-sizing:border-box}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container{flex:1 1 auto;min-height:47vh;border:none;border-radius:0;background:transparent;overflow:hidden;transition:box-shadow .25s ease-in-out}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .ajf-designer{flex:1;padding:4px 2px;overflow-y:auto}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .ajf-designer .mat-card-container .mat-mdc-card{border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:10px;box-shadow:0 1px 2px #0000000d}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .ajf-designer .mat-expansion-panel-header{background:color-mix(in srgb,currentColor 4%,transparent)}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .ajf-designer .mat-expansion-panel-header:hover{background:color-mix(in srgb,currentColor 6%,transparent)}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .ajf-designer .mat-expansion-panel-header-title{font-size:14.5px;font-weight:600}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container .mat-expansion-panel-body{padding:12px}ajf-form-builder .ajf-formtree-container .ajf-formtree-properties{flex:0 1 auto;min-width:312px;max-width:312px;max-height:70vh;overflow-y:auto;position:sticky;top:64px;border-radius:10px;border:1px solid color-mix(in srgb,currentColor 12%,transparent);padding:1rem;transition:box-shadow .3s ease,transform .3s ease}ajf-form-builder .ajf-formtree-container .ajf-formtree-properties:hover{box-shadow:0 0 14px #0000001a}ajf-form-builder .ajf-sidenav-modern{display:flex;flex-direction:column;min-width:250px;max-width:250px;border-right:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:10px 0 0 10px}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-header{position:sticky;top:0;z-index:2;padding:.5rem;border-bottom:1px solid color-mix(in srgb,currentColor 8%,transparent)}ajf-form-builder .ajf-sidenav-modern .ajf-search-field{width:100%;margin:0}ajf-form-builder .ajf-sidenav-modern .ajf-search-field input{font-size:.9rem}ajf-form-builder .ajf-sidenav-modern .ajf-search-field mat-icon{color:color-mix(in srgb,currentColor 60%,transparent)}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content{flex:1 1 auto;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.25rem;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,currentColor 25%,transparent) transparent}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content::-webkit-scrollbar{width:6px}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content::-webkit-scrollbar-thumb{background:color-mix(in srgb,currentColor 25%,transparent);border-radius:4px}ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,currentColor 40%,transparent)}ajf-form-builder .ajf-sidenav-modern .ajf-fb-category-header{padding:14px 8px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,currentColor 60%,transparent);-webkit-user-select:none;user-select:none;pointer-events:none}ajf-form-builder .ajf-sidenav-modern .ajf-fb-category-header:first-child{padding-top:4px}ajf-form-builder .ajf-sidenav-modern ajf-fb-node-type-entry{transition:background-color .15s ease,transform .15s ease}ajf-form-builder .ajf-sidenav-modern ajf-fb-node-type-entry:hover{background-color:color-mix(in srgb,currentColor 6%,transparent);transform:scale(1.02)}@media (max-height: 700px){ajf-form-builder .ajf-sidenav-modern .ajf-drawer-content{padding:.25rem}}@media (max-width: 900px){ajf-form-builder .ajf-sidenav-modern{max-width:240px;min-width:180px}ajf-form-builder .ajf-sidenav-modern .ajf-search-field input{font-size:.8rem}}@media (max-width: 1024px){ajf-form-builder .ajf-formtree-container{flex-direction:column;gap:1rem}ajf-form-builder .ajf-formtree-container mat-drawer-container.ajf-formtree-drawer-container{min-height:40vh}ajf-form-builder .ajf-formtree-container .ajf-formtree-properties{min-width:0;max-width:100%;position:relative;top:0}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar{flex-wrap:wrap;justify-content:center}}ajf-form-builder.ajf-form-builder-fill-height{flex:1 1 auto;height:100%;min-height:0}ajf-form-builder.ajf-form-builder-fill-height .ajf-formtree-container{flex:1 1 auto;min-height:0;align-items:stretch}ajf-form-builder.ajf-form-builder-fill-height mat-drawer-container.ajf-formtree-drawer-container{min-height:0;height:100%}ajf-form-builder.ajf-form-builder-fill-height mat-drawer-container.ajf-formtree-drawer-container .ajf-designer{height:100%;box-sizing:border-box}ajf-form-builder.ajf-form-builder-fill-height .ajf-formtree-properties{position:static;top:auto;max-height:none}ajf-form-builder *{scroll-behavior:smooth}\n"] }]
         }], ctorParameters: () => [{ type: AjfFormBuilderService }, { type: i2.MatDialog }, { type: i0.ChangeDetectorRef }], propDecorators: { designerCont: [{
                 type: ViewChild,
                 args: ['designer', { static: true }]
             }], form: [{
                 type: Input
+            }], expandSlides: [{
+                type: Input
+            }], expandSlidesChange: [{
+                type: Output
+            }], fillHeight: [{
+                type: Input
             }], formBuilderValidation: [{
                 type: Output
             }] } });
@@ -3372,7 +3527,8 @@ class AjfFormBuilderModule {
             AjfFbValidationConditionEditorDialog,
             AjfFbWarningConditionEditorDialog,
             AjfFormBuilder,
-            NodeTypeFilterPipe], imports: [AjfNodeIconModule,
+            NodeTypeFilterPipe,
+            NodeTypeGroupsPipe], imports: [AjfNodeIconModule,
             CommonModule,
             DragDropModule,
             FormsModule,
@@ -3388,6 +3544,7 @@ class AjfFormBuilderModule {
             MatListModule,
             MatMenuModule,
             MatSelectModule,
+            NgxMatSelectSearchModule,
             MatSidenavModule,
             MatSliderModule,
             MatTableModule,
@@ -3413,6 +3570,7 @@ class AjfFormBuilderModule {
             MatListModule,
             MatMenuModule,
             MatSelectModule,
+            NgxMatSelectSearchModule,
             MatSidenavModule,
             MatSliderModule,
             MatTableModule,
@@ -3443,6 +3601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         MatListModule,
                         MatMenuModule,
                         MatSelectModule,
+                        NgxMatSelectSearchModule,
                         MatSidenavModule,
                         MatSliderModule,
                         MatTableModule,
@@ -3467,6 +3626,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         AjfFbWarningConditionEditorDialog,
                         AjfFormBuilder,
                         NodeTypeFilterPipe,
+                        NodeTypeGroupsPipe,
                     ],
                     exports: [AjfFormBuilder],
                     providers: [AjfFormBuilderService, AjfNodePropertiesNameMatchValidator],
@@ -3499,5 +3659,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AjfFormBuilder, AjfFormBuilderModule, AjfFormBuilderService, cleanDefaultValue, disableFieldDropPredicate, disableSlideDropPredicate, flattenNodes, onDropProcess };
+export { AjfFormBuilder, AjfFormBuilderModule, AjfFormBuilderNodeTypeCategories, AjfFormBuilderService, NodeTypeGroupsPipe, cleanDefaultValue, disableFieldDropPredicate, disableSlideDropPredicate, flattenNodes, onDropProcess };
 //# sourceMappingURL=ajf-material-form-builder.mjs.map