@acrodata/gui 0.2.3 → 0.2.5

package/esm2022/file-uploader/file-uploader.mjs

@@ -96,7 +96,7 @@ export class GuiFileUploader {
                 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         [placeholder]=\"config.placeholder||''\"\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    <mat-icon *ngSwitchDefault svgIcon=\"file_outline\"></mat-icon>\n  </ng-container>\n\n  <div *ngIf=\"!url\" class=\"gui-file-placeholder\">\n    <mat-icon svgIcon=\"file_upload\"></mat-icon>\n  </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%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:24px;height:24px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.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: i6.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 }); }
+        ], 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         [placeholder]=\"config.placeholder||''\"\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    <mat-icon *ngSwitchDefault svgIcon=\"file_outline\"></mat-icon>\n  </ng-container>\n\n  <div *ngIf=\"!url\" class=\"gui-file-placeholder\">\n    <mat-icon svgIcon=\"file_upload\"></mat-icon>\n  </div>\n\n  <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\"\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,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:24px;height:24px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i5.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: i6.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,
@@ -108,7 +108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                             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         [placeholder]=\"config.placeholder||''\"\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    <mat-icon *ngSwitchDefault svgIcon=\"file_outline\"></mat-icon>\n  </ng-container>\n\n  <div *ngIf=\"!url\" class=\"gui-file-placeholder\">\n    <mat-icon svgIcon=\"file_upload\"></mat-icon>\n  </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%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:24px;height:24px}\n"] }]
+                    ], template: "<mat-form-field>\n  <mat-icon matPrefix svgIcon=\"link\"></mat-icon>\n\n  <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n         [placeholder]=\"config.placeholder||''\"\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    <mat-icon *ngSwitchDefault svgIcon=\"file_outline\"></mat-icon>\n  </ng-container>\n\n  <div *ngIf=\"!url\" class=\"gui-file-placeholder\">\n    <mat-icon svgIcon=\"file_upload\"></mat-icon>\n  </div>\n\n  <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\"\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,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:24px;height:24px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.GuiFileUploaderConfig }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -125,4 +125,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
             }], fileChange: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS11cGxvYWRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2d1aS9maWxlLXVwbG9hZGVyL2ZpbGUtdXBsb2FkZXIudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9ndWkvZmlsZS11cGxvYWRlci9maWxlLXVwbG9hZGVyLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFxQixZQUFZLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN2RSxPQUFPLEVBQ0wsdUJBQXVCLEVBRXZCLFNBQVMsRUFFVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sRUFFTixTQUFTLEVBQ1QsaUJBQWlCLEVBQ2pCLFVBQVUsR0FDWCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDekUsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMxQixPQUFPLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7Ozs7QUE2QnRELE1BQU0sT0FBTyxlQUFlO0lBb0IxQixZQUNVLGVBQXNDLEVBQ3RDLEdBQXNCO1FBRHRCLG9CQUFlLEdBQWYsZUFBZSxDQUF1QjtRQUN0QyxRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQW5CdkIsV0FBTSxHQUF3QixFQUFFLENBQUM7UUFDakMsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixTQUFJLEdBQW1CLEdBQUcsQ0FBQztRQUMzQixTQUFJLEdBQUcsRUFBRSxDQUFDO1FBQ1YsV0FBTSxHQUFHLEVBQUUsQ0FBQztRQUVYLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBRWxELFlBQVk7UUFDWixRQUFHLEdBQUcsRUFBRSxDQUFDO1FBS0QsYUFBUSxHQUE0QixHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDN0MsY0FBUyxHQUFlLEdBQUcsRUFBRSxHQUFFLENB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Q0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxHQUFHLEdBQUcsRUFBRSxDQUFDO1FBRWQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBRWpCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNqQyxDQUFDOzhHQTlHVSxlQUFlO2tHQUFmLGVBQWUsb09BUmY7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQztnQkFDOUMsS0FBSyxFQUFFLElBQUk7YUFDWjtTQUNGLHVKQzVDSCxpbUNBK0JBOzsyRkRlYSxlQUFlO2tCQWpCM0IsU0FBUzsrQkFDRSxtQkFBbUIsUUFHdkI7d0JBQ0osS0FBSyxFQUFFLG1CQUFtQjtxQkFDM0IsaUJBQ2MsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTSxhQUNwQzt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxnQkFBZ0IsQ0FBQzs0QkFDOUMsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7NElBR3VCLFNBQVM7c0JBQWhDLFNBQVM7dUJBQUMsV0FBVztnQkFFYixNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSHR0cEVycm9yUmVzcG9uc2UsIEh0dHBSZXNwb25zZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIE91dHB1dCxcbiAgU2ltcGxlQ2hhbmdlcyxcbiAgVmlld0NoaWxkLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgZm9yd2FyZFJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBvZiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgY2F0Y2hFcnJvciwgZmluYWxpemUgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBHdWlGaWxlVXBsb2FkZXJDb25maWcgfSBmcm9tICcuL2ZpbGUtdXBsb2FkZXItY29uZmlnJztcbmltcG9ydCB7IEd1aUNvbnRyb2wgfSBmcm9tICcuLi9pbnRlcmZhY2UnO1xuXG5leHBvcnQgdHlwZSBGaWxlVXBsb2FkVHlwZSA9ICdpbWFnZScgfCAndmlkZW8nIHwgJ2F1ZGlvJyB8ICcqJztcblxuZXhwb3J0IGludGVyZmFjZSBGaWxlVXBsb2FkQ29udGVudCB7XG4gIGRhdGE6IEZpbGU7XG4gIHByb2dyZXNzOiBudW1iZXI7XG4gIGluUHJvZ3Jlc3M6IGJvb2xlYW47XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2d1aS1maWxlLXVwbG9hZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2ZpbGUtdXBsb2FkZXIuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2ZpbGUtdXBsb2FkZXIuc2NzcyddLFxuICBob3N0OiB7XG4gICAgY2xhc3M6ICdndWktZmlsZS11cGxvYWRlcicsXG4gIH0sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEd1aUZpbGVVcGxvYWRlciksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBHdWlGaWxlVXBsb2FkZXIgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciwgT25DaGFuZ2VzIHtcbiAgQFZpZXdDaGlsZCgnZmlsZUlucHV0JykgZmlsZUlucHV0ITogRWxlbWVudFJlZjxIVE1MSW5wdXRFbGVtZW50PjtcblxuICBASW5wdXQoKSBjb25maWc6IFBhcnRpYWw8R3VpQ29udHJvbD4gPSB7fTtcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgdHlwZTogRmlsZVVwbG9hZFR5cGUgPSAnKic7XG4gIEBJbnB1dCgpIG5hbWUgPSAnJztcbiAgQElucHV0KCkgYWNjZXB0ID0gJyc7XG5cbiAgQE91dHB1dCgpIGZpbGVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICAvLyBtZWRpYSBzcmNcbiAgdXJsID0gJyc7XG5cbiAgLy8gZmlsZSB0byB1cGxvYWRcbiAgZmlsZSE6IEZpbGVVcGxvYWRDb250ZW50O1xuXG4gIHByaXZhdGUgb25DaGFuZ2U6ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkID0gKCkgPT4ge307XG4gIHByaXZhdGUgb25Ub3VjaGVkOiAoKSA9PiB2b2lkID0gKCkgPT4ge307XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBmaWxlVXBsb2FkZXJDZmc6IEd1aUZpbGVVcGxvYWRlckNvbmZpZyxcbiAgICBwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWZcbiAgKSB7fVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlc1sndHlwZSddKSB7XG4gICAgICB0aGlzLmFjY2VwdCA9IHRoaXMudHlwZSArICcvKic7XG4gICAgfVxuICB9XG5cbiAgd3JpdGVWYWx1ZSh2YWx1ZTogc3RyaW5nKSB7XG4gICAgdGhpcy51cmwgPSB2YWx1ZTtcbiAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkKSB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHZvaWQpIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICB9XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKSB7XG4gICAgdGhpcy5kaXNhYmxlZCA9IGlzRGlzYWJsZWQ7XG4gICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gIH1cblxuICB1cGxvYWQoZmlsZTogRmlsZVVwbG9hZENvbnRlbnQpIHtcbiAgICBjb25zdCBmb3JtRGF0YSA9IG5ldyBGb3JtRGF0YSgpO1xuICAgIGZvcm1EYXRhLmFwcGVuZCgnZmlsZScsIGZpbGUuZGF0YSB8fCAnJyk7XG5cbiAgICBmaWxlLmluUHJvZ3Jlc3MgPSB0cnVlO1xuXG4gICAgdGhpcy5maWxlVXBsb2FkZXJDZmdcbiAgICAgIC51cGxvYWQoZm9ybURhdGEpXG4gICAgICAucGlwZShcbiAgICAgICAgY2F0Y2hFcnJvcigoZXJyb3I6IEh0dHBFcnJvclJlc3BvbnNlKSA9PiB7XG4gICAgICAgICAgZmlsZS5pblByb2dyZXNzID0gZmFsc2U7XG4gICAgICAgICAgcmV0dXJuIG9mKGAke2ZpbGUuZGF0YT8ubmFtZSB8fCAnRmlsZSd9IHVwbG9hZCBmYWlsZWQuYCk7XG4gICAgICAgIH0pLFxuICAgICAgICBmaW5hbGl6ZSgoKSA9PiB7fSlcbiAgICAgIClcbiAgICAgIC5zdWJzY3JpYmUocmVzID0+IHtcbiAgICAgICAgaWYgKHJlcyBpbnN0YW5jZW9mIEh0dHBSZXNwb25zZSAmJiByZXMuYm9keSkge1xuICAgICAgICAgIHRoaXMudXJsID0gcmVzLmJvZHkuZGF0YTtcblxuICAgICAgICAgIHRoaXMub25DaGFuZ2UodGhpcy51cmwpO1xuICAgICAgICAgIHRoaXMub25Ub3VjaGVkKCk7XG5cbiAgICAgICAgICB0aGlzLmZpbGVDaGFuZ2UuZW1pdCh0aGlzLnVybCk7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgICB9KTtcbiAgfVxuXG4gIG9uVXJsQ2hhbmdlKGU6IEV2ZW50KSB7XG4gICAgdGhpcy51cmwgPSAoZS50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudCkudmFsdWU7XG5cbiAgICB0aGlzLm9uQ2hhbmdlKHRoaXMudXJsKTtcblxuICAgIHRoaXMuZmlsZUNoYW5nZS5lbWl0KHRoaXMudXJsKTtcbiAgfVxuXG4gIG9uRmlsZUNoYW5nZShlOiBFdmVudCkge1xuICAgIHRoaXMuZmlsZSA9IHtcbiAgICAgIGRhdGE6IChlLnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50KS5maWxlcyFbMF0sXG4gICAgICBpblByb2dyZXNzOiBmYWxzZSxcbiAgICAgIHByb2dyZXNzOiAwLFxuICAgIH07XG5cbiAgICB0aGlzLnVwbG9hZCh0aGlzLmZpbGUpO1xuXG4gICAgLy8gcmVzZXQgaW5wdXQgdmFsdWVcbiAgICAoZS50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudCkudmFsdWUgPSAnJztcbiAgfVxuXG4gIG9uQmx1cigpIHtcbiAgICB0aGlzLm9uVG91Y2hlZCgpO1xuICB9XG5cbiAgb25DbGVhcigpIHtcbiAgICB0aGlzLnVybCA9ICcnO1xuXG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLnVybCk7XG4gICAgdGhpcy5vblRvdWNoZWQoKTtcblxuICAgIHRoaXMuZmlsZUNoYW5nZS5lbWl0KHRoaXMudXJsKTtcbiAgfVxufVxuIiwiPG1hdC1mb3JtLWZpZWxkPlxuICA8bWF0LWljb24gbWF0UHJlZml4IHN2Z0ljb249XCJsaW5rXCI+PC9tYXQtaWNvbj5cblxuICA8aW5wdXQgbWF0SW5wdXQgdHlwZT1cInRleHRcIiBbbmdNb2RlbF09XCJ1cmxcIiBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICAgW3BsYWNlaG9sZGVyXT1cImNvbmZpZy5wbGFjZWhvbGRlcnx8JydcIlxuICAgICAgICAgKGNoYW5nZSk9XCJvblVybENoYW5nZSgkZXZlbnQpXCIgKGJsdXIpPVwib25CbHVyKClcIj5cblxuICA8YnV0dG9uICpuZ0lmPVwidXJsXCIgbWF0U3VmZml4IG1hdC1pY29uLWJ1dHRvbiBjb2xvcj1cIndhcm5cIlxuICAgICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiIChjbGljayk9XCJvbkNsZWFyKClcIj5cbiAgICA8bWF0LWljb24gc3ZnSWNvbj1cImNsb3NlXCI+PC9tYXQtaWNvbj5cbiAgPC9idXR0b24+XG48L21hdC1mb3JtLWZpZWxkPlxuXG48ZmlndXJlIGNsYXNzPVwiZ3VpLWZpbGUtY29udGVudFwiPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwidXJsXCIgW25nU3dpdGNoXT1cInR5cGVcIj5cbiAgICA8aW1nICpuZ1N3aXRjaENhc2U9XCInaW1hZ2UnXCIgW3NyY109XCJ1cmxcIj5cblxuICAgIDx2aWRlbyAqbmdTd2l0Y2hDYXNlPVwiJ3ZpZGVvJ1wiIFtzcmNdPVwidXJsXCI+PC92aWRlbz5cblxuICAgIDxhdWRpbyAqbmdTd2l0Y2hDYXNlPVwiJ2F1ZGlvJ1wiIFtzcmNdPVwidXJsXCIgY29udHJvbHM+PC9hdWRpbz5cblxuICAgIDxtYXQtaWNvbiAqbmdTd2l0Y2hEZWZhdWx0IHN2Z0ljb249XCJmaWxlX291dGxpbmVcIj48L21hdC1pY29uPlxuICA8L25nLWNvbnRhaW5lcj5cblxuICA8ZGl2ICpuZ0lmPVwiIXVybFwiIGNsYXNzPVwiZ3VpLWZpbGUtcGxhY2Vob2xkZXJcIj5cbiAgICA8bWF0LWljb24gc3ZnSWNvbj1cImZpbGVfdXBsb2FkXCI+PC9tYXQtaWNvbj5cbiAgPC9kaXY+XG5cbiAgPGlucHV0ICNmaWxlSW5wdXQgdHlwZT1cImZpbGVcIiBbYWNjZXB0XT1cImFjY2VwdFwiIFtuYW1lXT1cIm5hbWVcIiB0YWJpbmRleD1cIi0xXCJcbiAgICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiIChjaGFuZ2UpPVwib25GaWxlQ2hhbmdlKCRldmVudClcIj5cbjwvZmlndXJlPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsZS11cGxvYWRlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2d1aS9maWxlLXVwbG9hZGVyL2ZpbGUtdXBsb2FkZXIudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9ndWkvZmlsZS11cGxvYWRlci9maWxlLXVwbG9hZGVyLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFxQixZQUFZLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN2RSxPQUFPLEVBQ0wsdUJBQXVCLEVBRXZCLFNBQVMsRUFFVCxZQUFZLEVBQ1osS0FBSyxFQUVMLE1BQU0sRUFFTixTQUFTLEVBQ1QsaUJBQWlCLEVBQ2pCLFVBQVUsR0FDWCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQXdCLGlCQUFpQixFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDekUsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUMxQixPQUFPLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7Ozs7QUE2QnRELE1BQU0sT0FBTyxlQUFlO0lBb0IxQixZQUNVLGVBQXNDLEVBQ3RDLEdBQXNCO1FBRHRCLG9CQUFlLEdBQWYsZUFBZSxDQUF1QjtRQUN0QyxRQUFHLEdBQUgsR0FBRyxDQUFtQjtRQW5CdkIsV0FBTSxHQUF3QixFQUFFLENBQUM7UUFDakMsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixTQUFJLEdBQW1CLEdBQUcsQ0FBQztRQUMzQixTQUFJLEdBQUcsRUFBRSxDQUFDO1FBQ1YsV0FBTSxHQUFHLEVBQUUsQ0FBQztRQUVYLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO1FBRWxELFlBQVk7UUFDWixRQUFHLEdBQUcsRUFBRSxDQUFDO1FBS0QsYUFBUSxHQUE0QixHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDN0MsY0FBUyxHQUFlLEdBQUcsRUFBRSxHQUFFLENB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Q0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxHQUFHLEdBQUcsRUFBRSxDQUFDO1FBRWQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDeEIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBRWpCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNqQyxDQUFDOzhHQTlHVSxlQUFlO2tHQUFmLGVBQWUsb09BUmY7WUFDVDtnQkFDRSxPQUFPLEVBQUUsaUJBQWlCO2dCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQztnQkFDOUMsS0FBSyxFQUFFLElBQUk7YUFDWjtTQUNGLHVKQzVDSCxpbENBK0JBOzsyRkRlYSxlQUFlO2tCQWpCM0IsU0FBUzsrQkFDRSxtQkFBbUIsUUFHdkI7d0JBQ0osS0FBSyxFQUFFLG1CQUFtQjtxQkFDM0IsaUJBQ2MsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTSxhQUNwQzt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxnQkFBZ0IsQ0FBQzs0QkFDOUMsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7NElBR3VCLFNBQVM7c0JBQWhDLFNBQVM7dUJBQUMsV0FBVztnQkFFYixNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSHR0cEVycm9yUmVzcG9uc2UsIEh0dHBSZXNwb25zZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIE91dHB1dCxcbiAgU2ltcGxlQ2hhbmdlcyxcbiAgVmlld0NoaWxkLFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgZm9yd2FyZFJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBvZiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgY2F0Y2hFcnJvciwgZmluYWxpemUgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBHdWlGaWxlVXBsb2FkZXJDb25maWcgfSBmcm9tICcuL2ZpbGUtdXBsb2FkZXItY29uZmlnJztcbmltcG9ydCB7IEd1aUNvbnRyb2wgfSBmcm9tICcuLi9pbnRlcmZhY2UnO1xuXG5leHBvcnQgdHlwZSBGaWxlVXBsb2FkVHlwZSA9ICdpbWFnZScgfCAndmlkZW8nIHwgJ2F1ZGlvJyB8ICcqJztcblxuZXhwb3J0IGludGVyZmFjZSBGaWxlVXBsb2FkQ29udGVudCB7XG4gIGRhdGE6IEZpbGU7XG4gIHByb2dyZXNzOiBudW1iZXI7XG4gIGluUHJvZ3Jlc3M6IGJvb2xlYW47XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2d1aS1maWxlLXVwbG9hZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2ZpbGUtdXBsb2FkZXIuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2ZpbGUtdXBsb2FkZXIuc2NzcyddLFxuICBob3N0OiB7XG4gICAgY2xhc3M6ICdndWktZmlsZS11cGxvYWRlcicsXG4gIH0sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEd1aUZpbGVVcGxvYWRlciksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBHdWlGaWxlVXBsb2FkZXIgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciwgT25DaGFuZ2VzIHtcbiAgQFZpZXdDaGlsZCgnZmlsZUlucHV0JykgZmlsZUlucHV0ITogRWxlbWVudFJlZjxIVE1MSW5wdXRFbGVtZW50PjtcblxuICBASW5wdXQoKSBjb25maWc6IFBhcnRpYWw8R3VpQ29udHJvbD4gPSB7fTtcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgdHlwZTogRmlsZVVwbG9hZFR5cGUgPSAnKic7XG4gIEBJbnB1dCgpIG5hbWUgPSAnJztcbiAgQElucHV0KCkgYWNjZXB0ID0gJyc7XG5cbiAgQE91dHB1dCgpIGZpbGVDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICAvLyBtZWRpYSBzcmNcbiAgdXJsID0gJyc7XG5cbiAgLy8gZmlsZSB0byB1cGxvYWRcbiAgZmlsZSE6IEZpbGVVcGxvYWRDb250ZW50O1xuXG4gIHByaXZhdGUgb25DaGFuZ2U6ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkID0gKCkgPT4ge307XG4gIHByaXZhdGUgb25Ub3VjaGVkOiAoKSA9PiB2b2lkID0gKCkgPT4ge307XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBmaWxlVXBsb2FkZXJDZmc6IEd1aUZpbGVVcGxvYWRlckNvbmZpZyxcbiAgICBwcml2YXRlIGNkcjogQ2hhbmdlRGV0ZWN0b3JSZWZcbiAgKSB7fVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICBpZiAoY2hhbmdlc1sndHlwZSddKSB7XG4gICAgICB0aGlzLmFjY2VwdCA9IHRoaXMudHlwZSArICcvKic7XG4gICAgfVxuICB9XG5cbiAgd3JpdGVWYWx1ZSh2YWx1ZTogc3RyaW5nKSB7XG4gICAgdGhpcy51cmwgPSB2YWx1ZTtcbiAgICB0aGlzLmNkci5tYXJrRm9yQ2hlY2soKTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkKSB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHZvaWQpIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICB9XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKSB7XG4gICAgdGhpcy5kaXNhYmxlZCA9IGlzRGlzYWJsZWQ7XG4gICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gIH1cblxuICB1cGxvYWQoZmlsZTogRmlsZVVwbG9hZENvbnRlbnQpIHtcbiAgICBjb25zdCBmb3JtRGF0YSA9IG5ldyBGb3JtRGF0YSgpO1xuICAgIGZvcm1EYXRhLmFwcGVuZCgnZmlsZScsIGZpbGUuZGF0YSB8fCAnJyk7XG5cbiAgICBmaWxlLmluUHJvZ3Jlc3MgPSB0cnVlO1xuXG4gICAgdGhpcy5maWxlVXBsb2FkZXJDZmdcbiAgICAgIC51cGxvYWQoZm9ybURhdGEpXG4gICAgICAucGlwZShcbiAgICAgICAgY2F0Y2hFcnJvcigoZXJyb3I6IEh0dHBFcnJvclJlc3BvbnNlKSA9PiB7XG4gICAgICAgICAgZmlsZS5pblByb2dyZXNzID0gZmFsc2U7XG4gICAgICAgICAgcmV0dXJuIG9mKGAke2ZpbGUuZGF0YT8ubmFtZSB8fCAnRmlsZSd9IHVwbG9hZCBmYWlsZWQuYCk7XG4gICAgICAgIH0pLFxuICAgICAgICBmaW5hbGl6ZSgoKSA9PiB7fSlcbiAgICAgIClcbiAgICAgIC5zdWJzY3JpYmUocmVzID0+IHtcbiAgICAgICAgaWYgKHJlcyBpbnN0YW5jZW9mIEh0dHBSZXNwb25zZSAmJiByZXMuYm9keSkge1xuICAgICAgICAgIHRoaXMudXJsID0gcmVzLmJvZHkuZGF0YTtcblxuICAgICAgICAgIHRoaXMub25DaGFuZ2UodGhpcy51cmwpO1xuICAgICAgICAgIHRoaXMub25Ub3VjaGVkKCk7XG5cbiAgICAgICAgICB0aGlzLmZpbGVDaGFuZ2UuZW1pdCh0aGlzLnVybCk7XG4gICAgICAgIH1cblxuICAgICAgICB0aGlzLmNkci5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgICB9KTtcbiAgfVxuXG4gIG9uVXJsQ2hhbmdlKGU6IEV2ZW50KSB7XG4gICAgdGhpcy51cmwgPSAoZS50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudCkudmFsdWU7XG5cbiAgICB0aGlzLm9uQ2hhbmdlKHRoaXMudXJsKTtcblxuICAgIHRoaXMuZmlsZUNoYW5nZS5lbWl0KHRoaXMudXJsKTtcbiAgfVxuXG4gIG9uRmlsZUNoYW5nZShlOiBFdmVudCkge1xuICAgIHRoaXMuZmlsZSA9IHtcbiAgICAgIGRhdGE6IChlLnRhcmdldCBhcyBIVE1MSW5wdXRFbGVtZW50KS5maWxlcyFbMF0sXG4gICAgICBpblByb2dyZXNzOiBmYWxzZSxcbiAgICAgIHByb2dyZXNzOiAwLFxuICAgIH07XG5cbiAgICB0aGlzLnVwbG9hZCh0aGlzLmZpbGUpO1xuXG4gICAgLy8gcmVzZXQgaW5wdXQgdmFsdWVcbiAgICAoZS50YXJnZXQgYXMgSFRNTElucHV0RWxlbWVudCkudmFsdWUgPSAnJztcbiAgfVxuXG4gIG9uQmx1cigpIHtcbiAgICB0aGlzLm9uVG91Y2hlZCgpO1xuICB9XG5cbiAgb25DbGVhcigpIHtcbiAgICB0aGlzLnVybCA9ICcnO1xuXG4gICAgdGhpcy5vbkNoYW5nZSh0aGlzLnVybCk7XG4gICAgdGhpcy5vblRvdWNoZWQoKTtcblxuICAgIHRoaXMuZmlsZUNoYW5nZS5lbWl0KHRoaXMudXJsKTtcbiAgfVxufVxuIiwiPG1hdC1mb3JtLWZpZWxkPlxuICA8bWF0LWljb24gbWF0UHJlZml4IHN2Z0ljb249XCJsaW5rXCI+PC9tYXQtaWNvbj5cblxuICA8aW5wdXQgbWF0SW5wdXQgdHlwZT1cInRleHRcIiBbbmdNb2RlbF09XCJ1cmxcIiBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICAgW3BsYWNlaG9sZGVyXT1cImNvbmZpZy5wbGFjZWhvbGRlcnx8JydcIlxuICAgICAgICAgKGNoYW5nZSk9XCJvblVybENoYW5nZSgkZXZlbnQpXCIgKGJsdXIpPVwib25CbHVyKClcIj5cblxuICA8YnV0dG9uICpuZ0lmPVwidXJsXCIgbWF0U3VmZml4IG1hdC1pY29uLWJ1dHRvbiBjb2xvcj1cIndhcm5cIlxuICAgICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiIChjbGljayk9XCJvbkNsZWFyKClcIj5cbiAgICA8bWF0LWljb24gc3ZnSWNvbj1cImNsb3NlXCI+PC9tYXQtaWNvbj5cbiAgPC9idXR0b24+XG48L21hdC1mb3JtLWZpZWxkPlxuXG48ZmlndXJlIGNsYXNzPVwiZ3VpLWZpbGUtY29udGVudFwiPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwidXJsXCIgW25nU3dpdGNoXT1cInR5cGVcIj5cbiAgICA8aW1nICpuZ1N3aXRjaENhc2U9XCInaW1hZ2UnXCIgW3NyY109XCJ1cmxcIj5cblxuICAgIDx2aWRlbyAqbmdTd2l0Y2hDYXNlPVwiJ3ZpZGVvJ1wiIFtzcmNdPVwidXJsXCI+PC92aWRlbz5cblxuICAgIDxhdWRpbyAqbmdTd2l0Y2hDYXNlPVwiJ2F1ZGlvJ1wiIFtzcmNdPVwidXJsXCIgY29udHJvbHM+PC9hdWRpbz5cblxuICAgIDxtYXQtaWNvbiAqbmdTd2l0Y2hEZWZhdWx0IHN2Z0ljb249XCJmaWxlX291dGxpbmVcIj48L21hdC1pY29uPlxuICA8L25nLWNvbnRhaW5lcj5cblxuICA8ZGl2ICpuZ0lmPVwiIXVybFwiIGNsYXNzPVwiZ3VpLWZpbGUtcGxhY2Vob2xkZXJcIj5cbiAgICA8bWF0LWljb24gc3ZnSWNvbj1cImZpbGVfdXBsb2FkXCI+PC9tYXQtaWNvbj5cbiAgPC9kaXY+XG5cbiAgPGlucHV0ICNmaWxlSW5wdXQgdHlwZT1cImZpbGVcIiBbYWNjZXB0XT1cImFjY2VwdFwiIFtuYW1lXT1cIm5hbWVcIlxuICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCIgKGNoYW5nZSk9XCJvbkZpbGVDaGFuZ2UoJGV2ZW50KVwiPlxuPC9maWd1cmU+XG4iXX0=

