@acrodata/gui 0.2.0 → 0.2.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/esm2022/file-uploader/file-uploader.mjs +10 -7
- package/esm2022/gui-form.mjs +3 -3
- package/esm2022/image-select/image-select.mjs +3 -3
- package/esm2022/interface.mjs +1 -1
- package/esm2022/slider/slider.mjs +3 -3
- package/fesm2022/acrodata-gui.mjs +15 -12
- package/fesm2022/acrodata-gui.mjs.map +1 -1
- package/file-uploader/file-uploader.d.ts +4 -2
- package/file-uploader/file-uploader.scss +1 -1
- package/gui-form.scss +2 -2
- package/image-select/image-select.scss +1 -1
- package/interface.d.ts +1 -1
- package/package.json +1 -1
|
@@ -54,7 +54,7 @@ export class GuiSlider {
|
|
|
54
54
|
useExisting: forwardRef(() => GuiSlider),
|
|
55
55
|
multi: true,
|
|
56
56
|
},
|
|
57
|
-
], ngImport: i0, template: "<!-- \u666E\u901A\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode!=='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onValueChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u533A\u95F4\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode==='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\">\n <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"minValue\"\n [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"maxValue\"\n [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u5E95\u90E8\u6807\u7B7E -->\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: 12px;--mdc-slider-handle-height: 12px;--mdc-slider-inactive-track-height: 2px;--mdc-slider-active-track-height: 2px;flex:3;min-width:auto;height:calc(var(--mdc-slider-handle-width) * 2);margin:0 calc(var(--mdc-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mdc-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mdc-slider-handle-width) * -1);width:calc(var(--mdc-slider-handle-width) * 2);height:calc(var(--mdc-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:6px}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}.gui-slider .mat-mdc-form-field-hint{width:100%;padding:0 8px;line-height:var(--mat-form-field-subscript-text-line-height)}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i5.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i5.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: i6.GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
57
|
+
], ngImport: i0, template: "<!-- \u666E\u901A\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode!=='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onValueChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u533A\u95F4\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode==='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\">\n <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"minValue\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"maxValue\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u5E95\u90E8\u6807\u7B7E -->\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: 12px;--mdc-slider-handle-height: 12px;--mdc-slider-inactive-track-height: 2px;--mdc-slider-active-track-height: 2px;flex:3;min-width:auto;height:calc(var(--mdc-slider-handle-width) * 2);margin:0 calc(var(--mdc-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mdc-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mdc-slider-handle-width) * -1);width:calc(var(--mdc-slider-handle-width) * 2);height:calc(var(--mdc-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:6px}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}.gui-slider .mat-mdc-form-field-hint{width:100%;padding:0 8px;line-height:var(--mat-form-field-subscript-text-line-height)}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i5.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i5.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: i6.GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
58
58
|
}
|
|
59
59
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiSlider, decorators: [{
|
|
60
60
|
type: Component,
|
|
@@ -66,10 +66,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
|
|
|
66
66
|
useExisting: forwardRef(() => GuiSlider),
|
|
67
67
|
multi: true,
|
|
68
68
|
},
|
|
69
|
-
], template: "<!-- \u666E\u901A\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode!=='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onValueChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u533A\u95F4\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode==='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\">\n <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"minValue\"\n [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"maxValue\"\n [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u5E95\u90E8\u6807\u7B7E -->\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: 12px;--mdc-slider-handle-height: 12px;--mdc-slider-inactive-track-height: 2px;--mdc-slider-active-track-height: 2px;flex:3;min-width:auto;height:calc(var(--mdc-slider-handle-width) * 2);margin:0 calc(var(--mdc-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mdc-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mdc-slider-handle-width) * -1);width:calc(var(--mdc-slider-handle-width) * 2);height:calc(var(--mdc-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:6px}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}.gui-slider .mat-mdc-form-field-hint{width:100%;padding:0 8px;line-height:var(--mat-form-field-subscript-text-line-height)}\n"] }]
|
|
69
|
+
], template: "<!-- \u666E\u901A\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode!=='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onValueChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u533A\u95F4\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode==='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\">\n <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"minValue\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"maxValue\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u5E95\u90E8\u6807\u7B7E -->\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: 12px;--mdc-slider-handle-height: 12px;--mdc-slider-inactive-track-height: 2px;--mdc-slider-active-track-height: 2px;flex:3;min-width:auto;height:calc(var(--mdc-slider-handle-width) * 2);margin:0 calc(var(--mdc-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mdc-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mdc-slider-handle-width) * -1);width:calc(var(--mdc-slider-handle-width) * 2);height:calc(var(--mdc-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:6px}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}.gui-slider .mat-mdc-form-field-hint{width:100%;padding:0 8px;line-height:var(--mat-form-field-subscript-text-line-height)}\n"] }]
|
|
70
70
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
|
|
71
71
|
type: Input
|
|
72
72
|
}], disabled: [{
|
|
73
73
|
type: Input
|
|
74
74
|
}] } });
|
|
75
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
75
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZ3VpL3NsaWRlci9zbGlkZXIudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9ndWkvc2xpZGVyL3NsaWRlci5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFFdkIsU0FBUyxFQUNULFVBQVUsRUFDVixLQUFLLEVBQ0wsaUJBQWlCLEdBQ2xCLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBd0IsaUJBQWlCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7QUFvQnpFLE1BQU0sT0FBTyxTQUFTO0lBYXBCLFlBQW9CLEdBQXNCO1FBQXRCLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBWmpDLFdBQU0sR0FBd0IsRUFBRSxDQUFDO1FBQ2pDLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFRbEIsYUFBUSxHQUF1QyxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7UUFDeEQsY0FBUyxHQUFlLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUVJLENBQUM7SUFFOUMsVUFBVSxDQUFDLEtBQWE7UUFDdEIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7UUFDbkIsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1FBQ3JCLElBQUksQ0FBQyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQXNDO1FBQ3JELElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFjO1FBQzlCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxVQUFtQjtRQUNsQyxJQUFJLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztRQUMzQixJQUFJLENBQUMsR0FBRyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFFRCxhQUFhO1FBQ1gsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDNUIsQ0FBQztJQUVELG1CQUFtQjtRQUNqQixJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDckIsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3ZCLENBQUM7SUFFRCxrQkFBa0I7UUFDaEIsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzVDLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUN2QixDQUFDO0lBRUQsYUFBYTtRQUNYLElBQUksS0FBSyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDN0IsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDO1lBQzlCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUMvQjtJQUNILENBQUM7OEdBckRVLFNBQVM7a0dBQVQsU0FBUywySUFSVDtZQUNUO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsU0FBUyxDQUFDO2dCQUN4QyxLQUFLLEVBQUUsSUFBSTthQUNaO1NBQ0YsMEJDMUJILGc1RUE2REE7OzJGRGpDYSxTQUFTO2tCQWpCckIsU0FBUzsrQkFDRSxZQUFZLFFBR2hCO3dCQUNKLEtBQUssRUFBRSxzQkFBc0I7cUJBQzlCLGlCQUNjLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sYUFDcEM7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsVUFBVSxDQUFDOzRCQUN4QyxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjt3R0FHUSxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBmb3J3YXJkUmVmLFxuICBJbnB1dCxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgR3VpQ29udHJvbCB9IGZyb20gJy4uL2ludGVyZmFjZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2d1aS1zbGlkZXInLFxuICB0ZW1wbGF0ZVVybDogJy4vc2xpZGVyLmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9zbGlkZXIuc2NzcyddLFxuICBob3N0OiB7XG4gICAgY2xhc3M6ICdndWktZmllbGQgZ3VpLXNsaWRlcicsXG4gIH0sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEd1aVNsaWRlciksXG4gICAgICBtdWx0aTogdHJ1ZSxcbiAgICB9LFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBHdWlTbGlkZXIgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIEBJbnB1dCgpIGNvbmZpZzogUGFydGlhbDxHdWlDb250cm9sPiA9IHt9O1xuICBASW5wdXQoKSBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gIHZhbHVlITogbnVtYmVyIHwgbnVtYmVyW107XG5cbiAgLy8gVGhlIGlucHV0IGJpbmRpbmcgdmFsdWUgZm9yIHJhbmdlIHNsaWRlclxuICBtaW5WYWx1ZSE6IG51bWJlcjtcbiAgbWF4VmFsdWUhOiBudW1iZXI7XG5cbiAgcHJpdmF0ZSBvbkNoYW5nZTogKHZhbHVlOiBudW1iZXIgfCBudW1iZXJbXSkgPT4gdm9pZCA9ICgpID0+IHt9O1xuICBwcml2YXRlIG9uVG91Y2hlZDogKCkgPT4gdm9pZCA9ICgpID0+IHt9O1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgY2RyOiBDaGFuZ2VEZXRlY3RvclJlZikge31cblxuICB3cml0ZVZhbHVlKHZhbHVlOiBudW1iZXIpIHtcbiAgICB0aGlzLnZhbHVlID0gdmFsdWU7XG4gICAgdGhpcy5zZXRJbnB1dFZhbHVlKCk7XG4gICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gIH1cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiAodmFsdWU6IG51bWJlciB8IG51bWJlcltdKSA9PiB2b2lkKSB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHZvaWQpIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICB9XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKSB7XG4gICAgdGhpcy5kaXNhYmxlZCA9IGlzRGlzYWJsZWQ7XG4gICAgdGhpcy5jZHIubWFya0ZvckNoZWNrKCk7XG4gIH1cblxuICBvblZhbHVlQ2hhbmdlKCkge1xuICAgIHRoaXMub25DaGFuZ2UodGhpcy52YWx1ZSk7XG4gIH1cblxuICBvblJhbmdlU2xpZGVyQ2hhbmdlKCkge1xuICAgIHRoaXMuc2V0SW5wdXRWYWx1ZSgpO1xuICAgIHRoaXMub25WYWx1ZUNoYW5nZSgpO1xuICB9XG5cbiAgb25SYW5nZUlucHV0Q2hhbmdlKCkge1xuICAgIHRoaXMudmFsdWUgPSBbdGhpcy5taW5WYWx1ZSwgdGhpcy5tYXhWYWx1ZV07XG4gICAgdGhpcy5vblZhbHVlQ2hhbmdlKCk7XG4gIH1cblxuICBzZXRJbnB1dFZhbHVlKCkge1xuICAgIGlmIChBcnJheS5pc0FycmF5KHRoaXMudmFsdWUpKSB7XG4gICAgICB0aGlzLm1pblZhbHVlID0gdGhpcy52YWx1ZVswXTtcbiAgICAgIHRoaXMubWF4VmFsdWUgPSB0aGlzLnZhbHVlWzFdO1xuICAgIH1cbiAgfVxufVxuIiwiPCEtLSDmma7pgJrmu5HlnZcgLS0+XG48bmctY29udGFpbmVyICpuZ0lmPVwiY29uZmlnLm1vZGUhPT0ncmFuZ2UnXCI+XG4gIDxtYXQtc2xpZGVyIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICAgICAgICAgIFtzdGVwXT1cImNvbmZpZy5zdGVwXCJcbiAgICAgICAgICAgICAgW21pbl09XCJjb25maWcubWluXCJcbiAgICAgICAgICAgICAgW21heF09XCJjb25maWcubWF4XCI+XG4gICAgPGlucHV0IG1hdFNsaWRlclRodW1iIFsobmdNb2RlbCldPVwidmFsdWVcIiAodmFsdWVDaGFuZ2UpPVwib25WYWx1ZUNoYW5nZSgpXCI+XG4gIDwvbWF0LXNsaWRlcj5cbiAgPG1hdC1mb3JtLWZpZWxkPlxuICAgIDxzcGFuICpuZ0lmPVwiY29uZmlnLnByZWZpeFwiIG1hdFByZWZpeD57e2NvbmZpZy5wcmVmaXh9fTwvc3Bhbj5cbiAgICA8aW5wdXQgbWF0SW5wdXQgdHlwZT1cIm51bWJlclwiXG4gICAgICAgICAgIFsobmdNb2RlbCldPVwidmFsdWVcIlxuICAgICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICAgICBbcGxhY2Vob2xkZXJdPVwiY29uZmlnLnBsYWNlaG9sZGVyfHwnJ1wiXG4gICAgICAgICAgIFtzdGVwXT1cImNvbmZpZy5zdGVwXCJcbiAgICAgICAgICAgW21pbl09XCJjb25maWcubWluIVwiXG4gICAgICAgICAgIFttYXhdPVwiY29uZmlnLm1heCFcIlxuICAgICAgICAgICAoY2hhbmdlKT1cIm9uVmFsdWVDaGFuZ2UoKVwiPlxuICAgIDxzcGFuICpuZ0lmPVwiY29uZmlnLnN1ZmZpeFwiIG1hdFN1ZmZpeD57e2NvbmZpZy5zdWZmaXh9fTwvc3Bhbj5cbiAgPC9tYXQtZm9ybS1maWVsZD5cbjwvbmctY29udGFpbmVyPlxuXG48IS0tIOWMuumXtOa7keWdlyAtLT5cbjxuZy1jb250YWluZXIgKm5nSWY9XCJjb25maWcubW9kZT09PSdyYW5nZSdcIj5cbiAgPG1hdC1zbGlkZXIgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgICAgICAgICAgW3N0ZXBdPVwiY29uZmlnLnN0ZXBcIlxuICAgICAgICAgICAgICBbbWluXT1cImNvbmZpZy5taW5cIlxuICAgICAgICAgICAgICBbbWF4XT1cImNvbmZpZy5tYXhcIj5cbiAgICA8aW5wdXQgbWF0U2xpZGVyU3RhcnRUaHVtYiBbKG5nTW9kZWwpXT1cIm1pblZhbHVlXCIgKHZhbHVlQ2hhbmdlKT1cIm9uUmFuZ2VJbnB1dENoYW5nZSgpXCI+XG4gICAgPGlucHV0IG1hdFNsaWRlckVuZFRodW1iIFsobmdNb2RlbCldPVwibWF4VmFsdWVcIiAodmFsdWVDaGFuZ2UpPVwib25SYW5nZUlucHV0Q2hhbmdlKClcIj5cbiAgPC9tYXQtc2xpZGVyPlxuICA8bWF0LWZvcm0tZmllbGQ+XG4gICAgPHNwYW4gKm5nSWY9XCJjb25maWcucHJlZml4XCIgbWF0UHJlZml4Pnt7Y29uZmlnLnByZWZpeH19PC9zcGFuPlxuICAgIDxpbnB1dCBtYXRJbnB1dCB0eXBlPVwibnVtYmVyXCJcbiAgICAgICAgICAgWyhuZ01vZGVsKV09XCJtaW5WYWx1ZVwiXG4gICAgICAgICAgIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICAgICAgIFtwbGFjZWhvbGRlcl09XCJjb25maWcucGxhY2Vob2xkZXJ8fCcnXCJcbiAgICAgICAgICAgW3N0ZXBdPVwiY29uZmlnLnN0ZXBcIlxuICAgICAgICAgICBbbWluXT1cImNvbmZpZy5taW4hXCJcbiAgICAgICAgICAgW21heF09XCJjb25maWcubWF4IVwiXG4gICAgICAgICAgIChjaGFuZ2UpPVwib25SYW5nZUlucHV0Q2hhbmdlKClcIj5cbiAgICA8c3BhbiAqbmdJZj1cImNvbmZpZy5zdWZmaXhcIiBtYXRTdWZmaXg+e3tjb25maWcuc3VmZml4fX08L3NwYW4+XG4gIDwvbWF0LWZvcm0tZmllbGQ+XG4gIDxtYXQtZm9ybS1maWVsZD5cbiAgICA8c3BhbiAqbmdJZj1cImNvbmZpZy5wcmVmaXhcIiBtYXRQcmVmaXg+e3tjb25maWcucHJlZml4fX08L3NwYW4+XG4gICAgPGlucHV0IG1hdElucHV0IHR5cGU9XCJudW1iZXJcIlxuICAgICAgICAgICBbKG5nTW9kZWwpXT1cIm1heFZhbHVlXCJcbiAgICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgICAgICAgW3BsYWNlaG9sZGVyXT1cImNvbmZpZy5wbGFjZWhvbGRlcnx8JydcIlxuICAgICAgICAgICBbc3RlcF09XCJjb25maWcuc3RlcFwiXG4gICAgICAgICAgIFttaW5dPVwiY29uZmlnLm1pbiFcIlxuICAgICAgICAgICBbbWF4XT1cImNvbmZpZy5tYXghXCJcbiAgICAgICAgICAgKGNoYW5nZSk9XCJvblJhbmdlSW5wdXRDaGFuZ2UoKVwiPlxuICAgIDxzcGFuICpuZ0lmPVwiY29uZmlnLnN1ZmZpeFwiIG1hdFN1ZmZpeD57e2NvbmZpZy5zdWZmaXh9fTwvc3Bhbj5cbiAgPC9tYXQtZm9ybS1maWVsZD5cbjwvbmctY29udGFpbmVyPlxuXG48IS0tIOW6lemDqOagh+etviAtLT5cbjxtYXQtaGludCAqbmdJZj1cImNvbmZpZy5wYXJlbnRUeXBlPT09J2lubGluZSdcIj5cbiAgPGd1aS1maWVsZC1sYWJlbCBbY29uZmlnXT1cImNvbmZpZ1wiPjwvZ3VpLWZpZWxkLWxhYmVsPlxuPC9tYXQtaGludD5cbiJdfQ==
|
|
@@ -391,7 +391,7 @@ class GuiSlider {
|
|
|
391
391
|
useExisting: forwardRef(() => GuiSlider),
|
|
392
392
|
multi: true,
|
|
393
393
|
},
|
|
394
|
-
], ngImport: i0, template: "<!-- \u666E\u901A\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode!=='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onValueChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u533A\u95F4\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode==='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\">\n <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"minValue\"\n [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"maxValue\"\n [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u5E95\u90E8\u6807\u7B7E -->\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: 12px;--mdc-slider-handle-height: 12px;--mdc-slider-inactive-track-height: 2px;--mdc-slider-active-track-height: 2px;flex:3;min-width:auto;height:calc(var(--mdc-slider-handle-width) * 2);margin:0 calc(var(--mdc-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mdc-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mdc-slider-handle-width) * -1);width:calc(var(--mdc-slider-handle-width) * 2);height:calc(var(--mdc-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:6px}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}.gui-slider .mat-mdc-form-field-hint{width:100%;padding:0 8px;line-height:var(--mat-form-field-subscript-text-line-height)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i5$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i5$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
394
|
+
], ngImport: i0, template: "<!-- \u666E\u901A\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode!=='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onValueChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u533A\u95F4\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode==='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\">\n <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"minValue\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"maxValue\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u5E95\u90E8\u6807\u7B7E -->\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: 12px;--mdc-slider-handle-height: 12px;--mdc-slider-inactive-track-height: 2px;--mdc-slider-active-track-height: 2px;flex:3;min-width:auto;height:calc(var(--mdc-slider-handle-width) * 2);margin:0 calc(var(--mdc-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mdc-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mdc-slider-handle-width) * -1);width:calc(var(--mdc-slider-handle-width) * 2);height:calc(var(--mdc-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:6px}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}.gui-slider .mat-mdc-form-field-hint{width:100%;padding:0 8px;line-height:var(--mat-form-field-subscript-text-line-height)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i2$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i5$1.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i5$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
395
395
|
}
|
|
396
396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiSlider, decorators: [{
|
|
397
397
|
type: Component,
|
|
@@ -403,7 +403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
|
|
|
403
403
|
useExisting: forwardRef(() => GuiSlider),
|
|
404
404
|
multi: true,
|
|
405
405
|
},
|
|
406
|
-
], template: "<!-- \u666E\u901A\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode!=='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onValueChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u533A\u95F4\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode==='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\">\n <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"minValue\"\n [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"maxValue\"\n [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u5E95\u90E8\u6807\u7B7E -->\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: 12px;--mdc-slider-handle-height: 12px;--mdc-slider-inactive-track-height: 2px;--mdc-slider-active-track-height: 2px;flex:3;min-width:auto;height:calc(var(--mdc-slider-handle-width) * 2);margin:0 calc(var(--mdc-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mdc-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mdc-slider-handle-width) * -1);width:calc(var(--mdc-slider-handle-width) * 2);height:calc(var(--mdc-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:6px}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}.gui-slider .mat-mdc-form-field-hint{width:100%;padding:0 8px;line-height:var(--mat-form-field-subscript-text-line-height)}\n"] }]
|
|
406
|
+
], template: "<!-- \u666E\u901A\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode!=='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onValueChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u533A\u95F4\u6ED1\u5757 -->\n<ng-container *ngIf=\"config.mode==='range'\">\n <mat-slider [disabled]=\"disabled\"\n [step]=\"config.step\"\n [min]=\"config.min\"\n [max]=\"config.max\">\n <input matSliderStartThumb [(ngModel)]=\"minValue\" (valueChange)=\"onRangeInputChange()\">\n <input matSliderEndThumb [(ngModel)]=\"maxValue\" (valueChange)=\"onRangeInputChange()\">\n </mat-slider>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"minValue\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n <mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <input matInput type=\"number\"\n [(ngModel)]=\"maxValue\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n [step]=\"config.step\"\n [min]=\"config.min!\"\n [max]=\"config.max!\"\n (change)=\"onRangeInputChange()\">\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n </mat-form-field>\n</ng-container>\n\n<!-- \u5E95\u90E8\u6807\u7B7E -->\n<mat-hint *ngIf=\"config.parentType==='inline'\">\n <gui-field-label [config]=\"config\"></gui-field-label>\n</mat-hint>\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: 12px;--mdc-slider-handle-height: 12px;--mdc-slider-inactive-track-height: 2px;--mdc-slider-active-track-height: 2px;flex:3;min-width:auto;height:calc(var(--mdc-slider-handle-width) * 2);margin:0 calc(var(--mdc-slider-handle-width) / 2)}.gui-slider .mat-mdc-slider+.mat-mdc-form-field{flex:2}.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field,.gui-slider .mat-mdc-slider.mdc-slider--range+.mat-mdc-form-field+.mat-mdc-form-field{flex:1.5}.gui-slider .mat-mdc-slider .mdc-slider__input{top:0;height:calc(var(--mdc-slider-handle-width) * 2)}.gui-slider .mat-mdc-slider .mdc-slider__thumb{left:calc(var(--mdc-slider-handle-width) * -1);width:calc(var(--mdc-slider-handle-width) * 2);height:calc(var(--mdc-slider-handle-width) * 2);border-radius:50%;overflow:hidden}.gui-slider .mat-mdc-form-field{margin-left:6px}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}.gui-slider .mat-mdc-form-field-hint{width:100%;padding:0 8px;line-height:var(--mat-form-field-subscript-text-line-height)}\n"] }]
|
|
407
407
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
|
|
408
408
|
type: Input
|
|
409
409
|
}], disabled: [{
|
|
@@ -615,7 +615,7 @@ class GuiImageSelect {
|
|
|
615
615
|
useExisting: forwardRef(() => GuiImageSelect),
|
|
616
616
|
multi: true,
|
|
617
617
|
},
|
|
618
|
-
], ngImport: i0, template: "<mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <mtx-select [items]=\"config.options||[]\" appendTo=\".gui-form\" bindValue=\"value\"\n [(ngModel)]=\"value\"\n (change)=\"onValueChange()\"\n (open)=\"onPanelOpened()\">\n <ng-template ng-label-tmp let-opt=\"item\">\n <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n <span>{{opt.label}}</span>\n </ng-template>\n <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n <span>{{opt.label}}</span>\n </ng-template>\n </mtx-select>\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n <mat-hint *ngIf=\"config.parentType==='inline'\">\n <gui-field-label [config]=\"config\"></gui-field-label>\n </mat-hint>\n</mat-form-field>\n", styles: [".gui-form .ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;width:120px;object-fit:contain;border-radius:4px;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select .ng-select{padding:0 8px;margin:0 -8px}.gui-image-select .ng-select .ng-value-container{height:64px}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:8px;height:100%;padding:8px 0}.gui-form .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:8px;height:64px;padding:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$4.MtxSelect, selector: "mtx-select", inputs: ["disabled", "addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "selectableGroup", "selectableGroupAsModel", "hideSelected", "isOpen", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "clearSearchOnAdd", "items", "value", "id", "placeholder", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: i4$4.MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4$4.MtxSelectLabelTemplate, selector: "[ng-label-tmp]" }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
618
|
+
], ngImport: i0, template: "<mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <mtx-select [items]=\"config.options||[]\" appendTo=\".gui-form\" bindValue=\"value\"\n [(ngModel)]=\"value\" [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n (change)=\"onValueChange()\"\n (open)=\"onPanelOpened()\">\n <ng-template ng-label-tmp let-opt=\"item\">\n <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n <span>{{opt.label}}</span>\n </ng-template>\n <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n <span>{{opt.label}}</span>\n </ng-template>\n </mtx-select>\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n <mat-hint *ngIf=\"config.parentType==='inline'\">\n <gui-field-label [config]=\"config\"></gui-field-label>\n </mat-hint>\n</mat-form-field>\n", styles: [".gui-form .ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:120px;object-fit:contain;border-radius:4px;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select .ng-select{padding:0 8px;margin:0 -8px}.gui-image-select .ng-select .ng-value-container{height:64px}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:8px;height:100%;padding:8px 0}.gui-form .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:8px;height:64px;padding:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$4.MtxSelect, selector: "mtx-select", inputs: ["disabled", "addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "selectableGroup", "selectableGroupAsModel", "hideSelected", "isOpen", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "clearSearchOnAdd", "items", "value", "id", "placeholder", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: i4$4.MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4$4.MtxSelectLabelTemplate, selector: "[ng-label-tmp]" }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
619
619
|
}
|
|
620
620
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiImageSelect, decorators: [{
|
|
621
621
|
type: Component,
|
|
@@ -627,7 +627,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
|
|
|
627
627
|
useExisting: forwardRef(() => GuiImageSelect),
|
|
628
628
|
multi: true,
|
|
629
629
|
},
|
|
630
|
-
], template: "<mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <mtx-select [items]=\"config.options||[]\" appendTo=\".gui-form\" bindValue=\"value\"\n [(ngModel)]=\"value\"\n (change)=\"onValueChange()\"\n (open)=\"onPanelOpened()\">\n <ng-template ng-label-tmp let-opt=\"item\">\n <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n <span>{{opt.label}}</span>\n </ng-template>\n <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n <span>{{opt.label}}</span>\n </ng-template>\n </mtx-select>\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n <mat-hint *ngIf=\"config.parentType==='inline'\">\n <gui-field-label [config]=\"config\"></gui-field-label>\n </mat-hint>\n</mat-form-field>\n", styles: [".gui-form .ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;width:120px;object-fit:contain;border-radius:4px;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select .ng-select{padding:0 8px;margin:0 -8px}.gui-image-select .ng-select .ng-value-container{height:64px}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:8px;height:100%;padding:8px 0}.gui-form .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:8px;height:64px;padding:8px}\n"] }]
|
|
630
|
+
], template: "<mat-form-field>\n <span *ngIf=\"config.prefix\" matPrefix>{{config.prefix}}</span>\n <mtx-select [items]=\"config.options||[]\" appendTo=\".gui-form\" bindValue=\"value\"\n [(ngModel)]=\"value\" [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder||''\"\n (change)=\"onValueChange()\"\n (open)=\"onPanelOpened()\">\n <ng-template ng-label-tmp let-opt=\"item\">\n <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n <span>{{opt.label}}</span>\n </ng-template>\n <ng-template ng-option-tmp let-opt=\"item\" let-index=\"index\" let-search=\"searchTerm\">\n <img [src]=\"opt.src\" [alt]=\"opt.label\" />\n <span>{{opt.label}}</span>\n </ng-template>\n </mtx-select>\n <span *ngIf=\"config.suffix\" matSuffix>{{config.suffix}}</span>\n <mat-hint *ngIf=\"config.parentType==='inline'\">\n <gui-field-label [config]=\"config\"></gui-field-label>\n </mat-hint>\n</mat-form-field>\n", styles: [".gui-form .ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:120px;object-fit:contain;border-radius:4px;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select .ng-select{padding:0 8px;margin:0 -8px}.gui-image-select .ng-select .ng-value-container{height:64px}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:8px;height:100%;padding:8px 0}.gui-form .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:8px;height:64px;padding:8px}\n"] }]
|
|
631
631
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { config: [{
|
|
632
632
|
type: Input
|
|
633
633
|
}], disabled: [{
|
|
@@ -722,10 +722,11 @@ class GuiFileUploader {
|
|
|
722
722
|
constructor(fileUploaderCfg, cdr) {
|
|
723
723
|
this.fileUploaderCfg = fileUploaderCfg;
|
|
724
724
|
this.cdr = cdr;
|
|
725
|
+
this.config = {};
|
|
726
|
+
this.disabled = false;
|
|
725
727
|
this.type = '*';
|
|
726
728
|
this.name = '';
|
|
727
729
|
this.accept = '';
|
|
728
|
-
this.disabled = false;
|
|
729
730
|
this.fileChange = new EventEmitter();
|
|
730
731
|
// media src
|
|
731
732
|
this.url = '';
|
|
@@ -796,13 +797,13 @@ class GuiFileUploader {
|
|
|
796
797
|
this.fileChange.emit(this.url);
|
|
797
798
|
}
|
|
798
799
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiFileUploader, deps: [{ token: GuiFileUploaderConfig }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
799
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiFileUploader, selector: "gui-file-uploader", inputs: { type: "type", name: "name", accept: "accept"
|
|
800
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.8", type: GuiFileUploader, selector: "gui-file-uploader", inputs: { config: "config", disabled: "disabled", type: "type", name: "name", accept: "accept" }, outputs: { fileChange: "fileChange" }, host: { classAttribute: "gui-file-uploader" }, providers: [
|
|
800
801
|
{
|
|
801
802
|
provide: NG_VALUE_ACCESSOR,
|
|
802
803
|
useExisting: forwardRef(() => GuiFileUploader),
|
|
803
804
|
multi: true,
|
|
804
805
|
},
|
|
805
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n <mat-icon matPrefix svgIcon=\"link\"></mat-icon>\n\n <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n <button *ngIf=\"url\" matSuffix mat-icon-button color=\"warn\"\n [disabled]=\"disabled\" (click)=\"onClear()\">\n <mat-icon svgIcon=\"close\"></mat-icon>\n </button>\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n <ng-container *ngIf=\"url\" [ngSwitch]=\"type\">\n <img *ngSwitchCase=\"'image'\" [src]=\"url\">\n\n <video *ngSwitchCase=\"'video'\" [src]=\"url\"></video>\n\n <audio *ngSwitchCase=\"'audio'\" [src]=\"url\" controls></audio>\n\n <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%;
|
|
806
|
+
], 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
806
807
|
}
|
|
807
808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiFileUploader, decorators: [{
|
|
808
809
|
type: Component,
|
|
@@ -814,18 +815,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImpor
|
|
|
814
815
|
useExisting: forwardRef(() => GuiFileUploader),
|
|
815
816
|
multi: true,
|
|
816
817
|
},
|
|
817
|
-
], template: "<mat-form-field>\n <mat-icon matPrefix svgIcon=\"link\"></mat-icon>\n\n <input matInput type=\"text\" [ngModel]=\"url\" [disabled]=\"disabled\"\n (change)=\"onUrlChange($event)\" (blur)=\"onBlur()\">\n\n <button *ngIf=\"url\" matSuffix mat-icon-button color=\"warn\"\n [disabled]=\"disabled\" (click)=\"onClear()\">\n <mat-icon svgIcon=\"close\"></mat-icon>\n </button>\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n <ng-container *ngIf=\"url\" [ngSwitch]=\"type\">\n <img *ngSwitchCase=\"'image'\" [src]=\"url\">\n\n <video *ngSwitchCase=\"'video'\" [src]=\"url\"></video>\n\n <audio *ngSwitchCase=\"'audio'\" [src]=\"url\" controls></audio>\n\n <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%;
|
|
818
|
+
], 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"] }]
|
|
818
819
|
}], ctorParameters: function () { return [{ type: GuiFileUploaderConfig }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { fileInput: [{
|
|
819
820
|
type: ViewChild,
|
|
820
821
|
args: ['fileInput']
|
|
822
|
+
}], config: [{
|
|
823
|
+
type: Input
|
|
824
|
+
}], disabled: [{
|
|
825
|
+
type: Input
|
|
821
826
|
}], type: [{
|
|
822
827
|
type: Input
|
|
823
828
|
}], name: [{
|
|
824
829
|
type: Input
|
|
825
830
|
}], accept: [{
|
|
826
831
|
type: Input
|
|
827
|
-
}], disabled: [{
|
|
828
|
-
type: Input
|
|
829
832
|
}], fileChange: [{
|
|
830
833
|
type: Output
|
|
831
834
|
}] } });
|
|
@@ -1019,13 +1022,13 @@ class GuiForm {
|
|
|
1019
1022
|
tabs.mode = mode;
|
|
1020
1023
|
}
|
|
1021
1024
|
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 }); }
|
|
1022
|
-
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\"></gui-file-uploader>\n </gui-field-group>\n <!-- Image -->\n <gui-field-group *ngSwitchCase=\"'image'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"image\" [formControlName]=\"item.key\"></gui-file-uploader>\n </gui-field-group>\n <!-- Video -->\n <gui-field-group *ngSwitchCase=\"'video'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"video\" [formControlName]=\"item.key\"></gui-file-uploader>\n </gui-field-group>\n <!-- Audio -->\n <gui-field-group *ngSwitchCase=\"'audio'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\"></gui-file-uploader>\n </gui-field-group>\n <!-- Image Select -->\n <gui-field-group *ngSwitchCase=\"'imageSelect'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-image-select [formControlName]=\"item.key\" [config]=\"item\"></gui-image-select>\n </gui-field-group>\n <!-- Textarea -->\n <gui-field-group *ngSwitchCase=\"'textarea'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-textarea [formControlName]=\"item.key\" [config]=\"item\"></gui-textarea>\n </gui-field-group>\n <!-- Hidden Input -->\n <input *ngSwitchCase=\"'hidden'\" type=\"hidden\" [formControlName]=\"item.key\">\n\n <!-- Inline Group -->\n <gui-inline-group *ngSwitchCase=\"'inline'\" [config]=\"item\" [formGroupName]=\"item.key\">\n <ng-container *ngFor=\"let child of item.children\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n </ng-template>\n </ng-container>\n </gui-inline-group>\n\n <!-- Group -->\n <mat-expansion-panel *ngSwitchCase=\"'group'\" [formGroupName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\"></gui-field-label>\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n <div *ngFor=\"let child of item.children\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n </ng-template>\n </div>\n </ng-template>\n </mat-expansion-panel>\n\n <!-- Tabs -->\n <mat-expansion-panel *ngSwitchCase=\"'tabs'\" [formArrayName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\"></gui-field-label>\n <!-- Show operation buttons after panel opened -->\n <ng-container *ngIf=\"item.expanded\">\n <button mat-icon-button (click)=\"changeTabsMode($event, item, 'nav')\"\n [color]=\"item.mode!=='list'?'primary':''\" type=\"button\">\n <mat-icon svgIcon=\"dots_horizontal\"></mat-icon>\n </button>\n <button mat-icon-button (click)=\"changeTabsMode($event, item, 'list')\"\n [color]=\"item.mode==='list'?'primary':''\" type=\"button\">\n <mat-icon svgIcon=\"dots_vertical\"></mat-icon>\n </button>\n <ng-container *ngIf=\"item.template && (item.addable || item.addable===undefined)\">\n <button mat-icon-button (click)=\"addTab($event, form.get(item.key), item)\"\n type=\"button\" [disabled]=\"item.disabled\">\n <mat-icon svgIcon=\"plus\"></mat-icon>\n </button>\n <button mat-icon-button (click)=\"removeTab($event, form.get(item.key), item)\"\n type=\"button\" [disabled]=\"item.disabled\">\n <mat-icon svgIcon=\"delete\"></mat-icon>\n </button>\n </ng-container>\n </ng-container>\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n <!-- Horizontal nav mode -->\n <mat-tab-group *ngIf=\"item.mode!=='list'\" class=\"gui-tabs\"\n [mat-stretch-tabs]=\"false\" disableRipple>\n <mat-tab *ngFor=\"let tab of item.children; index as i\" [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <div>{{tab.name | ejs:{i} }}</div>\n </ng-template>\n <!-- FormControl & FormArray -->\n <ng-container *ngIf=\"!tab.children || tab.children.length===0 || tab.type==='tabs'\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n </ng-template>\n </ng-container>\n <!-- FormGroup -->\n <ng-container *ngIf=\"tab.children?.length>0 && tab.type!=='tabs'\">\n <div *ngFor=\"let child of tab.children\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n </ng-template>\n </div>\n </ng-container>\n </mat-tab>\n </mat-tab-group>\n\n <!-- Vertical list mode -->\n <div class=\"gui-list\" *ngIf=\"item.mode==='list'\">\n <div class=\"gui-list-item\" *ngFor=\"let tab of item.children; index as i\">\n <div class=\"gui-list-item-heading\">\n <span class=\"gui-list-item-title\">{{tab.name | ejs:{i} }}</span>\n <ng-container *ngIf=\"item.template && (item.addable || item.addable===undefined)\">\n <button mat-icon-button (click)=\"addTab($event, form.get(item.key), item, i)\"\n type=\"button\" [disabled]=\"item.disabled\">\n <mat-icon svgIcon=\"plus\"></mat-icon>\n </button>\n <button mat-icon-button (click)=\"removeTab($event, form.get(item.key), item, i)\"\n type=\"button\" [disabled]=\"item.disabled\">\n <mat-icon svgIcon=\"delete\"></mat-icon>\n </button>\n </ng-container>\n </div>\n <div class=\"gui-list-item-content\">\n <!-- FormControl & FormArray -->\n <ng-container *ngIf=\"!tab.children || tab.children.length===0 || tab.type==='tabs'\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n </ng-template>\n </ng-container>\n <!-- FormGroup -->\n <ng-container *ngIf=\"tab.children?.length>0 && tab.type!=='tabs'\">\n <div *ngFor=\"let child of tab.children\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n </ng-template>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-template>\n </mat-expansion-panel>\n\n <!-- Menu -->\n <mat-tab-group class=\"gui-menu\" *ngSwitchCase=\"'menu'\" [formGroupName]=\"item.key\" disableRipple>\n <mat-tab *ngFor=\"let menuChild of item.children\" [label]=\"menuChild.name\"\n [disabled]=\"menuChild.disabled\">\n <ng-template matTabContent>\n <ng-container *ngIf=\"menuChild.type==='menuItem'\">\n <!-- Must wrap with div -->\n <div *ngFor=\"let controlItem of menuChild.children\" [formGroupName]=\"menuChild.key\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\">\n </ng-template>\n </div>\n </ng-container>\n <!-- Support for unlimited nesting -->\n <ng-container *ngIf=\"menuChild.type==='menu'\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\">\n </ng-template>\n </ng-container>\n </ng-template>\n </mat-tab>\n </mat-tab-group>\n\n </ng-container>\n</ng-template>\n", styles: [".gui-form{--mat-form-field-container-text-size: 12px;--mat-expansion-header-text-size: 12px;--mat-expansion-container-text-size: 12px;--mat-expansion-header-collapsed-state-height: 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:2px;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:2px}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;border-width:0;border-radius:var(--mdc-tab-indicator-active-indicator-shape);background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$3.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i5$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5$3.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i5$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i6.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: GuiInputText, selector: "gui-input-text", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInputNumber, selector: "gui-input-number", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSelect, selector: "gui-select", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSwitch, selector: "gui-switch", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSlider, selector: "gui-slider", inputs: ["config", "disabled"] }, { kind: "component", type: GuiButtonToggle, selector: "gui-button-toggle", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFill, selector: "gui-fill", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFieldGroup, selector: "gui-field-group", inputs: ["config"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiInlineGroup, selector: "gui-inline-group", inputs: ["config"] }, { kind: "component", type: GuiImageSelect, selector: "gui-image-select", inputs: ["config", "disabled"] }, { kind: "component", type: GuiTextarea, selector: "gui-textarea", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["type", "name", "accept", "disabled"], outputs: ["fileChange"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1025
|
+
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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: i1$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5$3.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i5$3.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i5$3.MatTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: i5$3.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple", "fitInkBarToContent", "mat-stretch-tabs"], exportAs: ["matTabGroup"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i6.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: GuiInputText, selector: "gui-input-text", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInputNumber, selector: "gui-input-number", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSelect, selector: "gui-select", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSwitch, selector: "gui-switch", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSlider, selector: "gui-slider", inputs: ["config", "disabled"] }, { kind: "component", type: GuiButtonToggle, selector: "gui-button-toggle", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFill, selector: "gui-fill", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFieldGroup, selector: "gui-field-group", inputs: ["config"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiInlineGroup, selector: "gui-inline-group", inputs: ["config"] }, { kind: "component", type: GuiImageSelect, selector: "gui-image-select", inputs: ["config", "disabled"] }, { kind: "component", type: GuiTextarea, selector: "gui-textarea", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1023
1026
|
}
|
|
1024
1027
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.8", ngImport: i0, type: GuiForm, decorators: [{
|
|
1025
1028
|
type: Component,
|
|
1026
1029
|
args: [{ selector: 'gui-form', host: {
|
|
1027
1030
|
class: 'gui-form',
|
|
1028
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<form [formGroup]=\"form\">\n <div *ngFor=\"let item of formFields\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\">\n </ng-template>\n </div>\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n <ng-container [ngSwitch]=\"item.type\" [formGroup]=\"form\">\n <!-- Text -->\n <gui-field-group *ngSwitchCase=\"'text'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-input-text [formControlName]=\"item.key\" [config]=\"item\"></gui-input-text>\n </gui-field-group>\n <!-- Number -->\n <gui-field-group *ngSwitchCase=\"'number'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-input-number [formControlName]=\"item.key\" [config]=\"item\"></gui-input-number>\n </gui-field-group>\n <!-- Select -->\n <gui-field-group *ngSwitchCase=\"'select'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-select [formControlName]=\"item.key\" [config]=\"item\"></gui-select>\n </gui-field-group>\n <!-- Switch -->\n <gui-field-group *ngSwitchCase=\"'switch'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-switch [formControlName]=\"item.key\" [config]=\"item\"></gui-switch>\n </gui-field-group>\n <!-- Slider -->\n <gui-field-group *ngSwitchCase=\"'slider'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-slider [formControlName]=\"item.key\" [config]=\"item\"></gui-slider>\n </gui-field-group>\n <!-- Button Toggle -->\n <gui-field-group *ngSwitchCase=\"'buttonToggle'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\"></gui-button-toggle>\n </gui-field-group>\n <!-- Fill -->\n <gui-field-group *ngSwitchCase=\"'fill'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-fill [formControlName]=\"item.key\" [config]=\"item\"></gui-fill>\n </gui-field-group>\n <!-- File -->\n <gui-field-group *ngSwitchCase=\"'file'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader [formControlName]=\"item.key\"></gui-file-uploader>\n </gui-field-group>\n <!-- Image -->\n <gui-field-group *ngSwitchCase=\"'image'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"image\" [formControlName]=\"item.key\"></gui-file-uploader>\n </gui-field-group>\n <!-- Video -->\n <gui-field-group *ngSwitchCase=\"'video'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"video\" [formControlName]=\"item.key\"></gui-file-uploader>\n </gui-field-group>\n <!-- Audio -->\n <gui-field-group *ngSwitchCase=\"'audio'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\"></gui-file-uploader>\n </gui-field-group>\n <!-- Image Select -->\n <gui-field-group *ngSwitchCase=\"'imageSelect'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-image-select [formControlName]=\"item.key\" [config]=\"item\"></gui-image-select>\n </gui-field-group>\n <!-- Textarea -->\n <gui-field-group *ngSwitchCase=\"'textarea'\" [config]=\"item\" [flex]=\"item.col\">\n <gui-textarea [formControlName]=\"item.key\" [config]=\"item\"></gui-textarea>\n </gui-field-group>\n <!-- Hidden Input -->\n <input *ngSwitchCase=\"'hidden'\" type=\"hidden\" [formControlName]=\"item.key\">\n\n <!-- Inline Group -->\n <gui-inline-group *ngSwitchCase=\"'inline'\" [config]=\"item\" [formGroupName]=\"item.key\">\n <ng-container *ngFor=\"let child of item.children\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n </ng-template>\n </ng-container>\n </gui-inline-group>\n\n <!-- Group -->\n <mat-expansion-panel *ngSwitchCase=\"'group'\" [formGroupName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\"></gui-field-label>\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n <div *ngFor=\"let child of item.children\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get(item.key)}\">\n </ng-template>\n </div>\n </ng-template>\n </mat-expansion-panel>\n\n <!-- Tabs -->\n <mat-expansion-panel *ngSwitchCase=\"'tabs'\" [formArrayName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\"></gui-field-label>\n <!-- Show operation buttons after panel opened -->\n <ng-container *ngIf=\"item.expanded\">\n <button mat-icon-button (click)=\"changeTabsMode($event, item, 'nav')\"\n [color]=\"item.mode!=='list'?'primary':''\" type=\"button\">\n <mat-icon svgIcon=\"dots_horizontal\"></mat-icon>\n </button>\n <button mat-icon-button (click)=\"changeTabsMode($event, item, 'list')\"\n [color]=\"item.mode==='list'?'primary':''\" type=\"button\">\n <mat-icon svgIcon=\"dots_vertical\"></mat-icon>\n </button>\n <ng-container *ngIf=\"item.template && (item.addable || item.addable===undefined)\">\n <button mat-icon-button (click)=\"addTab($event, form.get(item.key), item)\"\n type=\"button\" [disabled]=\"item.disabled\">\n <mat-icon svgIcon=\"plus\"></mat-icon>\n </button>\n <button mat-icon-button (click)=\"removeTab($event, form.get(item.key), item)\"\n type=\"button\" [disabled]=\"item.disabled\">\n <mat-icon svgIcon=\"delete\"></mat-icon>\n </button>\n </ng-container>\n </ng-container>\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n <!-- Horizontal nav mode -->\n <mat-tab-group *ngIf=\"item.mode!=='list'\" class=\"gui-tabs\"\n [mat-stretch-tabs]=\"false\" disableRipple>\n <mat-tab *ngFor=\"let tab of item.children; index as i\" [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <div>{{tab.name | ejs:{i} }}</div>\n </ng-template>\n <!-- FormControl & FormArray -->\n <ng-container *ngIf=\"!tab.children || tab.children.length===0 || tab.type==='tabs'\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n </ng-template>\n </ng-container>\n <!-- FormGroup -->\n <ng-container *ngIf=\"tab.children?.length>0 && tab.type!=='tabs'\">\n <div *ngFor=\"let child of tab.children\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n </ng-template>\n </div>\n </ng-container>\n </mat-tab>\n </mat-tab-group>\n\n <!-- Vertical list mode -->\n <div class=\"gui-list\" *ngIf=\"item.mode==='list'\">\n <div class=\"gui-list-item\" *ngFor=\"let tab of item.children; index as i\">\n <div class=\"gui-list-item-heading\">\n <span class=\"gui-list-item-title\">{{tab.name | ejs:{i} }}</span>\n <ng-container *ngIf=\"item.template && (item.addable || item.addable===undefined)\">\n <button mat-icon-button (click)=\"addTab($event, form.get(item.key), item, i)\"\n type=\"button\" [disabled]=\"item.disabled\">\n <mat-icon svgIcon=\"plus\"></mat-icon>\n </button>\n <button mat-icon-button (click)=\"removeTab($event, form.get(item.key), item, i)\"\n type=\"button\" [disabled]=\"item.disabled\">\n <mat-icon svgIcon=\"delete\"></mat-icon>\n </button>\n </ng-container>\n </div>\n <div class=\"gui-list-item-content\">\n <!-- FormControl & FormArray -->\n <ng-container *ngIf=\"!tab.children || tab.children.length===0 || tab.type==='tabs'\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: tab, parent: item, formGroup: form.get([item.key])}\">\n </ng-template>\n </ng-container>\n <!-- FormGroup -->\n <ng-container *ngIf=\"tab.children?.length>0 && tab.type!=='tabs'\">\n <div *ngFor=\"let child of tab.children\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: child, parent: item, formGroup: form.get([item.key, i])}\">\n </ng-template>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </ng-template>\n </mat-expansion-panel>\n\n <!-- Menu -->\n <mat-tab-group class=\"gui-menu\" *ngSwitchCase=\"'menu'\" [formGroupName]=\"item.key\" disableRipple>\n <mat-tab *ngFor=\"let menuChild of item.children\" [label]=\"menuChild.name\"\n [disabled]=\"menuChild.disabled\">\n <ng-template matTabContent>\n <ng-container *ngIf=\"menuChild.type==='menuItem'\">\n <!-- Must wrap with div -->\n <div *ngFor=\"let controlItem of menuChild.children\" [formGroupName]=\"menuChild.key\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: controlItem, formGroup: form.get([item.key, menuChild.key])}\">\n </ng-template>\n </div>\n </ng-container>\n <!-- Support for unlimited nesting -->\n <ng-container *ngIf=\"menuChild.type==='menu'\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: menuChild, formGroup: form.get(item.key)}\">\n </ng-template>\n </ng-container>\n </ng-template>\n </mat-tab>\n </mat-tab-group>\n\n </ng-container>\n</ng-template>\n", styles: [".gui-form{--mat-form-field-container-text-size: 12px;--mat-expansion-header-text-size: 12px;--mat-expansion-container-text-size: 12px;--mat-expansion-header-collapsed-state-height: 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:2px;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:2px}.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"] }]
|
|
1031
|
+
}, 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"] }]
|
|
1029
1032
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { form: [{
|
|
1030
1033
|
type: Input
|
|
1031
1034
|
}], config: [{
|