@acrodata/gui 2.3.0 → 2.4.0

package/fesm2022/acrodata-gui.mjs

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { Pipe, Directive, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, Injectable, InjectionToken, Optional, Inject, EventEmitter, ViewChild, Output, NgModule } from '@angular/core';
+import { Pipe, Input, Directive, ChangeDetectionStrategy, ViewEncapsulation, Component, forwardRef, Injectable, Inject, InjectionToken, Optional, ViewChild, EventEmitter, Output, NgModule } from '@angular/core';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, FormGroup, FormControl, FormArray, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, FormGroup, FormControl, FormArray, ReactiveFormsModule } from '@angular/forms';
 import { MatHint, MatFormField, MatPrefix, MatSuffix, MatFormFieldModule } from '@angular/material/form-field';
 import { MatInput, MatInputModule } from '@angular/material/input';
 import * as i1$2 from '@angular/material/icon';
@@ -11,17 +11,24 @@ import { MatSelect, MatSelectModule } from '@angular/material/select';
 import { MatSlider, MatSliderThumb, MatSliderRangeThumb, MatSliderModule } from '@angular/material/slider';
 import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatButtonToggleGroup, MatButtonToggle, MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatIconButton, MatButtonModule } from '@angular/material/button';
+import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
 import { MatTabGroup, MatTab, MatTabLabel, MatTabContent, MatTabsModule } from '@angular/material/tabs';
 import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelContent, MatExpansionModule } from '@angular/material/expansion';
 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 { map, Subscription, of, mergeWith } from 'rxjs';
+import { MtxSelect, MtxSelectOptionTemplate, MtxSelectLabelTemplate, MtxSelectModule } from '@ng-matero/extensions/select';
+import { Subject, map, Subscription, of, mergeWith } from 'rxjs';
+import { CodeEditor } from '@acrodata/code-editor';
+import { coerceCssPixelValue } from '@angular/cdk/coercion';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1$3 from '@acrodata/rnd-dialog';
+import { RndDialogDragHandle } from '@acrodata/rnd-dialog';
+import * as i1$1 from '@angular/cdk/dialog';
+import { DIALOG_DATA } from '@angular/cdk/dialog';
+import * as i2 from '@angular/platform-browser';
 import { finalize } from 'rxjs/operators';
-import * as i1$1 from '@angular/common/http';
+import * as i1$4 from '@angular/common/http';
 import { HttpResponse } from '@angular/common/http';
