@acrodata/gui 2.0.0 → 2.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/esm2022/button-toggle/icon.mjs +3 -3
- package/esm2022/field-group/field-group.mjs +3 -3
- package/esm2022/file-uploader/file-uploader.mjs +3 -3
- package/esm2022/gui-form.mjs +3 -3
- package/esm2022/gui-utils.mjs +1 -2
- package/esm2022/icon-button-wrapper/icon-button-wrapper.mjs +3 -3
- package/esm2022/inline-group/inline-group.mjs +3 -3
- package/esm2022/interface.mjs +1 -1
- package/fesm2022/acrodata-gui.mjs +12 -13
- package/fesm2022/acrodata-gui.mjs.map +1 -1
- package/gui-form.scss +10 -0
- package/icon-button-wrapper/icon-button-wrapper.scss +2 -0
- package/interface.d.ts +2 -6
- package/package.json +1 -1
|
@@ -42,7 +42,6 @@ import { MatOption } from '@angular/material/core';
|
|
|
42
42
|
*
|
|
43
43
|
*/
|
|
44
44
|
function ejsTmpl(str, data) {
|
|
45
|
-
// eslint-disable-next-line @typescript-eslint/no-implied-eval
|
|
46
45
|
const fn = new Function('obj', 'var p=[],print=function(){p.push.apply(p,arguments);};' +
|
|
47
46
|
// Introduce the data as local variables using with(){}
|
|
48
47
|
'with(obj){p.push("' +
|
|
@@ -163,7 +162,7 @@ class GuiIcon {
|
|
|
163
162
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
164
163
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiIcon, isStandalone: true, selector: "gui-icon", inputs: { src: "src" }, host: { classAttribute: "gui-icon" }, ngImport: i0, template: `
|
|
165
164
|
@if (isUrl()) {
|
|
166
|
-
<img [src]="src" />
|
|
165
|
+
<img [src]="src" alt="" />
|
|
167
166
|
} @else {
|
|
168
167
|
<i [class]="src"></i>
|
|
169
168
|
}
|
|
@@ -173,7 +172,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
173
172
|
type: Component,
|
|
174
173
|
args: [{ selector: 'gui-icon', template: `
|
|
175
174
|
@if (isUrl()) {
|
|
176
|
-
<img [src]="src" />
|
|
175
|
+
<img [src]="src" alt="" />
|
|
177
176
|
} @else {
|
|
178
177
|
<i [class]="src"></i>
|
|
179
178
|
}
|
|
@@ -260,26 +259,26 @@ class GuiFieldGroup {
|
|
|
260
259
|
});
|
|
261
260
|
}
|
|
262
261
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFieldGroup, deps: [{ token: i0.KeyValueDiffers }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
263
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiFieldGroup, isStandalone: true, selector: "gui-field-group", inputs: { config: "config" }, host: { classAttribute: "gui-field-group" }, ngImport: i0, template: "@if (config.parentType!=='inline' && config.name) {\n <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content
|
|
262
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiFieldGroup, isStandalone: true, selector: "gui-field-group", inputs: { config: "config" }, host: { classAttribute: "gui-field-group" }, ngImport: i0, template: "@if (config.parentType!=='inline' && config.name) {\n <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content />\n", styles: [".gui-field-group{display:flex;padding:.25rem .5rem}.gui-field{--mat-form-field-container-text-size: .75rem;display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}.gui-field .mat-mdc-text-field-wrapper,.gui-field .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 .5rem;border-radius:var(--mdc-filled-text-field-container-shape)}[dir=rtl] .gui-field .mat-mdc-text-field-wrapper,[dir=rtl] .gui-field .mat-mdc-form-field-hint-wrapper{padding:0 .5rem}.gui-field .mat-mdc-form-field-infix{min-height:auto;padding:0!important}.gui-field .mat-mdc-form-field-hint-spacer,.gui-field .mat-mdc-form-field-bottom-align:before,.gui-field .mdc-line-ripple{display:none}\n"], dependencies: [{ kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
264
263
|
}
|
|
265
264
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFieldGroup, decorators: [{
|
|
266
265
|
type: Component,
|
|
267
266
|
args: [{ selector: 'gui-field-group', host: {
|
|
268
267
|
class: 'gui-field-group',
|
|
269
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [GuiFieldLabel], template: "@if (config.parentType!=='inline' && config.name) {\n <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content
|
|
268
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [GuiFieldLabel], template: "@if (config.parentType!=='inline' && config.name) {\n <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content />\n", styles: [".gui-field-group{display:flex;padding:.25rem .5rem}.gui-field{--mat-form-field-container-text-size: .75rem;display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}.gui-field .mat-mdc-text-field-wrapper,.gui-field .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 .5rem;border-radius:var(--mdc-filled-text-field-container-shape)}[dir=rtl] .gui-field .mat-mdc-text-field-wrapper,[dir=rtl] .gui-field .mat-mdc-form-field-hint-wrapper{padding:0 .5rem}.gui-field .mat-mdc-form-field-infix{min-height:auto;padding:0!important}.gui-field .mat-mdc-form-field-hint-spacer,.gui-field .mat-mdc-form-field-bottom-align:before,.gui-field .mdc-line-ripple{display:none}\n"] }]
|
|
270
269
|
}], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i0.ChangeDetectorRef }], propDecorators: { config: [{
|
|
271
270
|
type: Input
|
|
272
271
|
}] } });
|
|
273
272
|
|
|
274
273
|
class GuiIconButtonWrapper {
|
|
275
274
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiIconButtonWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
276
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: GuiIconButtonWrapper, isStandalone: true, selector: "gui-icon-button-wrapper", host: { classAttribute: "gui-icon-button-wrapper" }, ngImport: i0, template: "<ng-content
|
|
275
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: GuiIconButtonWrapper, isStandalone: true, selector: "gui-icon-button-wrapper", host: { classAttribute: "gui-icon-button-wrapper" }, ngImport: i0, template: "<ng-content />\n", styles: [".gui-icon-button-wrapper{line-height:1}.gui-icon-button-wrapper .mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 1.5rem;--mdc-icon-button-icon-size: .875rem;padding:0}.gui-icon-button-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size)}.gui-icon-button-wrapper .mat-icon{display:inline-flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem}.gui-icon-button-wrapper .mat-icon svg{width:.875rem;height:.875rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
277
276
|
}
|
|
278
277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiIconButtonWrapper, decorators: [{
|
|
279
278
|
type: Component,
|
|
280
279
|
args: [{ selector: 'gui-icon-button-wrapper', standalone: true, host: {
|
|
281
280
|
class: 'gui-icon-button-wrapper',
|
|
282
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content
|
|
281
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content />\n", styles: [".gui-icon-button-wrapper{line-height:1}.gui-icon-button-wrapper .mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 1.5rem;--mdc-icon-button-icon-size: .875rem;padding:0}.gui-icon-button-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{width:var(--mdc-icon-button-state-layer-size);height:var(--mdc-icon-button-state-layer-size)}.gui-icon-button-wrapper .mat-icon{display:inline-flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem}.gui-icon-button-wrapper .mat-icon svg{width:.875rem;height:.875rem}\n"] }]
|
|
283
282
|
}] });
|
|
284
283
|
|
|
285
284
|
class GuiFileUploaderConfig {
|
|
@@ -477,7 +476,7 @@ class GuiFileUploader {
|
|
|
477
476
|
useExisting: forwardRef(() => GuiFileUploader),
|
|
478
477
|
multi: true,
|
|
479
478
|
},
|
|
480
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n <gui-icon-button-wrapper matPrefix>\n <mat-icon svgIcon=\"link\" />\n </gui-icon-button-wrapper>\n\n <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n @if (url) {\n <gui-icon-button-wrapper matSuffix>\n <button mat-icon-button color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n <mat-icon svgIcon=\"clear\" />\n </button>\n </gui-icon-button-wrapper>\n }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n @if (url) {\n @switch (type) {\n @case ('image') {\n <img [src]=\"url\" />\n }\n @case ('video') {\n <video [src]=\"url\"></video>\n }\n @case ('audio') {\n <audio [src]=\"url\" controls></audio>\n }\n @default {\n <mat-icon svgIcon=\"file\" />\n }\n }\n } @else {\n <div class=\"gui-file-placeholder\">\n <mat-icon svgIcon=\"upload\" />\n </div>\n }\n\n <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\"\n [disabled]=\"disabled\" (change)=\"onFileChange($event)\">\n</figure>\n\n@if (config.parentType==='inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
479
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n <gui-icon-button-wrapper matPrefix>\n <mat-icon svgIcon=\"link\" />\n </gui-icon-button-wrapper>\n\n <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n @if (url) {\n <gui-icon-button-wrapper matSuffix>\n <button mat-icon-button color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n <mat-icon svgIcon=\"clear\" />\n </button>\n </gui-icon-button-wrapper>\n }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n @if (url) {\n @switch (type) {\n @case ('image') {\n <img [src]=\"url\" alt=\"\" />\n }\n @case ('video') {\n <video [src]=\"url\"></video>\n }\n @case ('audio') {\n <audio [src]=\"url\" controls></audio>\n }\n @default {\n <mat-icon svgIcon=\"file\" />\n }\n }\n } @else {\n <div class=\"gui-file-placeholder\">\n <mat-icon svgIcon=\"upload\" />\n </div>\n }\n\n <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\"\n [disabled]=\"disabled\" (change)=\"onFileChange($event)\">\n</figure>\n\n@if (config.parentType==='inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
481
480
|
}
|
|
482
481
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiFileUploader, decorators: [{
|
|
483
482
|
type: Component,
|
|
@@ -500,7 +499,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
500
499
|
MatHint,
|
|
501
500
|
GuiFieldLabel,
|
|
502
501
|
GuiIconButtonWrapper,
|
|
503
|
-
], template: "<mat-form-field>\n <gui-icon-button-wrapper matPrefix>\n <mat-icon svgIcon=\"link\" />\n </gui-icon-button-wrapper>\n\n <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n @if (url) {\n <gui-icon-button-wrapper matSuffix>\n <button mat-icon-button color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n <mat-icon svgIcon=\"clear\" />\n </button>\n </gui-icon-button-wrapper>\n }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n @if (url) {\n @switch (type) {\n @case ('image') {\n <img [src]=\"url\" />\n }\n @case ('video') {\n <video [src]=\"url\"></video>\n }\n @case ('audio') {\n <audio [src]=\"url\" controls></audio>\n }\n @default {\n <mat-icon svgIcon=\"file\" />\n }\n }\n } @else {\n <div class=\"gui-file-placeholder\">\n <mat-icon svgIcon=\"upload\" />\n </div>\n }\n\n <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\"\n [disabled]=\"disabled\" (change)=\"onFileChange($event)\">\n</figure>\n\n@if (config.parentType==='inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"] }]
|
|
502
|
+
], template: "<mat-form-field>\n <gui-icon-button-wrapper matPrefix>\n <mat-icon svgIcon=\"link\" />\n </gui-icon-button-wrapper>\n\n <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n @if (url) {\n <gui-icon-button-wrapper matSuffix>\n <button mat-icon-button color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n <mat-icon svgIcon=\"clear\" />\n </button>\n </gui-icon-button-wrapper>\n }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n @if (url) {\n @switch (type) {\n @case ('image') {\n <img [src]=\"url\" alt=\"\" />\n }\n @case ('video') {\n <video [src]=\"url\"></video>\n }\n @case ('audio') {\n <audio [src]=\"url\" controls></audio>\n }\n @default {\n <mat-icon svgIcon=\"file\" />\n }\n }\n } @else {\n <div class=\"gui-file-placeholder\">\n <mat-icon svgIcon=\"upload\" />\n </div>\n }\n\n <input #fileInput type=\"file\" [accept]=\"accept\" [name]=\"name\"\n [disabled]=\"disabled\" (change)=\"onFileChange($event)\">\n</figure>\n\n@if (config.parentType==='inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto}.gui-file-uploader .mat-mdc-form-field{width:100%}.gui-file-uploader .gui-file-content{position:relative;display:flex;align-items:center;justify-content:center;height:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"] }]
|
|
504
503
|
}], ctorParameters: () => [{ type: GuiFileUploaderConfig }, { type: i0.ChangeDetectorRef }, { type: GuiIconsRegistry }], propDecorators: { fileInput: [{
|
|
505
504
|
type: ViewChild,
|
|
506
505
|
args: ['fileInput']
|
|
@@ -659,13 +658,13 @@ class GuiInlineGroup {
|
|
|
659
658
|
this.config = {};
|
|
660
659
|
}
|
|
661
660
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiInlineGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
662
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiInlineGroup, isStandalone: true, selector: "gui-inline-group", inputs: { config: "config" }, host: { classAttribute: "gui-inline-group" }, ngImport: i0, template: "@if (config.name) {\n <gui-field-label [config]=\"config\" />\n}\n<div class=\"gui-inline-group-content\">\n <ng-content
|
|
661
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiInlineGroup, isStandalone: true, selector: "gui-inline-group", inputs: { config: "config" }, host: { classAttribute: "gui-inline-group" }, ngImport: i0, template: "@if (config.name) {\n <gui-field-label [config]=\"config\" />\n}\n<div class=\"gui-inline-group-content\">\n <ng-content />\n</div>\n", styles: [".gui-inline-group{display:flex;padding:.25rem .5rem}.gui-inline-group mat-hint{width:100%;line-height:var(--mat-form-field-subscript-text-line-height);-webkit-font-smoothing:antialiased}.gui-inline-group-content{display:inline-flex;flex:1;flex-flow:row wrap;margin:0 -.25rem}.gui-inline-group-content>.gui-field-group,.gui-inline-group-content>.gui-inline-group,.gui-inline-group-content>.mat-expansion-panel,.gui-inline-group-content>.gui-menu{width:100%;padding:0 .25rem}\n"], dependencies: [{ kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
663
662
|
}
|
|
664
663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiInlineGroup, decorators: [{
|
|
665
664
|
type: Component,
|
|
666
665
|
args: [{ selector: 'gui-inline-group', host: {
|
|
667
666
|
class: 'gui-inline-group',
|
|
668
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [GuiFieldLabel], template: "@if (config.name) {\n <gui-field-label [config]=\"config\" />\n}\n<div class=\"gui-inline-group-content\">\n <ng-content
|
|
667
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [GuiFieldLabel], template: "@if (config.name) {\n <gui-field-label [config]=\"config\" />\n}\n<div class=\"gui-inline-group-content\">\n <ng-content />\n</div>\n", styles: [".gui-inline-group{display:flex;padding:.25rem .5rem}.gui-inline-group mat-hint{width:100%;line-height:var(--mat-form-field-subscript-text-line-height);-webkit-font-smoothing:antialiased}.gui-inline-group-content{display:inline-flex;flex:1;flex-flow:row wrap;margin:0 -.25rem}.gui-inline-group-content>.gui-field-group,.gui-inline-group-content>.gui-inline-group,.gui-inline-group-content>.mat-expansion-panel,.gui-inline-group-content>.gui-menu{width:100%;padding:0 .25rem}\n"] }]
|
|
669
668
|
}], propDecorators: { config: [{
|
|
670
669
|
type: Input
|
|
671
670
|
}] } });
|
|
@@ -1243,7 +1242,7 @@ class GuiForm {
|
|
|
1243
1242
|
tabs.mode = mode;
|
|
1244
1243
|
}
|
|
1245
1244
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiForm, deps: [{ token: GuiIconsRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1246
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiForm, isStandalone: true, selector: "gui-form", inputs: { form: "form", config: "config", model: "model" }, outputs: { modelChange: "modelChange" }, host: { properties: { "attr.id": "uid" }, classAttribute: "gui-form" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n @for (item of formFields; track item) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\">\n </ng-template>\n </div>\n }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n @if (item.show) {\n <ng-container [formGroup]=\"form\">\n @switch (item.type) {\n @case ('text') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('number') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('select') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('switch') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('slider') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('buttonToggle') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('fill') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('file') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('image') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('video') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('audio') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('imageSelect') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n </gui-field-group>\n }\n @case ('textarea') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('hidden') {\n <input type=\"hidden\" [formControlName]=\"item.key\">\n }\n @case ('inline') {\n <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n @for (child of item.children; track child) {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n </ng-template>\n }\n </gui-inline-group>\n }\n @case ('group') {\n <mat-expansion-panel [formGroupName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @for (child of item.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n </ng-template>\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('tabs') {\n <mat-expansion-panel [formArrayName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n <!-- Show operation buttons when panel opened -->\n @if (item.expanded) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'normal')\">\n <mat-icon svgIcon=\"horizontal\" />\n </button>\n <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'list')\">\n <mat-icon svgIcon=\"vertical\" />\n </button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n }\n </gui-icon-button-wrapper>\n }\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @if (item.mode!=='list') {\n <!-- Horizontal mode -->\n <mat-tab-group class=\"gui-tabs\" disableRipple\n [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n @for (tab of item.children; track tab; let i = $index) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <div>{{tab.name | ejs:{i} }}</div>\n </ng-template>\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n </ng-template>\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n </ng-template>\n </div>\n }\n }\n </mat-tab>\n }\n </mat-tab-group>\n } @else {\n <!-- Vertical mode -->\n <div class=\"gui-list\">\n @for (tab of item.children; track tab; let i = $index) {\n <div class=\"gui-list-item\"\n [class.gui-list-item-active]=\"item.selectedIndex===i\">\n <div class=\"gui-list-item-heading\">\n <span class=\"gui-list-item-title\"\n (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</span>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item, i)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n </gui-icon-button-wrapper>\n }\n </div>\n <div class=\"gui-list-item-content\">\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n </ng-template>\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n </ng-template>\n </div>\n }\n }\n </div>\n </div>\n }\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('menu') {\n <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n @for (menuChild of item.children; track menuChild) {\n <mat-tab [label]=\"menuChild.name\"\n [disabled]=\"menuChild.disabled\">\n <ng-template matTabContent>\n @if (menuChild.type==='menuItem') {\n <!-- Must wrap with div -->\n @for (controlItem of menuChild.children; track controlItem) {\n <div [formGroupName]=\"menuChild.key\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\">\n </ng-template>\n </div>\n }\n }\n <!-- Support for unlimited nesting -->\n @if (menuChild.type==='menu') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\">\n </ng-template>\n }\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n }\n }\n </ng-container>\n }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel{box-shadow:none!important}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{flex:1;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: .25rem;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: GuiFieldGroup, selector: "gui-field-group", inputs: ["config"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "component", type: GuiInputText, selector: "gui-input-text", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInputNumber, selector: "gui-input-number", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSelect, selector: "gui-select", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSwitch, selector: "gui-switch", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSlider, selector: "gui-slider", inputs: ["config", "disabled"] }, { kind: "component", type: GuiButtonToggle, selector: "gui-button-toggle", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFill, selector: "gui-fill", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }, { kind: "component", type: GuiImageSelect, selector: "gui-image-select", inputs: ["config", "disabled", "appendTo"] }, { kind: "component", type: GuiTextarea, selector: "gui-textarea", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInlineGroup, selector: "gui-inline-group", inputs: ["config"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1245
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: GuiForm, isStandalone: true, selector: "gui-form", inputs: { form: "form", config: "config", model: "model" }, outputs: { modelChange: "modelChange" }, host: { properties: { "attr.id": "uid" }, classAttribute: "gui-form" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n @for (item of formFields; track item) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\" />\n </div>\n }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n @if (item.show) {\n <ng-container [formGroup]=\"form\">\n @switch (item.type) {\n @case ('text') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('number') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('select') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('switch') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('slider') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('buttonToggle') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('fill') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('file') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('image') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('video') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('audio') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('imageSelect') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n </gui-field-group>\n }\n @case ('textarea') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('hidden') {\n <input type=\"hidden\" [formControlName]=\"item.key\">\n }\n @case ('inline') {\n <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n @for (child of item.children; track child) {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\" />\n }\n </gui-inline-group>\n }\n @case ('group') {\n <mat-expansion-panel [formGroupName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @for (child of item.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\" />\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('tabs') {\n <mat-expansion-panel [formArrayName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n <!-- Show operation buttons when panel opened -->\n @if (item.expanded) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'normal')\">\n <mat-icon svgIcon=\"horizontal\" />\n </button>\n <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'list')\">\n <mat-icon svgIcon=\"vertical\" />\n </button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n }\n </gui-icon-button-wrapper>\n }\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @if (item.mode!=='list') {\n <!-- Horizontal mode -->\n <mat-tab-group class=\"gui-tabs\" disableRipple\n [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n @for (tab of item.children; track tab; let i = $index) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <div>{{tab.name | ejs:{i} }}</div>\n </ng-template>\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\" />\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\" />\n </div>\n }\n }\n </mat-tab>\n }\n </mat-tab-group>\n } @else {\n <!-- Vertical mode -->\n <div class=\"gui-list\">\n @for (tab of item.children; track tab; let i = $index) {\n <div class=\"gui-list-item\"\n [class.gui-list-item-active]=\"item.selectedIndex===i\">\n <div class=\"gui-list-item-heading\">\n <button class=\"gui-list-item-title\"\n (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item, i)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n </gui-icon-button-wrapper>\n }\n </div>\n <div class=\"gui-list-item-content\">\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\" />\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\" />\n </div>\n }\n }\n </div>\n </div>\n }\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('menu') {\n <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n @for (menuChild of item.children; track menuChild) {\n <mat-tab [label]=\"menuChild.name\"\n [disabled]=\"menuChild.disabled\">\n <ng-template matTabContent>\n @if (menuChild.type==='menuItem') {\n <!-- Must wrap with div -->\n @for (controlItem of menuChild.children; track controlItem) {\n <div [formGroupName]=\"menuChild.key\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\" />\n </div>\n }\n }\n <!-- Support for unlimited nesting -->\n @if (menuChild.type==='menu') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\" />\n }\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n }\n }\n </ng-container>\n }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel{box-shadow:none!important}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: .25rem;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: GuiFieldGroup, selector: "gui-field-group", inputs: ["config"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "component", type: GuiInputText, selector: "gui-input-text", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInputNumber, selector: "gui-input-number", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSelect, selector: "gui-select", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSwitch, selector: "gui-switch", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSlider, selector: "gui-slider", inputs: ["config", "disabled"] }, { kind: "component", type: GuiButtonToggle, selector: "gui-button-toggle", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFill, selector: "gui-fill", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }, { kind: "component", type: GuiImageSelect, selector: "gui-image-select", inputs: ["config", "disabled", "appendTo"] }, { kind: "component", type: GuiTextarea, selector: "gui-textarea", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInlineGroup, selector: "gui-inline-group", inputs: ["config"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1247
1246
|
}
|
|
1248
1247
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: GuiForm, decorators: [{
|
|
1249
1248
|
type: Component,
|
|
@@ -1278,7 +1277,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
1278
1277
|
GuiFieldLabel,
|
|
1279
1278
|
GuiIconButtonWrapper,
|
|
1280
1279
|
GuiEjsPipe,
|
|
1281
|
-
], template: "<form [formGroup]=\"form\">\n @for (item of formFields; track item) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\">\n </ng-template>\n </div>\n }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n @if (item.show) {\n <ng-container [formGroup]=\"form\">\n @switch (item.type) {\n @case ('text') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('number') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('select') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('switch') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('slider') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('buttonToggle') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('fill') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('file') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('image') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('video') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('audio') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('imageSelect') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n </gui-field-group>\n }\n @case ('textarea') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('hidden') {\n <input type=\"hidden\" [formControlName]=\"item.key\">\n }\n @case ('inline') {\n <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n @for (child of item.children; track child) {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n </ng-template>\n }\n </gui-inline-group>\n }\n @case ('group') {\n <mat-expansion-panel [formGroupName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @for (child of item.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n </ng-template>\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('tabs') {\n <mat-expansion-panel [formArrayName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n <!-- Show operation buttons when panel opened -->\n @if (item.expanded) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'normal')\">\n <mat-icon svgIcon=\"horizontal\" />\n </button>\n <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'list')\">\n <mat-icon svgIcon=\"vertical\" />\n </button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n }\n </gui-icon-button-wrapper>\n }\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @if (item.mode!=='list') {\n <!-- Horizontal mode -->\n <mat-tab-group class=\"gui-tabs\" disableRipple\n [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n @for (tab of item.children; track tab; let i = $index) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <div>{{tab.name | ejs:{i} }}</div>\n </ng-template>\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n </ng-template>\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n </ng-template>\n </div>\n }\n }\n </mat-tab>\n }\n </mat-tab-group>\n } @else {\n <!-- Vertical mode -->\n <div class=\"gui-list\">\n @for (tab of item.children; track tab; let i = $index) {\n <div class=\"gui-list-item\"\n [class.gui-list-item-active]=\"item.selectedIndex===i\">\n <div class=\"gui-list-item-heading\">\n <span class=\"gui-list-item-title\"\n (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</span>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item, i)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n </gui-icon-button-wrapper>\n }\n </div>\n <div class=\"gui-list-item-content\">\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n </ng-template>\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n </ng-template>\n </div>\n }\n }\n </div>\n </div>\n }\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('menu') {\n <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n @for (menuChild of item.children; track menuChild) {\n <mat-tab [label]=\"menuChild.name\"\n [disabled]=\"menuChild.disabled\">\n <ng-template matTabContent>\n @if (menuChild.type==='menuItem') {\n <!-- Must wrap with div -->\n @for (controlItem of menuChild.children; track controlItem) {\n <div [formGroupName]=\"menuChild.key\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\">\n </ng-template>\n </div>\n }\n }\n <!-- Support for unlimited nesting -->\n @if (menuChild.type==='menu') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\">\n </ng-template>\n }\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n }\n }\n </ng-container>\n }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel{box-shadow:none!important}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{flex:1;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: .25rem;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"] }]
|
|
1280
|
+
], template: "<form [formGroup]=\"form\">\n @for (item of formFields; track item) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\" />\n </div>\n }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n @if (item.show) {\n <ng-container [formGroup]=\"form\">\n @switch (item.type) {\n @case ('text') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('number') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('select') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('switch') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('slider') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('buttonToggle') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('fill') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('file') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('image') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('video') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('audio') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('imageSelect') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n </gui-field-group>\n }\n @case ('textarea') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('hidden') {\n <input type=\"hidden\" [formControlName]=\"item.key\">\n }\n @case ('inline') {\n <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n @for (child of item.children; track child) {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\" />\n }\n </gui-inline-group>\n }\n @case ('group') {\n <mat-expansion-panel [formGroupName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @for (child of item.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\" />\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('tabs') {\n <mat-expansion-panel [formArrayName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n <!-- Show operation buttons when panel opened -->\n @if (item.expanded) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'normal')\">\n <mat-icon svgIcon=\"horizontal\" />\n </button>\n <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'list')\">\n <mat-icon svgIcon=\"vertical\" />\n </button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n }\n </gui-icon-button-wrapper>\n }\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @if (item.mode!=='list') {\n <!-- Horizontal mode -->\n <mat-tab-group class=\"gui-tabs\" disableRipple\n [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n @for (tab of item.children; track tab; let i = $index) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <div>{{tab.name | ejs:{i} }}</div>\n </ng-template>\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\" />\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\" />\n </div>\n }\n }\n </mat-tab>\n }\n </mat-tab-group>\n } @else {\n <!-- Vertical mode -->\n <div class=\"gui-list\">\n @for (tab of item.children; track tab; let i = $index) {\n <div class=\"gui-list-item\"\n [class.gui-list-item-active]=\"item.selectedIndex===i\">\n <div class=\"gui-list-item-heading\">\n <button class=\"gui-list-item-title\"\n (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item, i)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n </gui-icon-button-wrapper>\n }\n </div>\n <div class=\"gui-list-item-content\">\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\" />\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\" />\n </div>\n }\n }\n </div>\n </div>\n }\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('menu') {\n <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n @for (menuChild of item.children; track menuChild) {\n <mat-tab [label]=\"menuChild.name\"\n [disabled]=\"menuChild.disabled\">\n <ng-template matTabContent>\n @if (menuChild.type==='menuItem') {\n <!-- Must wrap with div -->\n @for (controlItem of menuChild.children; track controlItem) {\n <div [formGroupName]=\"menuChild.key\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\" />\n </div>\n }\n }\n <!-- Support for unlimited nesting -->\n @if (menuChild.type==='menu') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\" />\n }\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n }\n }\n </ng-container>\n }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel{box-shadow:none!important}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: .25rem;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"] }]
|
|
1282
1281
|
}], ctorParameters: () => [{ type: GuiIconsRegistry }], propDecorators: { form: [{
|
|
1283
1282
|
type: Input
|
|
1284
1283
|
}], config: [{
|