@acrodata/gui 0.1.0

package/fesm2022/acrodata-gui.mjs

@@ -0,0 +1,1209 @@
+import * as i0 from '@angular/core';
+import { Pipe, Directive, Input, Component, ViewEncapsulation, ChangeDetectionStrategy, forwardRef, Injectable, EventEmitter, ViewChild, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormGroup, FormControl, FormArray, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i1$2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i4$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i5$1 from '@angular/material/slider';
+import { MatSliderModule } from '@angular/material/slider';
+import * as i4$2 from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i4$3 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i7 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5$3 from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i6 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i2 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i5$2 from '@ng-matero/extensions/colorpicker';
+import { MtxColorpickerModule } from '@ng-matero/extensions/colorpicker';
+import * as i4$4 from '@ng-matero/extensions/select';
+import { MtxSelectModule } from '@ng-matero/extensions/select';
+import { of, Subscription } from 'rxjs';
+import * as i5 from '@angular/material/core';
+import * as i1$1 from '@angular/common/http';
+import { HttpResponse } from '@angular/common/http';
+import { catchError, finalize } from 'rxjs/operators';
+import * as i2$2 from '@angular/platform-browser';
+
+/**
+ * Lightweight EJS template engine
+ *
+ * @param str  template string
+ * @param data data passed to the template
+ * @returns
+ *
+ * ### Example
+ *
+ * ```ts
+ * const people = ['geddy', 'neil', 'alex'];
+ * const res = ejsTmpl('<%= people.join(", ") %>', {people: people});
+ * console.log(res);
+ * // => 'geddy, neil, alex'
+ * ```
+ *
+ */
+function ejsTmpl(str, data) {
+    // eslint-disable-next-line @typescript-eslint/no-implied-eval
+    const fn = new Function('obj', 'var p=[],print=function(){p.push.apply(p,arguments);};' +
+        // Introduce the data as local variables using with(){}
+        'with(obj){p.push("' +
+        // Convert the template into pure JavaScript
+        str
+            .replace(/[\r\t\n]/g, ' ')
+            .split('<%')
+            .join('\t')
+            .replace(/((^|%>)[^\t]*)'/g, '$1\r')
+            .replace(/\t=(.*?)%>/g, '",$1,"')
+            .split('\t')
+            .join('");')
+            .split('%>')
+            .join('p.push("')
+            .split('\r')
+            .join('"') +
+        '");}return p.join("");');
+    // Provide some basic currying to the user
+    return data ? fn(data) : fn;
+}
+class GuiEjsPipe {
+    transform(value, data = {}) {
+        return ejsTmpl(value, data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiEjsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.8", ngImport: i0, type: GuiEjsPipe, name: "ejs" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiEjsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'ejs',
+                }]
+        }] });
+class GuiFlexDirective {
+    constructor(el) {
+        this.el = el;
+        this.flex = 100;
+    }
+    ngOnInit() {
+        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: "16.2.8", ngImport: i0, type: GuiFlexDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.8", type: GuiFlexDirective, selector: "[flex]", inputs: { flex: "flex" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiFlexDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[flex]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { flex: [{
+                type: Input
+            }] } });
+
+class GuiFieldLabel {
+    constructor() {
+        this.config = {};
+        this.title = '';
+        this.styless = false;
+    }
+    ngOnChanges() {
+        const { index, name, parentType, type } = this.config;
+        this.title = index != null && !isNaN(index) ? ejsTmpl(name || '', { i: index }) : name;
+        this.styless =
+            (parentType === 'inline' && type !== 'inline') || type === 'group' || type === 'tabs';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiFieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiFieldLabel, selector: "gui-field-label", inputs: { config: "config", index: "index" }, host: { properties: { "class.gui-field-label": "!styless", "title": "title" } }, usesOnChanges: true, ngImport: i0, template: "<span *ngIf=\"!config.description\">{{title}}</span>\n<span *ngIf=\"config.description\"\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", styles: [".gui-field-label{display:inline-block;width:64px;height:24px;padding:0 4px;line-height:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-field-label-with-description{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", 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, template: "<span *ngIf=\"!config.description\">{{title}}</span>\n<span *ngIf=\"config.description\"\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", styles: [".gui-field-label{display:inline-block;width:64px;height:24px;padding:0 4px;line-height:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-field-label-with-description{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }] } });
+
+class GuiInputText {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.config = {};
+        this.disabled = false;
+        this.value = '';
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiInputText, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiInputText, 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  <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n  <input matInput type=\"text\"\n         [(ngModel)]=\"value\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"config.placeholder||''\"\n         (change)=\"onValueChange()\">\n  <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  <mat-hint *ngIf=\"config.parentType === 'inline'\">\n    <gui-field-label [config]=\"config\"></gui-field-label>\n  </mat-hint>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiInputText, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-input-text', host: {
+                        class: 'gui-field gui-input-text',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GuiInputText),
+                            multi: true,
+                        },
+                    ], template: "<mat-form-field>\n  <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n  <input matInput type=\"text\"\n         [(ngModel)]=\"value\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"config.placeholder||''\"\n         (change)=\"onValueChange()\">\n  <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  <mat-hint *ngIf=\"config.parentType === 'inline'\">\n    <gui-field-label [config]=\"config\"></gui-field-label>\n  </mat-hint>\n</mat-form-field>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class GuiInputNumber {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.config = {};
+        this.disabled = false;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiInputNumber, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiInputNumber, 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  <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\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  <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  <mat-hint *ngIf=\"config.parentType === 'inline'\">\n    <gui-field-label [config]=\"config\"></gui-field-label>\n  </mat-hint>\n</mat-form-field>\n", styles: [".gui-input-number .mat-mdc-text-field-wrapper{padding-right:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiInputNumber, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-input-number', host: {
+                        class: 'gui-field gui-input-number',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GuiInputNumber),
+                            multi: true,
+                        },
+                    ], template: "<mat-form-field>\n  <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\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  <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  <mat-hint *ngIf=\"config.parentType === 'inline'\">\n    <gui-field-label [config]=\"config\"></gui-field-label>\n  </mat-hint>\n</mat-form-field>\n", styles: [".gui-input-number .mat-mdc-text-field-wrapper{padding-right:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class GuiSelect {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.config = {};
+        this.disabled = false;
+        this.value = '';
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiSelect, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiSelect, 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  <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\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    <mat-option *ngFor=\"let opt of config.options\" [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n      <span [style]=\"{fontFamily: config.useFont ? opt.value : ''}\">{{opt.label}}</span>\n    </mat-option>\n  </mat-select>\n  <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  <mat-hint *ngIf=\"config.parentType === 'inline'\">\n    <gui-field-label [config]=\"config\"></gui-field-label>\n  </mat-hint>\n</mat-form-field>\n", styles: [".gui-select{--mat-select-trigger-text-size: 12px;--mat-option-label-text-size: 12px}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height);padding:0 8px}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:8px}.gui-select .mat-pseudo-checkbox{width:16px;height:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { 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: "16.2.8", ngImport: i0, type: GuiSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-select', host: {
+                        class: 'gui-field gui-select',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GuiSelect),
+                            multi: true,
+                        },
+                    ], template: "<mat-form-field>\n  <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\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    <mat-option *ngFor=\"let opt of config.options\" [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n      <span [style]=\"{fontFamily: config.useFont ? opt.value : ''}\">{{opt.label}}</span>\n    </mat-option>\n  </mat-select>\n  <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  <mat-hint *ngIf=\"config.parentType === 'inline'\">\n    <gui-field-label [config]=\"config\"></gui-field-label>\n  </mat-hint>\n</mat-form-field>\n", styles: [".gui-select{--mat-select-trigger-text-size: 12px;--mat-option-label-text-size: 12px}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height);padding:0 8px}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:8px}.gui-select .mat-pseudo-checkbox{width:16px;height:16px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class GuiSwitch {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.config = {};
+        this.disabled = false;
+        this.value = false;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiSwitch, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiSwitch, 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\n                  (change)=\"onValueChange()\">\n</mat-slide-toggle>\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n  <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-switch .mdc-switch{--mdc-switch-track-width: 28px;--mdc-switch-handle-width: 14px;--mdc-switch-handle-height: 14px;--mdc-switch-state-layer-size: 24px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { 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: "16.2.8", ngImport: i0, type: GuiSwitch, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-switch', host: {
+                        class: 'gui-field gui-switch',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GuiSwitch),
+                            multi: true,
+                        },
+                    ], template: "<mat-slide-toggle [(ngModel)]=\"value\" [disabled]=\"disabled\" hideIcon\n                  (change)=\"onValueChange()\">\n</mat-slide-toggle>\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n  <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-switch .mdc-switch{--mdc-switch-track-width: 28px;--mdc-switch-handle-width: 14px;--mdc-switch-handle-height: 14px;--mdc-switch-state-layer-size: 24px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class GuiSlider {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.config = {};
+        this.disabled = false;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        this.value = value;
+        this.setInputValue();
+        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);
+    }
+    onRangeSliderChange() {
+        this.setInputValue();
+        this.onValueChange();
+    }
+    onRangeInputChange() {
+        this.value = [this.minValue, this.maxValue];
+        this.onValueChange();
+    }
+    setInputValue() {
+        if (Array.isArray(this.value)) {
+            this.minValue = this.value[0];
+            this.maxValue = this.value[1];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiSlider, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiSlider, 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: "<!-- \u666E\u901A\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode!=='range'\">\n  <mat-slider [disabled]=\"disabled\"\n              [step]=\"config.step\"\n              [min]=\"config.min\"\n              [max]=\"config.max\">\n    <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\">\n  </mat-slider>\n  <mat-form-field>\n    <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n    <input matInput type=\"number\"\n           [(ngModel)]=\"value\"\n           [disabled]=\"disabled\"\n           [step]=\"config.step\"\n           [min]=\"config.min!\"\n           [max]=\"config.max!\"\n           (change)=\"onValueChange()\">\n    <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  </mat-form-field>\n</ng-container>\n\n<!-- \u533A\u95F4\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode==='range'\">\n  <mat-slider [disabled]=\"disabled\"\n              [step]=\"config.step\"\n              [min]=\"config.min\"\n              [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    <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n    <input matInput type=\"number\"\n           [(ngModel)]=\"minValue\"\n           [disabled]=\"disabled\"\n           [step]=\"config.step\"\n           [min]=\"config.min!\"\n           [max]=\"config.max!\"\n           (change)=\"onRangeInputChange()\">\n    <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  </mat-form-field>\n  <mat-form-field>\n    <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n    <input matInput type=\"number\"\n           [(ngModel)]=\"maxValue\"\n           [disabled]=\"disabled\"\n           [step]=\"config.step\"\n           [min]=\"config.min!\"\n           [max]=\"config.max!\"\n           (change)=\"onRangeInputChange()\">\n    <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  </mat-form-field>\n</ng-container>\n\n<!-- \u5E95\u90E8\u6807\u7B7E -->\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n  <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: 12px;--mdc-slider-handle-height: 12px;--mdc-slider-inactive-track-height: 2px;--mdc-slider-active-track-height: 2px;flex:1;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{width:80px;max-width:80px}.gui-slider .mat-mdc-slider.mdc-slider--range{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{width:60px;max-width:60px}.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:6px}.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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: i5$1.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i5$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i5$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { 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: "16.2.8", ngImport: i0, type: GuiSlider, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-slider', host: {
+                        class: 'gui-field gui-slider',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GuiSlider),
+                            multi: true,
+                        },
+                    ], template: "<!-- \u666E\u901A\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode!=='range'\">\n  <mat-slider [disabled]=\"disabled\"\n              [step]=\"config.step\"\n              [min]=\"config.min\"\n              [max]=\"config.max\">\n    <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\">\n  </mat-slider>\n  <mat-form-field>\n    <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n    <input matInput type=\"number\"\n           [(ngModel)]=\"value\"\n           [disabled]=\"disabled\"\n           [step]=\"config.step\"\n           [min]=\"config.min!\"\n           [max]=\"config.max!\"\n           (change)=\"onValueChange()\">\n    <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  </mat-form-field>\n</ng-container>\n\n<!-- \u533A\u95F4\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode==='range'\">\n  <mat-slider [disabled]=\"disabled\"\n              [step]=\"config.step\"\n              [min]=\"config.min\"\n              [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    <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n    <input matInput type=\"number\"\n           [(ngModel)]=\"minValue\"\n           [disabled]=\"disabled\"\n           [step]=\"config.step\"\n           [min]=\"config.min!\"\n           [max]=\"config.max!\"\n           (change)=\"onRangeInputChange()\">\n    <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  </mat-form-field>\n  <mat-form-field>\n    <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n    <input matInput type=\"number\"\n           [(ngModel)]=\"maxValue\"\n           [disabled]=\"disabled\"\n           [step]=\"config.step\"\n           [min]=\"config.min!\"\n           [max]=\"config.max!\"\n           (change)=\"onRangeInputChange()\">\n    <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  </mat-form-field>\n</ng-container>\n\n<!-- \u5E95\u90E8\u6807\u7B7E -->\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n  <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: 12px;--mdc-slider-handle-height: 12px;--mdc-slider-inactive-track-height: 2px;--mdc-slider-active-track-height: 2px;flex:1;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{width:80px;max-width:80px}.gui-slider .mat-mdc-slider.mdc-slider--range{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{width:60px;max-width:60px}.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:6px}.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: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class GuiIcon {
+    constructor() {
+        this.src = '';
+    }
+    isUrl() {
+        return /https?:\/\/.+/.test(this.src);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiIcon, selector: "gui-icon", inputs: { src: "src" }, host: { classAttribute: "gui-icon" }, ngImport: i0, template: `
+    <img *ngIf="isUrl()" [src]="src" />
+    <i *ngIf="!isUrl()" [ngClass]="src"></i>
+  `, isInline: true, styles: [".gui-icon{display:inline-flex}.gui-icon img,.gui-icon i{display:block;width:22px;height:22px;line-height:22px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-icon', template: `
+    <img *ngIf="isUrl()" [src]="src" />
+    <i *ngIf="!isUrl()" [ngClass]="src"></i>
+  `, host: {
+                        class: 'gui-icon',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".gui-icon{display:inline-flex}.gui-icon img,.gui-icon i{display:block;width:22px;height:22px;line-height:22px}\n"] }]
+        }], propDecorators: { src: [{
+                type: Input
+            }] } });
+
+class GuiButtonToggle {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.config = {};
+        this.disabled = false;
+        this.value = '';
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiButtonToggle, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiButtonToggle, 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()\">\n  <mat-button-toggle *ngFor=\"let opt of config.options\" 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    <gui-icon *ngIf=\"config.useIcon; else textLabel\" [src]=\"opt.src!\"></gui-icon>\n    <ng-template #textLabel>{{opt.label}}</ng-template>\n  </mat-button-toggle>\n</mat-button-toggle-group>\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n  <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-button-toggle{--mat-standard-button-toggle-height: 22px}.gui-button-toggle .mat-button-toggle-group{flex-wrap:wrap}.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: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i4$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: GuiIcon, selector: "gui-icon", inputs: ["src"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiButtonToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-button-toggle', host: {
+                        class: 'gui-field gui-button-toggle',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GuiButtonToggle),
+                            multi: true,
+                        },
+                    ], template: "<mat-button-toggle-group [(ngModel)]=\"value\" [disabled]=\"disabled\" [multiple]=\"config.multiple\"\n                         (change)=\"onValueChange()\">\n  <mat-button-toggle *ngFor=\"let opt of config.options\" 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    <gui-icon *ngIf=\"config.useIcon; else textLabel\" [src]=\"opt.src!\"></gui-icon>\n    <ng-template #textLabel>{{opt.label}}</ng-template>\n  </mat-button-toggle>\n</mat-button-toggle-group>\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n  <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-button-toggle{--mat-standard-button-toggle-height: 22px}.gui-button-toggle .mat-button-toggle-group{flex-wrap:wrap}.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: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class GuiFill {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.config = {};
+        this.disabled = false;
+        this.value = '';
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiFill, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiFill, 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  <input matInput\n         [(ngModel)]=\"value\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"config.placeholder||''\"\n         [mtxColorpicker]=\"cp\"\n         (colorChange)=\"onValueChange()\">\n  <mtx-colorpicker #cp></mtx-colorpicker>\n  <mtx-colorpicker-toggle matSuffix [for]=\"cp\"></mtx-colorpicker-toggle>\n  <mat-hint *ngIf=\"config.parentType==='inline'\">\n    <gui-field-label [config]=\"config\"></gui-field-label>\n  </mat-hint>\n</mat-form-field>\n", styles: [".gui-color-block,.gui-color-block-empty{position:relative;display:block;width:18px;height:18px;border:1px solid #000}.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 4px,4px -4px,-4px 0;background-size:8px 8px}.gui-fill .gui-colorpicker-toggle{display:flex;color:#fff}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: i5$2.MtxColorpicker, selector: "mtx-colorpicker", inputs: ["content", "disabled", "xPosition", "yPosition", "restoreFocus", "opened", "color", "format"], outputs: ["opened", "closed"], exportAs: ["mtxColorpicker"] }, { kind: "directive", type: i5$2.MtxColorpickerInput, selector: "input[mtxColorpicker]", inputs: ["mtxColorpicker", "disabled", "value", "format"], outputs: ["colorChange", "colorInput"], exportAs: ["mtxColorpickerInput"] }, { kind: "component", type: i5$2.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiFill, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-fill', host: {
+                        class: 'gui-field gui-fill',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GuiFill),
+                            multi: true,
+                        },
+                    ], 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  <input matInput\n         [(ngModel)]=\"value\"\n         [disabled]=\"disabled\"\n         [placeholder]=\"config.placeholder||''\"\n         [mtxColorpicker]=\"cp\"\n         (colorChange)=\"onValueChange()\">\n  <mtx-colorpicker #cp></mtx-colorpicker>\n  <mtx-colorpicker-toggle matSuffix [for]=\"cp\"></mtx-colorpicker-toggle>\n  <mat-hint *ngIf=\"config.parentType==='inline'\">\n    <gui-field-label [config]=\"config\"></gui-field-label>\n  </mat-hint>\n</mat-form-field>\n", styles: [".gui-color-block,.gui-color-block-empty{position:relative;display:block;width:18px;height:18px;border:1px solid #000}.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 4px,4px -4px,-4px 0;background-size:8px 8px}.gui-fill .gui-colorpicker-toggle{display:flex;color:#fff}\n"] }]
+        }], ctorParameters: function () { return [{ 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: "16.2.8", ngImport: i0, type: GuiFieldGroup, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiFieldGroup, selector: "gui-field-group", inputs: { config: "config" }, host: { classAttribute: "gui-field-group" }, ngImport: i0, template: "<gui-field-label *ngIf=\"config.parentType !== 'inline' && config.name\"\n                 [config]=\"config\" [index]=\"config.index\">\n</gui-field-label>\n<ng-content></ng-content>\n", styles: [".gui-field-group{display:flex;padding:4px 8px}.gui-field{display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "16.2.8", ngImport: i0, type: GuiFieldGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-field-group', host: {
+                        class: 'gui-field-group',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<gui-field-label *ngIf=\"config.parentType !== 'inline' && config.name\"\n                 [config]=\"config\" [index]=\"config.index\">\n</gui-field-label>\n<ng-content></ng-content>\n", styles: [".gui-field-group{display:flex;padding:4px 8px}.gui-field{display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class GuiInlineGroup {
+    constructor() {
+        this.config = {};
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiInlineGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiInlineGroup, selector: "gui-inline-group", inputs: { config: "config" }, host: { classAttribute: "gui-inline-group" }, ngImport: i0, template: "<gui-field-label [config]=\"config\"></gui-field-label>\n<div class=\"gui-inline-group-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".gui-inline-group{display:flex;padding:4px 8px}.gui-inline-group-content{display:inline-flex;flex:1;flex-flow:row wrap;margin:0 -4px}.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 4px}\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: "16.2.8", ngImport: i0, type: GuiInlineGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-inline-group', host: {
+                        class: 'gui-inline-group',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<gui-field-label [config]=\"config\"></gui-field-label>\n<div class=\"gui-inline-group-content\">\n  <ng-content></ng-content>\n</div>\n", styles: [".gui-inline-group{display:flex;padding:4px 8px}.gui-inline-group-content{display:inline-flex;flex:1;flex-flow:row wrap;margin:0 -4px}.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 4px}\n"] }]
+        }], propDecorators: { config: [{
+                type: Input
+            }] } });
+
+class GuiImageSelect {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.config = {};
+        this.disabled = false;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    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);
+    }
+    onPanelOpened() { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiImageSelect, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiImageSelect, selector: "gui-image-select", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-image-select" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => GuiImageSelect),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<mat-form-field>\n  <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n  <mtx-select [items]=\"config.options||[]\" appendTo=\".gui-form\" bindValue=\"value\"\n              [(ngModel)]=\"value\"\n              (change)=\"onValueChange()\"\n              (open)=\"onPanelOpened()\">\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  <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  <mat-hint *ngIf=\"config.parentType==='inline'\">\n    <gui-field-label [config]=\"config\"></gui-field-label>\n  </mat-hint>\n</mat-form-field>\n", styles: [".gui-form .ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;width:120px;object-fit:contain;border-radius:4px;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select .ng-select{padding:0 8px;margin:0 -8px}.gui-image-select .ng-select .ng-value-container{height:64px}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:8px;height:100%;padding:8px 0}.gui-form .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:8px;height:64px;padding:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$4.MtxSelect, selector: "mtx-select", inputs: ["disabled", "addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "selectableGroup", "selectableGroupAsModel", "hideSelected", "isOpen", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "clearSearchOnAdd", "items", "value", "id", "placeholder", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: i4$4.MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4$4.MtxSelectLabelTemplate, selector: "[ng-label-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: "16.2.8", ngImport: i0, type: GuiImageSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-image-select', host: {
+                        class: 'gui-field gui-image-select',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GuiImageSelect),
+                            multi: true,
+                        },
+                    ], template: "<mat-form-field>\n  <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n  <mtx-select [items]=\"config.options||[]\" appendTo=\".gui-form\" bindValue=\"value\"\n              [(ngModel)]=\"value\"\n              (change)=\"onValueChange()\"\n              (open)=\"onPanelOpened()\">\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  <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  <mat-hint *ngIf=\"config.parentType==='inline'\">\n    <gui-field-label [config]=\"config\"></gui-field-label>\n  </mat-hint>\n</mat-form-field>\n", styles: [".gui-form .ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;width:120px;object-fit:contain;border-radius:4px;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select .ng-select{padding:0 8px;margin:0 -8px}.gui-image-select .ng-select .ng-value-container{height:64px}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:8px;height:100%;padding:8px 0}.gui-form .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:8px;height:64px;padding:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class GuiTextarea {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.config = {};
+        this.disabled = false;
+        this.value = '';
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    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);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiTextarea, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiTextarea, 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  <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n  <textarea matInput\n            [(ngModel)]=\"value\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"config.placeholder||''\"\n            [rows]=\"config.rows\"\n            (change)=\"onValueChange()\"></textarea>\n  <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  <mat-hint *ngIf=\"config.parentType === 'inline'\">\n    <gui-field-label [config]=\"config\"></gui-field-label>\n  </mat-hint>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiTextarea, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-textarea', host: {
+                        class: 'gui-field gui-textarea',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GuiTextarea),
+                            multi: true,
+                        },
+                    ], template: "<mat-form-field>\n  <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n  <textarea matInput\n            [(ngModel)]=\"value\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"config.placeholder||''\"\n            [rows]=\"config.rows\"\n            (change)=\"onValueChange()\"></textarea>\n  <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n  <mat-hint *ngIf=\"config.parentType === 'inline'\">\n    <gui-field-label [config]=\"config\"></gui-field-label>\n  </mat-hint>\n</mat-form-field>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class GuiFileUploaderConfig {
+    constructor(http) {
+        this.http = http;
+        /**
+         *  The file upload URL
+         */
+        this.url = '';
+        /**
+         * The file upload params
+         */
+        this.params = {};
+    }
+    /**
+     * The File upload API
+     *
+     * @param file file data
+     * @returns
+     */
+    upload(file) {
+        return this.http.post(this.url, file, {
+            reportProgress: true,
+            observe: 'events',
+            params: this.params,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiFileUploaderConfig, deps: [{ token: i1$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiFileUploaderConfig }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiFileUploaderConfig, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }]; } });
+
+class GuiFileUploader {
+    constructor(fileUploaderCfg, cdr) {
+        this.fileUploaderCfg = fileUploaderCfg;
+        this.cdr = cdr;
+        this.type = '*';
+        this.name = '';
+        this.accept = '';
+        this.disabled = false;
+        this.fileChange = new EventEmitter();
+        // media src
+        this.url = '';
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    ngOnChanges(changes) {
+        if (changes['type']) {
+            this.accept = this.type + '/*';
+        }
+    }
+    writeValue(value) {
+        this.url = value;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.cdr.markForCheck();
+    }
+    upload(file) {
+        const formData = new FormData();
+        formData.append('file', file.data || '');
+        file.inProgress = true;
+        this.fileUploaderCfg
+            .upload(formData)
+            .pipe(catchError((error) => {
+            file.inProgress = false;
+            return of(`${file.data?.name || 'File'} upload failed.`);
+        }), finalize(() => { }))
+            .subscribe(res => {
+            if (res instanceof HttpResponse && res.body) {
+                this.url = res.body.data;
+                this.onChange(this.url);
+                this.onTouched();
+                this.fileChange.emit(this.url);
+            }
+            this.cdr.detectChanges();
+        });
+    }
+    onUrlChange(e) {
+        this.url = e.target.value;
+        this.onChange(this.url);
+        this.fileChange.emit(this.url);
+    }
+    onFileChange(e) {
+        this.file = {
+            data: e.target.files[0],
+            inProgress: false,
+            progress: 0,
+        };
+        this.upload(this.file);
+        // reset input value
+        e.target.value = '';
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    onClear() {
+        this.url = '';
+        this.onChange(this.url);
+        this.onTouched();
+        this.fileChange.emit(this.url);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiFileUploader, deps: [{ token: GuiFileUploaderConfig }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiFileUploader, selector: "gui-file-uploader", inputs: { type: "type", name: "name", accept: "accept", disabled: "disabled" }, outputs: { fileChange: "fileChange" }, host: { classAttribute: "gui-file-uploader" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => GuiFileUploader),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n  <mat-icon matPrefix svgIcon=\"link\"></mat-icon>\n\n  <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n         (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n  <button *ngIf=\"url\" matSuffix mat-icon-button color=\"warn\"\n          [disabled]=\"disabled\" (click)=\"onClear()\">\n    <mat-icon svgIcon=\"close\"></mat-icon>\n  </button>\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  <ng-container *ngIf=\"url\" [ngSwitch]=\"type\">\n    <img *ngSwitchCase=\"'image'\" [src]=\"url\">\n\n    <video *ngSwitchCase=\"'video'\" [src]=\"url\"></video>\n\n    <audio *ngSwitchCase=\"'audio'\" [src]=\"url\" controls></audio>\n\n    <svg *ngSwitchDefault\n         viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n      <path\n            d=\"M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z\">\n      </path>\n    </svg>\n  </ng-container>\n\n  <div *ngIf=\"!url\" class=\"gui-file-placeholder\">\u9009\u62E9\u4E0A\u4F20\u6587\u4EF6</div>\n\n  <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\" tabindex=\"-1\"\n         [disabled]=\"disabled\" (change)=\"onFileChange($event)\">\n</figure>\n", styles: [".gui-file-uploader{display:block;overflow:auto;flex:1}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:120px;margin:4px 0 0;padding:4px;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:4px}.gui-file-uploader .gui-file-content:hover{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%;text-indent:9999px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiFileUploader, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-file-uploader', host: {
+                        class: 'gui-file-uploader',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => GuiFileUploader),
+                            multi: true,
+                        },
+                    ], template: "<mat-form-field>\n  <mat-icon matPrefix svgIcon=\"link\"></mat-icon>\n\n  <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n         (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n  <button *ngIf=\"url\" matSuffix mat-icon-button color=\"warn\"\n          [disabled]=\"disabled\" (click)=\"onClear()\">\n    <mat-icon svgIcon=\"close\"></mat-icon>\n  </button>\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n  <ng-container *ngIf=\"url\" [ngSwitch]=\"type\">\n    <img *ngSwitchCase=\"'image'\" [src]=\"url\">\n\n    <video *ngSwitchCase=\"'video'\" [src]=\"url\"></video>\n\n    <audio *ngSwitchCase=\"'audio'\" [src]=\"url\" controls></audio>\n\n    <svg *ngSwitchDefault\n         viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n      <path\n            d=\"M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z\">\n      </path>\n    </svg>\n  </ng-container>\n\n  <div *ngIf=\"!url\" class=\"gui-file-placeholder\">\u9009\u62E9\u4E0A\u4F20\u6587\u4EF6</div>\n\n  <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\" tabindex=\"-1\"\n         [disabled]=\"disabled\" (change)=\"onFileChange($event)\">\n</figure>\n", styles: [".gui-file-uploader{display:block;overflow:auto;flex:1}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:120px;margin:4px 0 0;padding:4px;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:4px}.gui-file-uploader .gui-file-content:hover{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%;text-indent:9999px;cursor:pointer}\n"] }]
+        }], ctorParameters: function () { return [{ type: GuiFileUploaderConfig }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }], type: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], fileChange: [{
+                type: Output
+            }] } });
+
+class GuiForm {
+    constructor(cdr) {
+        this.cdr = cdr;
+        /**
+         * The form instance which allow to track model value and validation status.
+         */
+        this.form = new FormGroup({});
+        /**
+         * The field configurations for building the form.
+         */
+        this.config = {};
+        /**
+         * The model to be represented by the form.
+         */
+        this.model = {};
+        this.formFields = [];
+        this.formSubscription = Subscription.EMPTY;
+    }
+    ngOnChanges(changes) {
+        if (changes['config']) {
+            this.form.controls = {}; // reset controls
+            this.formFields = this.getFormFieldArray(this.form, this.config, this.model);
+        }
+        if (changes['model'] && this.model && Object.keys(this.model).length > 0) {
+            this.form.patchValue(this.model);
+        }
+    }
+    ngOnInit() {
+        this.formSubscription = this.form.valueChanges.subscribe(value => {
+            Object.assign(this.model, value);
+        });
+    }
+    ngOnDestroy() {
+        this.formSubscription.unsubscribe();
+    }
+    /**
+     * Convert the object config to array config and register into the reactive form.
+     *
+     * @param form         The reactive form instance
+     * @param config       The config of the form fields
+     * @param model        The value of the form control
+     * @param defaultValue The default value of the form field
+     * @param parentType   The type of the form field parent
+     * @param options      The reactive form options
+     * @returns
+     */
+    getFormFieldArray(form, config = {}, model = {}, defaultValue = null, parentType = 'group', options = { emitEvent: false }) {
+        const tempArr = [];
+        for (const key of Object.keys(config)) {
+            // Inferring the form type by the data type of `children`
+            // 1. `undefined` => FormControl
+            // 2. `array`     => FormArray
+            // 3. `object`    => FormGroup
+            const _children = config[key].template ? [] : config[key].children;
+            const _type = !_children ? 'control' : Array.isArray(_children) ? 'array' : 'group';
+            const item = {
+                _type,
+                key,
+                parentType,
+                model: model[key],
+                default: defaultValue?.[key],
+                index: Number(key),
+                ...config[key],
+            };
+            // The `group` type generally have no `default`, so we should
+            // set the default value manually
+            if (item.children && model[key] == null && item.default == null) {
+                item.model = model[key] = item._type === 'array' ? [] : {};
+            }
+            // Generate model by the `default` key of the field config
+            if (typeof model === 'object' && model[key] == null) {
+                model[key] = item.default;
+            }
+            // Special judgment on `tabs` type, the `children` key will be ignored if
+            // there has a `template` key
+            if (item.template) {
+                // If model is an array and not empty, the default value of the form field
+                // will use the model's value
+                if (Array.isArray(item.model) && item.model.length > 0) {
+                    item.default = item.model;
+                }
+                if (item.default?.length) {
+                    item.children = item.default.map((value) => {
+                        Object.assign(value, item.template?.default);
+                        return {
+                            default: value,
+                            ...item.template,
+                        };
+                    });
+                }
+                else {
+                    item.children = [];
+                }
+            }
+            if (item._type === 'control') {
+                const formState = { value: item.default, disabled: item.disabled };
+                if (form instanceof FormGroup) {
+                    form.registerControl(item.key, new FormControl(formState));
+                }
+                else if (form instanceof FormArray) {
+                    form.insert(item.index || form.length, new FormControl(formState), options);
+                }
+            }
+            else if (item._type === 'array') {
+                let formArray = new FormArray([]);
+                if (form instanceof FormGroup) {
+                    formArray = form.registerControl(item.key, new FormArray([]));
+                }
+                else if (form instanceof FormArray) {
+                    form.insert(item.index || form.length, formArray, options);
+                }
+                item.children = this.getFormFieldArray(formArray, item.children, item.model, item.default, item.type);
+            }
+            else if (item._type === 'group') {
+                let formGroup = new FormGroup({});
+                if (form instanceof FormGroup) {
+                    formGroup = form.registerControl(item.key, new FormGroup({}));
+                }
+                else if (form instanceof FormArray) {
+                    form.insert(item.index || form.length, formGroup, options);
+                }
+                item.children = this.getFormFieldArray(formGroup, item.children, item.model, item.default, item.type);
+            }
+            tempArr.push(item);
+        }
+        return tempArr;
+    }
+    /**
+     * Add a tab item.
+     *
+     * @param e     The mouse event
+     * @param form  The reactive form instance
+     * @param tabs  The config of the tabs field
+     * @param index The index of the tabs array
+     */
+    addTab(e, form, tabs, index) {
+        e.stopPropagation();
+        const insertIndex = index === void 0 ? tabs.children.length : index + 1;
+        // Save the index of the insertion in the config
+        tabs.template.index = insertIndex;
+        // The key in the object and the index in the array should be the same
+        tabs.children.forEach((child, index) => {
+            if (index >= insertIndex) {
+                child.index += 1;
+                child.key = child.index.toString();
+            }
+        });
+        // The constructed object looks like this `[{ key: 'tab', children: template }]`
+        // The key should preferably be `null`
+        const newTab = this.getFormFieldArray(form, { [insertIndex]: tabs.template }, {}, null, 'tabs', { emitEvent: true });
+        tabs.children.splice(insertIndex, 0, newTab[0]);
+    }
+    /**
+     * Remove a tab item.
+     *
+     * @param e     The mouse event
+     * @param form  The reactive form instance
+     * @param tabs  The config of the tabs field
+     * @param index The index of the tabs array
+     */
+    removeTab(e, form, tabs, index) {
+        e.stopPropagation();
+        const removeIndex = index === void 0 ? tabs.children.length - 1 : index;
+        tabs.children.forEach((child, index) => {
+            if (index > removeIndex) {
+                child.index -= 1;
+                child.key = child.index.toString();
+            }
+        });
+        tabs.children.splice(removeIndex, 1);
+        form.removeAt(removeIndex);
+    }
+    /**
+     * Change the display mode of tabs.
+     *
+     * @param e    The mouse event
+     * @param tabs The config of the tabs field
+     * @param mode The display mode of tabs
+     */
+    changeTabsMode(e, tabs, mode) {
+        e.stopPropagation();
+        tabs.mode = mode;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiForm, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiForm, selector: "gui-form", inputs: { form: "form", config: "config", model: "model" }, host: { classAttribute: "gui-form" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n  <div *ngFor=\"let item of formFields\">\n    <ng-template [ngTemplateOutlet]=\"controlType\"\n                 [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\">\n    </ng-template>\n  </div>\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n  <ng-container [ngSwitch]=\"item.type\" [formGroup]=\"form\">\n    <!-- Text -->\n    <gui-field-group *ngSwitchCase=\"'text'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-input-text [formControlName]=\"item.key\" [config]=\"item\"></gui-input-text>\n    </gui-field-group>\n    <!-- Number -->\n    <gui-field-group *ngSwitchCase=\"'number'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-input-number [formControlName]=\"item.key\" [config]=\"item\"></gui-input-number>\n    </gui-field-group>\n    <!-- Select -->\n    <gui-field-group *ngSwitchCase=\"'select'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-select [formControlName]=\"item.key\" [config]=\"item\"></gui-select>\n    </gui-field-group>\n    <!-- Switch -->\n    <gui-field-group *ngSwitchCase=\"'switch'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-switch [formControlName]=\"item.key\" [config]=\"item\"></gui-switch>\n    </gui-field-group>\n    <!-- Slider -->\n    <gui-field-group *ngSwitchCase=\"'slider'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-slider [formControlName]=\"item.key\" [config]=\"item\"></gui-slider>\n    </gui-field-group>\n    <!-- Button Toggle -->\n    <gui-field-group *ngSwitchCase=\"'buttonToggle'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\"></gui-button-toggle>\n    </gui-field-group>\n    <!-- Fill -->\n    <gui-field-group *ngSwitchCase=\"'fill'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-fill [formControlName]=\"item.key\" [config]=\"item\"></gui-fill>\n    </gui-field-group>\n    <!-- File -->\n    <gui-field-group *ngSwitchCase=\"'file'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-file-uploader [formControlName]=\"item.key\"></gui-file-uploader>\n    </gui-field-group>\n    <!-- Image -->\n    <gui-field-group *ngSwitchCase=\"'image'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-file-uploader type=\"image\" [formControlName]=\"item.key\"></gui-file-uploader>\n    </gui-field-group>\n    <!-- Video -->\n    <gui-field-group *ngSwitchCase=\"'video'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-file-uploader type=\"video\" [formControlName]=\"item.key\"></gui-file-uploader>\n    </gui-field-group>\n    <!-- Audio -->\n    <gui-field-group *ngSwitchCase=\"'audio'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\"></gui-file-uploader>\n    </gui-field-group>\n    <!-- Image Select -->\n    <gui-field-group *ngSwitchCase=\"'imageSelect'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-image-select [formControlName]=\"item.key\" [config]=\"item\"></gui-image-select>\n    </gui-field-group>\n    <!-- Textarea -->\n    <gui-field-group *ngSwitchCase=\"'textarea'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-textarea [formControlName]=\"item.key\" [config]=\"item\"></gui-textarea>\n    </gui-field-group>\n    <!-- Hidden Input -->\n    <input *ngSwitchCase=\"'hidden'\" type=\"hidden\" [formControlName]=\"item.key\">\n\n    <!-- Inline Group -->\n    <gui-inline-group *ngSwitchCase=\"'inline'\" [config]=\"item\" [formGroupName]=\"item.key\">\n      <ng-container *ngFor=\"let child of item.children\">\n        <ng-template [ngTemplateOutlet]=\"controlType\"\n                     [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n        </ng-template>\n      </ng-container>\n    </gui-inline-group>\n\n    <!-- Group -->\n    <mat-expansion-panel *ngSwitchCase=\"'group'\" [formGroupName]=\"item.key\"\n                         [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n      <mat-expansion-panel-header>\n        <gui-field-label [config]=\"item\"></gui-field-label>\n      </mat-expansion-panel-header>\n      <!-- Lazy rendering -->\n      <ng-template matExpansionPanelContent>\n        <div *ngFor=\"let child of item.children\">\n          <ng-template [ngTemplateOutlet]=\"controlType\"\n                       [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n          </ng-template>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <!-- Tabs -->\n    <mat-expansion-panel *ngSwitchCase=\"'tabs'\" [formArrayName]=\"item.key\"\n                         [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n      <mat-expansion-panel-header>\n        <gui-field-label [config]=\"item\"></gui-field-label>\n        <!-- Show operation buttons after panel opened -->\n        <ng-container *ngIf=\"item.expanded\">\n          <button mat-icon-button (click)=\"changeTabsMode($event, item, 'nav')\"\n                  [color]=\"item.mode!=='list'?'primary':''\" type=\"button\">\n            <mat-icon svgIcon=\"dots_horizontal\"></mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"changeTabsMode($event, item, 'list')\"\n                  [color]=\"item.mode==='list'?'primary':''\" type=\"button\">\n            <mat-icon svgIcon=\"dots_vertical\"></mat-icon>\n          </button>\n          <ng-container *ngIf=\"item.template && (item.addable || item.addable===undefined)\">\n            <button mat-icon-button (click)=\"addTab($event, form.get(item.key), item)\"\n                    type=\"button\" [disabled]=\"item.disabled\">\n              <mat-icon svgIcon=\"plus\"></mat-icon>\n            </button>\n            <button mat-icon-button (click)=\"removeTab($event, form.get(item.key), item)\"\n                    type=\"button\" [disabled]=\"item.disabled\">\n              <mat-icon svgIcon=\"delete\"></mat-icon>\n            </button>\n          </ng-container>\n        </ng-container>\n      </mat-expansion-panel-header>\n      <!-- Lazy rendering -->\n      <ng-template matExpansionPanelContent>\n        <!-- Horizontal nav mode -->\n        <mat-tab-group *ngIf=\"item.mode!=='list'\" class=\"gui-tabs\"\n                       [mat-stretch-tabs]=\"false\" disableRipple>\n          <mat-tab *ngFor=\"let tab of item.children; index as i\" [disabled]=\"tab.disabled\">\n            <ng-template mat-tab-label>\n              <div>{{tab.name | ejs:{i} }}</div>\n            </ng-template>\n            <!-- FormControl & FormArray -->\n            <ng-container *ngIf=\"!tab.children || tab.children.length===0 || tab.type==='tabs'\">\n              <ng-template [ngTemplateOutlet]=\"controlType\"\n                           [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n              </ng-template>\n            </ng-container>\n            <!-- FormGroup -->\n            <ng-container *ngIf=\"tab.children?.length>0 && tab.type!=='tabs'\">\n              <div *ngFor=\"let child of tab.children\">\n                <ng-template [ngTemplateOutlet]=\"controlType\"\n                             [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n                </ng-template>\n              </div>\n            </ng-container>\n          </mat-tab>\n        </mat-tab-group>\n\n        <!-- Vertical list mode -->\n        <div class=\"gui-list\" *ngIf=\"item.mode==='list'\">\n          <div class=\"gui-list-item\" *ngFor=\"let tab of item.children; index as i\">\n            <div class=\"gui-list-item-heading\">\n              <span class=\"gui-list-item-title\">{{tab.name | ejs:{i} }}</span>\n              <ng-container *ngIf=\"item.template && (item.addable || item.addable===undefined)\">\n                <button mat-icon-button (click)=\"addTab($event, form.get(item.key), item, i)\"\n                        type=\"button\" [disabled]=\"item.disabled\">\n                  <mat-icon svgIcon=\"plus\"></mat-icon>\n                </button>\n                <button mat-icon-button (click)=\"removeTab($event, form.get(item.key), item, i)\"\n                        type=\"button\" [disabled]=\"item.disabled\">\n                  <mat-icon svgIcon=\"delete\"></mat-icon>\n                </button>\n              </ng-container>\n            </div>\n            <div class=\"gui-list-item-content\">\n              <!-- FormControl & FormArray -->\n              <ng-container *ngIf=\"!tab.children || tab.children.length===0 || tab.type==='tabs'\">\n                <ng-template [ngTemplateOutlet]=\"controlType\"\n                             [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n                </ng-template>\n              </ng-container>\n              <!-- FormGroup -->\n              <ng-container *ngIf=\"tab.children?.length>0 && tab.type!=='tabs'\">\n                <div *ngFor=\"let child of tab.children\">\n                  <ng-template [ngTemplateOutlet]=\"controlType\"\n                               [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n                  </ng-template>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <!-- Menu -->\n    <mat-tab-group class=\"gui-menu\" *ngSwitchCase=\"'menu'\" [formGroupName]=\"item.key\" disableRipple>\n      <mat-tab *ngFor=\"let menuChild of item.children\" [label]=\"menuChild.name\"\n               [disabled]=\"menuChild.disabled\">\n        <ng-template matTabContent>\n          <ng-container *ngIf=\"menuChild.type==='menuItem'\">\n            <!-- Must wrap with div -->\n            <div *ngFor=\"let controlItem of menuChild.children\" [formGroupName]=\"menuChild.key\">\n              <ng-template [ngTemplateOutlet]=\"controlType\"\n                           [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\">\n              </ng-template>\n            </div>\n          </ng-container>\n          <!-- Support for unlimited nesting -->\n          <ng-container *ngIf=\"menuChild.type==='menu'\">\n            <ng-template [ngTemplateOutlet]=\"controlType\"\n                         [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\">\n            </ng-template>\n          </ng-container>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\n\n  </ng-container>\n</ng-template>\n", styles: [".gui-form{--mat-form-field-container-text-size: 12px;--mat-expansion-header-text-size: 12px;--mat-expansion-container-text-size: 12px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 40px;position:relative;font-size:12px}.gui-form .mat-expansion-panel{--mat-expansion-container-shape: 0;box-shadow:none!important}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 12px}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:8px}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1}.gui-form .mat-expansion-indicator:after{vertical-align:2px}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: 12px;--mdc-secondary-navigation-tab-container-height: 24px}.gui-form .mat-mdc-tab{min-width:auto;padding:0 12px}.gui-form .mat-icon{display:inline-flex;justify-content:center;align-items:center;padding:0!important}.gui-form .mat-icon svg{width:14px;height:14px}.gui-form .mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 14px;padding:0}.gui-form .mat-mdc-icon-button .mat-mdc-button-touch-target{width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size)}.gui-form .mat-mdc-text-field-wrapper,.gui-form .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 8px;border-radius:var(--mdc-filled-text-field-container-shape)}.gui-form .mat-mdc-form-field-infix{min-height:auto;padding:0!important}.gui-form .mat-mdc-form-field-hint-spacer,.gui-form .mat-mdc-form-field-bottom-align:before,.gui-form .mdc-line-ripple{display:none}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 12px;line-height:24px}.gui-list-item-heading .gui-list-item-title{flex:1}.gui-list-item-heading:before{position:absolute;left:0;width:2px;height:16px;background-color:var(--mat-expansion-header-text-color);content:\"\"}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$3.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i5$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5$3.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i5$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i6.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { 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: GuiFieldGroup, selector: "gui-field-group", inputs: ["config"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiInlineGroup, selector: "gui-inline-group", inputs: ["config"] }, { kind: "component", type: GuiImageSelect, selector: "gui-image-select", inputs: ["config", "disabled"] }, { kind: "component", type: GuiTextarea, selector: "gui-textarea", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["type", "name", "accept", "disabled"], outputs: ["fileChange"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'gui-form', host: {
+                        class: 'gui-form',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\">\n  <div *ngFor=\"let item of formFields\">\n    <ng-template [ngTemplateOutlet]=\"controlType\"\n                 [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\">\n    </ng-template>\n  </div>\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n  <ng-container [ngSwitch]=\"item.type\" [formGroup]=\"form\">\n    <!-- Text -->\n    <gui-field-group *ngSwitchCase=\"'text'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-input-text [formControlName]=\"item.key\" [config]=\"item\"></gui-input-text>\n    </gui-field-group>\n    <!-- Number -->\n    <gui-field-group *ngSwitchCase=\"'number'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-input-number [formControlName]=\"item.key\" [config]=\"item\"></gui-input-number>\n    </gui-field-group>\n    <!-- Select -->\n    <gui-field-group *ngSwitchCase=\"'select'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-select [formControlName]=\"item.key\" [config]=\"item\"></gui-select>\n    </gui-field-group>\n    <!-- Switch -->\n    <gui-field-group *ngSwitchCase=\"'switch'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-switch [formControlName]=\"item.key\" [config]=\"item\"></gui-switch>\n    </gui-field-group>\n    <!-- Slider -->\n    <gui-field-group *ngSwitchCase=\"'slider'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-slider [formControlName]=\"item.key\" [config]=\"item\"></gui-slider>\n    </gui-field-group>\n    <!-- Button Toggle -->\n    <gui-field-group *ngSwitchCase=\"'buttonToggle'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\"></gui-button-toggle>\n    </gui-field-group>\n    <!-- Fill -->\n    <gui-field-group *ngSwitchCase=\"'fill'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-fill [formControlName]=\"item.key\" [config]=\"item\"></gui-fill>\n    </gui-field-group>\n    <!-- File -->\n    <gui-field-group *ngSwitchCase=\"'file'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-file-uploader [formControlName]=\"item.key\"></gui-file-uploader>\n    </gui-field-group>\n    <!-- Image -->\n    <gui-field-group *ngSwitchCase=\"'image'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-file-uploader type=\"image\" [formControlName]=\"item.key\"></gui-file-uploader>\n    </gui-field-group>\n    <!-- Video -->\n    <gui-field-group *ngSwitchCase=\"'video'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-file-uploader type=\"video\" [formControlName]=\"item.key\"></gui-file-uploader>\n    </gui-field-group>\n    <!-- Audio -->\n    <gui-field-group *ngSwitchCase=\"'audio'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\"></gui-file-uploader>\n    </gui-field-group>\n    <!-- Image Select -->\n    <gui-field-group *ngSwitchCase=\"'imageSelect'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-image-select [formControlName]=\"item.key\" [config]=\"item\"></gui-image-select>\n    </gui-field-group>\n    <!-- Textarea -->\n    <gui-field-group *ngSwitchCase=\"'textarea'\" [config]=\"item\" [flex]=\"item.col\">\n      <gui-textarea [formControlName]=\"item.key\" [config]=\"item\"></gui-textarea>\n    </gui-field-group>\n    <!-- Hidden Input -->\n    <input *ngSwitchCase=\"'hidden'\" type=\"hidden\" [formControlName]=\"item.key\">\n\n    <!-- Inline Group -->\n    <gui-inline-group *ngSwitchCase=\"'inline'\" [config]=\"item\" [formGroupName]=\"item.key\">\n      <ng-container *ngFor=\"let child of item.children\">\n        <ng-template [ngTemplateOutlet]=\"controlType\"\n                     [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n        </ng-template>\n      </ng-container>\n    </gui-inline-group>\n\n    <!-- Group -->\n    <mat-expansion-panel *ngSwitchCase=\"'group'\" [formGroupName]=\"item.key\"\n                         [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n      <mat-expansion-panel-header>\n        <gui-field-label [config]=\"item\"></gui-field-label>\n      </mat-expansion-panel-header>\n      <!-- Lazy rendering -->\n      <ng-template matExpansionPanelContent>\n        <div *ngFor=\"let child of item.children\">\n          <ng-template [ngTemplateOutlet]=\"controlType\"\n                       [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n          </ng-template>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <!-- Tabs -->\n    <mat-expansion-panel *ngSwitchCase=\"'tabs'\" [formArrayName]=\"item.key\"\n                         [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n      <mat-expansion-panel-header>\n        <gui-field-label [config]=\"item\"></gui-field-label>\n        <!-- Show operation buttons after panel opened -->\n        <ng-container *ngIf=\"item.expanded\">\n          <button mat-icon-button (click)=\"changeTabsMode($event, item, 'nav')\"\n                  [color]=\"item.mode!=='list'?'primary':''\" type=\"button\">\n            <mat-icon svgIcon=\"dots_horizontal\"></mat-icon>\n          </button>\n          <button mat-icon-button (click)=\"changeTabsMode($event, item, 'list')\"\n                  [color]=\"item.mode==='list'?'primary':''\" type=\"button\">\n            <mat-icon svgIcon=\"dots_vertical\"></mat-icon>\n          </button>\n          <ng-container *ngIf=\"item.template && (item.addable || item.addable===undefined)\">\n            <button mat-icon-button (click)=\"addTab($event, form.get(item.key), item)\"\n                    type=\"button\" [disabled]=\"item.disabled\">\n              <mat-icon svgIcon=\"plus\"></mat-icon>\n            </button>\n            <button mat-icon-button (click)=\"removeTab($event, form.get(item.key), item)\"\n                    type=\"button\" [disabled]=\"item.disabled\">\n              <mat-icon svgIcon=\"delete\"></mat-icon>\n            </button>\n          </ng-container>\n        </ng-container>\n      </mat-expansion-panel-header>\n      <!-- Lazy rendering -->\n      <ng-template matExpansionPanelContent>\n        <!-- Horizontal nav mode -->\n        <mat-tab-group *ngIf=\"item.mode!=='list'\" class=\"gui-tabs\"\n                       [mat-stretch-tabs]=\"false\" disableRipple>\n          <mat-tab *ngFor=\"let tab of item.children; index as i\" [disabled]=\"tab.disabled\">\n            <ng-template mat-tab-label>\n              <div>{{tab.name | ejs:{i} }}</div>\n            </ng-template>\n            <!-- FormControl & FormArray -->\n            <ng-container *ngIf=\"!tab.children || tab.children.length===0 || tab.type==='tabs'\">\n              <ng-template [ngTemplateOutlet]=\"controlType\"\n                           [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n              </ng-template>\n            </ng-container>\n            <!-- FormGroup -->\n            <ng-container *ngIf=\"tab.children?.length>0 && tab.type!=='tabs'\">\n              <div *ngFor=\"let child of tab.children\">\n                <ng-template [ngTemplateOutlet]=\"controlType\"\n                             [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n                </ng-template>\n              </div>\n            </ng-container>\n          </mat-tab>\n        </mat-tab-group>\n\n        <!-- Vertical list mode -->\n        <div class=\"gui-list\" *ngIf=\"item.mode==='list'\">\n          <div class=\"gui-list-item\" *ngFor=\"let tab of item.children; index as i\">\n            <div class=\"gui-list-item-heading\">\n              <span class=\"gui-list-item-title\">{{tab.name | ejs:{i} }}</span>\n              <ng-container *ngIf=\"item.template && (item.addable || item.addable===undefined)\">\n                <button mat-icon-button (click)=\"addTab($event, form.get(item.key), item, i)\"\n                        type=\"button\" [disabled]=\"item.disabled\">\n                  <mat-icon svgIcon=\"plus\"></mat-icon>\n                </button>\n                <button mat-icon-button (click)=\"removeTab($event, form.get(item.key), item, i)\"\n                        type=\"button\" [disabled]=\"item.disabled\">\n                  <mat-icon svgIcon=\"delete\"></mat-icon>\n                </button>\n              </ng-container>\n            </div>\n            <div class=\"gui-list-item-content\">\n              <!-- FormControl & FormArray -->\n              <ng-container *ngIf=\"!tab.children || tab.children.length===0 || tab.type==='tabs'\">\n                <ng-template [ngTemplateOutlet]=\"controlType\"\n                             [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n                </ng-template>\n              </ng-container>\n              <!-- FormGroup -->\n              <ng-container *ngIf=\"tab.children?.length>0 && tab.type!=='tabs'\">\n                <div *ngFor=\"let child of tab.children\">\n                  <ng-template [ngTemplateOutlet]=\"controlType\"\n                               [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n                  </ng-template>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n        </div>\n      </ng-template>\n    </mat-expansion-panel>\n\n    <!-- Menu -->\n    <mat-tab-group class=\"gui-menu\" *ngSwitchCase=\"'menu'\" [formGroupName]=\"item.key\" disableRipple>\n      <mat-tab *ngFor=\"let menuChild of item.children\" [label]=\"menuChild.name\"\n               [disabled]=\"menuChild.disabled\">\n        <ng-template matTabContent>\n          <ng-container *ngIf=\"menuChild.type==='menuItem'\">\n            <!-- Must wrap with div -->\n            <div *ngFor=\"let controlItem of menuChild.children\" [formGroupName]=\"menuChild.key\">\n              <ng-template [ngTemplateOutlet]=\"controlType\"\n                           [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\">\n              </ng-template>\n            </div>\n          </ng-container>\n          <!-- Support for unlimited nesting -->\n          <ng-container *ngIf=\"menuChild.type==='menu'\">\n            <ng-template [ngTemplateOutlet]=\"controlType\"\n                         [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\">\n            </ng-template>\n          </ng-container>\n        </ng-template>\n      </mat-tab>\n    </mat-tab-group>\n\n  </ng-container>\n</ng-template>\n", styles: [".gui-form{--mat-form-field-container-text-size: 12px;--mat-expansion-header-text-size: 12px;--mat-expansion-container-text-size: 12px;--mat-expansion-header-collapsed-state-height: 40px;--mat-expansion-header-expanded-state-height: 40px;position:relative;font-size:12px}.gui-form .mat-expansion-panel{--mat-expansion-container-shape: 0;box-shadow:none!important}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 12px}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:8px}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1}.gui-form .mat-expansion-indicator:after{vertical-align:2px}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: 12px;--mdc-secondary-navigation-tab-container-height: 24px}.gui-form .mat-mdc-tab{min-width:auto;padding:0 12px}.gui-form .mat-icon{display:inline-flex;justify-content:center;align-items:center;padding:0!important}.gui-form .mat-icon svg{width:14px;height:14px}.gui-form .mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 24px;--mdc-icon-button-icon-size: 14px;padding:0}.gui-form .mat-mdc-icon-button .mat-mdc-button-touch-target{width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size)}.gui-form .mat-mdc-text-field-wrapper,.gui-form .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 8px;border-radius:var(--mdc-filled-text-field-container-shape)}.gui-form .mat-mdc-form-field-infix{min-height:auto;padding:0!important}.gui-form .mat-mdc-form-field-hint-spacer,.gui-form .mat-mdc-form-field-bottom-align:before,.gui-form .mdc-line-ripple{display:none}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 12px;line-height:24px}.gui-list-item-heading .gui-list-item-title{flex:1}.gui-list-item-heading:before{position:absolute;left:0;width:2px;height:16px;background-color:var(--mat-expansion-header-text-color);content:\"\"}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { form: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], model: [{
+                type: Input
+            }] } });
+
+const svgIcons = {
+    dots_horizontal: `
+  <svg viewBox="0 0 24 24">
+    <path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z"></path>
+  </svg>
+  `,
+    dots_vertical: `
+  <svg viewBox="0 0 24 24">
+    <path d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z"></path>
+  </svg>
+  `,
+    plus: `
+  <svg viewBox="0 0 24 24">
+    <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path>
+  </svg>
+  `,
+    delete: `
+  <svg viewBox="0 0 24 24">
+    <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"></path>
+  </svg>
+  `,
+    link: `
+  <svg viewBox="0 0 24 24">
+    <path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path>
+  </svg>
+  `,
+    close: `
+  <svg viewBox="0 0 24 24">
+    <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"></path>
+  </svg>
+  `,
+};
+
+class GuiModule {
+    constructor(iconRegistry, sanitizer) {
+        for (const key of Object.keys(svgIcons)) {
+            iconRegistry.addSvgIconLiteral(key, sanitizer.bypassSecurityTrustHtml(svgIcons[key]));
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiModule, deps: [{ token: i1$2.MatIconRegistry }, { token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.8", ngImport: i0, type: GuiModule, declarations: [GuiForm,
+            GuiInputText,
+            GuiInputNumber,
+            GuiSelect,
+            GuiSwitch,
+            GuiSlider,
+            GuiIcon,
+            GuiButtonToggle,
+            GuiFill,
+            GuiFieldGroup,
+            GuiFieldLabel,
+            GuiInlineGroup,
+            GuiImageSelect,
+            GuiTextarea,
+            GuiFileUploader,
+            GuiEjsPipe,
+            GuiFlexDirective], imports: [CommonModule,
+            ReactiveFormsModule,
+            FormsModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatSelectModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatButtonToggleModule,
+            MatIconModule,
+            MatButtonModule,
+            MatTabsModule,
+            MatExpansionModule,
+            MatTooltipModule,
+            MtxColorpickerModule,
+            MtxSelectModule], exports: [GuiForm,
+            GuiInputText,
+            GuiInputNumber,
+            GuiSelect,
+            GuiSwitch,
+            GuiSlider,
+            GuiIcon,
+            GuiButtonToggle,
+            GuiFill,
+            GuiFieldGroup,
+            GuiFieldLabel,
+            GuiInlineGroup,
+            GuiImageSelect,
+            GuiTextarea,
+            GuiFileUploader,
+            GuiEjsPipe,
+            GuiFlexDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiModule, providers: [GuiFileUploaderConfig], imports: [CommonModule,
+            ReactiveFormsModule,
+            FormsModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatSelectModule,
+            MatSliderModule,
+            MatSlideToggleModule,
+            MatButtonToggleModule,
+            MatIconModule,
+            MatButtonModule,
+            MatTabsModule,
+            MatExpansionModule,
+            MatTooltipModule,
+            MtxColorpickerModule,
+            MtxSelectModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatSelectModule,
+                        MatSliderModule,
+                        MatSlideToggleModule,
+                        MatButtonToggleModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTabsModule,
+                        MatExpansionModule,
+                        MatTooltipModule,
+                        MtxColorpickerModule,
+                        MtxSelectModule,
+                    ],
+                    declarations: [
+                        GuiForm,
+                        GuiInputText,
+                        GuiInputNumber,
+                        GuiSelect,
+                        GuiSwitch,
+                        GuiSlider,
+                        GuiIcon,
+                        GuiButtonToggle,
+                        GuiFill,
+                        GuiFieldGroup,
+                        GuiFieldLabel,
+                        GuiInlineGroup,
+                        GuiImageSelect,
+                        GuiTextarea,
+                        GuiFileUploader,
+                        GuiEjsPipe,
+                        GuiFlexDirective,
+                    ],
+                    exports: [
+                        GuiForm,
+                        GuiInputText,
+                        GuiInputNumber,
+                        GuiSelect,
+                        GuiSwitch,
+                        GuiSlider,
+                        GuiIcon,
+                        GuiButtonToggle,
+                        GuiFill,
+                        GuiFieldGroup,
+                        GuiFieldLabel,
+                        GuiInlineGroup,
+                        GuiImageSelect,
+                        GuiTextarea,
+                        GuiFileUploader,
+                        GuiEjsPipe,
+                        GuiFlexDirective,
+                    ],
+                    providers: [GuiFileUploaderConfig],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatIconRegistry }, { type: i2$2.DomSanitizer }]; } });
+
+/*
+ * Public API Surface of gui
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { GuiButtonToggle, GuiEjsPipe, GuiFieldGroup, GuiFieldLabel, GuiFileUploader, GuiFileUploaderConfig, GuiFill, GuiFlexDirective, GuiForm, GuiIcon, GuiImageSelect, GuiInlineGroup, GuiInputNumber, GuiInputText, GuiModule, GuiSelect, GuiSlider, GuiSwitch, GuiTextarea, ejsTmpl };
+//# sourceMappingURL=acrodata-gui.mjs.map