package/esm2022/fill/fill.mjs

@@ -40,7 +40,7 @@ export class GuiFill {
                 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:24px;height:24px}.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 .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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.MtxColorpicker, selector: "mtx-colorpicker", inputs: ["content", "disabled", "xPosition", "yPosition", "restoreFocus", "opened", "color", "format"], outputs: ["opened", "closed"], exportAs: ["mtxColorpicker"] }, { kind: "directive", type: i5.MtxColorpickerInput, selector: "input[mtxColorpicker]", inputs: ["mtxColorpicker", "disabled", "value", "format"], outputs: ["colorChange", "colorInput"], exportAs: ["mtxColorpickerInput"] }, { kind: "component", type: i5.MtxColorpickerToggle, selector: "mtx-colorpicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["mtxColorpickerToggle"] }, { kind: "component", type: i6.GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], ngImport: i0, template: "<mat-form-field>\n  <ng-container matPrefix>\n    <span class=\"gui-color-block-empty\"></span>\n    <span class=\"gui-color-block\" [style]=\"{background: value}\"></span>\n  </ng-container>\n  <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:inline-block;width:24px;height:24px}.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-color-block:after{display:inline-block;width:100%;height:100%;border:1px solid currentColor;border-top-left-radius:var(--mdc-filled-text-field-container-shape);border-bottom-left-radius:var(--mdc-filled-text-field-container-shape);opacity:.12;content:\"\"}[dir=rtl] .gui-color-block:after{border-radius:0;border-top-right-radius:var(--mdc-filled-text-field-container-shape);border-bottom-right-radius:var(--mdc-filled-text-field-container-shape)}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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.MtxColorpicker, selector: "mtx-colorpicker", inputs: ["content", "disabled", "xPosition", "yPosition", "restoreFocus", "opened", "color", "format"], outputs: ["opened", "closed"], exportAs: ["mtxColorpicker"] }, { kind: "directive", type: i5.MtxColorpickerInput, selector: "input[mtxColorpicker]", inputs: ["mtxColorpicker", "disabled", "value", "format"], outputs: ["colorChange", "colorInput"], exportAs: ["mtxColorpickerInput"] }, { kind: "component", type: i5.MtxColorpickerToggle, selector: "mtx-colorpicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["mtxColorpickerToggle"] }, { kind: "component", type: i6.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,
@@ -52,7 +52,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                             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:24px;height:24px}.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 .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"] }]
+                    ], template: "<mat-form-field>\n  <ng-container matPrefix>\n    <span class=\"gui-color-block-empty\"></span>\n    <span class=\"gui-color-block\" [style]=\"{background: value}\"></span>\n  </ng-container>\n  <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:inline-block;width:24px;height:24px}.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-color-block:after{display:inline-block;width:100%;height:100%;border:1px solid currentColor;border-top-left-radius:var(--mdc-filled-text-field-container-shape);border-bottom-left-radius:var(--mdc-filled-text-field-container-shape);opacity:.12;content:\"\"}[dir=rtl] .gui-color-block:after{border-radius:0;border-top-right-radius:var(--mdc-filled-text-field-container-shape);border-bottom-right-radius:var(--mdc-filled-text-field-container-shape)}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], disabled: [{

