@ajf/material 18.1.1 → 18.1.2

package/fesm2022/ajf-material-audio.mjs

@@ -0,0 +1,212 @@
+import { AjfAudio } from '@ajf/core/audio';
+import * as i0 from '@angular/core';
+import { Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+/**
+ * @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/.
+ *
+ */
+class AjfAudioComponent extends AjfAudio {
+    constructor(cdr) {
+        super(cdr);
+        this.readonly = false;
+        this.isRecording = false;
+        this.audioUrl = null;
+        this.mediaRecorder = null;
+        this.audioChunks = [];
+        // Keep track of object URLs to revoke them
+        this.createdUrls = [];
+    }
+    ngOnDestroy() {
+        this.stopRecording();
+        this.revokeUrls();
+    }
+    // Override writeValue to handle audioUrl creation
+    writeValue(value) {
+        super.writeValue(value);
+        // If we have a value (base64) but no URL, create one for playback if needed
+        // However, for <audio src="data:..."> base64 works directly.
+        // If the value is a blob URL, we might need handling, but here we assume base64 storage.
+        this.audioUrl = value;
+        this._cdr.markForCheck();
+    }
+    async startRecording() {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            this.mediaRecorder = new MediaRecorder(stream);
+            this.audioChunks = [];
+            this.mediaRecorder.ondataavailable = event => {
+                this.audioChunks.push(event.data);
+            };
+            this.mediaRecorder.onstop = () => {
+                const audioBlob = new Blob(this.audioChunks, { type: 'audio/webm' });
+                // Create a temporary URL for immediate playback if needed,
+                // but primarily we converts to base64 for value.
+                const reader = new FileReader();
+                reader.readAsDataURL(audioBlob);
+                reader.onloadend = () => {
+                    const base64data = reader.result;
+                    this.value = base64data;
+                    this.audioUrl = base64data;
+                    this._cdr.markForCheck();
+                };
+            };
+            this.mediaRecorder.start();
+            this.isRecording = true;
+            this._cdr.markForCheck();
+        }
+        catch (err) {
+            console.error('Error accessing microphone:', err);
+        }
+    }
+    stopRecording() {
+        if (this.mediaRecorder && this.isRecording) {
+            this.mediaRecorder.stop();
+            this.isRecording = false;
+            this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
+            this._cdr.markForCheck();
+        }
+    }
+    clearRecording() {
+        this.audioUrl = null;
+        this.audioChunks = [];
+        this.value = null;
+        this._cdr.markForCheck();
+    }
+    revokeUrls() {
+        this.createdUrls.forEach(url => URL.revokeObjectURL(url));
+        this.createdUrls = [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfAudioComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AjfAudioComponent, selector: "ajf-audio", inputs: { readonly: "readonly" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: AjfAudioComponent,
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"ajf-field-wrapper\">\n  <div class=\"ajf-audio-controls\">\n    <!-- Start Recording Button -->\n    <button\n      mat-mini-fab\n      color=\"primary\"\n      (click)=\"startRecording()\"\n      *ngIf=\"!isRecording && !audioUrl\"\n      [disabled]=\"readonly\"\n      matTooltip=\"Start Recording\"\n    >\n      <mat-icon>mic</mat-icon>\n    </button>\n\n    <!-- Stop Recording Button -->\n    <button\n      mat-mini-fab\n      color=\"warn\"\n      (click)=\"stopRecording()\"\n      *ngIf=\"isRecording\"\n      matTooltip=\"Stop Recording\"\n    >\n      <mat-icon>stop</mat-icon>\n    </button>\n\n    <!-- Recording Indicator -->\n    <div *ngIf=\"isRecording\" class=\"recording-indicator\">\n      <mat-icon>fiber_manual_record</mat-icon>\n      Recording...\n    </div>\n\n    <!-- Playback -->\n    <audio *ngIf=\"audioUrl\" [src]=\"audioUrl\" controls></audio>\n\n    <!-- Delete/Reset Button -->\n    <button\n      mat-icon-button\n      color=\"warn\"\n      (click)=\"clearRecording()\"\n      *ngIf=\"audioUrl\"\n      [disabled]=\"readonly\"\n      matTooltip=\"Delete Audio\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".ajf-audio-controls{display:flex;align-items:center;gap:16px;margin-top:8px}.ajf-audio-controls .recording-indicator{color:#f44336;animation:pulse 1.5s infinite;display:flex;align-items:center;gap:4px;font-weight:500}.ajf-audio-controls audio{height:36px;outline:none}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfAudioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ajf-audio', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: AjfAudioComponent,
+                            multi: true,
+                        },
+                    ], template: "<div class=\"ajf-field-wrapper\">\n  <div class=\"ajf-audio-controls\">\n    <!-- Start Recording Button -->\n    <button\n      mat-mini-fab\n      color=\"primary\"\n      (click)=\"startRecording()\"\n      *ngIf=\"!isRecording && !audioUrl\"\n      [disabled]=\"readonly\"\n      matTooltip=\"Start Recording\"\n    >\n      <mat-icon>mic</mat-icon>\n    </button>\n\n    <!-- Stop Recording Button -->\n    <button\n      mat-mini-fab\n      color=\"warn\"\n      (click)=\"stopRecording()\"\n      *ngIf=\"isRecording\"\n      matTooltip=\"Stop Recording\"\n    >\n      <mat-icon>stop</mat-icon>\n    </button>\n\n    <!-- Recording Indicator -->\n    <div *ngIf=\"isRecording\" class=\"recording-indicator\">\n      <mat-icon>fiber_manual_record</mat-icon>\n      Recording...\n    </div>\n\n    <!-- Playback -->\n    <audio *ngIf=\"audioUrl\" [src]=\"audioUrl\" controls></audio>\n\n    <!-- Delete/Reset Button -->\n    <button\n      mat-icon-button\n      color=\"warn\"\n      (click)=\"clearRecording()\"\n      *ngIf=\"audioUrl\"\n      [disabled]=\"readonly\"\n      matTooltip=\"Delete Audio\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".ajf-audio-controls{display:flex;align-items:center;gap:16px;margin-top:8px}.ajf-audio-controls .recording-indicator{color:#f44336;animation:pulse 1.5s infinite;display:flex;align-items:center;gap:4px;font-weight:500}.ajf-audio-controls audio{height:36px;outline:none}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { readonly: [{
+                type: Input
+            }] } });
+
+/**
+ * @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/.
+ *
+ */
+class AjfAudioModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfAudioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: AjfAudioModule, declarations: [AjfAudioComponent], imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, MatTooltipModule], exports: [AjfAudioComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfAudioModule, imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, MatTooltipModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AjfAudioModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, MatTooltipModule],
+                    declarations: [AjfAudioComponent],
+                    exports: [AjfAudioComponent],
+                }]
+        }] });
+
+/**
+ * @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/.
+ *
+ */
+
+/**
+ * @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/.
+ *
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AjfAudioComponent, AjfAudioModule };
+//# sourceMappingURL=ajf-material-audio.mjs.map

package/fesm2022/ajf-material-audio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ajf-material-audio.mjs","sources":["../../../projects/material/audio/src/audio.ts","../../../projects/material/audio/src/audio.html","../../../projects/material/audio/src/audio-module.ts","../../../projects/material/audio/src/public_api.ts","../../../projects/material/audio/index.ts","../../../projects/material/audio/ajf-material-audio.ts"],"sourcesContent":["/**\n * @license\n * Copyright (C) Gnucoop soc. coop.\n *\n * This file is part of the Advanced JSON forms (ajf).\n *\n * Advanced JSON forms (ajf) is free software: you can redistribute it and/or\n * modify it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the License,\n * or (at your option) any later version.\n *\n * Advanced JSON forms (ajf) is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero\n * General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with Advanced JSON forms (ajf).\n * If not, see http://www.gnu.org/licenses/.\n *\n */\n\nimport {AjfAudio} from '@ajf/core/audio';\nimport {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  Input,\n  OnDestroy,\n  ViewEncapsulation,\n} from '@angular/core';\nimport {NG_VALUE_ACCESSOR} from '@angular/forms';\n\n@Component({\n  selector: 'ajf-audio',\n  templateUrl: 'audio.html',\n  styleUrls: ['audio.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: AjfAudioComponent,\n      multi: true,\n    },\n  ],\n})\nexport class AjfAudioComponent extends AjfAudio implements OnDestroy {\n  @Input() readonly = false;\n\n  isRecording = false;\n  audioUrl: string | null = null;\n  private mediaRecorder: MediaRecorder | null = null;\n  private audioChunks: any[] = [];\n  // Keep track of object URLs to revoke them\n  private createdUrls: string[] = [];\n\n  constructor(cdr: ChangeDetectorRef) {\n    super(cdr);\n  }\n\n  ngOnDestroy(): void {\n    this.stopRecording();\n    this.revokeUrls();\n  }\n\n  // Override writeValue to handle audioUrl creation\n  override writeValue(value: string | null): void {\n    super.writeValue(value);\n    // If we have a value (base64) but no URL, create one for playback if needed\n    // However, for <audio src=\"data:...\"> base64 works directly.\n    // If the value is a blob URL, we might need handling, but here we assume base64 storage.\n    this.audioUrl = value;\n    this._cdr.markForCheck();\n  }\n\n  async startRecording() {\n    try {\n      const stream = await navigator.mediaDevices.getUserMedia({audio: true});\n      this.mediaRecorder = new MediaRecorder(stream);\n      this.audioChunks = [];\n\n      this.mediaRecorder.ondataavailable = event => {\n        this.audioChunks.push(event.data);\n      };\n\n      this.mediaRecorder.onstop = () => {\n        const audioBlob = new Blob(this.audioChunks, {type: 'audio/webm'});\n        // Create a temporary URL for immediate playback if needed,\n        // but primarily we converts to base64 for value.\n\n        const reader = new FileReader();\n        reader.readAsDataURL(audioBlob);\n        reader.onloadend = () => {\n          const base64data = reader.result as string;\n          this.value = base64data;\n          this.audioUrl = base64data;\n          this._cdr.markForCheck();\n        };\n      };\n\n      this.mediaRecorder.start();\n      this.isRecording = true;\n      this._cdr.markForCheck();\n    } catch (err) {\n      console.error('Error accessing microphone:', err);\n    }\n  }\n\n  stopRecording() {\n    if (this.mediaRecorder && this.isRecording) {\n      this.mediaRecorder.stop();\n      this.isRecording = false;\n      this.mediaRecorder.stream.getTracks().forEach(track => track.stop());\n      this._cdr.markForCheck();\n    }\n  }\n\n  clearRecording() {\n    this.audioUrl = null;\n    this.audioChunks = [];\n    this.value = null;\n    this._cdr.markForCheck();\n  }\n\n  private revokeUrls() {\n    this.createdUrls.forEach(url => URL.revokeObjectURL(url));\n    this.createdUrls = [];\n  }\n}\n","<div class=\"ajf-field-wrapper\">\n  <div class=\"ajf-audio-controls\">\n    <!-- Start Recording Button -->\n    <button\n      mat-mini-fab\n      color=\"primary\"\n      (click)=\"startRecording()\"\n      *ngIf=\"!isRecording && !audioUrl\"\n      [disabled]=\"readonly\"\n      matTooltip=\"Start Recording\"\n    >\n      <mat-icon>mic</mat-icon>\n    </button>\n\n    <!-- Stop Recording Button -->\n    <button\n      mat-mini-fab\n      color=\"warn\"\n      (click)=\"stopRecording()\"\n      *ngIf=\"isRecording\"\n      matTooltip=\"Stop Recording\"\n    >\n      <mat-icon>stop</mat-icon>\n    </button>\n\n    <!-- Recording Indicator -->\n    <div *ngIf=\"isRecording\" class=\"recording-indicator\">\n      <mat-icon>fiber_manual_record</mat-icon>\n      Recording...\n    </div>\n\n    <!-- Playback -->\n    <audio *ngIf=\"audioUrl\" [src]=\"audioUrl\" controls></audio>\n\n    <!-- Delete/Reset Button -->\n    <button\n      mat-icon-button\n      color=\"warn\"\n      (click)=\"clearRecording()\"\n      *ngIf=\"audioUrl\"\n      [disabled]=\"readonly\"\n      matTooltip=\"Delete Audio\"\n    >\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n</div>\n","/**\n * @license\n * Copyright (C) Gnucoop soc. coop.\n *\n * This file is part of the Advanced JSON forms (ajf).\n *\n * Advanced JSON forms (ajf) is free software: you can redistribute it and/or\n * modify it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the License,\n * or (at your option) any later version.\n *\n * Advanced JSON forms (ajf) is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero\n * General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with Advanced JSON forms (ajf).\n * If not, see http://www.gnu.org/licenses/.\n *\n */\n\nimport {CommonModule} from '@angular/common';\nimport {NgModule} from '@angular/core';\nimport {MatButtonModule} from '@angular/material/button';\nimport {MatIconModule} from '@angular/material/icon';\nimport {MatTooltipModule} from '@angular/material/tooltip';\n\nimport {AjfAudioComponent} from './audio';\nimport {FormsModule} from '@angular/forms';\n\n@NgModule({\n  imports: [CommonModule, FormsModule, MatButtonModule, MatIconModule, MatTooltipModule],\n  declarations: [AjfAudioComponent],\n  exports: [AjfAudioComponent],\n})\nexport class AjfAudioModule {}\n","/**\n * @license\n * Copyright (C) Gnucoop soc. coop.\n *\n * This file is part of the Advanced JSON forms (ajf).\n *\n * Advanced JSON forms (ajf) is free software: you can redistribute it and/or\n * modify it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the License,\n * or (at your option) any later version.\n *\n * Advanced JSON forms (ajf) is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero\n * General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with Advanced JSON forms (ajf).\n * If not, see http://www.gnu.org/licenses/.\n *\n */\n\nexport * from './audio';\nexport * from './audio-module';\n","/**\n * @license\n * Copyright (C) Gnucoop soc. coop.\n *\n * This file is part of the Advanced JSON forms (ajf).\n *\n * Advanced JSON forms (ajf) is free software: you can redistribute it and/or\n * modify it under the terms of the GNU Affero General Public License as\n * published by the Free Software Foundation, either version 3 of the License,\n * or (at your option) any later version.\n *\n * Advanced JSON forms (ajf) is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero\n * General Public License for more details.\n *\n * You should have received a copy of the GNU Affero General Public License\n * along with Advanced JSON forms (ajf).\n * If not, see http://www.gnu.org/licenses/.\n *\n */\n\nexport * from './src/public_api';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -558,6 +558,10 @@ class AjfFormBuilderService {
                 label: 'Range',
                 nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Range },
             },
+            {
+                label: 'Audio',
+                nodeType: { node: AjfNodeType.AjfField, field: AjfFieldType.Audio },
+            },
         ];
         this._form = new BehaviorSubject(null);
         this._formObs = this._form;