-import * as i2 from '@angular/platform-browser';
 import { MatOption } from '@angular/material/core';
 
 /**
@@ -66,10 +73,10 @@ class GuiEjsPipe {
     transform(value, data = {}) {
         return ejsTmpl(value, data);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiEjsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: GuiEjsPipe, isStandalone: true, name: "ejs" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiEjsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GuiEjsPipe, isStandalone: true, name: "ejs" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiEjsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiEjsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'ejs',
@@ -85,10 +92,10 @@ class GuiFlexDirective {
         this.el.nativeElement.style.flex = `1 1 ${this.flex}%`;
         this.el.nativeElement.style.maxWidth = `${this.flex}%`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFlexDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: GuiFlexDirective, isStandalone: true, selector: "[flex]", inputs: { flex: "flex" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiFlexDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: GuiFlexDirective, isStandalone: true, selector: "[flex]", inputs: { flex: "flex" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFlexDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiFlexDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[flex]',
@@ -137,15 +144,15 @@ class GuiFieldLabel {
         this.styless =
             (parentType === 'inline' && type !== 'inline') || type === 'group' || type === 'tabs';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiFieldLabel, isStandalone: true, selector: "gui-field-label", inputs: { config: "config", index: "index" }, host: { properties: { "class.gui-field-label": "!styless", "title": "title" } }, usesOnChanges: true, ngImport: i0, template: "@if (!config.description) {\n  <span>{{title}}</span>\n} @else {\n  <span\n    [class.gui-field-label-with-description]=\"config.description\"\n    [matTooltip]=\"config.description\"\n    matTooltipPosition=\"above\"\n    matTooltipClass=\"gui-field-label-tooltip\">{{title}}</span>\n}\n", styles: [".gui-field-label{display:inline-block;width:4rem;height:1.5rem;padding:0 .25rem;line-height:1.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-field-label-with-description{text-decoration:underline dotted;cursor:help}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiFieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiFieldLabel, isStandalone: true, selector: "gui-field-label", inputs: { config: "config", index: "index" }, host: { properties: { "class.gui-field-label": "!styless", "title": "title" } }, usesOnChanges: true, ngImport: i0, template: "@if (!config.description) {\n  <span>{{ title }}</span>\n} @else {\n  <span\n    [class.gui-field-label-with-description]=\"config.description\"\n    [matTooltip]=\"config.description\"\n    matTooltipPosition=\"above\"\n    matTooltipClass=\"gui-field-label-tooltip\"\n  >\n    {{ title }}\n  </span>\n}\n", styles: [".gui-field-label{display:inline-block;width:4rem;height:1.5rem;padding:0 .25rem;line-height:1.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-field-label-with-description{text-decoration:underline dotted;cursor:help}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFieldLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiFieldLabel, decorators: [{
             type: Component,
             args: [{ selector: 'gui-field-label', host: {
                         '[class.gui-field-label]': '!styless',
                         '[title]': 'title',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatTooltip], template: "@if (!config.description) {\n  <span>{{title}}</span>\n} @else {\n  <span\n    [class.gui-field-label-with-description]=\"config.description\"\n    [matTooltip]=\"config.description\"\n    matTooltipPosition=\"above\"\n    matTooltipClass=\"gui-field-label-tooltip\">{{title}}</span>\n}\n", styles: [".gui-field-label{display:inline-block;width:4rem;height:1.5rem;padding:0 .25rem;line-height:1.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-field-label-with-description{text-decoration:underline dotted;cursor:help}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatTooltip], template: "@if (!config.description) {\n  <span>{{ title }}</span>\n} @else {\n  <span\n    [class.gui-field-label-with-description]=\"config.description\"\n    [matTooltip]=\"config.description\"\n    matTooltipPosition=\"above\"\n    matTooltipClass=\"gui-field-label-tooltip\"\n  >\n    {{ title }}\n  </span>\n}\n", styles: [".gui-field-label{display:inline-block;width:4rem;height:1.5rem;padding:0 .25rem;line-height:1.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-field-label-with-description{text-decoration:underline dotted;cursor:help}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], index: [{
@@ -159,8 +166,8 @@ class GuiIcon {
     isUrl() {
         return /^(https?:\/\/|\.?\/)\w+/.test(this.src);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiIcon, isStandalone: true, selector: "gui-icon", inputs: { src: "src" }, host: { classAttribute: "gui-icon" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiIcon, isStandalone: true, selector: "gui-icon", inputs: { src: "src" }, host: { classAttribute: "gui-icon" }, ngImport: i0, template: `
     @if (isUrl()) {
       <img [src]="src" alt="" />
     } @else {
@@ -168,7 +175,7 @@ class GuiIcon {
     }
   `, isInline: true, styles: [".gui-icon{display:inline-flex}.gui-icon img,.gui-icon i{display:block;width:var(--mat-standard-button-toggle-height);height:var(--mat-standard-button-toggle-height);line-height:var(--mat-standard-button-toggle-height)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiIcon, decorators: [{
             type: Component,
             args: [{ selector: 'gui-icon', template: `
     @if (isUrl()) {
@@ -209,16 +216,16 @@ class GuiButtonToggle {
     onValueChange() {
         this.onChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiButtonToggle, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiButtonToggle, isStandalone: true, selector: "gui-button-toggle", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-button-toggle" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiButtonToggle, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiButtonToggle, isStandalone: true, selector: "gui-button-toggle", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-button-toggle" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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-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 }); }
+        ], ngImport: i0, template: "<mat-button-toggle-group\n  [(ngModel)]=\"value\"\n  [disabled]=\"disabled\"\n  [multiple]=\"config.multiple\"\n  (change)=\"onValueChange()\"\n  hideSingleSelectionIndicator\n  hideMultipleSelectionIndicator\n>\n  @for (opt of config.options; track opt) {\n    <mat-button-toggle\n      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    >\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiButtonToggle, decorators: [{
             type: Component,
             args: [{ selector: 'gui-button-toggle', host: {
                         class: 'gui-field gui-button-toggle',
@@ -236,88 +243,77 @@ 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-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"] }]
+                    ], template: "<mat-button-toggle-group\n  [(ngModel)]=\"value\"\n  [disabled]=\"disabled\"\n  [multiple]=\"config.multiple\"\n  (change)=\"onValueChange()\"\n  hideSingleSelectionIndicator\n  hideMultipleSelectionIndicator\n>\n  @for (opt of config.options; track opt) {\n    <mat-button-toggle\n      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    >\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: [{
                 type: Input
             }] } });
 
-class GuiFieldGroup {
-    constructor(differs, cdr) {
-        this.differs = differs;
-        this.cdr = cdr;
-        this.config = {};
-    }
-    ngOnInit() {
-        this.configDiffer = this.differs.find(this.config).create();
-    }
-    ngDoCheck() {
-        const changes = this.configDiffer?.diff(this.config);
-        changes?.forEachChangedItem(record => {
-            this.cdr.markForCheck();
-        });
-    }
-    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-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-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
-            }] } });
-
 class GuiIconButtonWrapper {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiIconButtonWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: GuiIconButtonWrapper, isStandalone: true, selector: "gui-icon-button-wrapper", host: { classAttribute: "gui-icon-button-wrapper" }, ngImport: i0, template: "<ng-content />\n", styles: [".gui-icon-button-wrapper{line-height:1}.gui-icon-button-wrapper .mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 1.5rem;--mdc-icon-button-icon-size: .875rem;padding:0}.gui-icon-button-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size)}.gui-icon-button-wrapper .mat-icon{display:inline-flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem}.gui-icon-button-wrapper .mat-icon svg{width:.875rem;height:.875rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiIconButtonWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GuiIconButtonWrapper, isStandalone: true, selector: "gui-icon-button-wrapper", host: { classAttribute: "gui-icon-button-wrapper" }, ngImport: i0, template: "<ng-content />\n", styles: [".gui-icon-button-wrapper{display:block;line-height:1}.gui-icon-button-wrapper .mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 1.5rem;--mdc-icon-button-icon-size: .875rem;--mat-icon-button-touch-target-display: none;padding:0}.gui-icon-button-wrapper .mat-icon{display:inline-flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem}.gui-icon-button-wrapper .mat-icon svg{width:.875rem;height:.875rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiIconButtonWrapper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiIconButtonWrapper, decorators: [{
             type: Component,
             args: [{ selector: 'gui-icon-button-wrapper', standalone: true, host: {
                         class: 'gui-icon-button-wrapper',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [".gui-icon-button-wrapper{line-height:1}.gui-icon-button-wrapper .mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 1.5rem;--mdc-icon-button-icon-size: .875rem;padding:0}.gui-icon-button-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size)}.gui-icon-button-wrapper .mat-icon{display:inline-flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem}.gui-icon-button-wrapper .mat-icon svg{width:.875rem;height:.875rem}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [".gui-icon-button-wrapper{display:block;line-height:1}.gui-icon-button-wrapper .mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 1.5rem;--mdc-icon-button-icon-size: .875rem;--mat-icon-button-touch-target-display: none;padding:0}.gui-icon-button-wrapper .mat-icon{display:inline-flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem}.gui-icon-button-wrapper .mat-icon svg{width:.875rem;height:.875rem}\n"] }]
         }] });
 
-class GuiFileUploaderConfig {
-    constructor(http) {
-        this.http = http;
-        /**
-         *  The file upload URL
-         */
-        this.url = '';
-    }
-    /**
-     * The File upload API
-     *
-     * @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(formData, config) {
-        return this.http
-            .post(this.url, formData, {
-            reportProgress: true,
-            observe: 'events',
-        })
-            .pipe(map(res => {
-            if (res instanceof HttpResponse && res.body) {
-                return res.body.url;
-            }
-            return null;
-        }));
+class GuiCodeareaConfig {
+    constructor() {
+        this.changes = new Subject();
+        this.theme = 'light';
+        this.languages = [];
     }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodeareaConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodeareaConfig, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFileUploaderConfig, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodeareaConfig, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }] });
+        }] });
+
+class GuiCodeareaDialog {
+    get languages() {
+        return this.codeareaCfg.languages;
+    }
+    get theme() {
+        return this.codeareaCfg.theme;
+    }
+    constructor(dialogRef, data, cdr, destroyRef, codeareaCfg) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.cdr = cdr;
+        this.destroyRef = destroyRef;
+        this.codeareaCfg = codeareaCfg;
+        this.langDesc = this.codeareaCfg.languages.find(lang => lang.alias.includes(this.data.language.toLowerCase()));
+        this.title = `${this.data.title || ''} (${this.langDesc?.name || 'Plain Text'})`;
+        this.codeareaCfg.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.cdr.markForCheck();
+        });
+    }
+    save() {
+        this.dialogRef.close(this.data.value);
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodeareaDialog, deps: [{ token: i1$1.DialogRef }, { token: DIALOG_DATA }, { token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: GuiCodeareaConfig }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GuiCodeareaDialog, isStandalone: true, selector: "gui-codearea-dialog", host: { classAttribute: "gui-codearea-dialog" }, ngImport: i0, template: "<div\n  class=\"gui-codearea-dialog-header\"\n  [class.dragging]=\"dragHandle.isDragging\"\n  rndDialogDragHandle\n  #dragHandle=\"rndDialogDragHandle\"\n>\n  <span class=\"gui-codearea-dialog-title\" [title]=\"title\">{{ title }}</span>\n\n  <span class=\"gui-codearea-dialog-spacer\"></span>\n\n  <button mat-stroked-button (click)=\"close()\">Close</button>\n  <button mat-flat-button (click)=\"save()\">Save</button>\n</div>\n\n<code-editor\n  [(ngModel)]=\"data.value\"\n  [disabled]=\"data.disabled\"\n  [language]=\"data.language\"\n  [languages]=\"languages\"\n  [theme]=\"theme\"\n  indentWithTab\n/>\n", styles: [".gui-codearea-dialog-panel{--rnd-dialog-container-color: var(--mdc-dialog-container-color)}.gui-codearea-dialog{--mdc-outlined-button-label-text-size: .75rem;--mdc-outlined-button-container-height: 1.5rem;--mat-outlined-button-horizontal-padding: .75rem;--mat-outlined-button-touch-target-display: none;--mdc-filled-button-label-text-size: .75rem;--mdc-filled-button-container-height: 1.5rem;--mat-filled-button-horizontal-padding: .75rem;--mat-filled-button-touch-target-display: none;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:inherit;font-size:.75rem}.gui-codearea-dialog .code-editor{flex:1;overflow:auto;border:1px solid transparent}.gui-codearea-dialog-header{display:flex;gap:.5rem;align-items:center;padding:.5rem;cursor:grab;border-bottom:1px solid rgba(0,0,0,.24);box-shadow:0 1px #ffffff3d}.gui-codearea-dialog-header.dragging{cursor:grabbing}.gui-codearea-dialog-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gui-codearea-dialog-spacer{flex:1}\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: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: RndDialogDragHandle, selector: "[rnd-dialog-drag-handle], [rndDialogDragHandle]", exportAs: ["rndDialogDragHandle"] }, { kind: "component", type: CodeEditor, selector: "code-editor", inputs: ["root", "autoFocus", "value", "disabled", "readonly", "theme", "placeholder", "indentWithTab", "indentUnit", "lineWrapping", "highlightWhitespace", "languages", "language", "setup", "extensions"], outputs: ["change", "focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodeareaDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-codearea-dialog', standalone: true, imports: [FormsModule, MatButton, RndDialogDragHandle, CodeEditor], host: {
+                        class: 'gui-codearea-dialog',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"gui-codearea-dialog-header\"\n  [class.dragging]=\"dragHandle.isDragging\"\n  rndDialogDragHandle\n  #dragHandle=\"rndDialogDragHandle\"\n>\n  <span class=\"gui-codearea-dialog-title\" [title]=\"title\">{{ title }}</span>\n\n  <span class=\"gui-codearea-dialog-spacer\"></span>\n\n  <button mat-stroked-button (click)=\"close()\">Close</button>\n  <button mat-flat-button (click)=\"save()\">Save</button>\n</div>\n\n<code-editor\n  [(ngModel)]=\"data.value\"\n  [disabled]=\"data.disabled\"\n  [language]=\"data.language\"\n  [languages]=\"languages\"\n  [theme]=\"theme\"\n  indentWithTab\n/>\n", styles: [".gui-codearea-dialog-panel{--rnd-dialog-container-color: var(--mdc-dialog-container-color)}.gui-codearea-dialog{--mdc-outlined-button-label-text-size: .75rem;--mdc-outlined-button-container-height: 1.5rem;--mat-outlined-button-horizontal-padding: .75rem;--mat-outlined-button-touch-target-display: none;--mdc-filled-button-label-text-size: .75rem;--mdc-filled-button-container-height: 1.5rem;--mat-filled-button-horizontal-padding: .75rem;--mat-filled-button-touch-target-display: none;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:inherit;font-size:.75rem}.gui-codearea-dialog .code-editor{flex:1;overflow:auto;border:1px solid transparent}.gui-codearea-dialog-header{display:flex;gap:.5rem;align-items:center;padding:.5rem;cursor:grab;border-bottom:1px solid rgba(0,0,0,.24);box-shadow:0 1px #ffffff3d}.gui-codearea-dialog-header.dragging{cursor:grabbing}.gui-codearea-dialog-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gui-codearea-dialog-spacer{flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DIALOG_DATA]
+                }] }, { type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }, { type: GuiCodeareaConfig }] });
 
 const svgIcons = {
     horizontal: `
@@ -357,14 +353,18 @@ const svgIcons = {
   `,
     file: `
   <svg viewBox="0 0 24 24">
-    <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z" />
+    <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"></path>
   </svg>
   `,
     upload: `
   <svg viewBox="0 0 24 24">
-    <path d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 2L6.46 7.46L7.88 8.88L11 5.75V15H13V5.75L16.13 8.88L17.55 7.45L12 2Z" />
+    <path d="M2 12H4V17H20V12H22V17C22 18.11 21.11 19 20 19H4C2.9 19 2 18.11 2 17V12M12 2L6.46 7.46L7.88 8.88L11 5.75V15H13V5.75L16.13 8.88L17.55 7.45L12 2Z"></path>
   </svg>
   `,
+    expand: `
+  <svg viewBox="0 0 24 24">
+    <path fill="currentColor" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z"></path>
+  </svg>`,
 };
 /** Injection token that can be used to provide the default icons. */
 const GUI_ICONS_CONFIG = new InjectionToken('gui-icons-config');
