@acrodata/gui 2.1.2 → 2.2.0

package/fesm2022/acrodata-gui.mjs

@@ -17,10 +17,10 @@ import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelContent, M
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { MtxColorpickerInput, MtxColorpicker, MtxColorpickerToggle, MtxColorpickerModule } from '@ng-matero/extensions/colorpicker';
 import { MtxSelect, MtxSelectLabelTemplate, MtxSelectOptionTemplate, MtxSelectModule } from '@ng-matero/extensions/select';
-import { of, Subscription, mergeWith } from 'rxjs';
+import { map, Subscription, of, mergeWith } from 'rxjs';
+import { finalize } from 'rxjs/operators';
 import * as i1$1 from '@angular/common/http';
 import { HttpResponse } from '@angular/common/http';
-import { catchError, finalize } from 'rxjs/operators';
 import * as i2 from '@angular/platform-browser';
 import { MatOption } from '@angular/material/core';
 
@@ -216,7 +216,7 @@ class GuiButtonToggle {
                 useExisting: forwardRef(() => GuiButtonToggle),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-button-toggle-group [(ngModel)]=\"value\" [disabled]=\"disabled\" [multiple]=\"config.multiple\"\n  (change)=\"onValueChange()\" hideSingleSelectionIndicator hideMultipleSelectionIndicator>\n  @for (opt of config.options; track opt) {\n    <mat-button-toggle disableRipple\n      [class.gui-icon-toggle]=\"config.useIcon\"\n      [flex]=\"opt.col\"\n      [value]=\"opt.value\"\n      [disabled]=\"opt.disabled\"\n      [title]=\"config.useIcon ? opt.label : ''\">\n      @if (config.useIcon) {\n        <gui-icon [src]=\"opt.src!\" />\n      } @else {\n        {{opt.label}}\n      }\n    </mat-button-toggle>\n  }\n</mat-button-toggle-group>\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-button-toggle{--mat-standard-button-toggle-shape: .25rem;--mat-standard-button-toggle-height: 1.5rem;--mat-standard-button-toggle-label-text-size: .75rem;--mat-standard-button-toggle-label-text-weight: 400;--mat-standard-button-toggle-label-text-line-height: var(--mat-standard-button-toggle-height)}.gui-button-toggle .mat-button-toggle-group{flex-wrap:wrap;border-width:0}.gui-button-toggle .mat-button-toggle-appearance-standard{border-width:0!important;background-color:var(--mdc-filled-text-field-container-color)}.gui-icon-toggle.mat-button-toggle .mat-button-toggle-label-content{padding:0;line-height:normal}.gui-icon-toggle.mat-button-toggle-checked img{opacity:.64}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "component", type: GuiIcon, selector: "gui-icon", inputs: ["src"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: "<mat-button-toggle-group [(ngModel)]=\"value\" [disabled]=\"disabled\" [multiple]=\"config.multiple\"\n  (change)=\"onValueChange()\" hideSingleSelectionIndicator hideMultipleSelectionIndicator>\n  @for (opt of config.options; track opt) {\n    <mat-button-toggle disableRipple\n      [class.gui-icon-toggle]=\"config.useIcon\"\n      [flex]=\"opt.col\"\n      [value]=\"opt.value\"\n      [disabled]=\"opt.disabled\"\n      [title]=\"config.useIcon ? opt.label : ''\">\n      @if (config.useIcon) {\n        <gui-icon [src]=\"opt.src!\" />\n      } @else {\n        {{opt.label}}\n      }\n    </mat-button-toggle>\n  }\n</mat-button-toggle-group>\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-button-toggle{--mat-standard-button-toggle-shape: .25rem;--mat-standard-button-toggle-height: 1.5rem;--mat-standard-button-toggle-label-text-size: .75rem;--mat-standard-button-toggle-label-text-weight: 400;--mat-standard-button-toggle-label-text-line-height: var(--mat-standard-button-toggle-height)}.gui-button-toggle .mat-button-toggle-group{flex-wrap:wrap;border-width:0}.gui-button-toggle .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border-width:0}.gui-button-toggle .mat-button-toggle-appearance-standard{background-color:var(--mdc-filled-text-field-container-color)}.gui-icon-toggle.mat-button-toggle .mat-button-toggle-label-content{padding:0;line-height:normal}.gui-icon-toggle.mat-button-toggle-checked img{opacity:.64}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "component", type: GuiIcon, selector: "gui-icon", inputs: ["src"] }, { 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: "18.2.0", ngImport: i0, type: GuiButtonToggle, decorators: [{
             type: Component,
@@ -236,7 +236,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GuiFlexDirective,
                         GuiIcon,
                         GuiFieldLabel,
-                    ], template: "<mat-button-toggle-group [(ngModel)]=\"value\" [disabled]=\"disabled\" [multiple]=\"config.multiple\"\n  (change)=\"onValueChange()\" hideSingleSelectionIndicator hideMultipleSelectionIndicator>\n  @for (opt of config.options; track opt) {\n    <mat-button-toggle disableRipple\n      [class.gui-icon-toggle]=\"config.useIcon\"\n      [flex]=\"opt.col\"\n      [value]=\"opt.value\"\n      [disabled]=\"opt.disabled\"\n      [title]=\"config.useIcon ? opt.label : ''\">\n      @if (config.useIcon) {\n        <gui-icon [src]=\"opt.src!\" />\n      } @else {\n        {{opt.label}}\n      }\n    </mat-button-toggle>\n  }\n</mat-button-toggle-group>\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-button-toggle{--mat-standard-button-toggle-shape: .25rem;--mat-standard-button-toggle-height: 1.5rem;--mat-standard-button-toggle-label-text-size: .75rem;--mat-standard-button-toggle-label-text-weight: 400;--mat-standard-button-toggle-label-text-line-height: var(--mat-standard-button-toggle-height)}.gui-button-toggle .mat-button-toggle-group{flex-wrap:wrap;border-width:0}.gui-button-toggle .mat-button-toggle-appearance-standard{border-width:0!important;background-color:var(--mdc-filled-text-field-container-color)}.gui-icon-toggle.mat-button-toggle .mat-button-toggle-label-content{padding:0;line-height:normal}.gui-icon-toggle.mat-button-toggle-checked img{opacity:.64}\n"] }]
+                    ], template: "<mat-button-toggle-group [(ngModel)]=\"value\" [disabled]=\"disabled\" [multiple]=\"config.multiple\"\n  (change)=\"onValueChange()\" hideSingleSelectionIndicator hideMultipleSelectionIndicator>\n  @for (opt of config.options; track opt) {\n    <mat-button-toggle disableRipple\n      [class.gui-icon-toggle]=\"config.useIcon\"\n      [flex]=\"opt.col\"\n      [value]=\"opt.value\"\n      [disabled]=\"opt.disabled\"\n      [title]=\"config.useIcon ? opt.label : ''\">\n      @if (config.useIcon) {\n        <gui-icon [src]=\"opt.src!\" />\n      } @else {\n        {{opt.label}}\n      }\n    </mat-button-toggle>\n  }\n</mat-button-toggle-group>\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-button-toggle{--mat-standard-button-toggle-shape: .25rem;--mat-standard-button-toggle-height: 1.5rem;--mat-standard-button-toggle-label-text-size: .75rem;--mat-standard-button-toggle-label-text-weight: 400;--mat-standard-button-toggle-label-text-line-height: var(--mat-standard-button-toggle-height)}.gui-button-toggle .mat-button-toggle-group{flex-wrap:wrap;border-width:0}.gui-button-toggle .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border-width:0}.gui-button-toggle .mat-button-toggle-appearance-standard{background-color:var(--mdc-filled-text-field-container-color)}.gui-icon-toggle.mat-button-toggle .mat-button-toggle-label-content{padding:0;line-height:normal}.gui-icon-toggle.mat-button-toggle-checked img{opacity:.64}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], disabled: [{
@@ -259,13 +259,13 @@ class GuiFieldGroup {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFieldGroup, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiFieldGroup, isStandalone: true, selector: "gui-field-group", inputs: { config: "config" }, host: { classAttribute: "gui-field-group" }, ngImport: i0, template: "@if (config.parentType!=='inline' && config.name) {\n  <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content />\n", styles: [".gui-field-group{display:flex;padding:.25rem .5rem}.gui-field{--mat-form-field-container-text-size: .75rem;display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}.gui-field .mat-mdc-text-field-wrapper,.gui-field .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 .5rem;border-radius:var(--mdc-filled-text-field-container-shape)}[dir=rtl] .gui-field .mat-mdc-text-field-wrapper,[dir=rtl] .gui-field .mat-mdc-form-field-hint-wrapper{padding:0 .5rem}.gui-field .mat-mdc-form-field-infix{min-height:auto;padding:0!important}.gui-field .mat-mdc-form-field-hint-spacer,.gui-field .mat-mdc-form-field-bottom-align:before,.gui-field .mdc-line-ripple{display:none}\n"], dependencies: [{ kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiFieldGroup, isStandalone: true, selector: "gui-field-group", inputs: { config: "config" }, host: { classAttribute: "gui-field-group" }, ngImport: i0, template: "@if (config.parentType!=='inline' && config.name) {\n  <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content />\n", styles: [".gui-field-group{display:flex;padding:.25rem .5rem}.gui-field{--mat-form-field-container-vertical-padding: .25rem;--mat-form-field-container-text-line-height: 1rem;--mat-form-field-container-text-size: .75rem;display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}.gui-field .mat-mdc-text-field-wrapper,.gui-field .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 .5rem;border-radius:var(--mdc-filled-text-field-container-shape)}[dir=rtl] .gui-field .mat-mdc-text-field-wrapper,[dir=rtl] .gui-field .mat-mdc-form-field-hint-wrapper{padding:0 .5rem}.gui-field .mat-mdc-form-field-infix{min-height:auto}.gui-field .mat-mdc-form-field-hint-spacer,.gui-field .mat-mdc-form-field-bottom-align:before,.gui-field .mdc-line-ripple{display:none}\n"], dependencies: [{ 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: "18.2.0", ngImport: i0, type: GuiFieldGroup, decorators: [{
             type: Component,
             args: [{ selector: 'gui-field-group', host: {
                         class: 'gui-field-group',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [GuiFieldLabel], template: "@if (config.parentType!=='inline' && config.name) {\n  <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content />\n", styles: [".gui-field-group{display:flex;padding:.25rem .5rem}.gui-field{--mat-form-field-container-text-size: .75rem;display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}.gui-field .mat-mdc-text-field-wrapper,.gui-field .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 .5rem;border-radius:var(--mdc-filled-text-field-container-shape)}[dir=rtl] .gui-field .mat-mdc-text-field-wrapper,[dir=rtl] .gui-field .mat-mdc-form-field-hint-wrapper{padding:0 .5rem}.gui-field .mat-mdc-form-field-infix{min-height:auto;padding:0!important}.gui-field .mat-mdc-form-field-hint-spacer,.gui-field .mat-mdc-form-field-bottom-align:before,.gui-field .mdc-line-ripple{display:none}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [GuiFieldLabel], template: "@if (config.parentType!=='inline' && config.name) {\n  <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content />\n", styles: [".gui-field-group{display:flex;padding:.25rem .5rem}.gui-field{--mat-form-field-container-vertical-padding: .25rem;--mat-form-field-container-text-line-height: 1rem;--mat-form-field-container-text-size: .75rem;display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}.gui-field .mat-mdc-text-field-wrapper,.gui-field .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 .5rem;border-radius:var(--mdc-filled-text-field-container-shape)}[dir=rtl] .gui-field .mat-mdc-text-field-wrapper,[dir=rtl] .gui-field .mat-mdc-form-field-hint-wrapper{padding:0 .5rem}.gui-field .mat-mdc-form-field-infix{min-height:auto}.gui-field .mat-mdc-form-field-hint-spacer,.gui-field .mat-mdc-form-field-bottom-align:before,.gui-field .mdc-line-ripple{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }] } });
@@ -288,23 +288,26 @@ class GuiFileUploaderConfig {
          *  The file upload URL
          */
         this.url = '';
-        /**
-         * The file upload params
-         */
-        this.params = {};
     }
     /**
      * The File upload API
      *
-     * @param file file data
-     * @returns
+     * @param formData The FormData with file binary
+     * @param config   The custom upload config that passed from component input
+     * @returns        The uploaded file url stream
      */
-    upload(file) {
-        return this.http.post(this.url, file, {
+    upload(formData, config) {
+        return this.http
+            .post(this.url, formData, {
             reportProgress: true,
             observe: 'events',
-            params: this.params,
-        });
+        })
+            .pipe(map(res => {
+            if (res instanceof HttpResponse && res.body) {
+                return res.body.url;
+            }
+            return null;
+        }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFileUploaderConfig, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFileUploaderConfig, providedIn: 'root' }); }
@@ -400,15 +403,15 @@ class GuiFileUploader {
         this.name = '';
         this.accept = '';
         this.fileChange = new EventEmitter();
-        // media src
+        // file url that returned from the server
         this.url = '';
         this.onChange = () => { };
         this.onTouched = () => { };
         iconsRegistry.add('link', 'clear', 'file', 'upload');
     }
     ngOnChanges(changes) {
-        if (changes['type']) {
-            this.accept = this.type + '/*';
+        if (changes['config'] || changes['accept'] || changes['type']) {
+            this.accept = this.config.accept || this.accept || this.type + '/*';
         }
     }
     writeValue(value) {
@@ -425,24 +428,23 @@ class GuiFileUploader {
         this.disabled = isDisabled;
         this.cdr.markForCheck();
     }
-    upload(file) {
+    upload(fileUpload) {
         const formData = new FormData();
-        formData.append('file', file.data || '');
-        file.inProgress = true;
+        formData.append('file', fileUpload.data);
+        fileUpload.inProgress = true;
         this.fileUploaderCfg
-            .upload(formData)
-            .pipe(catchError((error) => {
-            file.inProgress = false;
-            return of(`${file.data?.name || 'File'} upload failed.`);
-        }), finalize(() => { }))
-            .subscribe(res => {
-            if (res instanceof HttpResponse && res.body) {
-                this.url = res.body.data;
+            .upload(formData, this.config)
+            .pipe(finalize(() => {
+            fileUpload.inProgress = false;
+        }))
+            .subscribe(result => {
+            if (result) {
+                this.url = result;
+                this.cdr.detectChanges();
                 this.onChange(this.url);
                 this.onTouched();
                 this.fileChange.emit(this.url);
             }
-            this.cdr.detectChanges();
         });
     }
     onUrlChange(e) {
@@ -451,12 +453,12 @@ class GuiFileUploader {
         this.fileChange.emit(this.url);
     }
     onFileChange(e) {
-        this.file = {
+        this.fileUpload = {
             data: e.target.files[0],
             inProgress: false,
             progress: 0,
         };
-        this.upload(this.file);
+        this.upload(this.fileUpload);
         // reset input value
         e.target.value = '';
     }
@@ -619,7 +621,7 @@ class GuiImageSelect {
                 useExisting: forwardRef(() => GuiImageSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "mtxSelect", first: true, predicate: MtxSelect, descendants: true }], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mtx-select [items]=\"config.options||[]\" [appendTo]=\"appendTo\" bindValue=\"value\"\n    [(ngModel)]=\"value\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onValueChange()\">\n    <ng-template ng-label-tmp let-opt=\"item\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n    <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n  </mtx-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: MtxSelectLabelTemplate, selector: "[ng-label-tmp]" }, { kind: "directive", type: MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "mtxSelect", first: true, predicate: MtxSelect, descendants: true }], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mtx-select [items]=\"config.options||[]\" [appendTo]=\"appendTo\" bindValue=\"value\"\n    [(ngModel)]=\"value\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onValueChange()\">\n    <ng-template ng-label-tmp let-opt=\"item\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n    <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n      <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n      <span>{{opt.label}}</span>\n    </ng-template>\n  </mtx-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: MtxSelectLabelTemplate, selector: "[ng-label-tmp]" }, { kind: "directive", type: MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { 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: "18.2.0", ngImport: i0, type: GuiImageSelect, decorators: [{
             type: Component,
@@ -701,7 +703,7 @@ class GuiInputNumber {
                 useExisting: forwardRef(() => GuiInputNumber),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <input matInput type=\"number\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [step]=\"config.step\"\n    [min]=\"config.min!\"\n    [max]=\"config.max!\"\n    (change)=\"onValueChange()\">\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-input-number .mat-mdc-text-field-wrapper{padding-right:0}[dir=rtl] .gui-input-number .mat-mdc-text-field-wrapper{padding-left:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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: "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: "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 }); }
+        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <input matInput type=\"number\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [step]=\"config.step\"\n    [min]=\"config.min!\"\n    [max]=\"config.max!\"\n    (change)=\"onValueChange()\">\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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: "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: "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: "18.2.0", ngImport: i0, type: GuiInputNumber, decorators: [{
             type: Component,
@@ -713,7 +715,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             useExisting: forwardRef(() => GuiInputNumber),
                             multi: true,
                         },
-                    ], standalone: true, imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <input matInput type=\"number\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [step]=\"config.step\"\n    [min]=\"config.min!\"\n    [max]=\"config.max!\"\n    (change)=\"onValueChange()\">\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-input-number .mat-mdc-text-field-wrapper{padding-right:0}[dir=rtl] .gui-input-number .mat-mdc-text-field-wrapper{padding-left:0}\n"] }]
+                    ], standalone: true, imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <input matInput type=\"number\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [step]=\"config.step\"\n    [min]=\"config.min!\"\n    [max]=\"config.max!\"\n    (change)=\"onValueChange()\">\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], disabled: [{
@@ -805,7 +807,7 @@ class GuiSelect {
                 useExisting: forwardRef(() => GuiSelect),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mat-select panelClass=\"gui-select\" hideSingleSelectionIndicator disableRipple\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [multiple]=\"config.multiple || false\"\n    (selectionChange)=\"onValueChange()\">\n    @for (opt of config.options; track opt) {\n      <mat-option [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n        <span [style.font-family]=\"config.useFont ? opt.value : ''\">{{opt.label}}</span>\n      </mat-option>\n    }\n  </mat-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-select{--mat-select-trigger-text-size: .75rem;--mat-option-label-text-size: .75rem}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height);padding:0 .5rem!important}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:.5rem}[dir=rtl] .gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:.5rem}.gui-select .mat-pseudo-checkbox{width:1rem;height:1rem;border-width:1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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 }); }
+        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mat-select panelClass=\"gui-select\" hideSingleSelectionIndicator disableRipple\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [multiple]=\"config.multiple || false\"\n    (selectionChange)=\"onValueChange()\">\n    @for (opt of config.options; track opt) {\n      <mat-option [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n        <span [style.font-family]=\"config.useFont ? opt.value : ''\">{{opt.label}}</span>\n      </mat-option>\n    }\n  </mat-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-select{--mat-select-trigger-text-line-height: 1rem;--mat-select-trigger-text-size: .75rem;--mat-option-label-text-size: .75rem}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height);padding:0 .5rem}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:.5rem}[dir=rtl] .gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:.5rem}.gui-select .mat-mdc-select-arrow-wrapper{height:1rem}.gui-select .mat-pseudo-checkbox{width:1rem;height:1rem;border-width:1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { 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: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: "18.2.0", ngImport: i0, type: GuiSelect, decorators: [{
             type: Component,
@@ -826,7 +828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MatSuffix,
                         MatHint,
                         GuiFieldLabel,
-                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mat-select panelClass=\"gui-select\" hideSingleSelectionIndicator disableRipple\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [multiple]=\"config.multiple || false\"\n    (selectionChange)=\"onValueChange()\">\n    @for (opt of config.options; track opt) {\n      <mat-option [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n        <span [style.font-family]=\"config.useFont ? opt.value : ''\">{{opt.label}}</span>\n      </mat-option>\n    }\n  </mat-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-select{--mat-select-trigger-text-size: .75rem;--mat-option-label-text-size: .75rem}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height);padding:0 .5rem!important}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:.5rem}[dir=rtl] .gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:.5rem}.gui-select .mat-pseudo-checkbox{width:1rem;height:1rem;border-width:1px}\n"] }]
+                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <mat-select panelClass=\"gui-select\" hideSingleSelectionIndicator disableRipple\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [multiple]=\"config.multiple || false\"\n    (selectionChange)=\"onValueChange()\">\n    @for (opt of config.options; track opt) {\n      <mat-option [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n        <span [style.font-family]=\"config.useFont ? opt.value : ''\">{{opt.label}}</span>\n      </mat-option>\n    }\n  </mat-select>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-select{--mat-select-trigger-text-line-height: 1rem;--mat-select-trigger-text-size: .75rem;--mat-option-label-text-size: .75rem}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height);padding:0 .5rem}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:.5rem}[dir=rtl] .gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:.5rem}.gui-select .mat-mdc-select-arrow-wrapper{height:1rem}.gui-select .mat-pseudo-checkbox{width:1rem;height:1rem;border-width:1px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], disabled: [{
@@ -995,7 +997,7 @@ class GuiTextarea {
                 useExisting: forwardRef(() => GuiTextarea),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <textarea matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [rows]=\"config.rows\"\n    (change)=\"onValueChange()\"></textarea>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-textarea .mat-mdc-text-field-wrapper{padding:0}.gui-textarea .mat-mdc-form-field-textarea-control{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.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: "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: "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 }); }
+        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <textarea matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [rows]=\"config.rows\"\n    (change)=\"onValueChange()\"></textarea>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.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: "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: "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: "18.2.0", ngImport: i0, type: GuiTextarea, decorators: [{
             type: Component,
@@ -1007,7 +1009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             useExisting: forwardRef(() => GuiTextarea),
                             multi: true,
                         },
-                    ], standalone: true, imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <textarea matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [rows]=\"config.rows\"\n    (change)=\"onValueChange()\"></textarea>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n", styles: [".gui-textarea .mat-mdc-text-field-wrapper{padding:0}.gui-textarea .mat-mdc-form-field-textarea-control{padding:0 .5rem}\n"] }]
+                    ], standalone: true, imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <textarea matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [rows]=\"config.rows\"\n    (change)=\"onValueChange()\"></textarea>\n  @if (config.suffix) {\n    <span matSuffix>{{config.suffix}}</span>\n  }\n  @if (config.parentType==='inline') {\n    <mat-hint>\n      <gui-field-label [config]=\"config\" />\n    </mat-hint>\n  }\n</mat-form-field>\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], disabled: [{
@@ -1242,7 +1244,7 @@ class GuiForm {
         tabs.mode = mode;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiForm, deps: [{ token: GuiIconsRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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    </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            }\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                </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                <gui-icon-button-wrapper>\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                </gui-icon-button-wrapper>\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                      }\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                          </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                        <button class=\"gui-list-item-title\"\n                          (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n                        @if (item.template && (item.addable || item.addable===undefined)) {\n                          <gui-icon-button-wrapper>\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                          </gui-icon-button-wrapper>\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                        }\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                            </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                      </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                  }\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: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.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 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.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 svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.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 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;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: .25rem;padding:.25rem;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:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;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", "aria-label", "aria-labelledby"], 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: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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    </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            }\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                </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                <gui-icon-button-wrapper>\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                </gui-icon-button-wrapper>\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                      }\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                          </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                        <button class=\"gui-list-item-title\"\n                          (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n                        @if (item.template && (item.addable || item.addable===undefined)) {\n                          <gui-icon-button-wrapper>\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                          </gui-icon-button-wrapper>\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                        }\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                            </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                      </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                  }\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: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.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 svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.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 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;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: .25rem;padding:.25rem;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:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;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", "aria-label", "aria-labelledby"], 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: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiForm, decorators: [{
             type: Component,
@@ -1277,7 +1279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GuiFieldLabel,
                         GuiIconButtonWrapper,
                         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    </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            }\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                </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                <gui-icon-button-wrapper>\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                </gui-icon-button-wrapper>\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                      }\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                          </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                        <button class=\"gui-list-item-title\"\n                          (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n                        @if (item.template && (item.addable || item.addable===undefined)) {\n                          <gui-icon-button-wrapper>\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                          </gui-icon-button-wrapper>\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                        }\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                            </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                      </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                  }\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: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.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 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.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 svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.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 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;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: .25rem;padding:.25rem;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:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"] }]
+                    ], 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    </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            }\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                </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                <gui-icon-button-wrapper>\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                </gui-icon-button-wrapper>\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                      }\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                          </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                        <button class=\"gui-list-item-title\"\n                          (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n                        @if (item.template && (item.addable || item.addable===undefined)) {\n                          <gui-icon-button-wrapper>\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                          </gui-icon-button-wrapper>\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                        }\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                            </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                      </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                  }\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: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.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 svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.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 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;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: .25rem;padding:.25rem;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:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;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: [{