@@ -1574,7 +1578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  *
  */
 const branchColors = [
-    '#F44336', // RED
+    '#C62828', // RED
     '#4CAF50', // GREEN
     '#3F51B5', // INDIGO
     '#FFC107', // AMBER
@@ -1781,11 +1785,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;background-color:#fff}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:#f44336}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;color:#000000de;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}ajf-fb-node-entry .mat-card-container.ajf-highlighted-formbuilder-node>mat-card{background-color:#fff9c4!important}ajf-fb-node-entry .ajf-highlighted-formbuilder-node .mat-mdc-card .mat-expansion-panel .mat-expansion-panel-header{background-color:#fff9c4!important}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:#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 }); }
 }
 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;background-color:#fff}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:#f44336}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;color:#000000de;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}ajf-fb-node-entry .mat-card-container.ajf-highlighted-formbuilder-node>mat-card{background-color:#fff9c4!important}ajf-fb-node-entry .ajf-highlighted-formbuilder-node .mat-mdc-card .mat-expansion-panel .mat-expansion-panel-header{background-color:#fff9c4!important}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:#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"] }]
         }], ctorParameters: () => [{ type: AjfFormBuilderService }], propDecorators: { branchLines: [{
                 type: ViewChildren,
                 args: [AjfFbBranchLine]
@@ -3252,11 +3256,11 @@ 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 }], 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  <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;background-color:#fdfdfd;color:#1c1b1f}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;padding:.5rem 1rem;background-color:#fff;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;background-color:#fff;border-radius:1rem;box-shadow:0 0 12px #0000000d;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;background-color:#fff;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;background-color:#f8f9fa;border-radius:1rem;box-shadow:0 0 10px #0000000d;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;background-color:#fafafa;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;background:#fff;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" }, 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  <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 }); }
 }
 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  <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;background-color:#fdfdfd;color:#1c1b1f}ajf-form-builder mat-toolbar.ajf-formbuilder-toolbar{position:sticky;top:0;z-index:3;display:flex;align-items:center;padding:.5rem 1rem;background-color:#fff;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;background-color:#fff;border-radius:1rem;box-shadow:0 0 12px #0000000d;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;background-color:#fff;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;background-color:#f8f9fa;border-radius:1rem;box-shadow:0 0 10px #0000000d;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;background-color:#fafafa;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;background:#fff;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, 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  <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"] }]
         }], ctorParameters: () => [{ type: AjfFormBuilderService }, { type: i2.MatDialog }], propDecorators: { designerCont: [{
                 type: ViewChild,
                 args: ['designer', { static: true }]