package/esm2022/gui-form.mjs

@@ -211,13 +211,13 @@ export class GuiForm {
         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 [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, '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: 32px;--mat-expansion-header-expanded-state-height: 32px;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)}[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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i5.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: i7.GuiInputText, selector: "gui-input-text", inputs: ["config", "disabled"] }, { kind: "component", type: i8.GuiInputNumber, selector: "gui-input-number", inputs: ["config", "disabled"] }, { kind: "component", type: i9.GuiSelect, selector: "gui-select", inputs: ["config", "disabled"] }, { kind: "component", type: i10.GuiSwitch, selector: "gui-switch", inputs: ["config", "disabled"] }, { kind: "component", type: i11.GuiSlider, selector: "gui-slider", inputs: ["config", "disabled"] }, { kind: "component", type: i12.GuiButtonToggle, selector: "gui-button-toggle", inputs: ["config", "disabled"] }, { kind: "component", type: i13.GuiFill, selector: "gui-fill", inputs: ["config", "disabled"] }, { kind: "component", type: i14.GuiFieldGroup, selector: "gui-field-group", inputs: ["config"] }, { kind: "component", type: i15.GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: i16.GuiInlineGroup, selector: "gui-inline-group", inputs: ["config"] }, { kind: "component", type: i17.GuiImageSelect, selector: "gui-image-select", inputs: ["config", "disabled"] }, { kind: "component", type: i18.GuiTextarea, selector: "gui-textarea", inputs: ["config", "disabled"] }, { kind: "component", type: i19.GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }, { kind: "directive", type: i20.GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "pipe", type: i20.GuiEjsPipe, name: "ejs" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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 [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, '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: 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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i5.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i5.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: i7.GuiInputText, selector: "gui-input-text", inputs: ["config", "disabled"] }, { kind: "component", type: i8.GuiInputNumber, selector: "gui-input-number", inputs: ["config", "disabled"] }, { kind: "component", type: i9.GuiSelect, selector: "gui-select", inputs: ["config", "disabled"] }, { kind: "component", type: i10.GuiSwitch, selector: "gui-switch", inputs: ["config", "disabled"] }, { kind: "component", type: i11.GuiSlider, selector: "gui-slider", inputs: ["config", "disabled"] }, { kind: "component", type: i12.GuiButtonToggle, selector: "gui-button-toggle", inputs: ["config", "disabled"] }, { kind: "component", type: i13.GuiFill, selector: "gui-fill", inputs: ["config", "disabled"] }, { kind: "component", type: i14.GuiFieldGroup, selector: "gui-field-group", inputs: ["config"] }, { kind: "component", type: i15.GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: i16.GuiInlineGroup, selector: "gui-inline-group", inputs: ["config"] }, { kind: "component", type: i17.GuiImageSelect, selector: "gui-image-select", inputs: ["config", "disabled"] }, { kind: "component", type: i18.GuiTextarea, selector: "gui-textarea", inputs: ["config", "disabled"] }, { kind: "component", type: i19.GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }, { kind: "directive", type: i20.GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "pipe", type: i20.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\" [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, '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: 32px;--mat-expansion-header-expanded-state-height: 32px;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)}[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"] }]
+                    }, 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\" [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, '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: 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: [{
                 type: Input
             }], config: [{

package/esm2022/textarea/textarea.mjs

@@ -39,7 +39,7 @@ export class GuiTextarea {
                 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.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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.GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], 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: [".gui-textarea .mat-mdc-text-field-wrapper{padding:0}.gui-textarea .mat-mdc-form-field-textarea-control{padding:0 8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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.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,
@@ -51,7 +51,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
                             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" }]
+                    ], 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: [".gui-textarea .mat-mdc-text-field-wrapper{padding:0}.gui-textarea .mat-mdc-form-field-textarea-control{padding:0 8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
                 type: Input
             }], disabled: [{