@acrodata/gui 1.0.0 → 1.1.0

package/fesm2022/acrodata-gui.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Pipe, Directive, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, Injectable, EventEmitter, ViewChild, Output, NgModule } from '@angular/core';
+import { Pipe, Directive, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, Injectable, InjectionToken, Optional, Inject, EventEmitter, ViewChild, Output, NgModule } from '@angular/core';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormGroup, FormControl, FormArray } from '@angular/forms';
 import { MatHint, MatFormField, MatPrefix, MatSuffix, MatFormFieldModule } from '@angular/material/form-field';
 import { MatInput, MatInputModule } from '@angular/material/input';
-import * as i2 from '@angular/material/icon';
+import * as i1$2 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatSelect, MatSelectModule } from '@angular/material/select';
 import { MatSlider, MatSliderThumb, MatSliderRangeThumb, MatSliderModule } from '@angular/material/slider';
@@ -21,7 +21,7 @@ import { of, Subscription, mergeWith } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
 import { HttpResponse } from '@angular/common/http';
 import { catchError, finalize } from 'rxjs/operators';
-import * as i3 from '@angular/platform-browser';
+import * as i2 from '@angular/platform-browser';
 import { MatOption } from '@angular/material/core';
 
 /**
@@ -272,30 +272,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                 type: Input
             }] } });
 
+class GuiFileUploaderConfig {
+    constructor(http) {
+        this.http = http;
+        /**
+         *  The file upload URL
+         */
+        this.url = '';
+        /**
+         * The file upload params
+         */
+        this.params = {};
+    }
+    /**
+     * The File upload API
+     *
+     * @param file file data
+     * @returns
+     */
+    upload(file) {
+        return this.http.post(this.url, file, {
+            reportProgress: true,
+            observe: 'events',
+            params: this.params,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiFileUploaderConfig, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiFileUploaderConfig, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiFileUploaderConfig, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+
 const svgIcons = {
-    dots_horizontal: `
+    horizontal: `
   <svg viewBox="0 0 24 24">
     <path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"></path>
   </svg>
   `,
-    dots_vertical: `
+    vertical: `
   <svg viewBox="0 0 24 24">
     <path d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"></path>
   </svg>
   `,
-    plus: `
+    add: `
   <svg viewBox="0 0 24 24">
     <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path>
   </svg>
   `,
     delete: `
   <svg viewBox="0 0 24 24">
-    <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"></path>
+    <path d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z"></path>
   </svg>
   `,
-    content_copy: `
+    copy: `
   <svg viewBox="0 0 24 24">
-  <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path>
+    <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path>
   </svg>
   `,
     link: `
@@ -303,60 +338,51 @@ const svgIcons = {
     <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path>
   </svg>
   `,
-    close: `
+    clear: `
   <svg viewBox="0 0 24 24">
     <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
   </svg>
   `,
-    file_outline: `
+    file: `
   <svg viewBox="0 0 24 24">
     <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
   </svg>
   `,
-    file_upload: `
+    upload: `
   <svg viewBox="0 0 24 24">
     <path d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 2L6.46 7.46L7.88 8.88L11 5.75V15H13V5.75L16.13 8.88L17.55 7.45L12 2Z" />
   </svg>
   `,
 };
-
-class GuiFileUploaderConfig {
-    constructor(http) {
-        this.http = http;
-        /**
-         *  The file upload URL
-         */
-        this.url = '';
-        /**
-         * The file upload params
-         */
-        this.params = {};
-    }
-    /**
-     * The File upload API
-     *
-     * @param file file data
-     * @returns
-     */
-    upload(file) {
-        return this.http.post(this.url, file, {
-            reportProgress: true,
-            observe: 'events',
-            params: this.params,
+/** Injection token that can be used to provide the default icons. */
+const GUI_ICONS_CONFIG = new InjectionToken('gui-icons-config');
+class GuiIconsRegistry {
+    constructor(_iconRegistry, _sanitizer, _defaultIcons) {
+        this._iconRegistry = _iconRegistry;
+        this._sanitizer = _sanitizer;
+        this._defaultIcons = _defaultIcons;
+    }
+    add(...iconNames) {
+        const icons = Object.assign(svgIcons, this._defaultIcons);
+        iconNames.forEach(k => {
+            this._iconRegistry.addSvgIconLiteral(k, this._sanitizer.bypassSecurityTrustHtml(icons[k]));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiFileUploaderConfig, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiFileUploaderConfig, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiIconsRegistry, deps: [{ token: i1$2.MatIconRegistry }, { token: i2.DomSanitizer }, { token: GUI_ICONS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiIconsRegistry, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiFileUploaderConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiIconsRegistry, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$2.MatIconRegistry }, { type: i2.DomSanitizer }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [GUI_ICONS_CONFIG]
+                }] }] });
 
 class GuiFileUploader {
-    constructor(fileUploaderCfg, cdr, iconRegistry, sanitizer) {
+    constructor(fileUploaderCfg, cdr, iconsRegistry) {
         this.fileUploaderCfg = fileUploaderCfg;
         this.cdr = cdr;
         this.config = {};
@@ -369,9 +395,7 @@ class GuiFileUploader {
         this.url = '';
         this.onChange = () => { };
         this.onTouched = () => { };
-        ['link', 'close', 'file_outline', 'file_upload'].forEach(k => {
-            iconRegistry.addSvgIconLiteral(k, sanitizer.bypassSecurityTrustHtml(svgIcons[k]));
-        });
+        iconsRegistry.add('link', 'clear', 'file', 'upload');
     }
     ngOnChanges(changes) {
         if (changes['type']) {
@@ -436,14 +460,14 @@ class GuiFileUploader {
         this.onTouched();
         this.fileChange.emit(this.url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiFileUploader, deps: [{ token: GuiFileUploaderConfig }, { token: i0.ChangeDetectorRef }, { token: i2.MatIconRegistry }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiFileUploader, deps: [{ token: GuiFileUploaderConfig }, { token: i0.ChangeDetectorRef }, { token: GuiIconsRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.6", type: GuiFileUploader, isStandalone: true, selector: "gui-file-uploader", inputs: { config: "config", disabled: "disabled", type: "type", name: "name", accept: "accept" }, outputs: { fileChange: "fileChange" }, host: { classAttribute: "gui-field gui-file-uploader" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => GuiFileUploader),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n  <mat-icon matPrefix svgIcon=\"link\" />\n\n  <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n  @if (url) {\n    <button matSuffix mat-icon-button color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n      <mat-icon svgIcon=\"close\" />\n    </button>\n  }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  @if (url) {\n    @switch (type) {\n      @case ('image') {\n        <img [src]=\"url\" />\n      }\n      @case ('video') {\n        <video [src]=\"url\"></video>\n      }\n      @case ('audio') {\n        <audio [src]=\"url\" controls></audio>\n      }\n      @default {\n        <mat-icon svgIcon=\"file_outline\" />\n      }\n    }\n  } @else {\n    <div class=\"gui-file-placeholder\">\n      <mat-icon svgIcon=\"file_upload\" />\n    </div>\n  }\n\n  <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\"\n    [disabled]=\"disabled\" (change)=\"onFileChange($event)\">\n</figure>\n\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:120px;margin:4px 0 0;padding:4px;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:4px}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n  <mat-icon matPrefix svgIcon=\"link\" />\n\n  <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n  @if (url) {\n    <button matSuffix mat-icon-button color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n      <mat-icon svgIcon=\"clear\" />\n    </button>\n  }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  @if (url) {\n    @switch (type) {\n      @case ('image') {\n        <img [src]=\"url\" />\n      }\n      @case ('video') {\n        <video [src]=\"url\"></video>\n      }\n      @case ('audio') {\n        <audio [src]=\"url\" controls></audio>\n      }\n      @default {\n        <mat-icon svgIcon=\"file\" />\n      }\n    }\n  } @else {\n    <div class=\"gui-file-placeholder\">\n      <mat-icon svgIcon=\"upload\" />\n    </div>\n  }\n\n  <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\"\n    [disabled]=\"disabled\" (change)=\"onFileChange($event)\">\n</figure>\n\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:120px;margin:4px 0 0;padding:4px;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:4px}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:24px;height:24px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiFileUploader, decorators: [{
             type: Component,
@@ -466,8 +490,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                         MatSuffix,
                         MatHint,
                         GuiFieldLabel,
-                    ], template: "<mat-form-field>\n  <mat-icon matPrefix svgIcon=\"link\" />\n\n  <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n  @if (url) {\n    <button matSuffix mat-icon-button color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n      <mat-icon svgIcon=\"close\" />\n    </button>\n  }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  @if (url) {\n    @switch (type) {\n      @case ('image') {\n        <img [src]=\"url\" />\n      }\n      @case ('video') {\n        <video [src]=\"url\"></video>\n      }\n      @case ('audio') {\n        <audio [src]=\"url\" controls></audio>\n      }\n      @default {\n        <mat-icon svgIcon=\"file_outline\" />\n      }\n    }\n  } @else {\n    <div class=\"gui-file-placeholder\">\n      <mat-icon svgIcon=\"file_upload\" />\n    </div>\n  }\n\n  <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\"\n    [disabled]=\"disabled\" (change)=\"onFileChange($event)\">\n</figure>\n\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:120px;margin:4px 0 0;padding:4px;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:4px}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:24px;height:24px}\n"] }]
-        }], ctorParameters: () => [{ type: GuiFileUploaderConfig }, { type: i0.ChangeDetectorRef }, { type: i2.MatIconRegistry }, { type: i3.DomSanitizer }], propDecorators: { fileInput: [{
+                    ], template: "<mat-form-field>\n  <mat-icon matPrefix svgIcon=\"link\" />\n\n  <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n  @if (url) {\n    <button matSuffix mat-icon-button color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n      <mat-icon svgIcon=\"clear\" />\n    </button>\n  }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  @if (url) {\n    @switch (type) {\n      @case ('image') {\n        <img [src]=\"url\" />\n      }\n      @case ('video') {\n        <video [src]=\"url\"></video>\n      }\n      @case ('audio') {\n        <audio [src]=\"url\" controls></audio>\n      }\n      @default {\n        <mat-icon svgIcon=\"file\" />\n      }\n    }\n  } @else {\n    <div class=\"gui-file-placeholder\">\n      <mat-icon svgIcon=\"upload\" />\n    </div>\n  }\n\n  <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\"\n    [disabled]=\"disabled\" (change)=\"onFileChange($event)\">\n</figure>\n\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:120px;margin:4px 0 0;padding:4px;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:4px}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:24px;height:24px}\n"] }]
+        }], ctorParameters: () => [{ type: GuiFileUploaderConfig }, { type: i0.ChangeDetectorRef }, { type: GuiIconsRegistry }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
             }], config: [{
@@ -1013,7 +1037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
 
 let nextUniqueId = 0;
 class GuiForm {
-    constructor(iconRegistry, sanitizer) {
+    constructor(iconsRegistry) {
         /**
          * The form instance which allow to track model value and validation status.
          */
@@ -1035,9 +1059,7 @@ class GuiForm {
         this.controlSubscriptions = [];
         // Unique id for this form
         this.uid = `gui-form-${nextUniqueId++}`;
-        ['dots_horizontal', 'dots_vertical', 'content_copy', 'plus', 'delete'].forEach(k => {
-            iconRegistry.addSvgIconLiteral(k, sanitizer.bypassSecurityTrustHtml(svgIcons[k]));
-        });
+        iconsRegistry.add('horizontal', 'vertical', 'copy', 'add', 'delete');
     }
     ngOnChanges(changes) {
         if (changes['config']) {
@@ -1240,8 +1262,8 @@ class GuiForm {
         e.stopPropagation();
         tabs.mode = mode;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiForm, deps: [{ token: i2.MatIconRegistry }, { token: i3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.6", type: GuiForm, isStandalone: true, selector: "gui-form", inputs: { form: "form", config: "config", model: "model" }, outputs: { modelChange: "modelChange" }, host: { properties: { "attr.id": "uid" }, classAttribute: "gui-form" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  @for (item of formFields; track item) {\n    <div>\n      <ng-template [ngTemplateOutlet]=\"controlType\"\n        [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\">\n      </ng-template>\n    </div>\n  }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n  @if (item.show) {\n    <ng-container [formGroup]=\"form\">\n      @switch (item.type) {\n        @case ('text') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('number') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('select') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('switch') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('slider') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('buttonToggle') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('fill') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('file') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('image') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('video') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('audio') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('imageSelect') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n          </gui-field-group>\n        }\n        @case ('textarea') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('hidden') {\n          <input type=\"hidden\" [formControlName]=\"item.key\">\n        }\n        @case ('inline') {\n          <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n            @for (child of item.children; track child) {\n              <ng-template [ngTemplateOutlet]=\"controlType\"\n                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n              </ng-template>\n            }\n          </gui-inline-group>\n        }\n        @case ('group') {\n          <mat-expansion-panel [formGroupName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @for (child of item.children; track child) {\n                <div>\n                  <ng-template [ngTemplateOutlet]=\"controlType\"\n                    [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n                  </ng-template>\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('tabs') {\n          <mat-expansion-panel [formArrayName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n              <!-- Show operation buttons when panel opened -->\n              @if (item.expanded) {\n                <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n                  (click)=\"changeTabsMode($event, item, 'normal')\">\n                  <mat-icon svgIcon=\"dots_horizontal\" />\n                </button>\n                <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n                  (click)=\"changeTabsMode($event, item, 'list')\">\n                  <mat-icon svgIcon=\"dots_vertical\" />\n                </button>\n                @if (item.template && (item.addable || item.addable===undefined)) {\n                  <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"addTab($event, form.get(item.key), item, true)\">\n                    <mat-icon svgIcon=\"content_copy\" />\n                  </button>\n                  <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"addTab($event, form.get(item.key), item)\">\n                    <mat-icon svgIcon=\"plus\" />\n                  </button>\n                  <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"removeTab($event, form.get(item.key), item)\">\n                    <mat-icon svgIcon=\"delete\" />\n                  </button>\n                }\n              }\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @if (item.mode!=='list') {\n                <!-- Horizontal mode -->\n                <mat-tab-group class=\"gui-tabs\" disableRipple\n                  [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <mat-tab [disabled]=\"tab.disabled\">\n                      <ng-template mat-tab-label>\n                        <div>{{tab.name | ejs:{i} }}</div>\n                      </ng-template>\n                      <!-- FormControl & FormArray -->\n                      @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n                        </ng-template>\n                      }\n                      <!-- FormGroup -->\n                      @if (tab.children?.length>0 && tab.type!=='tabs') {\n                        @for (child of tab.children; track child) {\n                          <div>\n                            <ng-template [ngTemplateOutlet]=\"controlType\"\n                              [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n                            </ng-template>\n                          </div>\n                        }\n                      }\n                    </mat-tab>\n                  }\n                </mat-tab-group>\n              } @else {\n                <!-- Vertical mode -->\n                <div class=\"gui-list\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <div class=\"gui-list-item\"\n                      [class.gui-list-item-active]=\"item.selectedIndex===i\">\n                      <div class=\"gui-list-item-heading\">\n                        <span class=\"gui-list-item-title\"\n                        (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</span>\n                        @if (item.template && (item.addable || item.addable===undefined)) {\n                          <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                            (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n                            <mat-icon svgIcon=\"content_copy\" />\n                          </button>\n                          <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                            (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n                            <mat-icon svgIcon=\"plus\" />\n                          </button>\n                          <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                            (click)=\"removeTab($event, form.get(item.key), item, i)\">\n                            <mat-icon svgIcon=\"delete\" />\n                          </button>\n                        }\n                      </div>\n                      <div class=\"gui-list-item-content\">\n                        <!-- FormControl & FormArray -->\n                        @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                          <ng-template [ngTemplateOutlet]=\"controlType\"\n                            [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n                          </ng-template>\n                        }\n                        <!-- FormGroup -->\n                        @if (tab.children?.length>0 && tab.type!=='tabs') {\n                          @for (child of tab.children; track child) {\n                            <div>\n                              <ng-template [ngTemplateOutlet]=\"controlType\"\n                                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n                              </ng-template>\n                            </div>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('menu') {\n          <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n            @for (menuChild of item.children; track menuChild) {\n              <mat-tab [label]=\"menuChild.name\"\n                [disabled]=\"menuChild.disabled\">\n                <ng-template matTabContent>\n                  @if (menuChild.type==='menuItem') {\n                    <!-- Must wrap with div -->\n                    @for (controlItem of menuChild.children; track controlItem) {\n                      <div [formGroupName]=\"menuChild.key\">\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\">\n                        </ng-template>\n                      </div>\n                    }\n                  }\n                  <!-- Support for unlimited nesting -->\n                  @if (menuChild.type==='menu') {\n                    <ng-template [ngTemplateOutlet]=\"controlType\"\n                      [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\">\n                    </ng-template>\n                  }\n                </ng-template>\n              </mat-tab>\n            }\n          </mat-tab-group>\n        }\n      }\n    </ng-container>\n  }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: 12px;--mat-expansion-container-text-size: 12px;--mat-expansion-header-collapsed-state-height: 32px;--mat-expansion-header-expanded-state-height: 32px;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:12px}.gui-form .mat-expansion-panel{box-shadow:none!important}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 12px}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:8px}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:8px}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator:after{vertical-align:2px}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: 12px;--mdc-secondary-navigation-tab-container-height: 24px}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 12px}.gui-form .mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 14px;padding:0}.gui-form .mat-mdc-icon-button .mat-mdc-button-touch-target{width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size)}.gui-form .mat-mdc-icon-button .mat-icon{display:inline-flex;justify-content:center;align-items:center}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 12px;line-height:24px}.gui-list-item-heading:before{position:absolute;left:0;width:2px;height:16px;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{flex:1;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: 4px;padding:4px;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:4px}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;border-width:0;border-radius:var(--mdc-tab-indicator-active-indicator-shape);background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: GuiFieldGroup, selector: "gui-field-group", inputs: ["config"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "component", type: GuiInputText, selector: "gui-input-text", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInputNumber, selector: "gui-input-number", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSelect, selector: "gui-select", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSwitch, selector: "gui-switch", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSlider, selector: "gui-slider", inputs: ["config", "disabled"] }, { kind: "component", type: GuiButtonToggle, selector: "gui-button-toggle", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFill, selector: "gui-fill", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }, { kind: "component", type: GuiImageSelect, selector: "gui-image-select", inputs: ["config", "disabled", "appendTo"] }, { kind: "component", type: GuiTextarea, selector: "gui-textarea", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInlineGroup, selector: "gui-inline-group", inputs: ["config"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiForm, deps: [{ token: GuiIconsRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.6", type: GuiForm, isStandalone: true, selector: "gui-form", inputs: { form: "form", config: "config", model: "model" }, outputs: { modelChange: "modelChange" }, host: { properties: { "attr.id": "uid" }, classAttribute: "gui-form" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  @for (item of formFields; track item) {\n    <div>\n      <ng-template [ngTemplateOutlet]=\"controlType\"\n        [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\">\n      </ng-template>\n    </div>\n  }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n  @if (item.show) {\n    <ng-container [formGroup]=\"form\">\n      @switch (item.type) {\n        @case ('text') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('number') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('select') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('switch') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('slider') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('buttonToggle') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('fill') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('file') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('image') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('video') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('audio') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('imageSelect') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n          </gui-field-group>\n        }\n        @case ('textarea') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('hidden') {\n          <input type=\"hidden\" [formControlName]=\"item.key\">\n        }\n        @case ('inline') {\n          <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n            @for (child of item.children; track child) {\n              <ng-template [ngTemplateOutlet]=\"controlType\"\n                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n              </ng-template>\n            }\n          </gui-inline-group>\n        }\n        @case ('group') {\n          <mat-expansion-panel [formGroupName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @for (child of item.children; track child) {\n                <div>\n                  <ng-template [ngTemplateOutlet]=\"controlType\"\n                    [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n                  </ng-template>\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('tabs') {\n          <mat-expansion-panel [formArrayName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n              <!-- Show operation buttons when panel opened -->\n              @if (item.expanded) {\n                <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n                  (click)=\"changeTabsMode($event, item, 'normal')\">\n                  <mat-icon svgIcon=\"horizontal\" />\n                </button>\n                <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n                  (click)=\"changeTabsMode($event, item, 'list')\">\n                  <mat-icon svgIcon=\"vertical\" />\n                </button>\n                @if (item.template && (item.addable || item.addable===undefined)) {\n                  <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"addTab($event, form.get(item.key), item, true)\">\n                    <mat-icon svgIcon=\"copy\" />\n                  </button>\n                  <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"addTab($event, form.get(item.key), item)\">\n                    <mat-icon svgIcon=\"add\" />\n                  </button>\n                  <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"removeTab($event, form.get(item.key), item)\">\n                    <mat-icon svgIcon=\"delete\" />\n                  </button>\n                }\n              }\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @if (item.mode!=='list') {\n                <!-- Horizontal mode -->\n                <mat-tab-group class=\"gui-tabs\" disableRipple\n                  [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <mat-tab [disabled]=\"tab.disabled\">\n                      <ng-template mat-tab-label>\n                        <div>{{tab.name | ejs:{i} }}</div>\n                      </ng-template>\n                      <!-- FormControl & FormArray -->\n                      @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n                        </ng-template>\n                      }\n                      <!-- FormGroup -->\n                      @if (tab.children?.length>0 && tab.type!=='tabs') {\n                        @for (child of tab.children; track child) {\n                          <div>\n                            <ng-template [ngTemplateOutlet]=\"controlType\"\n                              [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n                            </ng-template>\n                          </div>\n                        }\n                      }\n                    </mat-tab>\n                  }\n                </mat-tab-group>\n              } @else {\n                <!-- Vertical mode -->\n                <div class=\"gui-list\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <div class=\"gui-list-item\"\n                      [class.gui-list-item-active]=\"item.selectedIndex===i\">\n                      <div class=\"gui-list-item-heading\">\n                        <span class=\"gui-list-item-title\"\n                        (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</span>\n                        @if (item.template && (item.addable || item.addable===undefined)) {\n                          <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                            (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n                            <mat-icon svgIcon=\"copy\" />\n                          </button>\n                          <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                            (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n                            <mat-icon svgIcon=\"add\" />\n                          </button>\n                          <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                            (click)=\"removeTab($event, form.get(item.key), item, i)\">\n                            <mat-icon svgIcon=\"delete\" />\n                          </button>\n                        }\n                      </div>\n                      <div class=\"gui-list-item-content\">\n                        <!-- FormControl & FormArray -->\n                        @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                          <ng-template [ngTemplateOutlet]=\"controlType\"\n                            [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n                          </ng-template>\n                        }\n                        <!-- FormGroup -->\n                        @if (tab.children?.length>0 && tab.type!=='tabs') {\n                          @for (child of tab.children; track child) {\n                            <div>\n                              <ng-template [ngTemplateOutlet]=\"controlType\"\n                                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n                              </ng-template>\n                            </div>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('menu') {\n          <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n            @for (menuChild of item.children; track menuChild) {\n              <mat-tab [label]=\"menuChild.name\"\n                [disabled]=\"menuChild.disabled\">\n                <ng-template matTabContent>\n                  @if (menuChild.type==='menuItem') {\n                    <!-- Must wrap with div -->\n                    @for (controlItem of menuChild.children; track controlItem) {\n                      <div [formGroupName]=\"menuChild.key\">\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\">\n                        </ng-template>\n                      </div>\n                    }\n                  }\n                  <!-- Support for unlimited nesting -->\n                  @if (menuChild.type==='menu') {\n                    <ng-template [ngTemplateOutlet]=\"controlType\"\n                      [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\">\n                    </ng-template>\n                  }\n                </ng-template>\n              </mat-tab>\n            }\n          </mat-tab-group>\n        }\n      }\n    </ng-container>\n  }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: 12px;--mat-expansion-container-text-size: 12px;--mat-expansion-header-collapsed-state-height: 32px;--mat-expansion-header-expanded-state-height: 32px;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:12px}.gui-form .mat-expansion-panel{box-shadow:none!important}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 12px}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:8px}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:8px}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator:after{vertical-align:2px}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: 12px;--mdc-secondary-navigation-tab-container-height: 24px}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 12px}.gui-form .mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 14px;padding:0}.gui-form .mat-mdc-icon-button .mat-mdc-button-touch-target{width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size)}.gui-form .mat-mdc-icon-button .mat-icon{display:inline-flex;justify-content:center;align-items:center}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 12px;line-height:24px}.gui-list-item-heading:before{position:absolute;left:0;width:2px;height:16px;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{flex:1;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: 4px;padding:4px;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:4px}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;border-width:0;border-radius:var(--mdc-tab-indicator-active-indicator-shape);background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: GuiFieldGroup, selector: "gui-field-group", inputs: ["config"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "component", type: GuiInputText, selector: "gui-input-text", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInputNumber, selector: "gui-input-number", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSelect, selector: "gui-select", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSwitch, selector: "gui-switch", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSlider, selector: "gui-slider", inputs: ["config", "disabled"] }, { kind: "component", type: GuiButtonToggle, selector: "gui-button-toggle", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFill, selector: "gui-fill", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }, { kind: "component", type: GuiImageSelect, selector: "gui-image-select", inputs: ["config", "disabled", "appendTo"] }, { kind: "component", type: GuiTextarea, selector: "gui-textarea", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInlineGroup, selector: "gui-inline-group", inputs: ["config"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: GuiForm, decorators: [{
             type: Component,
@@ -1275,8 +1297,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
                         GuiInlineGroup,
                         GuiFieldLabel,
                         GuiEjsPipe,
-                    ], template: "<form [formGroup]=\"form\">\n  @for (item of formFields; track item) {\n    <div>\n      <ng-template [ngTemplateOutlet]=\"controlType\"\n        [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\">\n      </ng-template>\n    </div>\n  }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n  @if (item.show) {\n    <ng-container [formGroup]=\"form\">\n      @switch (item.type) {\n        @case ('text') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('number') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('select') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('switch') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('slider') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('buttonToggle') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('fill') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('file') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('image') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('video') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('audio') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('imageSelect') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n          </gui-field-group>\n        }\n        @case ('textarea') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('hidden') {\n          <input type=\"hidden\" [formControlName]=\"item.key\">\n        }\n        @case ('inline') {\n          <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n            @for (child of item.children; track child) {\n              <ng-template [ngTemplateOutlet]=\"controlType\"\n                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n              </ng-template>\n            }\n          </gui-inline-group>\n        }\n        @case ('group') {\n          <mat-expansion-panel [formGroupName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @for (child of item.children; track child) {\n                <div>\n                  <ng-template [ngTemplateOutlet]=\"controlType\"\n                    [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n                  </ng-template>\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('tabs') {\n          <mat-expansion-panel [formArrayName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n              <!-- Show operation buttons when panel opened -->\n              @if (item.expanded) {\n                <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n                  (click)=\"changeTabsMode($event, item, 'normal')\">\n                  <mat-icon svgIcon=\"dots_horizontal\" />\n                </button>\n                <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n                  (click)=\"changeTabsMode($event, item, 'list')\">\n                  <mat-icon svgIcon=\"dots_vertical\" />\n                </button>\n                @if (item.template && (item.addable || item.addable===undefined)) {\n                  <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"addTab($event, form.get(item.key), item, true)\">\n                    <mat-icon svgIcon=\"content_copy\" />\n                  </button>\n                  <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"addTab($event, form.get(item.key), item)\">\n                    <mat-icon svgIcon=\"plus\" />\n                  </button>\n                  <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"removeTab($event, form.get(item.key), item)\">\n                    <mat-icon svgIcon=\"delete\" />\n                  </button>\n                }\n              }\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @if (item.mode!=='list') {\n                <!-- Horizontal mode -->\n                <mat-tab-group class=\"gui-tabs\" disableRipple\n                  [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <mat-tab [disabled]=\"tab.disabled\">\n                      <ng-template mat-tab-label>\n                        <div>{{tab.name | ejs:{i} }}</div>\n                      </ng-template>\n                      <!-- FormControl & FormArray -->\n                      @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n                        </ng-template>\n                      }\n                      <!-- FormGroup -->\n                      @if (tab.children?.length>0 && tab.type!=='tabs') {\n                        @for (child of tab.children; track child) {\n                          <div>\n                            <ng-template [ngTemplateOutlet]=\"controlType\"\n                              [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n                            </ng-template>\n                          </div>\n                        }\n                      }\n                    </mat-tab>\n                  }\n                </mat-tab-group>\n              } @else {\n                <!-- Vertical mode -->\n                <div class=\"gui-list\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <div class=\"gui-list-item\"\n                      [class.gui-list-item-active]=\"item.selectedIndex===i\">\n                      <div class=\"gui-list-item-heading\">\n                        <span class=\"gui-list-item-title\"\n                        (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</span>\n                        @if (item.template && (item.addable || item.addable===undefined)) {\n                          <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                            (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n                            <mat-icon svgIcon=\"content_copy\" />\n                          </button>\n                          <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                            (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n                            <mat-icon svgIcon=\"plus\" />\n                          </button>\n                          <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                            (click)=\"removeTab($event, form.get(item.key), item, i)\">\n                            <mat-icon svgIcon=\"delete\" />\n                          </button>\n                        }\n                      </div>\n                      <div class=\"gui-list-item-content\">\n                        <!-- FormControl & FormArray -->\n                        @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                          <ng-template [ngTemplateOutlet]=\"controlType\"\n                            [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n                          </ng-template>\n                        }\n                        <!-- FormGroup -->\n                        @if (tab.children?.length>0 && tab.type!=='tabs') {\n                          @for (child of tab.children; track child) {\n                            <div>\n                              <ng-template [ngTemplateOutlet]=\"controlType\"\n                                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n                              </ng-template>\n                            </div>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('menu') {\n          <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n            @for (menuChild of item.children; track menuChild) {\n              <mat-tab [label]=\"menuChild.name\"\n                [disabled]=\"menuChild.disabled\">\n                <ng-template matTabContent>\n                  @if (menuChild.type==='menuItem') {\n                    <!-- Must wrap with div -->\n                    @for (controlItem of menuChild.children; track controlItem) {\n                      <div [formGroupName]=\"menuChild.key\">\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\">\n                        </ng-template>\n                      </div>\n                    }\n                  }\n                  <!-- Support for unlimited nesting -->\n                  @if (menuChild.type==='menu') {\n                    <ng-template [ngTemplateOutlet]=\"controlType\"\n                      [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\">\n                    </ng-template>\n                  }\n                </ng-template>\n              </mat-tab>\n            }\n          </mat-tab-group>\n        }\n      }\n    </ng-container>\n  }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: 12px;--mat-expansion-container-text-size: 12px;--mat-expansion-header-collapsed-state-height: 32px;--mat-expansion-header-expanded-state-height: 32px;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:12px}.gui-form .mat-expansion-panel{box-shadow:none!important}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 12px}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:8px}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:8px}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator:after{vertical-align:2px}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: 12px;--mdc-secondary-navigation-tab-container-height: 24px}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 12px}.gui-form .mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 14px;padding:0}.gui-form .mat-mdc-icon-button .mat-mdc-button-touch-target{width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size)}.gui-form .mat-mdc-icon-button .mat-icon{display:inline-flex;justify-content:center;align-items:center}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 12px;line-height:24px}.gui-list-item-heading:before{position:absolute;left:0;width:2px;height:16px;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{flex:1;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: 4px;padding:4px;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:4px}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;border-width:0;border-radius:var(--mdc-tab-indicator-active-indicator-shape);background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"] }]
-        }], ctorParameters: () => [{ type: i2.MatIconRegistry }, { type: i3.DomSanitizer }], propDecorators: { form: [{
+                    ], template: "<form [formGroup]=\"form\">\n  @for (item of formFields; track item) {\n    <div>\n      <ng-template [ngTemplateOutlet]=\"controlType\"\n        [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\">\n      </ng-template>\n    </div>\n  }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n  @if (item.show) {\n    <ng-container [formGroup]=\"form\">\n      @switch (item.type) {\n        @case ('text') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('number') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('select') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('switch') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('slider') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('buttonToggle') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('fill') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('file') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('image') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('video') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('audio') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('imageSelect') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n          </gui-field-group>\n        }\n        @case ('textarea') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n          </gui-field-group>\n        }\n        @case ('hidden') {\n          <input type=\"hidden\" [formControlName]=\"item.key\">\n        }\n        @case ('inline') {\n          <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n            @for (child of item.children; track child) {\n              <ng-template [ngTemplateOutlet]=\"controlType\"\n                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n              </ng-template>\n            }\n          </gui-inline-group>\n        }\n        @case ('group') {\n          <mat-expansion-panel [formGroupName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @for (child of item.children; track child) {\n                <div>\n                  <ng-template [ngTemplateOutlet]=\"controlType\"\n                    [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n                  </ng-template>\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('tabs') {\n          <mat-expansion-panel [formArrayName]=\"item.key\"\n            [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n            <mat-expansion-panel-header>\n              <gui-field-label [config]=\"item\" />\n              <!-- Show operation buttons when panel opened -->\n              @if (item.expanded) {\n                <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n                  (click)=\"changeTabsMode($event, item, 'normal')\">\n                  <mat-icon svgIcon=\"horizontal\" />\n                </button>\n                <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n                  (click)=\"changeTabsMode($event, item, 'list')\">\n                  <mat-icon svgIcon=\"vertical\" />\n                </button>\n                @if (item.template && (item.addable || item.addable===undefined)) {\n                  <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"addTab($event, form.get(item.key), item, true)\">\n                    <mat-icon svgIcon=\"copy\" />\n                  </button>\n                  <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"addTab($event, form.get(item.key), item)\">\n                    <mat-icon svgIcon=\"add\" />\n                  </button>\n                  <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"removeTab($event, form.get(item.key), item)\">\n                    <mat-icon svgIcon=\"delete\" />\n                  </button>\n                }\n              }\n            </mat-expansion-panel-header>\n            <!-- Lazy rendering -->\n            <ng-template matExpansionPanelContent>\n              @if (item.mode!=='list') {\n                <!-- Horizontal mode -->\n                <mat-tab-group class=\"gui-tabs\" disableRipple\n                  [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <mat-tab [disabled]=\"tab.disabled\">\n                      <ng-template mat-tab-label>\n                        <div>{{tab.name | ejs:{i} }}</div>\n                      </ng-template>\n                      <!-- FormControl & FormArray -->\n                      @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n                        </ng-template>\n                      }\n                      <!-- FormGroup -->\n                      @if (tab.children?.length>0 && tab.type!=='tabs') {\n                        @for (child of tab.children; track child) {\n                          <div>\n                            <ng-template [ngTemplateOutlet]=\"controlType\"\n                              [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n                            </ng-template>\n                          </div>\n                        }\n                      }\n                    </mat-tab>\n                  }\n                </mat-tab-group>\n              } @else {\n                <!-- Vertical mode -->\n                <div class=\"gui-list\">\n                  @for (tab of item.children; track tab; let i = $index) {\n                    <div class=\"gui-list-item\"\n                      [class.gui-list-item-active]=\"item.selectedIndex===i\">\n                      <div class=\"gui-list-item-heading\">\n                        <span class=\"gui-list-item-title\"\n                        (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</span>\n                        @if (item.template && (item.addable || item.addable===undefined)) {\n                          <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                            (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n                            <mat-icon svgIcon=\"copy\" />\n                          </button>\n                          <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                            (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n                            <mat-icon svgIcon=\"add\" />\n                          </button>\n                          <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                            (click)=\"removeTab($event, form.get(item.key), item, i)\">\n                            <mat-icon svgIcon=\"delete\" />\n                          </button>\n                        }\n                      </div>\n                      <div class=\"gui-list-item-content\">\n                        <!-- FormControl & FormArray -->\n                        @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n                          <ng-template [ngTemplateOutlet]=\"controlType\"\n                            [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n                          </ng-template>\n                        }\n                        <!-- FormGroup -->\n                        @if (tab.children?.length>0 && tab.type!=='tabs') {\n                          @for (child of tab.children; track child) {\n                            <div>\n                              <ng-template [ngTemplateOutlet]=\"controlType\"\n                                [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n                              </ng-template>\n                            </div>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </ng-template>\n          </mat-expansion-panel>\n        }\n        @case ('menu') {\n          <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n            @for (menuChild of item.children; track menuChild) {\n              <mat-tab [label]=\"menuChild.name\"\n                [disabled]=\"menuChild.disabled\">\n                <ng-template matTabContent>\n                  @if (menuChild.type==='menuItem') {\n                    <!-- Must wrap with div -->\n                    @for (controlItem of menuChild.children; track controlItem) {\n                      <div [formGroupName]=\"menuChild.key\">\n                        <ng-template [ngTemplateOutlet]=\"controlType\"\n                          [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\">\n                        </ng-template>\n                      </div>\n                    }\n                  }\n                  <!-- Support for unlimited nesting -->\n                  @if (menuChild.type==='menu') {\n                    <ng-template [ngTemplateOutlet]=\"controlType\"\n                      [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\">\n                    </ng-template>\n                  }\n                </ng-template>\n              </mat-tab>\n            }\n          </mat-tab-group>\n        }\n      }\n    </ng-container>\n  }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: 12px;--mat-expansion-container-text-size: 12px;--mat-expansion-header-collapsed-state-height: 32px;--mat-expansion-header-expanded-state-height: 32px;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:12px}.gui-form .mat-expansion-panel{box-shadow:none!important}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 12px}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:8px}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:8px}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator:after{vertical-align:2px}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: 12px;--mdc-secondary-navigation-tab-container-height: 24px}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 12px}.gui-form .mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 14px;padding:0}.gui-form .mat-mdc-icon-button .mat-mdc-button-touch-target{width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size)}.gui-form .mat-mdc-icon-button .mat-icon{display:inline-flex;justify-content:center;align-items:center}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 12px;line-height:24px}.gui-list-item-heading:before{position:absolute;left:0;width:2px;height:16px;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{flex:1;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: 4px;padding:4px;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:4px}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;border-width:0;border-radius:var(--mdc-tab-indicator-active-indicator-shape);background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"] }]
+        }], ctorParameters: () => [{ type: GuiIconsRegistry }], propDecorators: { form: [{
                 type: Input
             }], config: [{
                 type: Input
@@ -1433,5 +1455,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GuiButtonToggle, GuiEjsPipe, GuiFieldGroup, GuiFieldLabel, GuiFileUploader, GuiFileUploaderConfig, GuiFill, GuiFlexDirective, GuiForm, GuiIcon, GuiImageSelect, GuiInlineGroup, GuiInputNumber, GuiInputText, GuiModule, GuiSelect, GuiSlider, GuiSwitch, GuiTextarea, compareValues, ejsTmpl, getValueByPath };
+export { GUI_ICONS_CONFIG, GuiButtonToggle, GuiEjsPipe, GuiFieldGroup, GuiFieldLabel, GuiFileUploader, GuiFileUploaderConfig, GuiFill, GuiFlexDirective, GuiForm, GuiIcon, GuiIconsRegistry, GuiImageSelect, GuiInlineGroup, GuiInputNumber, GuiInputText, GuiModule, GuiSelect, GuiSlider, GuiSwitch, GuiTextarea, compareValues, ejsTmpl, getValueByPath, svgIcons };
 //# sourceMappingURL=acrodata-gui.mjs.map