@@ -380,10 +380,10 @@ class GuiIconsRegistry {
             this._iconRegistry.addSvgIconLiteral(k, this._sanitizer.bypassSecurityTrustHtml(icons[k]));
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiIconsRegistry, deps: [{ token: i1$2.MatIconRegistry }, { token: i2.DomSanitizer }, { token: GUI_ICONS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiIconsRegistry, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiIconsRegistry, deps: [{ token: i1$2.MatIconRegistry }, { token: i2.DomSanitizer }, { token: GUI_ICONS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiIconsRegistry, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiIconsRegistry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiIconsRegistry, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$2.MatIconRegistry }, { type: i2.DomSanitizer }, { type: undefined, decorators: [{
@@ -393,6 +393,269 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     args: [GUI_ICONS_CONFIG]
                 }] }] });
 
+class GuiCodearea {
+    get height() {
+        return coerceCssPixelValue(this.config.height || this._height);
+    }
+    set height(value) {
+        this._height = value;
+    }
+    get language() {
+        return this.config.language || this._language;
+    }
+    set language(value) {
+        this._language = value;
+    }
+    get languages() {
+        return this.codeareaCfg.languages;
+    }
+    get theme() {
+        return this.codeareaCfg.theme;
+    }
+    constructor(rndDialog, cdr, destroyRef, codeareaCfg, iconsRegistry) {
+        this.rndDialog = rndDialog;
+        this.cdr = cdr;
+        this.destroyRef = destroyRef;
+        this.codeareaCfg = codeareaCfg;
+        this.config = {};
+        this.disabled = false;
+        this.setup = 'minimal';
+        this._height = 120;
+        this._language = '';
+        this.value = '';
+        this.oldValue = '';
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        iconsRegistry.add('expand');
+        this.codeareaCfg.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.cdr.markForCheck();
+        });
+    }
+    writeValue(value) {
+        if (typeof value === 'string' || value == null) {
+            this.value = value || '';
+        }
+        else {
+            this.value = value.toString();
+        }
+        this.oldValue = this.value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onValueChange() {
+        if (this.value !== this.oldValue) {
+            this.onChange(this.value);
+            this.oldValue = this.value;
+        }
+    }
+    onExpand() {
+        const dialogRef = this.rndDialog.open(GuiCodeareaDialog, {
+            panelClass: 'gui-codearea-dialog-panel',
+            hasBackdrop: false,
+            width: '600px',
+            data: {
+                value: this.value,
+                disabled: this.disabled,
+                language: this.language,
+            },
+        });
+        dialogRef.closed.subscribe(newValue => {
+            if (newValue) {
+                this.value = newValue;
+                this.cdr.detectChanges();
+                this.onValueChange();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodearea, deps: [{ token: i1$3.RndDialog }, { token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }, { token: GuiCodeareaConfig }, { token: GuiIconsRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiCodearea, isStandalone: true, selector: "gui-codearea", inputs: { config: "config", disabled: "disabled", setup: "setup", height: "height", language: "language" }, host: { classAttribute: "gui-field gui-codearea" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => GuiCodearea),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<code-editor\n  [style.height]=\"height\"\n  [(ngModel)]=\"value\"\n  [disabled]=\"disabled\"\n  [language]=\"language\"\n  [languages]=\"languages\"\n  [theme]=\"theme\"\n  [setup]=\"setup\"\n  (blur)=\"onValueChange()\"\n/>\n\n<div class=\"gui-codearea-btns\">\n  <gui-icon-button-wrapper>\n    <button mat-icon-button type=\"button\" (click)=\"onExpand()\">\n      <mat-icon svgIcon=\"expand\" />\n    </button>\n  </gui-icon-button-wrapper>\n</div>\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-codearea{position:relative;overflow:auto;border:1px solid var(--mdc-outlined-text-field-outline-color);border-radius:var(--mdc-outlined-text-field-container-shape)}.gui-codearea .code-editor{width:100%;min-height:1.5rem;overflow:auto;resize:vertical}.gui-codearea:hover .gui-codearea-btns{display:block}.gui-codearea-btns{position:absolute;top:0;right:0;display:none;margin:2px}[dir=rtl] .gui-codearea-btns{left:0;right:auto}.gui-codearea-btns .gui-icon-button-wrapper .mat-mdc-icon-button,.gui-codearea-btns .gui-icon-button-wrapper .mat-icon{width:1.25rem;height:1.25rem}.gui-codearea-btns .mat-mdc-icon-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.25rem}.gui-codearea-btns .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:inherit}\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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: CodeEditor, selector: "code-editor", inputs: ["root", "autoFocus", "value", "disabled", "readonly", "theme", "placeholder", "indentWithTab", "indentUnit", "lineWrapping", "highlightWhitespace", "languages", "language", "setup", "extensions"], outputs: ["change", "focus", "blur"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCodearea, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-codearea', host: {
+                        class: 'gui-field gui-codearea',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GuiCodearea),
+                            multi: true,
+                        },
+                    ], standalone: true, imports: [
+                        FormsModule,
+                        MatIcon,
+                        MatIconButton,
+                        MatHint,
+                        CodeEditor,
+                        GuiFieldLabel,
+                        GuiIconButtonWrapper,
+                    ], template: "<code-editor\n  [style.height]=\"height\"\n  [(ngModel)]=\"value\"\n  [disabled]=\"disabled\"\n  [language]=\"language\"\n  [languages]=\"languages\"\n  [theme]=\"theme\"\n  [setup]=\"setup\"\n  (blur)=\"onValueChange()\"\n/>\n\n<div class=\"gui-codearea-btns\">\n  <gui-icon-button-wrapper>\n    <button mat-icon-button type=\"button\" (click)=\"onExpand()\">\n      <mat-icon svgIcon=\"expand\" />\n    </button>\n  </gui-icon-button-wrapper>\n</div>\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-codearea{position:relative;overflow:auto;border:1px solid var(--mdc-outlined-text-field-outline-color);border-radius:var(--mdc-outlined-text-field-container-shape)}.gui-codearea .code-editor{width:100%;min-height:1.5rem;overflow:auto;resize:vertical}.gui-codearea:hover .gui-codearea-btns{display:block}.gui-codearea-btns{position:absolute;top:0;right:0;display:none;margin:2px}[dir=rtl] .gui-codearea-btns{left:0;right:auto}.gui-codearea-btns .gui-icon-button-wrapper .mat-mdc-icon-button,.gui-codearea-btns .gui-icon-button-wrapper .mat-icon{width:1.25rem;height:1.25rem}.gui-codearea-btns .mat-mdc-icon-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.25rem}.gui-codearea-btns .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:inherit}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.RndDialog }, { type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }, { type: GuiCodeareaConfig }, { type: GuiIconsRegistry }], propDecorators: { config: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], setup: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], language: [{
+                type: Input
+            }] } });
+
+class GuiCombobox {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.config = {};
+        this.disabled = false;
+        this.appendTo = 'body';
+        this.value = '';
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    ngAfterViewInit() {
+        // Add additional class for ng-select's dropdown panel
+        const { ngSelect } = this.mtxSelect;
+        ngSelect.classes = (ngSelect.classes || '') + ' gui-combobox';
+    }
+    writeValue(value) {
+        this.value = value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    onValueChange() {
+        this.onChange(this.value);
+    }
+    addTagFn(label) {
+        return { label, value: label };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiCombobox, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiCombobox, isStandalone: true, selector: "gui-combobox", inputs: { config: "config", disabled: "disabled", appendTo: "appendTo" }, host: { classAttribute: "gui-field gui-combobox" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => GuiCombobox),
+                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\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [appendTo]=\"appendTo\"\n    [items]=\"config.options || []\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"config.multiple || false\"\n    [addTag]=\"addTagFn\"\n    [closeOnSelect]=\"!config.multiple\"\n    [deselectOnClick]=\"true\"\n    (change)=\"onValueChange()\"\n  >\n    <ng-template ng-option-tmp let-item=\"item\">\n      <div class=\"ng-option-label\" [style.font-family]=\"config.useFont ? item.value : ''\">\n        {{ item.label }}\n      </div>\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-combobox .ng-select{padding-left:.5rem;padding-right:.5rem;margin-left:-.5rem;margin-right:-.5rem}.gui-combobox .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}.gui-combobox .ng-select .ng-value-icon{font-family:math;font-size:10px}.gui-combobox .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-combobox .ng-select .ng-arrow{vertical-align:-1px}.gui-combobox.ng-dropdown-panel{padding:.5rem 0}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height)}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{line-height:1}\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: 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.13", ngImport: i0, type: GuiCombobox, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-combobox', host: {
+                        class: 'gui-field gui-combobox',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GuiCombobox),
+                            multi: true,
+                        },
+                    ], standalone: true, imports: [
+                        FormsModule,
+                        MatFormField,
+                        MatPrefix,
+                        MatSuffix,
+                        MatHint,
+                        MtxSelect,
+                        MtxSelectOptionTemplate,
+                        GuiFieldLabel,
+                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <mtx-select\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [appendTo]=\"appendTo\"\n    [items]=\"config.options || []\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"config.multiple || false\"\n    [addTag]=\"addTagFn\"\n    [closeOnSelect]=\"!config.multiple\"\n    [deselectOnClick]=\"true\"\n    (change)=\"onValueChange()\"\n  >\n    <ng-template ng-option-tmp let-item=\"item\">\n      <div class=\"ng-option-label\" [style.font-family]=\"config.useFont ? item.value : ''\">\n        {{ item.label }}\n      </div>\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-combobox .ng-select{padding-left:.5rem;padding-right:.5rem;margin-left:-.5rem;margin-right:-.5rem}.gui-combobox .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}.gui-combobox .ng-select .ng-value-icon{font-family:math;font-size:10px}.gui-combobox .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-combobox .ng-select .ng-arrow{vertical-align:-1px}.gui-combobox.ng-dropdown-panel{padding:.5rem 0}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height)}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{line-height:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { mtxSelect: [{
+                type: ViewChild,
+                args: [MtxSelect]
+            }], config: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }] } });
+
+class GuiFieldGroup {
+    constructor(differs, cdr) {
+        this.differs = differs;
+        this.cdr = cdr;
+        this.config = {};
+    }
+    ngOnInit() {
+        this.configDiffer = this.differs.find(this.config).create();
+    }
+    ngDoCheck() {
+        const changes = this.configDiffer?.diff(this.config);
+        changes?.forEachChangedItem(record => {
+            this.cdr.markForCheck();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", 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.13", 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.13", 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-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
+            }] } });
+
+class GuiFileUploaderConfig {
+    constructor(http) {
+        this.http = http;
+        /**
+         *  The file upload URL
+         */
+        this.url = '';
+    }
+    /**
+     * The File upload API
+     *
+     * @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(formData, config) {
+        return this.http
+            .post(this.url, formData, {
+            reportProgress: true,
+            observe: 'events',
+        })
+            .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.13", ngImport: i0, type: GuiFileUploaderConfig, deps: [{ token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiFileUploaderConfig, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiFileUploaderConfig, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$4.HttpClient }] });
+
 class GuiFileUploader {
     constructor(fileUploaderCfg, cdr, iconsRegistry) {
         this.fileUploaderCfg = fileUploaderCfg;
@@ -471,16 +734,16 @@ class GuiFileUploader {
         this.onTouched();
         this.fileChange.emit(this.url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFileUploader, deps: [{ token: GuiFileUploaderConfig }, { token: i0.ChangeDetectorRef }, { token: GuiIconsRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiFileUploader, isStandalone: true, selector: "gui-file-uploader", inputs: { config: "config", disabled: "disabled", type: "type", name: "name", accept: "accept" }, outputs: { fileChange: "fileChange" }, host: { classAttribute: "gui-field gui-file-uploader" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiFileUploader, deps: [{ token: GuiFileUploaderConfig }, { token: i0.ChangeDetectorRef }, { token: GuiIconsRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiFileUploader, isStandalone: true, selector: "gui-file-uploader", inputs: { config: "config", disabled: "disabled", type: "type", name: "name", accept: "accept" }, outputs: { fileChange: "fileChange" }, host: { classAttribute: "gui-field gui-file-uploader" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => GuiFileUploader),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n  <gui-icon-button-wrapper matPrefix>\n    <mat-icon svgIcon=\"link\" />\n  </gui-icon-button-wrapper>\n\n  <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n  @if (url) {\n    <gui-icon-button-wrapper matSuffix>\n      <button mat-icon-button color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n        <mat-icon svgIcon=\"clear\" />\n      </button>\n    </gui-icon-button-wrapper>\n  }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  @if (url) {\n    @switch (type) {\n      @case ('image') {\n        <img [src]=\"url\" alt=\"\" />\n      }\n      @case ('video') {\n        <video [src]=\"url\"></video>\n      }\n      @case ('audio') {\n        <audio [src]=\"url\" controls></audio>\n      }\n      @default {\n        <mat-icon svgIcon=\"file\" />\n      }\n    }\n  } @else {\n    <div class=\"gui-file-placeholder\">\n      <mat-icon svgIcon=\"upload\" />\n    </div>\n  }\n\n  <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\"\n    [disabled]=\"disabled\" (change)=\"onFileChange($event)\">\n</figure>\n\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n  <gui-icon-button-wrapper matPrefix>\n    <mat-icon svgIcon=\"link\" />\n  </gui-icon-button-wrapper>\n\n  <input\n    matInput\n    type=\"text\"\n    [ngModel]=\"url\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onUrlChange($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (url) {\n    <gui-icon-button-wrapper matSuffix>\n      <button mat-icon-button type=\"button\" color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n        <mat-icon svgIcon=\"clear\" />\n      </button>\n    </gui-icon-button-wrapper>\n  }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  @if (url) {\n    @switch (type) {\n      @case ('image') {\n        <img [src]=\"url\" alt=\"\" />\n      }\n      @case ('video') {\n        <video [src]=\"url\"></video>\n      }\n      @case ('audio') {\n        <audio [src]=\"url\" controls></audio>\n      }\n      @default {\n        <mat-icon svgIcon=\"file\" />\n      }\n    }\n  } @else {\n    <div class=\"gui-file-placeholder\">\n      <mat-icon svgIcon=\"upload\" />\n    </div>\n  }\n\n  <input\n    #fileInput\n    type=\"file\"\n    [accept]=\"accept\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    (change)=\"onFileChange($event)\"\n  />\n</figure>\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFileUploader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiFileUploader, decorators: [{
             type: Component,
             args: [{ selector: 'gui-file-uploader', host: {
                         class: 'gui-field gui-file-uploader',
@@ -501,7 +764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MatHint,
                         GuiFieldLabel,
                         GuiIconButtonWrapper,
-                    ], template: "<mat-form-field>\n  <gui-icon-button-wrapper matPrefix>\n    <mat-icon svgIcon=\"link\" />\n  </gui-icon-button-wrapper>\n\n  <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n  @if (url) {\n    <gui-icon-button-wrapper matSuffix>\n      <button mat-icon-button color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n        <mat-icon svgIcon=\"clear\" />\n      </button>\n    </gui-icon-button-wrapper>\n  }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  @if (url) {\n    @switch (type) {\n      @case ('image') {\n        <img [src]=\"url\" alt=\"\" />\n      }\n      @case ('video') {\n        <video [src]=\"url\"></video>\n      }\n      @case ('audio') {\n        <audio [src]=\"url\" controls></audio>\n      }\n      @default {\n        <mat-icon svgIcon=\"file\" />\n      }\n    }\n  } @else {\n    <div class=\"gui-file-placeholder\">\n      <mat-icon svgIcon=\"upload\" />\n    </div>\n  }\n\n  <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\"\n    [disabled]=\"disabled\" (change)=\"onFileChange($event)\">\n</figure>\n\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"] }]
+                    ], template: "<mat-form-field>\n  <gui-icon-button-wrapper matPrefix>\n    <mat-icon svgIcon=\"link\" />\n  </gui-icon-button-wrapper>\n\n  <input\n    matInput\n    type=\"text\"\n    [ngModel]=\"url\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onUrlChange($event)\"\n    (blur)=\"onBlur()\"\n  />\n\n  @if (url) {\n    <gui-icon-button-wrapper matSuffix>\n      <button mat-icon-button type=\"button\" color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n        <mat-icon svgIcon=\"clear\" />\n      </button>\n    </gui-icon-button-wrapper>\n  }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  @if (url) {\n    @switch (type) {\n      @case ('image') {\n        <img [src]=\"url\" alt=\"\" />\n      }\n      @case ('video') {\n        <video [src]=\"url\"></video>\n      }\n      @case ('audio') {\n        <audio [src]=\"url\" controls></audio>\n      }\n      @default {\n        <mat-icon svgIcon=\"file\" />\n      }\n    }\n  } @else {\n    <div class=\"gui-file-placeholder\">\n      <mat-icon svgIcon=\"upload\" />\n    </div>\n  }\n\n  <input\n    #fileInput\n    type=\"file\"\n    [accept]=\"accept\"\n    [name]=\"name\"\n    [disabled]=\"disabled\"\n    (change)=\"onFileChange($event)\"\n  />\n</figure>\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"] }]
         }], ctorParameters: () => [{ type: GuiFileUploaderConfig }, { type: i0.ChangeDetectorRef }, { type: GuiIconsRegistry }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -547,16 +810,16 @@ class GuiFill {
     onValueChange() {
         this.onChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFill, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiFill, isStandalone: true, selector: "gui-fill", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-fill" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiFill, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiFill, isStandalone: true, selector: "gui-fill", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-fill" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => GuiFill),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field>\n  <ng-container matPrefix>\n    <span class=\"gui-color-block-empty\"></span>\n    <span class=\"gui-color-block\" [style.background]=\"value\"></span>\n  </ng-container>\n\n  <input matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [mtxColorpicker]=\"cp\"\n    (colorChange)=\"onValueChange()\">\n\n  <mtx-colorpicker #cp />\n  <gui-icon-button-wrapper matSuffix>\n    <mtx-colorpicker-toggle [for]=\"cp\" />\n  </gui-icon-button-wrapper>\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-color-block,.gui-color-block-empty{position:relative;display:inline-block;width:1.5rem;height:1.5rem}.gui-color-block-empty{position:absolute;background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-position:0 0,0 .25rem,.25rem -.25rem,-.25rem 0;background-size:.5rem .5rem}.gui-color-block:after{display:inline-block;width:100%;height:100%;box-sizing:border-box;border:1px solid currentColor;border-top-left-radius:var(--mdc-filled-text-field-container-shape);border-bottom-left-radius:var(--mdc-filled-text-field-container-shape);opacity:.12;content:\"\"}[dir=rtl] .gui-color-block:after{border-radius:0;border-top-right-radius:var(--mdc-filled-text-field-container-shape);border-bottom-right-radius:var(--mdc-filled-text-field-container-shape)}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\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: "directive", type: MtxColorpickerInput, selector: "input[mtxColorpicker]", inputs: ["mtxColorpicker", "disabled", "value", "format"], outputs: ["colorChange", "colorInput"], exportAs: ["mtxColorpickerInput"] }, { kind: "component", type: MtxColorpicker, selector: "mtx-colorpicker", inputs: ["content", "disabled", "xPosition", "yPosition", "restoreFocus", "opened", "color", "format"], outputs: ["opened", "closed"], exportAs: ["mtxColorpicker"] }, { kind: "component", type: MtxColorpickerToggle, selector: "mtx-colorpicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["mtxColorpickerToggle"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: "<mat-form-field>\n  <ng-container matPrefix>\n    <span class=\"gui-color-block-empty\"></span>\n    <span class=\"gui-color-block\" [style.background]=\"value\"></span>\n  </ng-container>\n\n  <input\n    matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [mtxColorpicker]=\"cp\"\n    (colorChange)=\"onValueChange()\"\n  />\n\n  <mtx-colorpicker #cp />\n  <gui-icon-button-wrapper matSuffix>\n    <mtx-colorpicker-toggle [for]=\"cp\" />\n  </gui-icon-button-wrapper>\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-color-block,.gui-color-block-empty{position:relative;display:inline-block;width:1.5rem;height:1.5rem}.gui-color-block-empty{position:absolute;background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-position:0 0,0 .25rem,.25rem -.25rem,-.25rem 0;background-size:.5rem .5rem}.gui-color-block:after{display:inline-block;width:100%;height:100%;box-sizing:border-box;border:1px solid currentColor;border-top-left-radius:var(--mdc-filled-text-field-container-shape);border-bottom-left-radius:var(--mdc-filled-text-field-container-shape);opacity:.12;content:\"\"}[dir=rtl] .gui-color-block:after{border-radius:0;border-top-right-radius:var(--mdc-filled-text-field-container-shape);border-bottom-right-radius:var(--mdc-filled-text-field-container-shape)}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\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: "directive", type: MtxColorpickerInput, selector: "input[mtxColorpicker]", inputs: ["mtxColorpicker", "disabled", "value", "format"], outputs: ["colorChange", "colorInput"], exportAs: ["mtxColorpickerInput"] }, { kind: "component", type: MtxColorpicker, selector: "mtx-colorpicker", inputs: ["content", "disabled", "xPosition", "yPosition", "restoreFocus", "opened", "color", "format"], outputs: ["opened", "closed"], exportAs: ["mtxColorpicker"] }, { kind: "component", type: MtxColorpickerToggle, selector: "mtx-colorpicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["mtxColorpickerToggle"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFill, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiFill, decorators: [{
             type: Component,
             args: [{ selector: 'gui-fill', host: {
                         class: 'gui-field gui-fill',
@@ -578,7 +841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MtxColorpickerToggle,
                         GuiFieldLabel,
                         GuiIconButtonWrapper,
-                    ], template: "<mat-form-field>\n  <ng-container matPrefix>\n    <span class=\"gui-color-block-empty\"></span>\n    <span class=\"gui-color-block\" [style.background]=\"value\"></span>\n  </ng-container>\n\n  <input matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\n    [mtxColorpicker]=\"cp\"\n    (colorChange)=\"onValueChange()\">\n\n  <mtx-colorpicker #cp />\n  <gui-icon-button-wrapper matSuffix>\n    <mtx-colorpicker-toggle [for]=\"cp\" />\n  </gui-icon-button-wrapper>\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-color-block,.gui-color-block-empty{position:relative;display:inline-block;width:1.5rem;height:1.5rem}.gui-color-block-empty{position:absolute;background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-position:0 0,0 .25rem,.25rem -.25rem,-.25rem 0;background-size:.5rem .5rem}.gui-color-block:after{display:inline-block;width:100%;height:100%;box-sizing:border-box;border:1px solid currentColor;border-top-left-radius:var(--mdc-filled-text-field-container-shape);border-bottom-left-radius:var(--mdc-filled-text-field-container-shape);opacity:.12;content:\"\"}[dir=rtl] .gui-color-block:after{border-radius:0;border-top-right-radius:var(--mdc-filled-text-field-container-shape);border-bottom-right-radius:var(--mdc-filled-text-field-container-shape)}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"] }]
+                    ], template: "<mat-form-field>\n  <ng-container matPrefix>\n    <span class=\"gui-color-block-empty\"></span>\n    <span class=\"gui-color-block\" [style.background]=\"value\"></span>\n  </ng-container>\n\n  <input\n    matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [mtxColorpicker]=\"cp\"\n    (colorChange)=\"onValueChange()\"\n  />\n\n  <mtx-colorpicker #cp />\n  <gui-icon-button-wrapper matSuffix>\n    <mtx-colorpicker-toggle [for]=\"cp\" />\n  </gui-icon-button-wrapper>\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-color-block,.gui-color-block-empty{position:relative;display:inline-block;width:1.5rem;height:1.5rem}.gui-color-block-empty{position:absolute;background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-position:0 0,0 .25rem,.25rem -.25rem,-.25rem 0;background-size:.5rem .5rem}.gui-color-block:after{display:inline-block;width:100%;height:100%;box-sizing:border-box;border:1px solid currentColor;border-top-left-radius:var(--mdc-filled-text-field-container-shape);border-bottom-left-radius:var(--mdc-filled-text-field-container-shape);opacity:.12;content:\"\"}[dir=rtl] .gui-color-block:after{border-radius:0;border-top-right-radius:var(--mdc-filled-text-field-container-shape);border-bottom-right-radius:var(--mdc-filled-text-field-container-shape)}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], disabled: [{
@@ -616,16 +879,16 @@ class GuiImageSelect {
     onValueChange() {
         this.onChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiImageSelect, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiImageSelect, isStandalone: true, selector: "gui-image-select", inputs: { config: "config", disabled: "disabled", appendTo: "appendTo" }, host: { classAttribute: "gui-field gui-image-select" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiImageSelect, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiImageSelect, isStandalone: true, selector: "gui-image-select", inputs: { config: "config", disabled: "disabled", appendTo: "appendTo" }, host: { classAttribute: "gui-field gui-image-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.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 }); }
+        ], 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\n    [items]=\"config.options || []\"\n    [appendTo]=\"appendTo\"\n    bindValue=\"value\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onValueChange()\"\n  >\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-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiImageSelect, decorators: [{
             type: Component,
             args: [{ selector: 'gui-image-select', host: {
                         class: 'gui-field gui-image-select',
@@ -645,7 +908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MtxSelectLabelTemplate,
                         MtxSelectOptionTemplate,
                         GuiFieldLabel,
-                    ], 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-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"] }]
+                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <mtx-select\n    [items]=\"config.options || []\"\n    [appendTo]=\"appendTo\"\n    bindValue=\"value\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onValueChange()\"\n  >\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-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { mtxSelect: [{
                 type: ViewChild,
                 args: [MtxSelect]
@@ -661,10 +924,10 @@ class GuiInlineGroup {
     constructor() {
         this.config = {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiInlineGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiInlineGroup, isStandalone: true, selector: "gui-inline-group", inputs: { config: "config" }, host: { classAttribute: "gui-inline-group" }, ngImport: i0, template: "@if (config.name) {\n  <gui-field-label [config]=\"config\" />\n}\n<div class=\"gui-inline-group-content\">\n  <ng-content />\n</div>\n", styles: [".gui-inline-group{display:flex;padding:.25rem .5rem}.gui-inline-group mat-hint{width:100%;line-height:var(--mat-form-field-subscript-text-line-height);-webkit-font-smoothing:antialiased}.gui-inline-group-content{display:inline-flex;flex:1;flex-flow:row wrap;margin:0 -.25rem}.gui-inline-group-content>.gui-field-group,.gui-inline-group-content>.gui-inline-group,.gui-inline-group-content>.mat-expansion-panel,.gui-inline-group-content>.gui-menu{width:100%;padding:0 .25rem}\n"], dependencies: [{ kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiInlineGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiInlineGroup, isStandalone: true, selector: "gui-inline-group", inputs: { config: "config" }, host: { classAttribute: "gui-inline-group" }, ngImport: i0, template: "@if (config.name) {\n  <gui-field-label [config]=\"config\" />\n}\n<div class=\"gui-inline-group-content\">\n  <ng-content />\n</div>\n", styles: [".gui-inline-group{display:flex;padding:.25rem .5rem}.gui-inline-group mat-hint{width:100%;line-height:var(--mat-form-field-subscript-text-line-height);-webkit-font-smoothing:antialiased}.gui-inline-group-content{display:inline-flex;flex:1;flex-flow:row wrap;margin:0 -.25rem}.gui-inline-group-content>.gui-field-group,.gui-inline-group-content>.gui-inline-group,.gui-inline-group-content>.mat-expansion-panel,.gui-inline-group-content>.gui-menu{width:100%;padding:0 .25rem}\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: GuiInlineGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiInlineGroup, decorators: [{
             type: Component,
             args: [{ selector: 'gui-inline-group', host: {
                         class: 'gui-inline-group',
@@ -698,16 +961,16 @@ class GuiInputNumber {
     onValueChange() {
         this.onChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiInputNumber, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiInputNumber, isStandalone: true, selector: "gui-input-number", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-input-number" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiInputNumber, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiInputNumber, isStandalone: true, selector: "gui-input-number", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-input-number" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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: [""], 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\n    matInput\n    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  />\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiInputNumber, decorators: [{
             type: Component,
             args: [{ selector: 'gui-input-number', host: {
                         class: 'gui-field gui-input-number',
@@ -717,7 +980,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" }]
+                    ], 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\n    matInput\n    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  />\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: [{
@@ -750,16 +1013,16 @@ class GuiInputText {
     onValueChange() {
         this.onChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiInputText, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiInputText, isStandalone: true, selector: "gui-input-text", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-input-text" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiInputText, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiInputText, isStandalone: true, selector: "gui-input-text", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-input-text" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => GuiInputText),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{config.prefix}}</span>\n  }\n  <input matInput type=\"text\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\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.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  <input\n    matInput\n    type=\"text\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onValueChange()\"\n  />\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: GuiInputText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiInputText, decorators: [{
             type: Component,
             args: [{ selector: 'gui-input-text', host: {
                         class: 'gui-field gui-input-text',
@@ -769,7 +1032,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             useExisting: forwardRef(() => GuiInputText),
                             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=\"text\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder||''\"\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" }]
+                    ], 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\n    matInput\n    type=\"text\"\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    (change)=\"onValueChange()\"\n  />\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: [{
@@ -802,16 +1065,16 @@ class GuiSelect {
     onValueChange() {
         this.onChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiSelect, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiSelect, isStandalone: true, selector: "gui-select", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-select" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiSelect, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiSelect, isStandalone: true, selector: "gui-select", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-select" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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-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 }); }
+        ], ngImport: i0, template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <mat-select\n    panelClass=\"gui-select\"\n    hideSingleSelectionIndicator\n    disableRipple\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [multiple]=\"config.multiple || false\"\n    (selectionChange)=\"onValueChange()\"\n  >\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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiSelect, decorators: [{
             type: Component,
             args: [{ selector: 'gui-select', host: {
                         class: 'gui-field gui-select',
@@ -830,7 +1093,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-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"] }]
+                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <mat-select\n    panelClass=\"gui-select\"\n    hideSingleSelectionIndicator\n    disableRipple\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [multiple]=\"config.multiple || false\"\n    (selectionChange)=\"onValueChange()\"\n  >\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: [{
@@ -877,16 +1140,16 @@ class GuiSlider {
             this.maxValue = this.value[1];
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiSlider, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiSlider, isStandalone: true, selector: "gui-slider", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-slider" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiSlider, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiSlider, isStandalone: true, selector: "gui-slider", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-slider" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => GuiSlider),
                 multi: true,
             },
-        ], ngImport: i0, template: "@if (config.mode!=='range') {\n  <!-- normal slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\">\n  </mat-slider>\n  <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  </mat-form-field>\n} @else {\n  <!-- range slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\">\n    <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\">\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{config.prefix}}</span>\n    }\n    <input matInput type=\"number\"\n      [(ngModel)]=\"minValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder||''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\">\n    @if (config.suffix) {\n      <span matSuffix>{{config.suffix}}</span>\n    }\n  </mat-form-field>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{config.prefix}}</span>\n    }\n    <input matInput type=\"number\"\n      [(ngModel)]=\"maxValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder||''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\">\n    @if (config.suffix) {\n      <span matSuffix>{{config.suffix}}</span>\n    }\n  </mat-form-field>\n}\n\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: .75rem;--mdc-slider-handle-height: .75rem;--mdc-slider-inactive-track-height: .125rem;--mdc-slider-active-track-height: .125rem;flex:3;min-width:auto;height:calc(var(--mdc-slider-handle-width) * 2);margin:0 calc(var(--mdc-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mdc-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mdc-slider-handle-width) * -1);width:calc(var(--mdc-slider-handle-width) * 2);height:calc(var(--mdc-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:.375rem}[dir=rtl] .gui-slider .mat-mdc-form-field{margin-left:0;margin-right:.375rem}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}\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: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { 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: MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { 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: "@if (config.mode !== 'range') {\n  <!-- normal slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\" />\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      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    />\n    @if (config.suffix) {\n      <span matSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n} @else {\n  <!-- range slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\" />\n    <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\" />\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"minValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\"\n    />\n    @if (config.suffix) {\n      <span matSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"maxValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\"\n    />\n    @if (config.suffix) {\n      <span matSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n}\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: .75rem;--mdc-slider-handle-height: .75rem;--mdc-slider-inactive-track-height: .125rem;--mdc-slider-active-track-height: .125rem;flex:3;min-width:auto;height:calc(var(--mdc-slider-handle-width) * 2);margin:0 calc(var(--mdc-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mdc-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mdc-slider-handle-width) * -1);width:calc(var(--mdc-slider-handle-width) * 2);height:calc(var(--mdc-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:.375rem}[dir=rtl] .gui-slider .mat-mdc-form-field{margin-left:0;margin-right:.375rem}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}\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: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { 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: MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { 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: GuiSlider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiSlider, decorators: [{
             type: Component,
             args: [{ selector: 'gui-slider', host: {
                         class: 'gui-field gui-slider',
@@ -907,7 +1170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         MatSliderRangeThumb,
                         MatHint,
                         GuiFieldLabel,
-                    ], template: "@if (config.mode!=='range') {\n  <!-- normal slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\">\n  </mat-slider>\n  <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  </mat-form-field>\n} @else {\n  <!-- range slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\">\n    <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\">\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{config.prefix}}</span>\n    }\n    <input matInput type=\"number\"\n      [(ngModel)]=\"minValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder||''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\">\n    @if (config.suffix) {\n      <span matSuffix>{{config.suffix}}</span>\n    }\n  </mat-form-field>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{config.prefix}}</span>\n    }\n    <input matInput type=\"number\"\n      [(ngModel)]=\"maxValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder||''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\">\n    @if (config.suffix) {\n      <span matSuffix>{{config.suffix}}</span>\n    }\n  </mat-form-field>\n}\n\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: .75rem;--mdc-slider-handle-height: .75rem;--mdc-slider-inactive-track-height: .125rem;--mdc-slider-active-track-height: .125rem;flex:3;min-width:auto;height:calc(var(--mdc-slider-handle-width) * 2);margin:0 calc(var(--mdc-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mdc-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mdc-slider-handle-width) * -1);width:calc(var(--mdc-slider-handle-width) * 2);height:calc(var(--mdc-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:.375rem}[dir=rtl] .gui-slider .mat-mdc-form-field{margin-left:0;margin-right:.375rem}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}\n"] }]
+                    ], template: "@if (config.mode !== 'range') {\n  <!-- normal slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\" />\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      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    />\n    @if (config.suffix) {\n      <span matSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n} @else {\n  <!-- range slider -->\n  <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n    <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\" />\n    <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\" />\n  </mat-slider>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"minValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\"\n    />\n    @if (config.suffix) {\n      <span matSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n  <mat-form-field>\n    @if (config.prefix) {\n      <span matPrefix>{{ config.prefix }}</span>\n    }\n    <input\n      matInput\n      type=\"number\"\n      [(ngModel)]=\"maxValue\"\n      [disabled]=\"disabled\"\n      [placeholder]=\"config.placeholder || ''\"\n      [step]=\"config.step\"\n      [min]=\"config.min!\"\n      [max]=\"config.max!\"\n      (change)=\"onRangeInputChange()\"\n    />\n    @if (config.suffix) {\n      <span matSuffix>{{ config.suffix }}</span>\n    }\n  </mat-form-field>\n}\n\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: .75rem;--mdc-slider-handle-height: .75rem;--mdc-slider-inactive-track-height: .125rem;--mdc-slider-active-track-height: .125rem;flex:3;min-width:auto;height:calc(var(--mdc-slider-handle-width) * 2);margin:0 calc(var(--mdc-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mdc-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mdc-slider-handle-width) * -1);width:calc(var(--mdc-slider-handle-width) * 2);height:calc(var(--mdc-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:.375rem}[dir=rtl] .gui-slider .mat-mdc-form-field{margin-left:0;margin-right:.375rem}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], disabled: [{
@@ -940,16 +1203,16 @@ class GuiSwitch {
     onValueChange() {
         this.onChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiSwitch, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiSwitch, isStandalone: true, selector: "gui-switch", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-switch" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiSwitch, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiSwitch, isStandalone: true, selector: "gui-switch", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-switch" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => GuiSwitch),
                 multi: true,
             },
-        ], ngImport: i0, template: "<mat-slide-toggle [(ngModel)]=\"value\" [disabled]=\"disabled\" hideIcon (change)=\"onValueChange()\" />\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-switch .mat-mdc-slide-toggle{--mat-switch-unselected-handle-size: .5rem;--mat-switch-selected-handle-size: .75rem;--mat-switch-pressed-handle-size: .75rem;--mat-switch-selected-handle-horizontal-margin: 0;--mat-switch-selected-pressed-handle-horizontal-margin: 0;--mat-switch-unselected-handle-horizontal-margin: 0 .25rem;--mat-switch-unselected-pressed-handle-horizontal-margin: 0 .125rem;--mat-switch-track-outline-width: 1px;--mdc-switch-track-width: 1.75rem;--mdc-switch-track-height: 1rem;--mdc-switch-track-shape: .5rem;--mdc-switch-handle-width: .875rem;--mdc-switch-state-layer-size: 1.5rem;line-height:var(--mdc-switch-state-layer-size)}\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: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: 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-slide-toggle [(ngModel)]=\"value\" [disabled]=\"disabled\" hideIcon (change)=\"onValueChange()\" />\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-switch .mat-mdc-slide-toggle{--mat-switch-unselected-handle-size: .5rem;--mat-switch-selected-handle-size: .75rem;--mat-switch-pressed-handle-size: .75rem;--mat-switch-selected-handle-horizontal-margin: 0;--mat-switch-selected-pressed-handle-horizontal-margin: 0;--mat-switch-unselected-handle-horizontal-margin: 0 .25rem;--mat-switch-unselected-pressed-handle-horizontal-margin: 0 .125rem;--mat-switch-track-outline-width: 1px;--mdc-switch-track-width: 1.75rem;--mdc-switch-track-height: 1rem;--mdc-switch-track-shape: .5rem;--mdc-switch-handle-width: .875rem;--mdc-switch-state-layer-size: 1.5rem;line-height:var(--mdc-switch-state-layer-size)}\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: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: 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: GuiSwitch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiSwitch, decorators: [{
             type: Component,
             args: [{ selector: 'gui-switch', host: {
                         class: 'gui-field gui-switch',
@@ -959,7 +1222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                             useExisting: forwardRef(() => GuiSwitch),
                             multi: true,
                         },
-                    ], standalone: true, imports: [FormsModule, MatSlideToggle, MatHint, GuiFieldLabel], template: "<mat-slide-toggle [(ngModel)]=\"value\" [disabled]=\"disabled\" hideIcon (change)=\"onValueChange()\" />\n@if (config.parentType==='inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-switch .mat-mdc-slide-toggle{--mat-switch-unselected-handle-size: .5rem;--mat-switch-selected-handle-size: .75rem;--mat-switch-pressed-handle-size: .75rem;--mat-switch-selected-handle-horizontal-margin: 0;--mat-switch-selected-pressed-handle-horizontal-margin: 0;--mat-switch-unselected-handle-horizontal-margin: 0 .25rem;--mat-switch-unselected-pressed-handle-horizontal-margin: 0 .125rem;--mat-switch-track-outline-width: 1px;--mdc-switch-track-width: 1.75rem;--mdc-switch-track-height: 1rem;--mdc-switch-track-shape: .5rem;--mdc-switch-handle-width: .875rem;--mdc-switch-state-layer-size: 1.5rem;line-height:var(--mdc-switch-state-layer-size)}\n"] }]
+                    ], standalone: true, imports: [FormsModule, MatSlideToggle, MatHint, GuiFieldLabel], template: "<mat-slide-toggle [(ngModel)]=\"value\" [disabled]=\"disabled\" hideIcon (change)=\"onValueChange()\" />\n@if (config.parentType === 'inline') {\n  <mat-hint>\n    <gui-field-label [config]=\"config\" />\n  </mat-hint>\n}\n", styles: [".gui-switch .mat-mdc-slide-toggle{--mat-switch-unselected-handle-size: .5rem;--mat-switch-selected-handle-size: .75rem;--mat-switch-pressed-handle-size: .75rem;--mat-switch-selected-handle-horizontal-margin: 0;--mat-switch-selected-pressed-handle-horizontal-margin: 0;--mat-switch-unselected-handle-horizontal-margin: 0 .25rem;--mat-switch-unselected-pressed-handle-horizontal-margin: 0 .125rem;--mat-switch-track-outline-width: 1px;--mdc-switch-track-width: 1.75rem;--mdc-switch-track-height: 1rem;--mdc-switch-track-shape: .5rem;--mdc-switch-handle-width: .875rem;--mdc-switch-state-layer-size: 1.5rem;line-height:var(--mdc-switch-state-layer-size)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { config: [{
                 type: Input
             }], disabled: [{
@@ -992,16 +1255,16 @@ class GuiTextarea {
     onValueChange() {
         this.onChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiTextarea, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiTextarea, isStandalone: true, selector: "gui-textarea", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-textarea" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiTextarea, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiTextarea, isStandalone: true, selector: "gui-textarea", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-textarea" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 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: [""], 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\n    matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [rows]=\"config.rows\"\n    (change)=\"onValueChange()\"\n  ></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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiTextarea, decorators: [{
             type: Component,
             args: [{ selector: 'gui-textarea', host: {
                         class: 'gui-field gui-textarea',
@@ -1011,88 +1274,13 @@ 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" }]
+                    ], 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\n    matInput\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [rows]=\"config.rows\"\n    (change)=\"onValueChange()\"\n  ></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: [{
                 type: Input
             }] } });
 
-class GuiCombobox {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.config = {};
-        this.disabled = false;
-        this.appendTo = 'body';
-        this.value = '';
-        this.onChange = () => { };
-        this.onTouched = () => { };
-    }
-    ngAfterViewInit() {
-        // Add additional class for ng-select's dropdown panel
-        const { ngSelect } = this.mtxSelect;
-        ngSelect.classes = (ngSelect.classes || '') + ' gui-combobox';
-    }
-    writeValue(value) {
-        this.value = value;
-        this.cdr.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
-    }
-    onValueChange() {
-        this.onChange(this.value);
-    }
-    addTagFn(label) {
-        return { label, value: label };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiCombobox, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiCombobox, isStandalone: true, selector: "gui-combobox", inputs: { config: "config", disabled: "disabled", appendTo: "appendTo" }, host: { classAttribute: "gui-field gui-combobox" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => GuiCombobox),
-                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\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [appendTo]=\"appendTo\"\n    [items]=\"config.options || []\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"config.multiple || false\"\n    [addTag]=\"addTagFn\"\n    [closeOnSelect]=\"!config.multiple\"\n    [deselectOnClick]=\"true\"\n    (change)=\"onValueChange()\"\n  >\n    <ng-template ng-option-tmp let-item=\"item\">\n      <div class=\"ng-option-label\" [style.font-family]=\"config.useFont ? item.value : ''\">\n        {{ item.label }}\n      </div>\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-combobox .ng-select{padding-left:.5rem;padding-right:.5rem;margin-left:-.5rem;margin-right:-.5rem}.gui-combobox .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}.gui-combobox .ng-select .ng-value-icon{font-family:math;font-size:10px}.gui-combobox .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-combobox .ng-select .ng-arrow{vertical-align:-1px}.gui-combobox.ng-dropdown-panel{padding:.5rem 0}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height)}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{line-height:1}\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: 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: GuiCombobox, decorators: [{
-            type: Component,
-            args: [{ selector: 'gui-combobox', host: {
-                        class: 'gui-field gui-combobox',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => GuiCombobox),
-                            multi: true,
-                        },
-                    ], standalone: true, imports: [
-                        FormsModule,
-                        MatFormField,
-                        MatPrefix,
-                        MatSuffix,
-                        MatHint,
-                        MtxSelect,
-                        MtxSelectOptionTemplate,
-                        GuiFieldLabel,
-                    ], template: "<mat-form-field>\n  @if (config.prefix) {\n    <span matPrefix>{{ config.prefix }}</span>\n  }\n  <mtx-select\n    [(ngModel)]=\"value\"\n    [disabled]=\"disabled\"\n    [placeholder]=\"config.placeholder || ''\"\n    [appendTo]=\"appendTo\"\n    [items]=\"config.options || []\"\n    bindLabel=\"label\"\n    bindValue=\"value\"\n    [multiple]=\"config.multiple || false\"\n    [addTag]=\"addTagFn\"\n    [closeOnSelect]=\"!config.multiple\"\n    [deselectOnClick]=\"true\"\n    (change)=\"onValueChange()\"\n  >\n    <ng-template ng-option-tmp let-item=\"item\">\n      <div class=\"ng-option-label\" [style.font-family]=\"config.useFont ? item.value : ''\">\n        {{ item.label }}\n      </div>\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-combobox .ng-select{padding-left:.5rem;padding-right:.5rem;margin-left:-.5rem;margin-right:-.5rem}.gui-combobox .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}.gui-combobox .ng-select .ng-value-icon{font-family:math;font-size:10px}.gui-combobox .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-combobox .ng-select .ng-arrow{vertical-align:-1px}.gui-combobox.ng-dropdown-panel{padding:.5rem 0}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height)}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{line-height:1}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { mtxSelect: [{
-                type: ViewChild,
-                args: [MtxSelect]
-            }], config: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
-            }] } });
-
 let nextUniqueId = 0;
 class GuiForm {
     constructor(iconsRegistry) {
@@ -1219,7 +1407,7 @@ class GuiForm {
                     const controls = item.showIf.conditions.map(c => getControl(c[0]));
                     const valueChanges$ = controls.map(control => control?.valueChanges || of());
                     const subscription = of()
-                        .pipe(mergeWith(valueChanges$))
+                        .pipe(mergeWith(...valueChanges$))
                         .subscribe(() => {
                         setVisibility(c => compareValues(getControl(c[0])?.value, c[2], c[1]));
                     });
@@ -1320,10 +1508,10 @@ class GuiForm {
         e.stopPropagation();
         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 ('combobox') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-combobox [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" }, { kind: "component", type: GuiCombobox, selector: "gui-combobox", inputs: ["config", "disabled", "appendTo"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiForm, deps: [{ token: GuiIconsRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 ('combobox') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-combobox [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 ('codearea') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-codearea [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]=\"{\n                  $implicit: child, parent: item, formGroup: form.get(item.key)\n                }\" />\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]=\"{\n                      $implicit: child, parent: item, formGroup: form.get(item.key)\n                    }\" />\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]=\"{\n                            $implicit: tab, parent: item, formGroup: form.get([item.key])\n                          }\" />\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]=\"{\n                                $implicit: child, parent: item, formGroup: form.get([item.key, i])\n                              }\" />\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\" type=\"button\"\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]=\"{\n                              $implicit: tab, parent: item, formGroup: form.get([item.key])\n                            }\" />\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]=\"{\n                                  $implicit: child, parent: item, formGroup: form.get([item.key, i])\n                                }\" />\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]=\"{\n                            $implicit: controlItem, formGroup: form.get([item.key, menuChild.key])\n                          }\" />\n                      </div>\n                    }\n                  }\n                  <!-- Support for unlimited nesting -->\n                  @if (menuChild.type==='menu') {\n                    <ng-template [ngTemplateOutlet]=\"controlType\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: menuChild, formGroup: form.get(item.key)\n                      }\" />\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" }, { kind: "component", type: GuiCombobox, selector: "gui-combobox", inputs: ["config", "disabled", "appendTo"] }, { kind: "component", type: GuiCodearea, selector: "gui-codearea", inputs: ["config", "disabled", "setup", "height", "language"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiForm, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiForm, decorators: [{
             type: Component,
             args: [{ selector: 'gui-form', host: {
                         '[attr.id]': 'uid',
@@ -1357,7 +1545,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GuiIconButtonWrapper,
                         GuiEjsPipe,
                         GuiCombobox,
-                    ], 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 ('combobox') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-combobox [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"] }]
+                        GuiCodearea,
+                    ], 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 ('combobox') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-combobox [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 ('codearea') {\n          <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n            <gui-codearea [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]=\"{\n                  $implicit: child, parent: item, formGroup: form.get(item.key)\n                }\" />\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]=\"{\n                      $implicit: child, parent: item, formGroup: form.get(item.key)\n                    }\" />\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]=\"{\n                            $implicit: tab, parent: item, formGroup: form.get([item.key])\n                          }\" />\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]=\"{\n                                $implicit: child, parent: item, formGroup: form.get([item.key, i])\n                              }\" />\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\" type=\"button\"\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]=\"{\n                              $implicit: tab, parent: item, formGroup: form.get([item.key])\n                            }\" />\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]=\"{\n                                  $implicit: child, parent: item, formGroup: form.get([item.key, i])\n                                }\" />\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]=\"{\n                            $implicit: controlItem, formGroup: form.get([item.key, menuChild.key])\n                          }\" />\n                      </div>\n                    }\n                  }\n                  <!-- Support for unlimited nesting -->\n                  @if (menuChild.type==='menu') {\n                    <ng-template [ngTemplateOutlet]=\"controlType\"\n                      [ngTemplateOutletContext]=\"{\n                        $implicit: menuChild, formGroup: form.get(item.key)\n                      }\" />\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: [{
@@ -1369,8 +1558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class GuiModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: GuiModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GuiModule, imports: [CommonModule,
             ReactiveFormsModule,
             FormsModule,
             MatFormFieldModule,
@@ -1401,6 +1590,8 @@ class GuiModule {
             GuiImageSelect,
             GuiCombobox,
             GuiTextarea,
+            GuiCodearea,
+            GuiCodeareaDialog,
             GuiFileUploader,
             GuiIconButtonWrapper,
             GuiEjsPipe,
@@ -1419,11 +1610,13 @@ class GuiModule {
             GuiImageSelect,
             GuiCombobox,
             GuiTextarea,
+            GuiCodearea,
+            GuiCodeareaDialog,
             GuiFileUploader,
             GuiIconButtonWrapper,
             GuiEjsPipe,
             GuiFlexDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiModule, imports: [CommonModule,
             ReactiveFormsModule,
             FormsModule,
             MatFormFieldModule,
@@ -1450,9 +1643,11 @@ class GuiModule {
             GuiImageSelect,
             GuiCombobox,
             GuiTextarea,
+            GuiCodearea,
+            GuiCodeareaDialog,
             GuiFileUploader] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GuiModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1487,6 +1682,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GuiImageSelect,
                         GuiCombobox,
                         GuiTextarea,
+                        GuiCodearea,
+                        GuiCodeareaDialog,
                         GuiFileUploader,
                         GuiIconButtonWrapper,
                         GuiEjsPipe,
@@ -1508,6 +1705,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         GuiImageSelect,
                         GuiCombobox,
                         GuiTextarea,
+                        GuiCodearea,
+                        GuiCodeareaDialog,
                         GuiFileUploader,
                         GuiIconButtonWrapper,
                         GuiEjsPipe,
@@ -1524,5 +1723,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { GUI_ICONS_CONFIG, GuiButtonToggle, GuiCombobox, GuiEjsPipe, GuiFieldGroup, GuiFieldLabel, GuiFileUploader, GuiFileUploaderConfig, GuiFill, GuiFlexDirective, GuiForm, GuiIcon, GuiIconButtonWrapper, GuiIconsRegistry, GuiImageSelect, GuiInlineGroup, GuiInputNumber, GuiInputText, GuiModule, GuiSelect, GuiSlider, GuiSwitch, GuiTextarea, compareValues, ejsTmpl, getValueByPath, svgIcons };
+export { GUI_ICONS_CONFIG, GuiButtonToggle, GuiCodearea, GuiCodeareaConfig, GuiCodeareaDialog, GuiCombobox, GuiEjsPipe, GuiFieldGroup, GuiFieldLabel, GuiFileUploader, GuiFileUploaderConfig, GuiFill, GuiFlexDirective, GuiForm, GuiIcon, GuiIconButtonWrapper, GuiIconsRegistry, GuiImageSelect, GuiInlineGroup, GuiInputNumber, GuiInputText, GuiModule, GuiSelect, GuiSlider, GuiSwitch, GuiTextarea, compareValues, ejsTmpl, getValueByPath, svgIcons };
 //# sourceMappingURL=acrodata-gui.mjs.map