@acrodata/gui 0.3.1 → 0.4.0

package/fesm2022/acrodata-gui.mjs

@@ -447,14 +447,14 @@ class GuiIcon {
     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:var(--mat-standard-button-toggle-height);height:var(--mat-standard-button-toggle-height);line-height:var(--mat-standard-button-toggle-height)}\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 }); }
+    <i *ngIf="!isUrl()" [class]="src"></i>
+  `, isInline: true, styles: [".gui-icon{display:inline-flex}.gui-icon img,.gui-icon i{display:block;width:var(--mat-standard-button-toggle-height);height:var(--mat-standard-button-toggle-height);line-height:var(--mat-standard-button-toggle-height)}\n"], dependencies: [{ 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>
+    <i *ngIf="!isUrl()" [class]="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:var(--mat-standard-button-toggle-height);height:var(--mat-standard-button-toggle-height);line-height:var(--mat-standard-button-toggle-height)}\n"] }]
@@ -861,8 +861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
             }] } });
 
 class GuiForm {
-    constructor(cdr) {
-        this.cdr = cdr;
+    constructor() {
         /**
          * The form instance which allow to track model value and validation status.
          */
@@ -910,10 +909,9 @@ class GuiForm {
      * @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 }) {
+    getFormFieldArray(form, config = {}, model = {}, defaultValue = null, parentType = 'group') {
         const tempArr = [];
         for (const key of Object.keys(config)) {
             // Inferring the form type by the data type of `children`
@@ -997,7 +995,7 @@ class GuiForm {
                     form.registerControl(item.key, new FormControl(formState));
                 }
                 else if (form instanceof FormArray) {
-                    form.insert(item.index || form.length, new FormControl(formState), options);
+                    form.insert(item.index || form.length, new FormControl(formState), { emitEvent: false });
                 }
             }
             else if (item._type === 'array') {
@@ -1006,9 +1004,10 @@ class GuiForm {
                     formArray = form.registerControl(item.key, new FormArray([]));
                 }
                 else if (form instanceof FormArray) {
-                    form.insert(item.index || form.length, formArray, options);
+                    form.insert(item.index || form.length, formArray, { emitEvent: false });
                 }
                 item.children = this.getFormFieldArray(formArray, item.children, item.model, item.default, item.type);
+                item.selectedIndex = 0;
             }
             else if (item._type === 'group') {
                 let formGroup = new FormGroup({});
@@ -1016,7 +1015,7 @@ class GuiForm {
                     formGroup = form.registerControl(item.key, new FormGroup({}));
                 }
                 else if (form instanceof FormArray) {
-                    form.insert(item.index || form.length, formGroup, options);
+                    form.insert(item.index || form.length, formGroup, { emitEvent: false });
                 }
                 item.children = this.getFormFieldArray(formGroup, item.children, item.model, item.default, item.type);
             }
@@ -1027,47 +1026,51 @@ class GuiForm {
     /**
      * 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
+     * @param e         The mouse event
+     * @param formArray The reactive form instance
+     * @param tabs      The config of the tabs field
+     * @param copy      Whether to copy the current tab
+     * @param index     The index of the tabs array
      */
-    addTab(e, form, tabs, index) {
+    addTab(e, formArray, tabs, copy, index) {
         e.stopPropagation();
-        const insertIndex = index === void 0 ? tabs.children.length : index + 1;
+        const insertIndex = index !== void 0 ? index + 1 : copy ? tabs.selectedIndex + 1 : tabs.children.length;
         // 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();
+                child.key = child.index + ''; // convert to string
             }
         });
+        const formValue = formArray.get(insertIndex - 1 + '')?.value;
         // 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 });
+        const newTab = this.getFormFieldArray(formArray, { [insertIndex]: tabs.template }, copy ? { [insertIndex]: formValue } : {}, copy ? { [insertIndex]: formValue } : null, 'tabs');
         tabs.children.splice(insertIndex, 0, newTab[0]);
+        // update the form model
+        formArray.patchValue(formArray.value);
     }
     /**
      * 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
+     * @param e         The mouse event
+     * @param formArray 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) {
+    removeTab(e, formArray, tabs, index) {
         e.stopPropagation();
-        const removeIndex = index === void 0 ? tabs.children.length - 1 : index;
+        const removeIndex = index === void 0 ? tabs.selectedIndex : index;
         tabs.children.forEach((child, index) => {
             if (index > removeIndex) {
                 child.index -= 1;
-                child.key = child.index.toString();
+                child.key = child.index + ''; // convert to string
             }
         });
         tabs.children.splice(removeIndex, 1);
-        form.removeAt(removeIndex);
+        formArray.removeAt(removeIndex);
     }
     /**
      * Change the display mode of tabs.
@@ -1080,15 +1083,15 @@ class GuiForm {
         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" }, outputs: { modelChange: "modelChange" }, 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 *ngIf=\"item.show\" [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\" [config]=\"item\"></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\"\n                         [formControlName]=\"item.key\" [config]=\"item\"></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\"\n                         [formControlName]=\"item.key\" [config]=\"item\"></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\"\n                         [formControlName]=\"item.key\" [config]=\"item\"></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, 'normal')\"\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 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 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: 32px;--mat-expansion-header-expanded-state-height: 32px;position:relative;display:block;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-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 12px}.gui-form .mat-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)}[dir=rtl] .gui-form .mat-mdc-text-field-wrapper,[dir=rtl] .gui-form .mat-mdc-form-field-hint-wrapper{padding:0 8px}.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:\"\"}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: 4px;padding:4px;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:4px}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;border-width:0;border-radius:var(--mdc-tab-indicator-active-indicator-shape);background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"], dependencies: [{ kind: "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: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiForm, deps: [], 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" }, outputs: { modelChange: "modelChange" }, 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 *ngIf=\"item.show\" [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\" [config]=\"item\"></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\"\n                         [formControlName]=\"item.key\" [config]=\"item\"></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\"\n                         [formControlName]=\"item.key\" [config]=\"item\"></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\"\n                         [formControlName]=\"item.key\" [config]=\"item\"></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 type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n                  (click)=\"changeTabsMode($event, item, 'normal')\">\n            <mat-icon svgIcon=\"dots_horizontal\"></mat-icon>\n          </button>\n          <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n                  (click)=\"changeTabsMode($event, item, 'list')\">\n            <mat-icon svgIcon=\"dots_vertical\"></mat-icon>\n          </button>\n          <ng-container *ngIf=\"item.template && (item.addable || item.addable===undefined)\">\n            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"addTab($event, form.get(item.key), item, true)\">\n              <mat-icon svgIcon=\"content_copy\"></mat-icon>\n            </button>\n            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"addTab($event, form.get(item.key), item)\">\n              <mat-icon svgIcon=\"plus\"></mat-icon>\n            </button>\n            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"removeTab($event, form.get(item.key), item)\">\n              <mat-icon svgIcon=\"delete\"></mat-icon>\n            </button>\n          </ng-container>\n        </ng-container>\n      </mat-expansion-panel-header>\n      <!-- Lazy rendering -->\n      <ng-template matExpansionPanelContent>\n        <!-- Horizontal mode -->\n        <mat-tab-group *ngIf=\"item.mode!=='list'\" class=\"gui-tabs\" disableRipple\n                       [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\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 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               [class.gui-list-item-active]=\"item.selectedIndex===i\">\n            <div class=\"gui-list-item-heading\">\n              <span class=\"gui-list-item-title\"\n                    (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</span>\n              <ng-container *ngIf=\"item.template && (item.addable || item.addable===undefined)\">\n                <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                        (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n                  <mat-icon svgIcon=\"content_copy\"></mat-icon>\n                </button>\n                <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                        (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n                  <mat-icon svgIcon=\"plus\"></mat-icon>\n                </button>\n                <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                        (click)=\"removeTab($event, form.get(item.key), item, i)\">\n                  <mat-icon svgIcon=\"delete\"></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: 32px;--mat-expansion-header-expanded-state-height: 32px;position:relative;display:block;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;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator:after{vertical-align:2px}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: 12px;--mdc-secondary-navigation-tab-container-height: 24px}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 12px}.gui-form .mat-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)}[dir=rtl] .gui-form .mat-mdc-text-field-wrapper,[dir=rtl] .gui-form .mat-mdc-form-field-hint-wrapper{padding:0 8px}.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:before{position:absolute;left:0;width:2px;height:16px;background-color:var(--mat-expansion-header-text-color);content:\"\"}.gui-list-item-title{flex:1;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: 4px;padding:4px;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:4px}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;border-width:0;border-radius:var(--mdc-tab-indicator-active-indicator-shape);background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"], dependencies: [{ kind: "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: ["config", "disabled", "type", "name", "accept"], 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 *ngIf=\"item.show\" [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\" [config]=\"item\"></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\"\n                         [formControlName]=\"item.key\" [config]=\"item\"></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\"\n                         [formControlName]=\"item.key\" [config]=\"item\"></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\"\n                         [formControlName]=\"item.key\" [config]=\"item\"></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, 'normal')\"\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 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 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: 32px;--mat-expansion-header-expanded-state-height: 32px;position:relative;display:block;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-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 12px}.gui-form .mat-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)}[dir=rtl] .gui-form .mat-mdc-text-field-wrapper,[dir=rtl] .gui-form .mat-mdc-form-field-hint-wrapper{padding:0 8px}.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:\"\"}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: 4px;padding:4px;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:4px}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;border-width:0;border-radius:var(--mdc-tab-indicator-active-indicator-shape);background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { 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 *ngIf=\"item.show\" [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\" [config]=\"item\"></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\"\n                         [formControlName]=\"item.key\" [config]=\"item\"></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\"\n                         [formControlName]=\"item.key\" [config]=\"item\"></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\"\n                         [formControlName]=\"item.key\" [config]=\"item\"></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 type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n                  (click)=\"changeTabsMode($event, item, 'normal')\">\n            <mat-icon svgIcon=\"dots_horizontal\"></mat-icon>\n          </button>\n          <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n                  (click)=\"changeTabsMode($event, item, 'list')\">\n            <mat-icon svgIcon=\"dots_vertical\"></mat-icon>\n          </button>\n          <ng-container *ngIf=\"item.template && (item.addable || item.addable===undefined)\">\n            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"addTab($event, form.get(item.key), item, true)\">\n              <mat-icon svgIcon=\"content_copy\"></mat-icon>\n            </button>\n            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"addTab($event, form.get(item.key), item)\">\n              <mat-icon svgIcon=\"plus\"></mat-icon>\n            </button>\n            <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                    (click)=\"removeTab($event, form.get(item.key), item)\">\n              <mat-icon svgIcon=\"delete\"></mat-icon>\n            </button>\n          </ng-container>\n        </ng-container>\n      </mat-expansion-panel-header>\n      <!-- Lazy rendering -->\n      <ng-template matExpansionPanelContent>\n        <!-- Horizontal mode -->\n        <mat-tab-group *ngIf=\"item.mode!=='list'\" class=\"gui-tabs\" disableRipple\n                       [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\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 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               [class.gui-list-item-active]=\"item.selectedIndex===i\">\n            <div class=\"gui-list-item-heading\">\n              <span class=\"gui-list-item-title\"\n                    (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</span>\n              <ng-container *ngIf=\"item.template && (item.addable || item.addable===undefined)\">\n                <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                        (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n                  <mat-icon svgIcon=\"content_copy\"></mat-icon>\n                </button>\n                <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                        (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n                  <mat-icon svgIcon=\"plus\"></mat-icon>\n                </button>\n                <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n                        (click)=\"removeTab($event, form.get(item.key), item, i)\">\n                  <mat-icon svgIcon=\"delete\"></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: 32px;--mat-expansion-header-expanded-state-height: 32px;position:relative;display:block;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;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator:after{vertical-align:2px}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: 12px;--mdc-secondary-navigation-tab-container-height: 24px}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 12px}.gui-form .mat-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)}[dir=rtl] .gui-form .mat-mdc-text-field-wrapper,[dir=rtl] .gui-form .mat-mdc-form-field-hint-wrapper{padding:0 8px}.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:before{position:absolute;left:0;width:2px;height:16px;background-color:var(--mat-expansion-header-text-color);content:\"\"}.gui-list-item-title{flex:1;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: 4px;padding:4px;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:4px}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;border-width:0;border-radius:var(--mdc-tab-indicator-active-indicator-shape);background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"] }]
+        }], propDecorators: { form: [{
                 type: Input
             }], config: [{
                 type: Input
@@ -1118,6 +1121,11 @@ const svgIcons = {
   <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>
+  `,
+    content_copy: `
+  <svg viewBox="0 0 24 24">
+  <path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path>
+  </svg>
   `,
     link: `
   <svg viewBox="0 0 24 24">