@acrodata/gui 2.8.0 → 2.9.0
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/button-toggle/button-toggle.scss +1 -1
- package/codearea/codearea-dialog.scss +1 -1
- package/codearea/codearea.scss +2 -2
- package/combobox/combobox.scss +1 -1
- package/fesm2022/acrodata-gui.mjs +119 -119
- package/fesm2022/acrodata-gui.mjs.map +1 -1
- package/field-group/field-group.scss +1 -1
- package/file-uploader/file-uploader.scss +1 -1
- package/fill/fill-picker.d.ts +1 -1
- package/fill/fill-picker.scss +7 -7
- package/fill/fill.scss +4 -4
- package/gui-form.scss +5 -5
- package/image-select/image-select.scss +8 -1
- package/inline-group/inline-group.scss +1 -1
- package/package.json +1 -3
- package/select/select.scss +1 -1
- package/esm2022/acrodata-gui.mjs +0 -5
- package/esm2022/button-toggle/button-toggle.mjs +0 -69
- package/esm2022/button-toggle/icon.mjs +0 -33
- package/esm2022/codearea/codearea-config.mjs +0 -20
- package/esm2022/codearea/codearea-dialog.mjs +0 -67
- package/esm2022/codearea/codearea.mjs +0 -148
- package/esm2022/combobox/combobox.mjs +0 -82
- package/esm2022/field-group/field-group.mjs +0 -30
- package/esm2022/field-label/field-label.mjs +0 -31
- package/esm2022/file-uploader/file-uploader-config.mjs +0 -42
- package/esm2022/file-uploader/file-uploader.mjs +0 -142
- package/esm2022/fill/fill-picker.mjs +0 -166
- package/esm2022/fill/fill.mjs +0 -85
- package/esm2022/gui-form.mjs +0 -305
- package/esm2022/gui-icons.mjs +0 -95
- package/esm2022/gui-module.mjs +0 -201
- package/esm2022/gui-utils.mjs +0 -128
- package/esm2022/icon-button-wrapper/icon-button-wrapper.mjs +0 -13
- package/esm2022/image-select/image-select.mjs +0 -79
- package/esm2022/inline-group/inline-group.mjs +0 -19
- package/esm2022/input-number/input-number.mjs +0 -58
- package/esm2022/input-text/input-text.mjs +0 -59
- package/esm2022/interface.mjs +0 -2
- package/esm2022/public-api.mjs +0 -30
- package/esm2022/select/select.mjs +0 -69
- package/esm2022/slider/slider.mjs +0 -85
- package/esm2022/switch/switch.mjs +0 -59
- package/esm2022/textarea/textarea.mjs +0 -59
|
@@ -73,10 +73,10 @@ class GuiEjsPipe {
|
|
|
73
73
|
transform(value, data = {}) {
|
|
74
74
|
return ejsTmpl(value, data);
|
|
75
75
|
}
|
|
76
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
77
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
76
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiEjsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
77
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: GuiEjsPipe, isStandalone: true, name: "ejs" }); }
|
|
78
78
|
}
|
|
79
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
79
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiEjsPipe, decorators: [{
|
|
80
80
|
type: Pipe,
|
|
81
81
|
args: [{
|
|
82
82
|
name: 'ejs',
|
|
@@ -92,10 +92,10 @@ class GuiFlexDirective {
|
|
|
92
92
|
this.el.nativeElement.style.flex = `1 1 ${this.flex}%`;
|
|
93
93
|
this.el.nativeElement.style.maxWidth = `${this.flex}%`;
|
|
94
94
|
}
|
|
95
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
96
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
95
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFlexDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
96
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: GuiFlexDirective, isStandalone: true, selector: "[flex]", inputs: { flex: "flex" }, ngImport: i0 }); }
|
|
97
97
|
}
|
|
98
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
98
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFlexDirective, decorators: [{
|
|
99
99
|
type: Directive,
|
|
100
100
|
args: [{
|
|
101
101
|
selector: '[flex]',
|
|
@@ -169,15 +169,15 @@ class GuiFieldLabel {
|
|
|
169
169
|
this.styless =
|
|
170
170
|
(parentType === 'inline' && type !== 'inline') || type === 'group' || type === 'tabs';
|
|
171
171
|
}
|
|
172
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
173
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
172
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
173
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiFieldLabel, isStandalone: true, selector: "gui-field-label", inputs: { config: "config", index: "index" }, host: { properties: { "class.gui-field-label": "!styless", "title": "title" } }, usesOnChanges: true, ngImport: i0, template: "@if (!config.description) {\n <span>{{ title }}</span>\n} @else {\n <span\n [class.gui-field-label-with-description]=\"config.description\"\n [matTooltip]=\"config.description\"\n matTooltipPosition=\"above\"\n matTooltipShowDelay=\"1000\"\n matTooltipClass=\"gui-field-label-tooltip\"\n >\n {{ title }}\n </span>\n}\n", styles: [".gui-field-label{display:inline-block;width:4rem;height:1.5rem;padding:0 .25rem;line-height:1.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-field-label-with-description{text-decoration:underline dotted;cursor:help}.gui-field-label-tooltip{white-space:pre-wrap}\n"], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
174
174
|
}
|
|
175
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
175
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFieldLabel, decorators: [{
|
|
176
176
|
type: Component,
|
|
177
177
|
args: [{ selector: 'gui-field-label', host: {
|
|
178
178
|
'[class.gui-field-label]': '!styless',
|
|
179
179
|
'[title]': 'title',
|
|
180
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
180
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltip], template: "@if (!config.description) {\n <span>{{ title }}</span>\n} @else {\n <span\n [class.gui-field-label-with-description]=\"config.description\"\n [matTooltip]=\"config.description\"\n matTooltipPosition=\"above\"\n matTooltipShowDelay=\"1000\"\n matTooltipClass=\"gui-field-label-tooltip\"\n >\n {{ title }}\n </span>\n}\n", styles: [".gui-field-label{display:inline-block;width:4rem;height:1.5rem;padding:0 .25rem;line-height:1.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-field-label-with-description{text-decoration:underline dotted;cursor:help}.gui-field-label-tooltip{white-space:pre-wrap}\n"] }]
|
|
181
181
|
}], propDecorators: { config: [{
|
|
182
182
|
type: Input
|
|
183
183
|
}], index: [{
|
|
@@ -191,8 +191,8 @@ class GuiIcon {
|
|
|
191
191
|
get isUrl() {
|
|
192
192
|
return /^(https?:\/\/|\.?\/|data:)\w+/.test(this.src);
|
|
193
193
|
}
|
|
194
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
195
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
194
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
195
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiIcon, isStandalone: true, selector: "gui-icon", inputs: { src: "src" }, host: { classAttribute: "gui-icon" }, ngImport: i0, template: `
|
|
196
196
|
@if (isUrl) {
|
|
197
197
|
<img [src]="src" alt="" />
|
|
198
198
|
} @else {
|
|
@@ -200,7 +200,7 @@ class GuiIcon {
|
|
|
200
200
|
}
|
|
201
201
|
`, isInline: true, styles: [".gui-icon{display:inline-flex}.gui-icon img,.gui-icon i{display:block;width:var(--mat-standard-button-toggle-height);height:var(--mat-standard-button-toggle-height);line-height:var(--mat-standard-button-toggle-height)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
202
202
|
}
|
|
203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiIcon, decorators: [{
|
|
204
204
|
type: Component,
|
|
205
205
|
args: [{ selector: 'gui-icon', template: `
|
|
206
206
|
@if (isUrl) {
|
|
@@ -241,16 +241,16 @@ class GuiButtonToggle {
|
|
|
241
241
|
onValueChange() {
|
|
242
242
|
this.onChange(this.value);
|
|
243
243
|
}
|
|
244
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
245
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
244
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiButtonToggle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
245
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiButtonToggle, isStandalone: true, selector: "gui-button-toggle", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-button-toggle" }, providers: [
|
|
246
246
|
{
|
|
247
247
|
provide: NG_VALUE_ACCESSOR,
|
|
248
248
|
useExisting: forwardRef(() => GuiButtonToggle),
|
|
249
249
|
multi: true,
|
|
250
250
|
},
|
|
251
|
-
], ngImport: i0, template: "<mat-button-toggle-group\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [multiple]=\"config.multiple\"\n (change)=\"onValueChange()\"\n hideSingleSelectionIndicator\n hideMultipleSelectionIndicator\n>\n @for (opt of config.options; track $index) {\n <mat-button-toggle\n disableRipple\n [class.gui-icon-toggle]=\"config.useIcon\"\n [flex]=\"opt.col\"\n [value]=\"opt.value\"\n [disabled]=\"opt.disabled\"\n [title]=\"config.useIcon ? opt.label : ''\"\n >\n @if (config.useIcon) {\n <gui-icon [src]=\"opt.src!\" />\n } @else {\n {{ opt.label }}\n }\n </mat-button-toggle>\n }\n</mat-button-toggle-group>\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-button-toggle{--mat-standard-button-toggle-shape: .25rem;--mat-standard-button-toggle-height: 1.5rem;--mat-standard-button-toggle-label-text-size: .75rem;--mat-standard-button-toggle-label-text-weight: 400;--mat-standard-button-toggle-label-text-line-height: var(--mat-standard-button-toggle-height)}.gui-button-toggle .mat-button-toggle-group{flex-wrap:wrap;border-width:0}.gui-button-toggle .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border-width:0}.gui-button-toggle .mat-button-toggle-appearance-standard{background-color:var(--mdc-filled-text-field-container-color)}.gui-icon-toggle.mat-button-toggle .mat-button-toggle-label-content{padding:0;line-height:normal}.gui-icon-toggle .mat-button-toggle-button{display:flex}.gui-icon-toggle.mat-button-toggle-checked img{opacity:.64}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "component", type: GuiIcon, selector: "gui-icon", inputs: ["src"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
251
|
+
], ngImport: i0, template: "<mat-button-toggle-group\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [multiple]=\"config.multiple\"\n (change)=\"onValueChange()\"\n hideSingleSelectionIndicator\n hideMultipleSelectionIndicator\n>\n @for (opt of config.options; track $index) {\n <mat-button-toggle\n disableRipple\n [class.gui-icon-toggle]=\"config.useIcon\"\n [flex]=\"opt.col\"\n [value]=\"opt.value\"\n [disabled]=\"opt.disabled\"\n [title]=\"config.useIcon ? opt.label : ''\"\n >\n @if (config.useIcon) {\n <gui-icon [src]=\"opt.src!\" />\n } @else {\n {{ opt.label }}\n }\n </mat-button-toggle>\n }\n</mat-button-toggle-group>\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-button-toggle{--mat-standard-button-toggle-shape: .25rem;--mat-standard-button-toggle-height: 1.5rem;--mat-standard-button-toggle-label-text-size: .75rem;--mat-standard-button-toggle-label-text-weight: 400;--mat-standard-button-toggle-label-text-line-height: var(--mat-standard-button-toggle-height)}.gui-button-toggle .mat-button-toggle-group{flex-wrap:wrap;border-width:0}.gui-button-toggle .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border-width:0}.gui-button-toggle .mat-button-toggle-appearance-standard{background-color:var(--mdc-filled-text-field-container-color, var(--mat-sys-surface-variant))}.gui-icon-toggle.mat-button-toggle .mat-button-toggle-label-content{padding:0;line-height:normal}.gui-icon-toggle .mat-button-toggle-button{display:flex}.gui-icon-toggle.mat-button-toggle-checked img{opacity:.64}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "component", type: GuiIcon, selector: "gui-icon", inputs: ["src"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
252
252
|
}
|
|
253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiButtonToggle, decorators: [{
|
|
254
254
|
type: Component,
|
|
255
255
|
args: [{ selector: 'gui-button-toggle', host: {
|
|
256
256
|
class: 'gui-field gui-button-toggle',
|
|
@@ -260,7 +260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
260
260
|
useExisting: forwardRef(() => GuiButtonToggle),
|
|
261
261
|
multi: true,
|
|
262
262
|
},
|
|
263
|
-
],
|
|
263
|
+
], imports: [
|
|
264
264
|
FormsModule,
|
|
265
265
|
MatButtonToggleGroup,
|
|
266
266
|
MatButtonToggle,
|
|
@@ -268,7 +268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
268
268
|
GuiFlexDirective,
|
|
269
269
|
GuiIcon,
|
|
270
270
|
GuiFieldLabel,
|
|
271
|
-
], template: "<mat-button-toggle-group\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [multiple]=\"config.multiple\"\n (change)=\"onValueChange()\"\n hideSingleSelectionIndicator\n hideMultipleSelectionIndicator\n>\n @for (opt of config.options; track $index) {\n <mat-button-toggle\n disableRipple\n [class.gui-icon-toggle]=\"config.useIcon\"\n [flex]=\"opt.col\"\n [value]=\"opt.value\"\n [disabled]=\"opt.disabled\"\n [title]=\"config.useIcon ? opt.label : ''\"\n >\n @if (config.useIcon) {\n <gui-icon [src]=\"opt.src!\" />\n } @else {\n {{ opt.label }}\n }\n </mat-button-toggle>\n }\n</mat-button-toggle-group>\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-button-toggle{--mat-standard-button-toggle-shape: .25rem;--mat-standard-button-toggle-height: 1.5rem;--mat-standard-button-toggle-label-text-size: .75rem;--mat-standard-button-toggle-label-text-weight: 400;--mat-standard-button-toggle-label-text-line-height: var(--mat-standard-button-toggle-height)}.gui-button-toggle .mat-button-toggle-group{flex-wrap:wrap;border-width:0}.gui-button-toggle .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border-width:0}.gui-button-toggle .mat-button-toggle-appearance-standard{background-color:var(--mdc-filled-text-field-container-color)}.gui-icon-toggle.mat-button-toggle .mat-button-toggle-label-content{padding:0;line-height:normal}.gui-icon-toggle .mat-button-toggle-button{display:flex}.gui-icon-toggle.mat-button-toggle-checked img{opacity:.64}\n"] }]
|
|
271
|
+
], template: "<mat-button-toggle-group\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [multiple]=\"config.multiple\"\n (change)=\"onValueChange()\"\n hideSingleSelectionIndicator\n hideMultipleSelectionIndicator\n>\n @for (opt of config.options; track $index) {\n <mat-button-toggle\n disableRipple\n [class.gui-icon-toggle]=\"config.useIcon\"\n [flex]=\"opt.col\"\n [value]=\"opt.value\"\n [disabled]=\"opt.disabled\"\n [title]=\"config.useIcon ? opt.label : ''\"\n >\n @if (config.useIcon) {\n <gui-icon [src]=\"opt.src!\" />\n } @else {\n {{ opt.label }}\n }\n </mat-button-toggle>\n }\n</mat-button-toggle-group>\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-button-toggle{--mat-standard-button-toggle-shape: .25rem;--mat-standard-button-toggle-height: 1.5rem;--mat-standard-button-toggle-label-text-size: .75rem;--mat-standard-button-toggle-label-text-weight: 400;--mat-standard-button-toggle-label-text-line-height: var(--mat-standard-button-toggle-height)}.gui-button-toggle .mat-button-toggle-group{flex-wrap:wrap;border-width:0}.gui-button-toggle .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border-width:0}.gui-button-toggle .mat-button-toggle-appearance-standard{background-color:var(--mdc-filled-text-field-container-color, var(--mat-sys-surface-variant))}.gui-icon-toggle.mat-button-toggle .mat-button-toggle-label-content{padding:0;line-height:normal}.gui-icon-toggle .mat-button-toggle-button{display:flex}.gui-icon-toggle.mat-button-toggle-checked img{opacity:.64}\n"] }]
|
|
272
272
|
}], propDecorators: { config: [{
|
|
273
273
|
type: Input
|
|
274
274
|
}], disabled: [{
|
|
@@ -358,19 +358,19 @@ class GuiIconsRegistry {
|
|
|
358
358
|
this._iconRegistry.addSvgIconLiteral(k, this._sanitizer.bypassSecurityTrustHtml(icons[k]));
|
|
359
359
|
});
|
|
360
360
|
}
|
|
361
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
362
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
361
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiIconsRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
362
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiIconsRegistry, providedIn: 'root' }); }
|
|
363
363
|
}
|
|
364
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
364
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiIconsRegistry, decorators: [{
|
|
365
365
|
type: Injectable,
|
|
366
366
|
args: [{ providedIn: 'root' }]
|
|
367
367
|
}] });
|
|
368
368
|
|
|
369
369
|
class GuiIconButtonWrapper {
|
|
370
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
371
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
370
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiIconButtonWrapper, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
371
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: GuiIconButtonWrapper, isStandalone: true, selector: "gui-icon-button-wrapper", host: { classAttribute: "gui-icon-button-wrapper" }, ngImport: i0, template: "<ng-content />\n", styles: [".gui-icon-button-wrapper{display:block;line-height:1}.gui-icon-button-wrapper .mat-mdc-icon-button{--mdc-icon-button-state-layer-size: 1.5rem;--mdc-icon-button-icon-size: .875rem;--mat-icon-button-touch-target-display: none;padding:0}.gui-icon-button-wrapper .mat-icon{display:inline-flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem}.gui-icon-button-wrapper .mat-icon svg{width:.875rem;height:.875rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
372
372
|
}
|
|
373
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
373
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiIconButtonWrapper, decorators: [{
|
|
374
374
|
type: Component,
|
|
375
375
|
args: [{ selector: 'gui-icon-button-wrapper', standalone: true, host: {
|
|
376
376
|
class: 'gui-icon-button-wrapper',
|
|
@@ -384,10 +384,10 @@ class GuiCodeareaConfig {
|
|
|
384
384
|
this.languages = [];
|
|
385
385
|
this.extensions = [];
|
|
386
386
|
}
|
|
387
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
388
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
387
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiCodeareaConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
388
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiCodeareaConfig, providedIn: 'root' }); }
|
|
389
389
|
}
|
|
390
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
390
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiCodeareaConfig, decorators: [{
|
|
391
391
|
type: Injectable,
|
|
392
392
|
args: [{
|
|
393
393
|
providedIn: 'root',
|
|
@@ -430,12 +430,12 @@ class GuiCodeareaDialog {
|
|
|
430
430
|
close() {
|
|
431
431
|
this.dialogRef.close();
|
|
432
432
|
}
|
|
433
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
434
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
433
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiCodeareaDialog, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
434
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: GuiCodeareaDialog, isStandalone: true, selector: "gui-codearea-dialog", host: { classAttribute: "gui-codearea-dialog" }, ngImport: i0, template: "<div\n class=\"gui-codearea-dialog-header\"\n [class.dragging]=\"dragHandle.isDragging\"\n rndDialogDragHandle\n #dragHandle=\"rndDialogDragHandle\"\n>\n <span class=\"gui-codearea-dialog-title\" [title]=\"title\">{{ title }}</span>\n\n <span class=\"gui-codearea-dialog-spacer\"></span>\n\n <button mat-stroked-button (click)=\"close()\">Close</button>\n <button mat-flat-button (click)=\"save()\">Save</button>\n</div>\n\n<div class=\"gui-codearea-dialog-content\">\n <code-editor\n [(ngModel)]=\"data.value\"\n [disabled]=\"data.disabled || false\"\n [readonly]=\"data.readonly || false\"\n [language]=\"data.language || ''\"\n [languages]=\"languages\"\n [theme]=\"theme\"\n [extensions]=\"extensions\"\n [lineWrapping]=\"lineWrapping\"\n indentWithTab\n />\n\n <div class=\"gui-codearea-btns\">\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" (click)=\"toggleLineWrapping()\">\n <mat-icon svgIcon=\"wrap\" />\n </button>\n </gui-icon-button-wrapper>\n </div>\n</div>\n", styles: [".gui-codearea-dialog-panel{--rnd-dialog-container-color: var(--mdc-dialog-container-color, var(--mat-sys-surface, white))}.gui-codearea-dialog{--mdc-outlined-button-label-text-size: .75rem;--mdc-outlined-button-container-height: 1.5rem;--mat-outlined-button-horizontal-padding: .75rem;--mat-outlined-button-touch-target-display: none;--mdc-filled-button-label-text-size: .75rem;--mdc-filled-button-container-height: 1.5rem;--mat-filled-button-horizontal-padding: .75rem;--mat-filled-button-touch-target-display: none;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:inherit;font-size:.75rem}.gui-codearea-dialog-header{display:flex;gap:.5rem;align-items:center;padding:.5rem;cursor:grab;border-bottom:1px solid rgba(0,0,0,.24);box-shadow:0 1px #ffffff3d}.gui-codearea-dialog-header.dragging{cursor:grabbing}.gui-codearea-dialog-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gui-codearea-dialog-spacer{flex:1}.gui-codearea-dialog-content{position:relative;flex:1;overflow:auto}.gui-codearea-dialog-content .code-editor{height:100%;overflow:auto;border:1px solid transparent}.gui-codearea-dialog-content:hover .gui-codearea-btns{display:block}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: RndDialogDragHandle, selector: "[rnd-dialog-drag-handle], [rndDialogDragHandle]", exportAs: ["rndDialogDragHandle"] }, { kind: "component", type: CodeEditor, selector: "code-editor", inputs: ["root", "autoFocus", "value", "disabled", "readonly", "theme", "placeholder", "indentWithTab", "indentUnit", "lineWrapping", "highlightWhitespace", "languages", "language", "setup", "extensions"], outputs: ["change", "focus", "blur"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
435
435
|
}
|
|
436
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiCodeareaDialog, decorators: [{
|
|
437
437
|
type: Component,
|
|
438
|
-
args: [{ selector: 'gui-codearea-dialog',
|
|
438
|
+
args: [{ selector: 'gui-codearea-dialog', imports: [
|
|
439
439
|
FormsModule,
|
|
440
440
|
MatButton,
|
|
441
441
|
MatIconButton,
|
|
@@ -445,7 +445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
445
445
|
GuiIconButtonWrapper,
|
|
446
446
|
], host: {
|
|
447
447
|
class: 'gui-codearea-dialog',
|
|
448
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"gui-codearea-dialog-header\"\n [class.dragging]=\"dragHandle.isDragging\"\n rndDialogDragHandle\n #dragHandle=\"rndDialogDragHandle\"\n>\n <span class=\"gui-codearea-dialog-title\" [title]=\"title\">{{ title }}</span>\n\n <span class=\"gui-codearea-dialog-spacer\"></span>\n\n <button mat-stroked-button (click)=\"close()\">Close</button>\n <button mat-flat-button (click)=\"save()\">Save</button>\n</div>\n\n<div class=\"gui-codearea-dialog-content\">\n <code-editor\n [(ngModel)]=\"data.value\"\n [disabled]=\"data.disabled || false\"\n [readonly]=\"data.readonly || false\"\n [language]=\"data.language || ''\"\n [languages]=\"languages\"\n [theme]=\"theme\"\n [extensions]=\"extensions\"\n [lineWrapping]=\"lineWrapping\"\n indentWithTab\n />\n\n <div class=\"gui-codearea-btns\">\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" (click)=\"toggleLineWrapping()\">\n <mat-icon svgIcon=\"wrap\" />\n </button>\n </gui-icon-button-wrapper>\n </div>\n</div>\n", styles: [".gui-codearea-dialog-panel{--rnd-dialog-container-color: var(--mdc-dialog-container-color)}.gui-codearea-dialog{--mdc-outlined-button-label-text-size: .75rem;--mdc-outlined-button-container-height: 1.5rem;--mat-outlined-button-horizontal-padding: .75rem;--mat-outlined-button-touch-target-display: none;--mdc-filled-button-label-text-size: .75rem;--mdc-filled-button-container-height: 1.5rem;--mat-filled-button-horizontal-padding: .75rem;--mat-filled-button-touch-target-display: none;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:inherit;font-size:.75rem}.gui-codearea-dialog-header{display:flex;gap:.5rem;align-items:center;padding:.5rem;cursor:grab;border-bottom:1px solid rgba(0,0,0,.24);box-shadow:0 1px #ffffff3d}.gui-codearea-dialog-header.dragging{cursor:grabbing}.gui-codearea-dialog-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gui-codearea-dialog-spacer{flex:1}.gui-codearea-dialog-content{position:relative;flex:1;overflow:auto}.gui-codearea-dialog-content .code-editor{height:100%;overflow:auto;border:1px solid transparent}.gui-codearea-dialog-content:hover .gui-codearea-btns{display:block}\n"] }]
|
|
448
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"gui-codearea-dialog-header\"\n [class.dragging]=\"dragHandle.isDragging\"\n rndDialogDragHandle\n #dragHandle=\"rndDialogDragHandle\"\n>\n <span class=\"gui-codearea-dialog-title\" [title]=\"title\">{{ title }}</span>\n\n <span class=\"gui-codearea-dialog-spacer\"></span>\n\n <button mat-stroked-button (click)=\"close()\">Close</button>\n <button mat-flat-button (click)=\"save()\">Save</button>\n</div>\n\n<div class=\"gui-codearea-dialog-content\">\n <code-editor\n [(ngModel)]=\"data.value\"\n [disabled]=\"data.disabled || false\"\n [readonly]=\"data.readonly || false\"\n [language]=\"data.language || ''\"\n [languages]=\"languages\"\n [theme]=\"theme\"\n [extensions]=\"extensions\"\n [lineWrapping]=\"lineWrapping\"\n indentWithTab\n />\n\n <div class=\"gui-codearea-btns\">\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" (click)=\"toggleLineWrapping()\">\n <mat-icon svgIcon=\"wrap\" />\n </button>\n </gui-icon-button-wrapper>\n </div>\n</div>\n", styles: [".gui-codearea-dialog-panel{--rnd-dialog-container-color: var(--mdc-dialog-container-color, var(--mat-sys-surface, white))}.gui-codearea-dialog{--mdc-outlined-button-label-text-size: .75rem;--mdc-outlined-button-container-height: 1.5rem;--mat-outlined-button-horizontal-padding: .75rem;--mat-outlined-button-touch-target-display: none;--mdc-filled-button-label-text-size: .75rem;--mdc-filled-button-container-height: 1.5rem;--mat-filled-button-horizontal-padding: .75rem;--mat-filled-button-touch-target-display: none;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:inherit;font-size:.75rem}.gui-codearea-dialog-header{display:flex;gap:.5rem;align-items:center;padding:.5rem;cursor:grab;border-bottom:1px solid rgba(0,0,0,.24);box-shadow:0 1px #ffffff3d}.gui-codearea-dialog-header.dragging{cursor:grabbing}.gui-codearea-dialog-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gui-codearea-dialog-spacer{flex:1}.gui-codearea-dialog-content{position:relative;flex:1;overflow:auto}.gui-codearea-dialog-content .code-editor{height:100%;overflow:auto;border:1px solid transparent}.gui-codearea-dialog-content:hover .gui-codearea-btns{display:block}\n"] }]
|
|
449
449
|
}], ctorParameters: () => [] });
|
|
450
450
|
|
|
451
451
|
class GuiCodearea {
|
|
@@ -540,16 +540,16 @@ class GuiCodearea {
|
|
|
540
540
|
}
|
|
541
541
|
});
|
|
542
542
|
}
|
|
543
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
544
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
543
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiCodearea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
544
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiCodearea, isStandalone: true, selector: "gui-codearea", inputs: { config: "config", disabled: "disabled", setup: "setup", height: "height", language: "language" }, host: { classAttribute: "gui-field gui-codearea" }, providers: [
|
|
545
545
|
{
|
|
546
546
|
provide: NG_VALUE_ACCESSOR,
|
|
547
547
|
useExisting: forwardRef(() => GuiCodearea),
|
|
548
548
|
multi: true,
|
|
549
549
|
},
|
|
550
|
-
], ngImport: i0, template: "<code-editor\n [style.height]=\"height\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [language]=\"language\"\n [languages]=\"languages\"\n [theme]=\"theme\"\n [setup]=\"setup\"\n [extensions]=\"extensions\"\n (blur)=\"onValueChange()\"\n/>\n\n<div class=\"gui-codearea-btns\">\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" (click)=\"onExpand()\">\n <mat-icon svgIcon=\"expand\" />\n </button>\n </gui-icon-button-wrapper>\n</div>\n\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-codearea{position:relative;overflow:auto;border:1px solid var(--mdc-outlined-text-field-outline-color);border-radius:var(--mdc-outlined-text-field-container-shape)}.gui-codearea .code-editor{width:100%;min-height:1.5rem;overflow:auto;resize:vertical}.gui-codearea:hover .gui-codearea-btns{display:block}.gui-codearea-btns{position:absolute;top:0;right:0;display:none;margin:2px}[dir=rtl] .gui-codearea-btns{left:0;right:auto}.gui-codearea-btns .gui-icon-button-wrapper .mat-mdc-icon-button,.gui-codearea-btns .gui-icon-button-wrapper .mat-icon{width:1.25rem;height:1.25rem}.gui-codearea-btns .mat-mdc-icon-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.25rem}.gui-codearea-btns .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:inherit}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: CodeEditor, selector: "code-editor", inputs: ["root", "autoFocus", "value", "disabled", "readonly", "theme", "placeholder", "indentWithTab", "indentUnit", "lineWrapping", "highlightWhitespace", "languages", "language", "setup", "extensions"], outputs: ["change", "focus", "blur"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
550
|
+
], ngImport: i0, template: "<code-editor\n [style.height]=\"height\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [language]=\"language\"\n [languages]=\"languages\"\n [theme]=\"theme\"\n [setup]=\"setup\"\n [extensions]=\"extensions\"\n (blur)=\"onValueChange()\"\n/>\n\n<div class=\"gui-codearea-btns\">\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" (click)=\"onExpand()\">\n <mat-icon svgIcon=\"expand\" />\n </button>\n </gui-icon-button-wrapper>\n</div>\n\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-codearea{position:relative;overflow:auto;border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline));border-radius:var(--mdc-outlined-text-field-container-shape, var(--mat-sys-corner-extra-small))}.gui-codearea .code-editor{width:100%;min-height:1.5rem;overflow:auto;resize:vertical}.gui-codearea:hover .gui-codearea-btns{display:block}.gui-codearea-btns{position:absolute;top:0;right:0;display:none;margin:2px}[dir=rtl] .gui-codearea-btns{left:0;right:auto}.gui-codearea-btns .gui-icon-button-wrapper .mat-mdc-icon-button,.gui-codearea-btns .gui-icon-button-wrapper .mat-icon{width:1.25rem;height:1.25rem}.gui-codearea-btns .mat-mdc-icon-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.25rem}.gui-codearea-btns .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:inherit}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: CodeEditor, selector: "code-editor", inputs: ["root", "autoFocus", "value", "disabled", "readonly", "theme", "placeholder", "indentWithTab", "indentUnit", "lineWrapping", "highlightWhitespace", "languages", "language", "setup", "extensions"], outputs: ["change", "focus", "blur"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
551
551
|
}
|
|
552
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
552
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiCodearea, decorators: [{
|
|
553
553
|
type: Component,
|
|
554
554
|
args: [{ selector: 'gui-codearea', host: {
|
|
555
555
|
class: 'gui-field gui-codearea',
|
|
@@ -559,7 +559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
559
559
|
useExisting: forwardRef(() => GuiCodearea),
|
|
560
560
|
multi: true,
|
|
561
561
|
},
|
|
562
|
-
],
|
|
562
|
+
], imports: [
|
|
563
563
|
FormsModule,
|
|
564
564
|
MatIcon,
|
|
565
565
|
MatIconButton,
|
|
@@ -567,7 +567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
567
567
|
CodeEditor,
|
|
568
568
|
GuiFieldLabel,
|
|
569
569
|
GuiIconButtonWrapper,
|
|
570
|
-
], template: "<code-editor\n [style.height]=\"height\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [language]=\"language\"\n [languages]=\"languages\"\n [theme]=\"theme\"\n [setup]=\"setup\"\n [extensions]=\"extensions\"\n (blur)=\"onValueChange()\"\n/>\n\n<div class=\"gui-codearea-btns\">\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" (click)=\"onExpand()\">\n <mat-icon svgIcon=\"expand\" />\n </button>\n </gui-icon-button-wrapper>\n</div>\n\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-codearea{position:relative;overflow:auto;border:1px solid var(--mdc-outlined-text-field-outline-color);border-radius:var(--mdc-outlined-text-field-container-shape)}.gui-codearea .code-editor{width:100%;min-height:1.5rem;overflow:auto;resize:vertical}.gui-codearea:hover .gui-codearea-btns{display:block}.gui-codearea-btns{position:absolute;top:0;right:0;display:none;margin:2px}[dir=rtl] .gui-codearea-btns{left:0;right:auto}.gui-codearea-btns .gui-icon-button-wrapper .mat-mdc-icon-button,.gui-codearea-btns .gui-icon-button-wrapper .mat-icon{width:1.25rem;height:1.25rem}.gui-codearea-btns .mat-mdc-icon-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.25rem}.gui-codearea-btns .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:inherit}\n"] }]
|
|
570
|
+
], template: "<code-editor\n [style.height]=\"height\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [language]=\"language\"\n [languages]=\"languages\"\n [theme]=\"theme\"\n [setup]=\"setup\"\n [extensions]=\"extensions\"\n (blur)=\"onValueChange()\"\n/>\n\n<div class=\"gui-codearea-btns\">\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" (click)=\"onExpand()\">\n <mat-icon svgIcon=\"expand\" />\n </button>\n </gui-icon-button-wrapper>\n</div>\n\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-codearea{position:relative;overflow:auto;border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline));border-radius:var(--mdc-outlined-text-field-container-shape, var(--mat-sys-corner-extra-small))}.gui-codearea .code-editor{width:100%;min-height:1.5rem;overflow:auto;resize:vertical}.gui-codearea:hover .gui-codearea-btns{display:block}.gui-codearea-btns{position:absolute;top:0;right:0;display:none;margin:2px}[dir=rtl] .gui-codearea-btns{left:0;right:auto}.gui-codearea-btns .gui-icon-button-wrapper .mat-mdc-icon-button,.gui-codearea-btns .gui-icon-button-wrapper .mat-icon{width:1.25rem;height:1.25rem}.gui-codearea-btns .mat-mdc-icon-button{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:.25rem}.gui-codearea-btns .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:inherit}\n"] }]
|
|
571
571
|
}], ctorParameters: () => [], propDecorators: { config: [{
|
|
572
572
|
type: Input
|
|
573
573
|
}], disabled: [{
|
|
@@ -615,16 +615,16 @@ class GuiCombobox {
|
|
|
615
615
|
addTagFn(label) {
|
|
616
616
|
return { label, value: label };
|
|
617
617
|
}
|
|
618
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
619
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
618
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiCombobox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
619
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiCombobox, isStandalone: true, selector: "gui-combobox", inputs: { config: "config", disabled: "disabled", appendTo: "appendTo" }, host: { classAttribute: "gui-field gui-combobox" }, providers: [
|
|
620
620
|
{
|
|
621
621
|
provide: NG_VALUE_ACCESSOR,
|
|
622
622
|
useExisting: forwardRef(() => GuiCombobox),
|
|
623
623
|
multi: true,
|
|
624
624
|
},
|
|
625
|
-
], viewQueries: [{ propertyName: "mtxSelect", first: true, predicate: MtxSelect, descendants: true }], ngImport: i0, template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mtx-select\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [appendTo]=\"appendTo\"\n [items]=\"config.options || []\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [multiple]=\"config.multiple || false\"\n [addTag]=\"addTagFn\"\n [closeOnSelect]=\"!config.multiple\"\n [deselectOnClick]=\"true\"\n (change)=\"onValueChange()\"\n >\n <ng-template ng-option-tmp let-item=\"item\">\n <div class=\"ng-option-label\" [style.font-family]=\"config.useFont ? item.value : ''\">\n {{ item.label }}\n </div>\n </ng-template>\n </mtx-select>\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".gui-combobox .ng-select{padding-left:.5rem;padding-right:.5rem;margin-left:-.5rem;margin-right:-.5rem}.gui-combobox .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}.gui-combobox .ng-select .ng-value-icon{font-family:math;font-size:10px}.gui-combobox .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-combobox .ng-select .ng-arrow{vertical-align:-1px}.gui-combobox.ng-dropdown-panel{padding:.5rem 0}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height)}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
625
|
+
], viewQueries: [{ propertyName: "mtxSelect", first: true, predicate: MtxSelect, descendants: true }], ngImport: i0, template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mtx-select\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [appendTo]=\"appendTo\"\n [items]=\"config.options || []\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [multiple]=\"config.multiple || false\"\n [addTag]=\"addTagFn\"\n [closeOnSelect]=\"!config.multiple\"\n [deselectOnClick]=\"true\"\n (change)=\"onValueChange()\"\n >\n <ng-template ng-option-tmp let-item=\"item\">\n <div class=\"ng-option-label\" [style.font-family]=\"config.useFont ? item.value : ''\">\n {{ item.label }}\n </div>\n </ng-template>\n </mtx-select>\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".gui-combobox .ng-select{padding-left:.5rem;padding-right:.5rem;margin-left:-.5rem;margin-right:-.5rem}.gui-combobox .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}.gui-combobox .ng-select .ng-value-icon{font-family:math;font-size:10px}.gui-combobox .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-combobox .ng-select .ng-arrow{vertical-align:-1px}.gui-combobox.ng-dropdown-panel{padding:.5rem 0}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height))}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{line-height:1}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
626
626
|
}
|
|
627
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
627
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiCombobox, decorators: [{
|
|
628
628
|
type: Component,
|
|
629
629
|
args: [{ selector: 'gui-combobox', host: {
|
|
630
630
|
class: 'gui-field gui-combobox',
|
|
@@ -634,7 +634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
634
634
|
useExisting: forwardRef(() => GuiCombobox),
|
|
635
635
|
multi: true,
|
|
636
636
|
},
|
|
637
|
-
],
|
|
637
|
+
], imports: [
|
|
638
638
|
FormsModule,
|
|
639
639
|
MatFormField,
|
|
640
640
|
MatPrefix,
|
|
@@ -643,7 +643,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
643
643
|
MtxSelect,
|
|
644
644
|
MtxSelectOptionTemplate,
|
|
645
645
|
GuiFieldLabel,
|
|
646
|
-
], template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mtx-select\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [appendTo]=\"appendTo\"\n [items]=\"config.options || []\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [multiple]=\"config.multiple || false\"\n [addTag]=\"addTagFn\"\n [closeOnSelect]=\"!config.multiple\"\n [deselectOnClick]=\"true\"\n (change)=\"onValueChange()\"\n >\n <ng-template ng-option-tmp let-item=\"item\">\n <div class=\"ng-option-label\" [style.font-family]=\"config.useFont ? item.value : ''\">\n {{ item.label }}\n </div>\n </ng-template>\n </mtx-select>\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".gui-combobox .ng-select{padding-left:.5rem;padding-right:.5rem;margin-left:-.5rem;margin-right:-.5rem}.gui-combobox .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}.gui-combobox .ng-select .ng-value-icon{font-family:math;font-size:10px}.gui-combobox .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-combobox .ng-select .ng-arrow{vertical-align:-1px}.gui-combobox.ng-dropdown-panel{padding:.5rem 0}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height)}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{line-height:1}\n"] }]
|
|
646
|
+
], template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mtx-select\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [appendTo]=\"appendTo\"\n [items]=\"config.options || []\"\n bindLabel=\"label\"\n bindValue=\"value\"\n [multiple]=\"config.multiple || false\"\n [addTag]=\"addTagFn\"\n [closeOnSelect]=\"!config.multiple\"\n [deselectOnClick]=\"true\"\n (change)=\"onValueChange()\"\n >\n <ng-template ng-option-tmp let-item=\"item\">\n <div class=\"ng-option-label\" [style.font-family]=\"config.useFont ? item.value : ''\">\n {{ item.label }}\n </div>\n </ng-template>\n </mtx-select>\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".gui-combobox .ng-select{padding-left:.5rem;padding-right:.5rem;margin-left:-.5rem;margin-right:-.5rem}.gui-combobox .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}.gui-combobox .ng-select .ng-value-icon{font-family:math;font-size:10px}.gui-combobox .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-combobox .ng-select .ng-arrow{vertical-align:-1px}.gui-combobox.ng-dropdown-panel{padding:.5rem 0}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0 .5rem;line-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height))}.gui-combobox.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{line-height:1}\n"] }]
|
|
647
647
|
}], propDecorators: { mtxSelect: [{
|
|
648
648
|
type: ViewChild,
|
|
649
649
|
args: [MtxSelect]
|
|
@@ -670,14 +670,14 @@ class GuiFieldGroup {
|
|
|
670
670
|
this.cdr.markForCheck();
|
|
671
671
|
});
|
|
672
672
|
}
|
|
673
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
674
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
673
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
674
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiFieldGroup, isStandalone: true, selector: "gui-field-group", inputs: { config: "config" }, host: { classAttribute: "gui-field-group" }, ngImport: i0, template: "@if (config.parentType !== 'inline' && config.name) {\n <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content />\n", styles: [".gui-field-group{display:flex;padding:.25rem .5rem}.gui-field{--mat-form-field-container-vertical-padding: .25rem;--mat-form-field-container-text-line-height: 1rem;--mat-form-field-container-text-size: .75rem;display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}.gui-field .mat-mdc-text-field-wrapper,.gui-field .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 .5rem;border-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small))}[dir=rtl] .gui-field .mat-mdc-text-field-wrapper,[dir=rtl] .gui-field .mat-mdc-form-field-hint-wrapper{padding:0 .5rem}.gui-field .mat-mdc-form-field-infix{min-height:auto}.gui-field .mat-mdc-form-field-hint-spacer,.gui-field .mat-mdc-form-field-bottom-align:before,.gui-field .mdc-line-ripple{display:none}\n"], dependencies: [{ kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
675
675
|
}
|
|
676
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
676
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFieldGroup, decorators: [{
|
|
677
677
|
type: Component,
|
|
678
678
|
args: [{ selector: 'gui-field-group', host: {
|
|
679
679
|
class: 'gui-field-group',
|
|
680
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
680
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [GuiFieldLabel], template: "@if (config.parentType !== 'inline' && config.name) {\n <gui-field-label [config]=\"config\" [index]=\"config.index\" />\n}\n<ng-content />\n", styles: [".gui-field-group{display:flex;padding:.25rem .5rem}.gui-field{--mat-form-field-container-vertical-padding: .25rem;--mat-form-field-container-text-line-height: 1rem;--mat-form-field-container-text-size: .75rem;display:inline-flex;flex:1;flex-wrap:wrap}.gui-field>.mat-mdc-form-field{flex:1;width:0;max-width:100%}.gui-field .mat-mdc-text-field-wrapper,.gui-field .mat-mdc-form-field-hint-wrapper{position:relative;padding:0 .5rem;border-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small))}[dir=rtl] .gui-field .mat-mdc-text-field-wrapper,[dir=rtl] .gui-field .mat-mdc-form-field-hint-wrapper{padding:0 .5rem}.gui-field .mat-mdc-form-field-infix{min-height:auto}.gui-field .mat-mdc-form-field-hint-spacer,.gui-field .mat-mdc-form-field-bottom-align:before,.gui-field .mdc-line-ripple{display:none}\n"] }]
|
|
681
681
|
}], propDecorators: { config: [{
|
|
682
682
|
type: Input
|
|
683
683
|
}] } });
|
|
@@ -710,10 +710,10 @@ class GuiFileUploaderConfig {
|
|
|
710
710
|
return null;
|
|
711
711
|
}));
|
|
712
712
|
}
|
|
713
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
714
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
713
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFileUploaderConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
714
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFileUploaderConfig, providedIn: 'root' }); }
|
|
715
715
|
}
|
|
716
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
716
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFileUploaderConfig, decorators: [{
|
|
717
717
|
type: Injectable,
|
|
718
718
|
args: [{
|
|
719
719
|
providedIn: 'root',
|
|
@@ -801,16 +801,16 @@ class GuiFileUploader {
|
|
|
801
801
|
this.onTouched();
|
|
802
802
|
this.fileChange.emit(this.url);
|
|
803
803
|
}
|
|
804
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
805
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
804
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFileUploader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
805
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiFileUploader, isStandalone: true, selector: "gui-file-uploader", inputs: { config: "config", disabled: "disabled", type: "type", name: "name", accept: "accept" }, outputs: { fileChange: "fileChange" }, host: { classAttribute: "gui-field gui-file-uploader" }, providers: [
|
|
806
806
|
{
|
|
807
807
|
provide: NG_VALUE_ACCESSOR,
|
|
808
808
|
useExisting: forwardRef(() => GuiFileUploader),
|
|
809
809
|
multi: true,
|
|
810
810
|
},
|
|
811
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n <gui-icon-button-wrapper matPrefix>\n <mat-icon svgIcon=\"link\" />\n </gui-icon-button-wrapper>\n\n <input\n matInput\n type=\"text\"\n [ngModel]=\"url\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n (change)=\"onUrlChange($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (url) {\n <gui-icon-button-wrapper matSuffix>\n <button mat-icon-button type=\"button\" color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n <mat-icon svgIcon=\"clear\" />\n </button>\n </gui-icon-button-wrapper>\n }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n @if (url) {\n @switch (type) {\n @case ('image') {\n <img [src]=\"url\" alt=\"\" />\n }\n @case ('video') {\n <video [src]=\"url\"></video>\n }\n @case ('audio') {\n <audio [src]=\"url\" controls></audio>\n }\n @default {\n <mat-icon svgIcon=\"file\" />\n }\n }\n } @else {\n <div class=\"gui-file-placeholder\">\n <mat-icon svgIcon=\"upload\" />\n </div>\n }\n\n <input\n #fileInput\n type=\"file\"\n [accept]=\"accept\"\n [name]=\"name\"\n [disabled]=\"disabled\"\n (change)=\"onFileChange($event)\"\n />\n</figure>\n\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto;line-height: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:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
811
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n <gui-icon-button-wrapper matPrefix>\n <mat-icon svgIcon=\"link\" />\n </gui-icon-button-wrapper>\n\n <input\n matInput\n type=\"text\"\n [ngModel]=\"url\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n (change)=\"onUrlChange($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (url) {\n <gui-icon-button-wrapper matSuffix>\n <button mat-icon-button type=\"button\" color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n <mat-icon svgIcon=\"clear\" />\n </button>\n </gui-icon-button-wrapper>\n }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n @if (url) {\n @switch (type) {\n @case ('image') {\n <img [src]=\"url\" alt=\"\" />\n }\n @case ('video') {\n <video [src]=\"url\"></video>\n }\n @case ('audio') {\n <audio [src]=\"url\" controls></audio>\n }\n @default {\n <mat-icon svgIcon=\"file\" />\n }\n }\n } @else {\n <div class=\"gui-file-placeholder\">\n <mat-icon svgIcon=\"upload\" />\n </div>\n }\n\n <input\n #fileInput\n type=\"file\"\n [accept]=\"accept\"\n [name]=\"name\"\n [disabled]=\"disabled\"\n (change)=\"onFileChange($event)\"\n />\n</figure>\n\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto;line-height: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:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color, var(--mat-sys-surface-variant));border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
812
812
|
}
|
|
813
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
813
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFileUploader, decorators: [{
|
|
814
814
|
type: Component,
|
|
815
815
|
args: [{ selector: 'gui-file-uploader', host: {
|
|
816
816
|
class: 'gui-field gui-file-uploader',
|
|
@@ -820,7 +820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
820
820
|
useExisting: forwardRef(() => GuiFileUploader),
|
|
821
821
|
multi: true,
|
|
822
822
|
},
|
|
823
|
-
],
|
|
823
|
+
], imports: [
|
|
824
824
|
FormsModule,
|
|
825
825
|
MatFormField,
|
|
826
826
|
MatIcon,
|
|
@@ -831,7 +831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
831
831
|
MatHint,
|
|
832
832
|
GuiFieldLabel,
|
|
833
833
|
GuiIconButtonWrapper,
|
|
834
|
-
], template: "<mat-form-field>\n <gui-icon-button-wrapper matPrefix>\n <mat-icon svgIcon=\"link\" />\n </gui-icon-button-wrapper>\n\n <input\n matInput\n type=\"text\"\n [ngModel]=\"url\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n (change)=\"onUrlChange($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (url) {\n <gui-icon-button-wrapper matSuffix>\n <button mat-icon-button type=\"button\" color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n <mat-icon svgIcon=\"clear\" />\n </button>\n </gui-icon-button-wrapper>\n }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n @if (url) {\n @switch (type) {\n @case ('image') {\n <img [src]=\"url\" alt=\"\" />\n }\n @case ('video') {\n <video [src]=\"url\"></video>\n }\n @case ('audio') {\n <audio [src]=\"url\" controls></audio>\n }\n @default {\n <mat-icon svgIcon=\"file\" />\n }\n }\n } @else {\n <div class=\"gui-file-placeholder\">\n <mat-icon svgIcon=\"upload\" />\n </div>\n }\n\n <input\n #fileInput\n type=\"file\"\n [accept]=\"accept\"\n [name]=\"name\"\n [disabled]=\"disabled\"\n (change)=\"onFileChange($event)\"\n />\n</figure>\n\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto;line-height: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:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color);border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"] }]
|
|
834
|
+
], template: "<mat-form-field>\n <gui-icon-button-wrapper matPrefix>\n <mat-icon svgIcon=\"link\" />\n </gui-icon-button-wrapper>\n\n <input\n matInput\n type=\"text\"\n [ngModel]=\"url\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n (change)=\"onUrlChange($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (url) {\n <gui-icon-button-wrapper matSuffix>\n <button mat-icon-button type=\"button\" color=\"warn\" [disabled]=\"disabled\" (click)=\"onClear()\">\n <mat-icon svgIcon=\"clear\" />\n </button>\n </gui-icon-button-wrapper>\n }\n</mat-form-field>\n\n<figure class=\"gui-file-content\">\n @if (url) {\n @switch (type) {\n @case ('image') {\n <img [src]=\"url\" alt=\"\" />\n }\n @case ('video') {\n <video [src]=\"url\"></video>\n }\n @case ('audio') {\n <audio [src]=\"url\" controls></audio>\n }\n @default {\n <mat-icon svgIcon=\"file\" />\n }\n }\n } @else {\n <div class=\"gui-file-placeholder\">\n <mat-icon svgIcon=\"upload\" />\n </div>\n }\n\n <input\n #fileInput\n type=\"file\"\n [accept]=\"accept\"\n [name]=\"name\"\n [disabled]=\"disabled\"\n (change)=\"onFileChange($event)\"\n />\n</figure>\n\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-file-uploader{display:block;overflow:auto;line-height: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:7.5rem;margin:.25rem 0 0;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color, var(--mat-sys-surface-variant));border:1px solid transparent;border-radius:.25rem}.gui-file-uploader .gui-file-content:hover,.gui-file-uploader .gui-file-content:focus-within{border-color:currentColor}.gui-file-uploader .gui-file-content img,.gui-file-uploader .gui-file-content video{width:100%;height:100%;object-fit:contain}.gui-file-uploader .gui-file-content input[type=file]{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.gui-file-uploader .gui-file-content .mat-icon svg{width:1.5rem;height:1.5rem}\n"] }]
|
|
835
835
|
}], ctorParameters: () => [], propDecorators: { fileInput: [{
|
|
836
836
|
type: ViewChild,
|
|
837
837
|
args: ['fileInput']
|
|
@@ -969,16 +969,16 @@ class GuiFillPicker {
|
|
|
969
969
|
const bgImg = `url("${this.fillValue.image}")`;
|
|
970
970
|
this.onChange(bgImg);
|
|
971
971
|
}
|
|
972
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
973
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
972
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFillPicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
973
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiFillPicker, isStandalone: true, selector: "gui-fill-picker", inputs: { disabled: "disabled", type: "type" }, host: { classAttribute: "gui-fill-picker" }, providers: [
|
|
974
974
|
{
|
|
975
975
|
provide: NG_VALUE_ACCESSOR,
|
|
976
976
|
useExisting: forwardRef(() => GuiFillPicker),
|
|
977
977
|
multi: true,
|
|
978
978
|
},
|
|
979
|
-
], usesOnChanges: true, ngImport: i0, template: "@if (type === 'all') {\n <div class=\"gui-fill-picker-header\">\n <mat-button-toggle-group\n [(ngModel)]=\"selectedType\"\n hideSingleSelectionIndicator\n (ngModelChange)=\"onTypeChange()\"\n >\n @for (t of types; track $index) {\n <mat-button-toggle [value]=\"t.value\" [title]=\"t.label\">\n <mat-icon [svgIcon]=\"t.value\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n}\n\n<div class=\"gui-fill-picker-body\">\n @if (selectedType === 'solid') {\n <color-chrome [color]=\"fillValue.solid\" (onChangeComplete)=\"onColorChange($event)\" />\n } @else if (selectedType === 'gradient') {\n <gradient-picker [(ngModel)]=\"fillValue.gradient\" (ngModelChange)=\"onGradientChange()\" />\n } @else if (selectedType === 'image') {\n <gui-file-uploader\n type=\"image\"\n [(ngModel)]=\"fillValue.image\"\n (ngModelChange)=\"onImageChange()\"\n />\n }\n</div>\n", styles: [".gui-fill-picker{display:block;width:15rem;border-radius:.5rem;background-color:var(--mat-expansion-container-background-color);color:var(--mat-expansion-container-text-color);box-shadow:inset 0 0 1px #ffffffa3,0 2px 4px #00000029,0 8px 16px #0000001f,0 0 1px #0000001f}.gui-fill-picker color-chrome{display:block}.gui-fill-picker color-chrome .chrome-picker{width:auto;background:none;box-shadow:none;border-radius:0;font-family:inherit}.gui-fill-picker color-chrome .saturation{border-radius:.25rem;box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f}.gui-fill-picker color-chrome .chrome-body{padding:1rem 0 0}.gui-fill-picker color-chrome .chrome-swatch{box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f}.gui-fill-picker color-chrome .chrome-active{box-shadow:none}.gui-fill-picker color-chrome .alpha-checkboard{background-color:#fff;border-radius:2px}.gui-fill-picker color-chrome .alpha-gradient{border-radius:2px}.gui-fill-picker color-chrome .chrome-wrap{gap:.75rem;align-items:center}.gui-fill-picker color-chrome .chrome-fields{gap:.5rem;margin:0}.gui-fill-picker color-chrome .chrome-field{padding:0}.gui-fill-picker color-chrome .wrap{width:100%;line-height:1}.gui-fill-picker color-chrome .wrap input{background-color:transparent;box-shadow:none!important;color:var(--mdc-outlined-text-field-input-text-color)!important;border:1px solid var(--mdc-outlined-text-field-outline-color)!important}.gui-fill-picker color-chrome .chrome-toggle{display:flex;width:1.5rem;height:1.5rem;padding:.125rem;border-radius:2px}.gui-fill-picker color-chrome .chrome-toggle:hover{background:#0000000a}.gui-fill-picker color-chrome .chrome-icon{margin:0}.gui-fill-picker color-chrome .chrome-toggle-svg{width:1.25rem;height:1.25rem;border:none}.gui-fill-picker color-chrome .chrome-toggle-svg:hover{background:transparent}.gui-fill-picker color-chrome .chrome-toggle-svg path{fill:var(--mdc-icon-button-icon-color)}.gui-fill-picker .gradient-picker{--gp-container-width: auto;--gp-container-vertical-padding: 0;--gp-container-margin: -4px -12px;--gp-container-shape: 0;--gp-container-elevation-shadow: none;--gp-container-background-color: transparent;--gp-container-text-color: var(--mdc-filled-text-field-input-text-color);--gp-input-background-color: var(--mdc-filled-text-field-container-color)}.gui-fill-picker-header{padding:.375rem .375rem 0;line-height:1;--mat-standard-button-toggle-shape: 0;--mat-standard-button-toggle-height: 1}.gui-fill-picker-header .mat-button-toggle-group-appearance-standard{gap:.25rem;border:none}.gui-fill-picker-header .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}.gui-fill-picker-header .mat-button-toggle-appearance-standard{border-radius:.25rem}.gui-fill-picker-header .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{padding:0}.gui-fill-picker-body{padding:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ColorChromeModule }, { kind: "component", type: i2.ChromeComponent, selector: "color-chrome", inputs: ["disableAlpha"] }, { kind: "component", type: GradientPicker, selector: "gradient-picker", inputs: ["disabled"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
979
|
+
], usesOnChanges: true, ngImport: i0, template: "@if (type === 'all') {\n <div class=\"gui-fill-picker-header\">\n <mat-button-toggle-group\n [(ngModel)]=\"selectedType\"\n hideSingleSelectionIndicator\n (ngModelChange)=\"onTypeChange()\"\n >\n @for (t of types; track $index) {\n <mat-button-toggle [value]=\"t.value\" [title]=\"t.label\">\n <mat-icon [svgIcon]=\"t.value\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n}\n\n<div class=\"gui-fill-picker-body\">\n @if (selectedType === 'solid') {\n <color-chrome [color]=\"fillValue.solid\" (onChangeComplete)=\"onColorChange($event)\" />\n } @else if (selectedType === 'gradient') {\n <gradient-picker [(ngModel)]=\"fillValue.gradient\" (ngModelChange)=\"onGradientChange()\" />\n } @else if (selectedType === 'image') {\n <gui-file-uploader\n type=\"image\"\n [(ngModel)]=\"fillValue.image\"\n (ngModelChange)=\"onImageChange()\"\n />\n }\n</div>\n", styles: [".gui-fill-picker{display:block;width:15rem;border-radius:.5rem;background-color:var(--mat-expansion-container-background-color, var(--mat-sys-surface));color:var(--mat-expansion-container-text-color, var(--mat-sys-on-surface));box-shadow:inset 0 0 1px #ffffffa3,0 2px 4px #00000029,0 8px 16px #0000001f,0 0 1px #0000001f}.gui-fill-picker color-chrome{display:block}.gui-fill-picker color-chrome .chrome-picker{width:auto;background:none;box-shadow:none;border-radius:0;font-family:inherit}.gui-fill-picker color-chrome .saturation{border-radius:.25rem;box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f}.gui-fill-picker color-chrome .chrome-body{padding:1rem 0 0}.gui-fill-picker color-chrome .chrome-swatch{box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f}.gui-fill-picker color-chrome .chrome-active{box-shadow:none}.gui-fill-picker color-chrome .alpha-checkboard{background-color:#fff;border-radius:2px}.gui-fill-picker color-chrome .alpha-gradient{border-radius:2px}.gui-fill-picker color-chrome .chrome-wrap{gap:.75rem;align-items:center}.gui-fill-picker color-chrome .chrome-fields{gap:.5rem;margin:0}.gui-fill-picker color-chrome .chrome-field{padding:0}.gui-fill-picker color-chrome .wrap{width:100%;line-height:1}.gui-fill-picker color-chrome .wrap input{background-color:transparent;box-shadow:none!important;color:var(--mdc-outlined-text-field-input-text-color, var(--mat-sys-on-surface))!important;border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline))!important}.gui-fill-picker color-chrome .chrome-toggle{display:flex;width:1.5rem;height:1.5rem;padding:.125rem;border-radius:2px}.gui-fill-picker color-chrome .chrome-toggle:hover{background:#0000000a}.gui-fill-picker color-chrome .chrome-icon{margin:0}.gui-fill-picker color-chrome .chrome-toggle-svg{width:1.25rem;height:1.25rem;border:none}.gui-fill-picker color-chrome .chrome-toggle-svg:hover{background:transparent}.gui-fill-picker color-chrome .chrome-toggle-svg path{fill:var(--mdc-icon-button-icon-color, var(--mat-sys-on-surface-variant))}.gui-fill-picker .gradient-picker{--gp-container-width: auto;--gp-container-vertical-padding: 0;--gp-container-margin: -4px -12px;--gp-container-shape: 0;--gp-container-elevation-shadow: none;--gp-container-background-color: transparent;--gp-container-text-color: var(--mdc-filled-text-field-input-text-color, var(--mat-sys-on-surface));--gp-input-background-color: var(--mdc-filled-text-field-container-color, var(--mat-sys-surface-variant))}.gui-fill-picker-header{padding:.375rem .375rem 0;line-height:1;--mat-standard-button-toggle-shape: 0;--mat-standard-button-toggle-height: 1}.gui-fill-picker-header .mat-button-toggle-group-appearance-standard{gap:.25rem;border:none}.gui-fill-picker-header .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}.gui-fill-picker-header .mat-button-toggle-appearance-standard{border-radius:.25rem}.gui-fill-picker-header .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{padding:0}.gui-fill-picker-body{padding:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ColorChromeModule }, { kind: "component", type: i2.ChromeComponent, selector: "color-chrome", inputs: ["disableAlpha"] }, { kind: "component", type: GradientPicker, selector: "gradient-picker", inputs: ["disabled"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
980
980
|
}
|
|
981
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
981
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFillPicker, decorators: [{
|
|
982
982
|
type: Component,
|
|
983
983
|
args: [{ selector: 'gui-fill-picker', host: {
|
|
984
984
|
class: 'gui-fill-picker',
|
|
@@ -988,7 +988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
988
988
|
useExisting: forwardRef(() => GuiFillPicker),
|
|
989
989
|
multi: true,
|
|
990
990
|
},
|
|
991
|
-
],
|
|
991
|
+
], imports: [
|
|
992
992
|
FormsModule,
|
|
993
993
|
MatButtonToggleGroup,
|
|
994
994
|
MatButtonToggle,
|
|
@@ -996,7 +996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
996
996
|
ColorChromeModule,
|
|
997
997
|
GradientPicker,
|
|
998
998
|
GuiFileUploader,
|
|
999
|
-
], template: "@if (type === 'all') {\n <div class=\"gui-fill-picker-header\">\n <mat-button-toggle-group\n [(ngModel)]=\"selectedType\"\n hideSingleSelectionIndicator\n (ngModelChange)=\"onTypeChange()\"\n >\n @for (t of types; track $index) {\n <mat-button-toggle [value]=\"t.value\" [title]=\"t.label\">\n <mat-icon [svgIcon]=\"t.value\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n}\n\n<div class=\"gui-fill-picker-body\">\n @if (selectedType === 'solid') {\n <color-chrome [color]=\"fillValue.solid\" (onChangeComplete)=\"onColorChange($event)\" />\n } @else if (selectedType === 'gradient') {\n <gradient-picker [(ngModel)]=\"fillValue.gradient\" (ngModelChange)=\"onGradientChange()\" />\n } @else if (selectedType === 'image') {\n <gui-file-uploader\n type=\"image\"\n [(ngModel)]=\"fillValue.image\"\n (ngModelChange)=\"onImageChange()\"\n />\n }\n</div>\n", styles: [".gui-fill-picker{display:block;width:15rem;border-radius:.5rem;background-color:var(--mat-expansion-container-background-color);color:var(--mat-expansion-container-text-color);box-shadow:inset 0 0 1px #ffffffa3,0 2px 4px #00000029,0 8px 16px #0000001f,0 0 1px #0000001f}.gui-fill-picker color-chrome{display:block}.gui-fill-picker color-chrome .chrome-picker{width:auto;background:none;box-shadow:none;border-radius:0;font-family:inherit}.gui-fill-picker color-chrome .saturation{border-radius:.25rem;box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f}.gui-fill-picker color-chrome .chrome-body{padding:1rem 0 0}.gui-fill-picker color-chrome .chrome-swatch{box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f}.gui-fill-picker color-chrome .chrome-active{box-shadow:none}.gui-fill-picker color-chrome .alpha-checkboard{background-color:#fff;border-radius:2px}.gui-fill-picker color-chrome .alpha-gradient{border-radius:2px}.gui-fill-picker color-chrome .chrome-wrap{gap:.75rem;align-items:center}.gui-fill-picker color-chrome .chrome-fields{gap:.5rem;margin:0}.gui-fill-picker color-chrome .chrome-field{padding:0}.gui-fill-picker color-chrome .wrap{width:100%;line-height:1}.gui-fill-picker color-chrome .wrap input{background-color:transparent;box-shadow:none!important;color:var(--mdc-outlined-text-field-input-text-color)!important;border:1px solid var(--mdc-outlined-text-field-outline-color)!important}.gui-fill-picker color-chrome .chrome-toggle{display:flex;width:1.5rem;height:1.5rem;padding:.125rem;border-radius:2px}.gui-fill-picker color-chrome .chrome-toggle:hover{background:#0000000a}.gui-fill-picker color-chrome .chrome-icon{margin:0}.gui-fill-picker color-chrome .chrome-toggle-svg{width:1.25rem;height:1.25rem;border:none}.gui-fill-picker color-chrome .chrome-toggle-svg:hover{background:transparent}.gui-fill-picker color-chrome .chrome-toggle-svg path{fill:var(--mdc-icon-button-icon-color)}.gui-fill-picker .gradient-picker{--gp-container-width: auto;--gp-container-vertical-padding: 0;--gp-container-margin: -4px -12px;--gp-container-shape: 0;--gp-container-elevation-shadow: none;--gp-container-background-color: transparent;--gp-container-text-color: var(--mdc-filled-text-field-input-text-color);--gp-input-background-color: var(--mdc-filled-text-field-container-color)}.gui-fill-picker-header{padding:.375rem .375rem 0;line-height:1;--mat-standard-button-toggle-shape: 0;--mat-standard-button-toggle-height: 1}.gui-fill-picker-header .mat-button-toggle-group-appearance-standard{gap:.25rem;border:none}.gui-fill-picker-header .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}.gui-fill-picker-header .mat-button-toggle-appearance-standard{border-radius:.25rem}.gui-fill-picker-header .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{padding:0}.gui-fill-picker-body{padding:.75rem}\n"] }]
|
|
999
|
+
], template: "@if (type === 'all') {\n <div class=\"gui-fill-picker-header\">\n <mat-button-toggle-group\n [(ngModel)]=\"selectedType\"\n hideSingleSelectionIndicator\n (ngModelChange)=\"onTypeChange()\"\n >\n @for (t of types; track $index) {\n <mat-button-toggle [value]=\"t.value\" [title]=\"t.label\">\n <mat-icon [svgIcon]=\"t.value\" />\n </mat-button-toggle>\n }\n </mat-button-toggle-group>\n </div>\n}\n\n<div class=\"gui-fill-picker-body\">\n @if (selectedType === 'solid') {\n <color-chrome [color]=\"fillValue.solid\" (onChangeComplete)=\"onColorChange($event)\" />\n } @else if (selectedType === 'gradient') {\n <gradient-picker [(ngModel)]=\"fillValue.gradient\" (ngModelChange)=\"onGradientChange()\" />\n } @else if (selectedType === 'image') {\n <gui-file-uploader\n type=\"image\"\n [(ngModel)]=\"fillValue.image\"\n (ngModelChange)=\"onImageChange()\"\n />\n }\n</div>\n", styles: [".gui-fill-picker{display:block;width:15rem;border-radius:.5rem;background-color:var(--mat-expansion-container-background-color, var(--mat-sys-surface));color:var(--mat-expansion-container-text-color, var(--mat-sys-on-surface));box-shadow:inset 0 0 1px #ffffffa3,0 2px 4px #00000029,0 8px 16px #0000001f,0 0 1px #0000001f}.gui-fill-picker color-chrome{display:block}.gui-fill-picker color-chrome .chrome-picker{width:auto;background:none;box-shadow:none;border-radius:0;font-family:inherit}.gui-fill-picker color-chrome .saturation{border-radius:.25rem;box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f}.gui-fill-picker color-chrome .chrome-body{padding:1rem 0 0}.gui-fill-picker color-chrome .chrome-swatch{box-shadow:0 0 0 1px #ffffff1f,0 0 0 1px #0000001f}.gui-fill-picker color-chrome .chrome-active{box-shadow:none}.gui-fill-picker color-chrome .alpha-checkboard{background-color:#fff;border-radius:2px}.gui-fill-picker color-chrome .alpha-gradient{border-radius:2px}.gui-fill-picker color-chrome .chrome-wrap{gap:.75rem;align-items:center}.gui-fill-picker color-chrome .chrome-fields{gap:.5rem;margin:0}.gui-fill-picker color-chrome .chrome-field{padding:0}.gui-fill-picker color-chrome .wrap{width:100%;line-height:1}.gui-fill-picker color-chrome .wrap input{background-color:transparent;box-shadow:none!important;color:var(--mdc-outlined-text-field-input-text-color, var(--mat-sys-on-surface))!important;border:1px solid var(--mdc-outlined-text-field-outline-color, var(--mat-sys-outline))!important}.gui-fill-picker color-chrome .chrome-toggle{display:flex;width:1.5rem;height:1.5rem;padding:.125rem;border-radius:2px}.gui-fill-picker color-chrome .chrome-toggle:hover{background:#0000000a}.gui-fill-picker color-chrome .chrome-icon{margin:0}.gui-fill-picker color-chrome .chrome-toggle-svg{width:1.25rem;height:1.25rem;border:none}.gui-fill-picker color-chrome .chrome-toggle-svg:hover{background:transparent}.gui-fill-picker color-chrome .chrome-toggle-svg path{fill:var(--mdc-icon-button-icon-color, var(--mat-sys-on-surface-variant))}.gui-fill-picker .gradient-picker{--gp-container-width: auto;--gp-container-vertical-padding: 0;--gp-container-margin: -4px -12px;--gp-container-shape: 0;--gp-container-elevation-shadow: none;--gp-container-background-color: transparent;--gp-container-text-color: var(--mdc-filled-text-field-input-text-color, var(--mat-sys-on-surface));--gp-input-background-color: var(--mdc-filled-text-field-container-color, var(--mat-sys-surface-variant))}.gui-fill-picker-header{padding:.375rem .375rem 0;line-height:1;--mat-standard-button-toggle-shape: 0;--mat-standard-button-toggle-height: 1}.gui-fill-picker-header .mat-button-toggle-group-appearance-standard{gap:.25rem;border:none}.gui-fill-picker-header .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}.gui-fill-picker-header .mat-button-toggle-appearance-standard{border-radius:.25rem}.gui-fill-picker-header .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{padding:0}.gui-fill-picker-body{padding:.75rem}\n"] }]
|
|
1000
1000
|
}], ctorParameters: () => [], propDecorators: { disabled: [{
|
|
1001
1001
|
type: Input
|
|
1002
1002
|
}], type: [{
|
|
@@ -1037,16 +1037,16 @@ class GuiFill {
|
|
|
1037
1037
|
onValueChange() {
|
|
1038
1038
|
this.onChange(this.value);
|
|
1039
1039
|
}
|
|
1040
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1041
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1040
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFill, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1041
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiFill, isStandalone: true, selector: "gui-fill", inputs: { config: "config", disabled: "disabled", type: "type" }, host: { classAttribute: "gui-field gui-fill" }, providers: [
|
|
1042
1042
|
{
|
|
1043
1043
|
provide: NG_VALUE_ACCESSOR,
|
|
1044
1044
|
useExisting: forwardRef(() => GuiFill),
|
|
1045
1045
|
multi: true,
|
|
1046
1046
|
},
|
|
1047
|
-
], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n <ng-container matPrefix>\n <span class=\"gui-color-block\">\n <span\n class=\"gui-color-block-bg\"\n [style.background]=\"value + ' center / contain no-repeat'\"\n ></span>\n </span>\n </ng-container>\n\n <input\n matInput\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [mtxColorpicker]=\"cp\"\n (colorChange)=\"onValueChange()\"\n />\n\n <mtx-colorpicker #cp [content]=\"customPickerContent\" />\n <gui-icon-button-wrapper matSuffix>\n <mtx-colorpicker-toggle [for]=\"cp\" />\n </gui-icon-button-wrapper>\n\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n\n<ng-template #customPickerContent>\n <gui-fill-picker [type]=\"type\" [(ngModel)]=\"cp.selected\" (ngModelChange)=\"cp.select($event)\" />\n</ng-template>\n", styles: [".gui-color-block{position:relative;display:inline-block;width:1.5rem;height:1.5rem;background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:.5rem .5rem}.gui-color-block-bg{display:inline-block;width:100%;height:100%}.gui-color-block-bg:after{display:inline-block;width:100%;height:100%;box-sizing:border-box;border:1px solid currentColor;border-top-left-radius:var(--mdc-filled-text-field-container-shape);border-bottom-left-radius:var(--mdc-filled-text-field-container-shape);opacity:.24;content:\"\"}[dir=rtl] .gui-color-block-bg:after{border-radius:0;border-top-right-radius:var(--mdc-filled-text-field-container-shape);border-bottom-right-radius:var(--mdc-filled-text-field-container-shape)}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MtxColorpickerInput, selector: "input[mtxColorpicker]", inputs: ["mtxColorpicker", "disabled", "value", "format"], outputs: ["colorChange", "colorInput"], exportAs: ["mtxColorpickerInput"] }, { kind: "component", type: MtxColorpicker, selector: "mtx-colorpicker", inputs: ["content", "disabled", "xPosition", "yPosition", "restoreFocus", "opened", "color", "format"], outputs: ["opened", "closed"], exportAs: ["mtxColorpicker"] }, { kind: "component", type: MtxColorpickerToggle, selector: "mtx-colorpicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["mtxColorpickerToggle"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }, { kind: "component", type: GuiFillPicker, selector: "gui-fill-picker", inputs: ["disabled", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1047
|
+
], usesOnChanges: true, ngImport: i0, template: "<mat-form-field>\n <ng-container matPrefix>\n <span class=\"gui-color-block\">\n <span\n class=\"gui-color-block-bg\"\n [style.background]=\"value + ' center / contain no-repeat'\"\n ></span>\n </span>\n </ng-container>\n\n <input\n matInput\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [mtxColorpicker]=\"cp\"\n (colorChange)=\"onValueChange()\"\n />\n\n <mtx-colorpicker #cp [content]=\"customPickerContent\" />\n <gui-icon-button-wrapper matSuffix>\n <mtx-colorpicker-toggle [for]=\"cp\" />\n </gui-icon-button-wrapper>\n\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n\n<ng-template #customPickerContent>\n <gui-fill-picker [type]=\"type\" [(ngModel)]=\"cp.selected\" (ngModelChange)=\"cp.select($event)\" />\n</ng-template>\n", styles: [".gui-color-block{position:relative;display:inline-block;width:1.5rem;height:1.5rem;background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:.5rem .5rem}.gui-color-block-bg{display:inline-block;width:100%;height:100%}.gui-color-block-bg:after{display:inline-block;width:100%;height:100%;box-sizing:border-box;border:1px solid currentColor;border-top-left-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));border-bottom-left-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));opacity:.24;content:\"\"}[dir=rtl] .gui-color-block-bg:after{border-radius:0;border-top-right-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));border-bottom-right-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small))}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MtxColorpickerInput, selector: "input[mtxColorpicker]", inputs: ["mtxColorpicker", "disabled", "value", "format"], outputs: ["colorChange", "colorInput"], exportAs: ["mtxColorpickerInput"] }, { kind: "component", type: MtxColorpicker, selector: "mtx-colorpicker", inputs: ["content", "disabled", "xPosition", "yPosition", "restoreFocus", "opened", "color", "format"], outputs: ["opened", "closed"], exportAs: ["mtxColorpicker"] }, { kind: "component", type: MtxColorpickerToggle, selector: "mtx-colorpicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["mtxColorpickerToggle"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }, { kind: "component", type: GuiFillPicker, selector: "gui-fill-picker", inputs: ["disabled", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1048
1048
|
}
|
|
1049
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1049
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiFill, decorators: [{
|
|
1050
1050
|
type: Component,
|
|
1051
1051
|
args: [{ selector: 'gui-fill', host: {
|
|
1052
1052
|
class: 'gui-field gui-fill',
|
|
@@ -1056,7 +1056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1056
1056
|
useExisting: forwardRef(() => GuiFill),
|
|
1057
1057
|
multi: true,
|
|
1058
1058
|
},
|
|
1059
|
-
],
|
|
1059
|
+
], imports: [
|
|
1060
1060
|
FormsModule,
|
|
1061
1061
|
MatFormField,
|
|
1062
1062
|
MatPrefix,
|
|
@@ -1069,7 +1069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1069
1069
|
GuiFieldLabel,
|
|
1070
1070
|
GuiIconButtonWrapper,
|
|
1071
1071
|
GuiFillPicker,
|
|
1072
|
-
], template: "<mat-form-field>\n <ng-container matPrefix>\n <span class=\"gui-color-block\">\n <span\n class=\"gui-color-block-bg\"\n [style.background]=\"value + ' center / contain no-repeat'\"\n ></span>\n </span>\n </ng-container>\n\n <input\n matInput\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [mtxColorpicker]=\"cp\"\n (colorChange)=\"onValueChange()\"\n />\n\n <mtx-colorpicker #cp [content]=\"customPickerContent\" />\n <gui-icon-button-wrapper matSuffix>\n <mtx-colorpicker-toggle [for]=\"cp\" />\n </gui-icon-button-wrapper>\n\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n\n<ng-template #customPickerContent>\n <gui-fill-picker [type]=\"type\" [(ngModel)]=\"cp.selected\" (ngModelChange)=\"cp.select($event)\" />\n</ng-template>\n", styles: [".gui-color-block{position:relative;display:inline-block;width:1.5rem;height:1.5rem;background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:.5rem .5rem}.gui-color-block-bg{display:inline-block;width:100%;height:100%}.gui-color-block-bg:after{display:inline-block;width:100%;height:100%;box-sizing:border-box;border:1px solid currentColor;border-top-left-radius:var(--mdc-filled-text-field-container-shape);border-bottom-left-radius:var(--mdc-filled-text-field-container-shape);opacity:.24;content:\"\"}[dir=rtl] .gui-color-block-bg:after{border-radius:0;border-top-right-radius:var(--mdc-filled-text-field-container-shape);border-bottom-right-radius:var(--mdc-filled-text-field-container-shape)}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"] }]
|
|
1072
|
+
], template: "<mat-form-field>\n <ng-container matPrefix>\n <span class=\"gui-color-block\">\n <span\n class=\"gui-color-block-bg\"\n [style.background]=\"value + ' center / contain no-repeat'\"\n ></span>\n </span>\n </ng-container>\n\n <input\n matInput\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [mtxColorpicker]=\"cp\"\n (colorChange)=\"onValueChange()\"\n />\n\n <mtx-colorpicker #cp [content]=\"customPickerContent\" />\n <gui-icon-button-wrapper matSuffix>\n <mtx-colorpicker-toggle [for]=\"cp\" />\n </gui-icon-button-wrapper>\n\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n\n<ng-template #customPickerContent>\n <gui-fill-picker [type]=\"type\" [(ngModel)]=\"cp.selected\" (ngModelChange)=\"cp.select($event)\" />\n</ng-template>\n", styles: [".gui-color-block{position:relative;display:inline-block;width:1.5rem;height:1.5rem;background-color:#fff;background-image:conic-gradient(transparent 25%,#ccc 25% 50%,transparent 50% 75%,#ccc 75%);background-size:.5rem .5rem}.gui-color-block-bg{display:inline-block;width:100%;height:100%}.gui-color-block-bg:after{display:inline-block;width:100%;height:100%;box-sizing:border-box;border:1px solid currentColor;border-top-left-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));border-bottom-left-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));opacity:.24;content:\"\"}[dir=rtl] .gui-color-block-bg:after{border-radius:0;border-top-right-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small));border-bottom-right-radius:var(--mdc-filled-text-field-container-shape, var(--mat-sys-corner-extra-small))}.gui-fill .mat-mdc-icon-button{display:inline-flex;justify-content:center;align-items:center}\n"] }]
|
|
1073
1073
|
}], propDecorators: { config: [{
|
|
1074
1074
|
type: Input
|
|
1075
1075
|
}], disabled: [{
|
|
@@ -1109,16 +1109,16 @@ class GuiImageSelect {
|
|
|
1109
1109
|
onValueChange() {
|
|
1110
1110
|
this.onChange(this.value);
|
|
1111
1111
|
}
|
|
1112
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1113
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1112
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiImageSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1113
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiImageSelect, isStandalone: true, selector: "gui-image-select", inputs: { config: "config", disabled: "disabled", appendTo: "appendTo" }, host: { classAttribute: "gui-field gui-image-select" }, providers: [
|
|
1114
1114
|
{
|
|
1115
1115
|
provide: NG_VALUE_ACCESSOR,
|
|
1116
1116
|
useExisting: forwardRef(() => GuiImageSelect),
|
|
1117
1117
|
multi: true,
|
|
1118
1118
|
},
|
|
1119
|
-
], viewQueries: [{ propertyName: "mtxSelect", first: true, predicate: MtxSelect, descendants: true }], ngImport: i0, template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mtx-select\n [items]=\"config.options || []\"\n [appendTo]=\"appendTo\"\n bindValue=\"value\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n (change)=\"onValueChange()\"\n >\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 @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: MtxSelectLabelTemplate, selector: "[ng-label-tmp]" }, { kind: "directive", type: MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1119
|
+
], viewQueries: [{ propertyName: "mtxSelect", first: true, predicate: MtxSelect, descendants: true }], ngImport: i0, template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mtx-select\n [items]=\"config.options || []\"\n [appendTo]=\"appendTo\"\n bindValue=\"value\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n (change)=\"onValueChange()\"\n >\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 @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "directive", type: MtxSelectLabelTemplate, selector: "[ng-label-tmp]" }, { kind: "directive", type: MtxSelectOptionTemplate, selector: "[ng-option-tmp]" }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1120
1120
|
}
|
|
1121
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiImageSelect, decorators: [{
|
|
1122
1122
|
type: Component,
|
|
1123
1123
|
args: [{ selector: 'gui-image-select', host: {
|
|
1124
1124
|
class: 'gui-field gui-image-select',
|
|
@@ -1128,7 +1128,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1128
1128
|
useExisting: forwardRef(() => GuiImageSelect),
|
|
1129
1129
|
multi: true,
|
|
1130
1130
|
},
|
|
1131
|
-
],
|
|
1131
|
+
], imports: [
|
|
1132
1132
|
FormsModule,
|
|
1133
1133
|
MatFormField,
|
|
1134
1134
|
MatPrefix,
|
|
@@ -1138,7 +1138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1138
1138
|
MtxSelectLabelTemplate,
|
|
1139
1139
|
MtxSelectOptionTemplate,
|
|
1140
1140
|
GuiFieldLabel,
|
|
1141
|
-
], template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mtx-select\n [items]=\"config.options || []\"\n [appendTo]=\"appendTo\"\n bindValue=\"value\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n (change)=\"onValueChange()\"\n >\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 @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color)}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"] }]
|
|
1141
|
+
], template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mtx-select\n [items]=\"config.options || []\"\n [appendTo]=\"appendTo\"\n bindValue=\"value\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n (change)=\"onValueChange()\"\n >\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 @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option img,.gui-image-select .ng-select .ng-value img{height:100%;max-width:7.5rem;object-fit:contain;border-radius:.25rem;background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}.gui-image-select{--mat-form-field-container-vertical-padding: 0}.gui-image-select .ng-select{padding:0 .5rem;margin:0 -.5rem}.gui-image-select .ng-select .ng-value-container{height:4rem}.gui-image-select .ng-select .ng-value{display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:.5rem 0}.gui-image-select .ng-select .ng-clear-wrapper .ng-clear{font-family:math;font-size:12px}.gui-image-select .ng-select .ng-arrow{vertical-align:-1px}.gui-image-select.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;align-items:center;gap:.5rem;height:4rem;padding:.5rem}\n"] }]
|
|
1142
1142
|
}], propDecorators: { mtxSelect: [{
|
|
1143
1143
|
type: ViewChild,
|
|
1144
1144
|
args: [MtxSelect]
|
|
@@ -1154,14 +1154,14 @@ class GuiInlineGroup {
|
|
|
1154
1154
|
constructor() {
|
|
1155
1155
|
this.config = {};
|
|
1156
1156
|
}
|
|
1157
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1157
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiInlineGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1158
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiInlineGroup, isStandalone: true, selector: "gui-inline-group", inputs: { config: "config" }, host: { classAttribute: "gui-inline-group" }, ngImport: i0, template: "@if (config.name) {\n <gui-field-label [config]=\"config\" />\n}\n<div class=\"gui-inline-group-content\">\n <ng-content />\n</div>\n", styles: [".gui-inline-group{display:flex;padding:.25rem .5rem}.gui-inline-group mat-hint{width:100%;line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-sys-body-small-line-height));-webkit-font-smoothing:antialiased}.gui-inline-group-content{display:inline-flex;flex:1;flex-flow:row wrap;margin:0 -.25rem}.gui-inline-group-content>.gui-field-group,.gui-inline-group-content>.gui-inline-group,.gui-inline-group-content>.mat-expansion-panel,.gui-inline-group-content>.gui-menu{width:100%;padding:0 .25rem}\n"], dependencies: [{ kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1159
1159
|
}
|
|
1160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1160
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiInlineGroup, decorators: [{
|
|
1161
1161
|
type: Component,
|
|
1162
1162
|
args: [{ selector: 'gui-inline-group', host: {
|
|
1163
1163
|
class: 'gui-inline-group',
|
|
1164
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1164
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [GuiFieldLabel], template: "@if (config.name) {\n <gui-field-label [config]=\"config\" />\n}\n<div class=\"gui-inline-group-content\">\n <ng-content />\n</div>\n", styles: [".gui-inline-group{display:flex;padding:.25rem .5rem}.gui-inline-group mat-hint{width:100%;line-height:var(--mat-form-field-subscript-text-line-height, var(--mat-sys-body-small-line-height));-webkit-font-smoothing:antialiased}.gui-inline-group-content{display:inline-flex;flex:1;flex-flow:row wrap;margin:0 -.25rem}.gui-inline-group-content>.gui-field-group,.gui-inline-group-content>.gui-inline-group,.gui-inline-group-content>.mat-expansion-panel,.gui-inline-group-content>.gui-menu{width:100%;padding:0 .25rem}\n"] }]
|
|
1165
1165
|
}], propDecorators: { config: [{
|
|
1166
1166
|
type: Input
|
|
1167
1167
|
}] } });
|
|
@@ -1191,16 +1191,16 @@ class GuiInputNumber {
|
|
|
1191
1191
|
onValueChange() {
|
|
1192
1192
|
this.onChange(this.value);
|
|
1193
1193
|
}
|
|
1194
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1195
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1194
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1195
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiInputNumber, isStandalone: true, selector: "gui-input-number", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-input-number" }, providers: [
|
|
1196
1196
|
{
|
|
1197
1197
|
provide: NG_VALUE_ACCESSOR,
|
|
1198
1198
|
useExisting: forwardRef(() => GuiInputNumber),
|
|
1199
1199
|
multi: true,
|
|
1200
1200
|
},
|
|
1201
|
-
], ngImport: i0, template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <input\n matInput\n 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 />\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1201
|
+
], ngImport: i0, template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <input\n matInput\n 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 />\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1202
1202
|
}
|
|
1203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiInputNumber, decorators: [{
|
|
1204
1204
|
type: Component,
|
|
1205
1205
|
args: [{ selector: 'gui-input-number', host: {
|
|
1206
1206
|
class: 'gui-field gui-input-number',
|
|
@@ -1210,7 +1210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1210
1210
|
useExisting: forwardRef(() => GuiInputNumber),
|
|
1211
1211
|
multi: true,
|
|
1212
1212
|
},
|
|
1213
|
-
],
|
|
1213
|
+
], imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel], template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <input\n matInput\n 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 />\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n" }]
|
|
1214
1214
|
}], propDecorators: { config: [{
|
|
1215
1215
|
type: Input
|
|
1216
1216
|
}], disabled: [{
|
|
@@ -1243,16 +1243,16 @@ class GuiInputText {
|
|
|
1243
1243
|
onValueChange() {
|
|
1244
1244
|
this.onChange(this.value);
|
|
1245
1245
|
}
|
|
1246
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1247
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1246
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiInputText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1247
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiInputText, isStandalone: true, selector: "gui-input-text", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-input-text" }, providers: [
|
|
1248
1248
|
{
|
|
1249
1249
|
provide: NG_VALUE_ACCESSOR,
|
|
1250
1250
|
useExisting: forwardRef(() => GuiInputText),
|
|
1251
1251
|
multi: true,
|
|
1252
1252
|
},
|
|
1253
|
-
], ngImport: i0, template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <input\n matInput\n type=\"text\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n (change)=\"onValueChange()\"\n />\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1253
|
+
], ngImport: i0, template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <input\n matInput\n type=\"text\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n (change)=\"onValueChange()\"\n />\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1254
1254
|
}
|
|
1255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1255
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiInputText, decorators: [{
|
|
1256
1256
|
type: Component,
|
|
1257
1257
|
args: [{ selector: 'gui-input-text', host: {
|
|
1258
1258
|
class: 'gui-field gui-input-text',
|
|
@@ -1262,7 +1262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1262
1262
|
useExisting: forwardRef(() => GuiInputText),
|
|
1263
1263
|
multi: true,
|
|
1264
1264
|
},
|
|
1265
|
-
],
|
|
1265
|
+
], imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel], template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <input\n matInput\n type=\"text\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n (change)=\"onValueChange()\"\n />\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n" }]
|
|
1266
1266
|
}], propDecorators: { config: [{
|
|
1267
1267
|
type: Input
|
|
1268
1268
|
}], disabled: [{
|
|
@@ -1295,16 +1295,16 @@ class GuiSelect {
|
|
|
1295
1295
|
onValueChange() {
|
|
1296
1296
|
this.onChange(this.value);
|
|
1297
1297
|
}
|
|
1298
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1299
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1298
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1299
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiSelect, isStandalone: true, selector: "gui-select", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-select" }, providers: [
|
|
1300
1300
|
{
|
|
1301
1301
|
provide: NG_VALUE_ACCESSOR,
|
|
1302
1302
|
useExisting: forwardRef(() => GuiSelect),
|
|
1303
1303
|
multi: true,
|
|
1304
1304
|
},
|
|
1305
|
-
], ngImport: i0, template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mat-select\n panelClass=\"gui-select\"\n hideSingleSelectionIndicator\n disableRipple\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [multiple]=\"config.multiple || false\"\n (selectionChange)=\"onValueChange()\"\n >\n @for (opt of config.options; track $index) {\n <mat-option [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n <span [style.font-family]=\"config.useFont ? opt.value : ''\">{{ opt.label }}</span>\n </mat-option>\n }\n </mat-select>\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".gui-select{--mat-select-trigger-text-line-height: 1rem;--mat-select-trigger-text-size: .75rem;--mat-option-label-text-size: .75rem}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height);padding:0 .5rem}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:.5rem}[dir=rtl] .gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:.5rem}.gui-select .mat-mdc-select-arrow-wrapper{height:1rem}.gui-select .mat-pseudo-checkbox{width:1rem;height:1rem;border-width:1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1305
|
+
], ngImport: i0, template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mat-select\n panelClass=\"gui-select\"\n hideSingleSelectionIndicator\n disableRipple\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [multiple]=\"config.multiple || false\"\n (selectionChange)=\"onValueChange()\"\n >\n @for (opt of config.options; track $index) {\n <mat-option [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n <span [style.font-family]=\"config.useFont ? opt.value : ''\">{{ opt.label }}</span>\n </mat-option>\n }\n </mat-select>\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".gui-select{--mat-select-trigger-text-line-height: 1rem;--mat-select-trigger-text-size: .75rem;--mat-option-label-text-size: .75rem}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));padding:0 .5rem}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:.5rem}[dir=rtl] .gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:.5rem}.gui-select .mat-mdc-select-arrow-wrapper{height:1rem}.gui-select .mat-pseudo-checkbox{width:1rem;height:1rem;border-width:1px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1306
1306
|
}
|
|
1307
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1307
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiSelect, decorators: [{
|
|
1308
1308
|
type: Component,
|
|
1309
1309
|
args: [{ selector: 'gui-select', host: {
|
|
1310
1310
|
class: 'gui-field gui-select',
|
|
@@ -1314,7 +1314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1314
1314
|
useExisting: forwardRef(() => GuiSelect),
|
|
1315
1315
|
multi: true,
|
|
1316
1316
|
},
|
|
1317
|
-
],
|
|
1317
|
+
], imports: [
|
|
1318
1318
|
FormsModule,
|
|
1319
1319
|
MatFormField,
|
|
1320
1320
|
MatPrefix,
|
|
@@ -1323,7 +1323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1323
1323
|
MatSuffix,
|
|
1324
1324
|
MatHint,
|
|
1325
1325
|
GuiFieldLabel,
|
|
1326
|
-
], template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mat-select\n panelClass=\"gui-select\"\n hideSingleSelectionIndicator\n disableRipple\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [multiple]=\"config.multiple || false\"\n (selectionChange)=\"onValueChange()\"\n >\n @for (opt of config.options; track $index) {\n <mat-option [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n <span [style.font-family]=\"config.useFont ? opt.value : ''\">{{ opt.label }}</span>\n </mat-option>\n }\n </mat-select>\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".gui-select{--mat-select-trigger-text-line-height: 1rem;--mat-select-trigger-text-size: .75rem;--mat-option-label-text-size: .75rem}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height);padding:0 .5rem}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:.5rem}[dir=rtl] .gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:.5rem}.gui-select .mat-mdc-select-arrow-wrapper{height:1rem}.gui-select .mat-pseudo-checkbox{width:1rem;height:1rem;border-width:1px}\n"] }]
|
|
1326
|
+
], template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <mat-select\n panelClass=\"gui-select\"\n hideSingleSelectionIndicator\n disableRipple\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [multiple]=\"config.multiple || false\"\n (selectionChange)=\"onValueChange()\"\n >\n @for (opt of config.options; track $index) {\n <mat-option [value]=\"opt.value\" [disabled]=\"opt.disabled\">\n <span [style.font-family]=\"config.useFont ? opt.value : ''\">{{ opt.label }}</span>\n </mat-option>\n }\n </mat-select>\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [".gui-select{--mat-select-trigger-text-line-height: 1rem;--mat-select-trigger-text-size: .75rem;--mat-option-label-text-size: .75rem}.gui-select .mat-mdc-option{min-height:var(--mat-option-label-text-line-height, var(--mat-sys-label-large-line-height));padding:0 .5rem}.gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:.5rem}[dir=rtl] .gui-select .mat-mdc-option .mat-pseudo-checkbox-full{margin-right:0;margin-left:.5rem}.gui-select .mat-mdc-select-arrow-wrapper{height:1rem}.gui-select .mat-pseudo-checkbox{width:1rem;height:1rem;border-width:1px}\n"] }]
|
|
1327
1327
|
}], propDecorators: { config: [{
|
|
1328
1328
|
type: Input
|
|
1329
1329
|
}], disabled: [{
|
|
@@ -1370,16 +1370,16 @@ class GuiSlider {
|
|
|
1370
1370
|
this.maxValue = this.value[1];
|
|
1371
1371
|
}
|
|
1372
1372
|
}
|
|
1373
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1374
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1373
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiSlider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1374
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiSlider, isStandalone: true, selector: "gui-slider", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-slider" }, providers: [
|
|
1375
1375
|
{
|
|
1376
1376
|
provide: NG_VALUE_ACCESSOR,
|
|
1377
1377
|
useExisting: forwardRef(() => GuiSlider),
|
|
1378
1378
|
multi: true,
|
|
1379
1379
|
},
|
|
1380
|
-
], ngImport: i0, template: "@if (config.mode !== 'range') {\n <!-- normal slider -->\n <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\" />\n </mat-slider>\n <mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <input\n matInput\n 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 />\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n </mat-form-field>\n} @else {\n <!-- range slider -->\n <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [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 @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <input\n matInput\n 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 />\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n </mat-form-field>\n <mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <input\n matInput\n 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 />\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n </mat-form-field>\n}\n\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: .75rem;--mdc-slider-handle-height: .75rem;--mdc-slider-inactive-track-height: .125rem;--mdc-slider-active-track-height: .125rem;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:.375rem}[dir=rtl] .gui-slider .mat-mdc-form-field{margin-left:0;margin-right:.375rem}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1380
|
+
], ngImport: i0, template: "@if (config.mode !== 'range') {\n <!-- normal slider -->\n <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [max]=\"config.max\">\n <input matSliderThumb [(ngModel)]=\"value\" (valueChange)=\"onValueChange()\" />\n </mat-slider>\n <mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <input\n matInput\n 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 />\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n </mat-form-field>\n} @else {\n <!-- range slider -->\n <mat-slider [disabled]=\"disabled\" [step]=\"config.step\" [min]=\"config.min\" [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 @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <input\n matInput\n 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 />\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n </mat-form-field>\n <mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <input\n matInput\n 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 />\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n </mat-form-field>\n}\n\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-slider .mat-mdc-slider{--mdc-slider-handle-width: .75rem;--mdc-slider-handle-height: .75rem;--mdc-slider-inactive-track-height: .125rem;--mdc-slider-active-track-height: .125rem;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:.375rem}[dir=rtl] .gui-slider .mat-mdc-form-field{margin-left:0;margin-right:.375rem}.gui-slider .mat-mdc-form-field input::-webkit-outer-spin-button,.gui-slider .mat-mdc-form-field input::-webkit-inner-spin-button{appearance:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1381
1381
|
}
|
|
1382
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiSlider, decorators: [{
|
|
1383
1383
|
type: Component,
|
|
1384
1384
|
args: [{ selector: 'gui-slider', host: {
|
|
1385
1385
|
class: 'gui-field gui-slider',
|
|
@@ -1389,7 +1389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1389
1389
|
useExisting: forwardRef(() => GuiSlider),
|
|
1390
1390
|
multi: true,
|
|
1391
1391
|
},
|
|
1392
|
-
],
|
|
1392
|
+
], imports: [
|
|
1393
1393
|
FormsModule,
|
|
1394
1394
|
MatSlider,
|
|
1395
1395
|
MatSliderThumb,
|
|
@@ -1433,8 +1433,8 @@ class GuiSwitch {
|
|
|
1433
1433
|
onValueChange() {
|
|
1434
1434
|
this.onChange(this.value);
|
|
1435
1435
|
}
|
|
1436
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1437
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1436
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1437
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiSwitch, isStandalone: true, selector: "gui-switch", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-switch" }, providers: [
|
|
1438
1438
|
{
|
|
1439
1439
|
provide: NG_VALUE_ACCESSOR,
|
|
1440
1440
|
useExisting: forwardRef(() => GuiSwitch),
|
|
@@ -1442,7 +1442,7 @@ class GuiSwitch {
|
|
|
1442
1442
|
},
|
|
1443
1443
|
], ngImport: i0, template: "<mat-slide-toggle [(ngModel)]=\"value\" [disabled]=\"disabled\" hideIcon (change)=\"onValueChange()\" />\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-switch .mat-mdc-slide-toggle{--mat-switch-unselected-handle-size: .5rem;--mat-switch-selected-handle-size: .75rem;--mat-switch-pressed-handle-size: .75rem;--mat-switch-selected-handle-horizontal-margin: 0;--mat-switch-selected-pressed-handle-horizontal-margin: 0;--mat-switch-unselected-handle-horizontal-margin: 0 .25rem;--mat-switch-unselected-pressed-handle-horizontal-margin: 0 .125rem;--mat-switch-track-outline-width: 1px;--mdc-switch-track-width: 1.75rem;--mdc-switch-track-height: 1rem;--mdc-switch-track-shape: .5rem;--mdc-switch-handle-width: .875rem;--mdc-switch-state-layer-size: 1.5rem;line-height:var(--mdc-switch-state-layer-size)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1444
1444
|
}
|
|
1445
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1445
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiSwitch, decorators: [{
|
|
1446
1446
|
type: Component,
|
|
1447
1447
|
args: [{ selector: 'gui-switch', host: {
|
|
1448
1448
|
class: 'gui-field gui-switch',
|
|
@@ -1452,7 +1452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1452
1452
|
useExisting: forwardRef(() => GuiSwitch),
|
|
1453
1453
|
multi: true,
|
|
1454
1454
|
},
|
|
1455
|
-
],
|
|
1455
|
+
], imports: [FormsModule, MatSlideToggle, MatHint, GuiFieldLabel], template: "<mat-slide-toggle [(ngModel)]=\"value\" [disabled]=\"disabled\" hideIcon (change)=\"onValueChange()\" />\n@if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n}\n", styles: [".gui-switch .mat-mdc-slide-toggle{--mat-switch-unselected-handle-size: .5rem;--mat-switch-selected-handle-size: .75rem;--mat-switch-pressed-handle-size: .75rem;--mat-switch-selected-handle-horizontal-margin: 0;--mat-switch-selected-pressed-handle-horizontal-margin: 0;--mat-switch-unselected-handle-horizontal-margin: 0 .25rem;--mat-switch-unselected-pressed-handle-horizontal-margin: 0 .125rem;--mat-switch-track-outline-width: 1px;--mdc-switch-track-width: 1.75rem;--mdc-switch-track-height: 1rem;--mdc-switch-track-shape: .5rem;--mdc-switch-handle-width: .875rem;--mdc-switch-state-layer-size: 1.5rem;line-height:var(--mdc-switch-state-layer-size)}\n"] }]
|
|
1456
1456
|
}], propDecorators: { config: [{
|
|
1457
1457
|
type: Input
|
|
1458
1458
|
}], disabled: [{
|
|
@@ -1485,16 +1485,16 @@ class GuiTextarea {
|
|
|
1485
1485
|
onValueChange() {
|
|
1486
1486
|
this.onChange(this.value);
|
|
1487
1487
|
}
|
|
1488
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1489
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1488
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1489
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiTextarea, isStandalone: true, selector: "gui-textarea", inputs: { config: "config", disabled: "disabled" }, host: { classAttribute: "gui-field gui-textarea" }, providers: [
|
|
1490
1490
|
{
|
|
1491
1491
|
provide: NG_VALUE_ACCESSOR,
|
|
1492
1492
|
useExisting: forwardRef(() => GuiTextarea),
|
|
1493
1493
|
multi: true,
|
|
1494
1494
|
},
|
|
1495
|
-
], ngImport: i0, template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <textarea\n matInput\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [rows]=\"config.rows\"\n (change)=\"onValueChange()\"\n ></textarea>\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1495
|
+
], ngImport: i0, template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <textarea\n matInput\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [rows]=\"config.rows\"\n (change)=\"onValueChange()\"\n ></textarea>\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1496
1496
|
}
|
|
1497
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiTextarea, decorators: [{
|
|
1498
1498
|
type: Component,
|
|
1499
1499
|
args: [{ selector: 'gui-textarea', host: {
|
|
1500
1500
|
class: 'gui-field gui-textarea',
|
|
@@ -1504,7 +1504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1504
1504
|
useExisting: forwardRef(() => GuiTextarea),
|
|
1505
1505
|
multi: true,
|
|
1506
1506
|
},
|
|
1507
|
-
],
|
|
1507
|
+
], imports: [FormsModule, MatFormField, MatPrefix, MatInput, MatSuffix, MatHint, GuiFieldLabel], template: "<mat-form-field>\n @if (config.prefix) {\n <span matPrefix>{{ config.prefix }}</span>\n }\n <textarea\n matInput\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [placeholder]=\"config.placeholder || ''\"\n [rows]=\"config.rows\"\n (change)=\"onValueChange()\"\n ></textarea>\n @if (config.suffix) {\n <span matSuffix>{{ config.suffix }}</span>\n }\n @if (config.parentType === 'inline') {\n <mat-hint>\n <gui-field-label [config]=\"config\" />\n </mat-hint>\n }\n</mat-form-field>\n" }]
|
|
1508
1508
|
}], propDecorators: { config: [{
|
|
1509
1509
|
type: Input
|
|
1510
1510
|
}], disabled: [{
|
|
@@ -1739,15 +1739,15 @@ class GuiForm {
|
|
|
1739
1739
|
e.stopPropagation();
|
|
1740
1740
|
tabs.mode = mode;
|
|
1741
1741
|
}
|
|
1742
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1743
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GuiForm, isStandalone: true, selector: "gui-form", inputs: { form: "form", config: "config", model: "model" }, outputs: { modelChange: "modelChange" }, host: { properties: { "attr.id": "uid" }, classAttribute: "gui-form" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n @for (item of formFields; track item) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\" />\n </div>\n }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n @if (item.show) {\n <ng-container [formGroup]=\"form\">\n @switch (item.type) {\n @case ('text') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('number') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('select') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('switch') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('slider') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('buttonToggle') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('fill') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('file') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('image') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('video') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('audio') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('imageSelect') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n </gui-field-group>\n }\n @case ('combobox') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-combobox [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n </gui-field-group>\n }\n @case ('textarea') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('codearea') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-codearea [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('hidden') {\n <input type=\"hidden\" [formControlName]=\"item.key\">\n }\n @case ('inline') {\n <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n @for (child of item.children; track child) {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get(item.key)\n }\" />\n }\n </gui-inline-group>\n }\n @case ('group') {\n <mat-expansion-panel [formGroupName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @for (child of item.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get(item.key)\n }\" />\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('tabs') {\n <mat-expansion-panel [formArrayName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n <!-- Show operation buttons when panel opened -->\n @if (item.expanded) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'normal')\">\n <mat-icon svgIcon=\"horizontal\" />\n </button>\n <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'list')\">\n <mat-icon svgIcon=\"vertical\" />\n </button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n }\n </gui-icon-button-wrapper>\n }\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @if (item.mode!=='list') {\n <!-- Horizontal mode -->\n <mat-tab-group class=\"gui-tabs\" disableRipple\n [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n @for (tab of item.children; track tab; let i = $index) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <div>{{tab.name | ejs:{i} }}</div>\n </ng-template>\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: tab, parent: item, formGroup: form.get([item.key])\n }\" />\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get([item.key, i])\n }\" />\n </div>\n }\n }\n </mat-tab>\n }\n </mat-tab-group>\n } @else {\n <!-- Vertical mode -->\n <div class=\"gui-list\">\n @for (tab of item.children; track tab; let i = $index) {\n <div class=\"gui-list-item\"\n [class.gui-list-item-active]=\"item.selectedIndex===i\">\n <div class=\"gui-list-item-heading\">\n <button class=\"gui-list-item-title\" type=\"button\"\n (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item, i)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n </gui-icon-button-wrapper>\n }\n </div>\n <div class=\"gui-list-item-content\">\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: tab, parent: item, formGroup: form.get([item.key])\n }\" />\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get([item.key, i])\n }\" />\n </div>\n }\n }\n </div>\n </div>\n }\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('menu') {\n <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n @for (menuChild of item.children; track menuChild) {\n <mat-tab [label]=\"menuChild.name\"\n [disabled]=\"menuChild.disabled\">\n <ng-template matTabContent>\n @if (menuChild.type==='menuItem') {\n <!-- Must wrap with div -->\n @for (controlItem of menuChild.children; track controlItem) {\n <div [formGroupName]=\"menuChild.key\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: controlItem, formGroup: form.get([item.key, menuChild.key])\n }\" />\n </div>\n }\n }\n <!-- Support for unlimited nesting -->\n @if (menuChild.type==='menu') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: menuChild, formGroup: form.get(item.key)\n }\" />\n }\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n }\n }\n </ng-container>\n }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: .25rem;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: GuiFieldGroup, selector: "gui-field-group", inputs: ["config"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "component", type: GuiInputText, selector: "gui-input-text", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInputNumber, selector: "gui-input-number", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSelect, selector: "gui-select", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSwitch, selector: "gui-switch", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSlider, selector: "gui-slider", inputs: ["config", "disabled"] }, { kind: "component", type: GuiButtonToggle, selector: "gui-button-toggle", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFill, selector: "gui-fill", inputs: ["config", "disabled", "type"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }, { kind: "component", type: GuiImageSelect, selector: "gui-image-select", inputs: ["config", "disabled", "appendTo"] }, { kind: "component", type: GuiTextarea, selector: "gui-textarea", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInlineGroup, selector: "gui-inline-group", inputs: ["config"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }, { kind: "component", type: GuiCombobox, selector: "gui-combobox", inputs: ["config", "disabled", "appendTo"] }, { kind: "component", type: GuiCodearea, selector: "gui-codearea", inputs: ["config", "disabled", "setup", "height", "language"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1742
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1743
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GuiForm, isStandalone: true, selector: "gui-form", inputs: { form: "form", config: "config", model: "model" }, outputs: { modelChange: "modelChange" }, host: { properties: { "attr.id": "uid" }, classAttribute: "gui-form" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n @for (item of formFields; track item) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\" />\n </div>\n }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n @if (item.show) {\n <ng-container [formGroup]=\"form\">\n @switch (item.type) {\n @case ('text') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('number') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('select') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('switch') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('slider') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('buttonToggle') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('fill') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('file') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('image') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('video') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('audio') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('imageSelect') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n </gui-field-group>\n }\n @case ('combobox') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-combobox [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n </gui-field-group>\n }\n @case ('textarea') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('codearea') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-codearea [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('hidden') {\n <input type=\"hidden\" [formControlName]=\"item.key\">\n }\n @case ('inline') {\n <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n @for (child of item.children; track child) {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get(item.key)\n }\" />\n }\n </gui-inline-group>\n }\n @case ('group') {\n <mat-expansion-panel [formGroupName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @for (child of item.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get(item.key)\n }\" />\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('tabs') {\n <mat-expansion-panel [formArrayName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n <!-- Show operation buttons when panel opened -->\n @if (item.expanded) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'normal')\">\n <mat-icon svgIcon=\"horizontal\" />\n </button>\n <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'list')\">\n <mat-icon svgIcon=\"vertical\" />\n </button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n }\n </gui-icon-button-wrapper>\n }\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @if (item.mode!=='list') {\n <!-- Horizontal mode -->\n <mat-tab-group class=\"gui-tabs\" disableRipple\n [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n @for (tab of item.children; track tab; let i = $index) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <div>{{tab.name | ejs:{i} }}</div>\n </ng-template>\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: tab, parent: item, formGroup: form.get([item.key])\n }\" />\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get([item.key, i])\n }\" />\n </div>\n }\n }\n </mat-tab>\n }\n </mat-tab-group>\n } @else {\n <!-- Vertical mode -->\n <div class=\"gui-list\">\n @for (tab of item.children; track tab; let i = $index) {\n <div class=\"gui-list-item\"\n [class.gui-list-item-active]=\"item.selectedIndex===i\">\n <div class=\"gui-list-item-heading\">\n <button class=\"gui-list-item-title\" type=\"button\"\n (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item, i)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n </gui-icon-button-wrapper>\n }\n </div>\n <div class=\"gui-list-item-content\">\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: tab, parent: item, formGroup: form.get([item.key])\n }\" />\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get([item.key, i])\n }\" />\n </div>\n }\n }\n </div>\n </div>\n }\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('menu') {\n <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n @for (menuChild of item.children; track menuChild) {\n <mat-tab [label]=\"menuChild.name\"\n [disabled]=\"menuChild.disabled\">\n <ng-template matTabContent>\n @if (menuChild.type==='menuItem') {\n <!-- Must wrap with div -->\n @for (controlItem of menuChild.children; track controlItem) {\n <div [formGroupName]=\"menuChild.key\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: controlItem, formGroup: form.get([item.key, menuChild.key])\n }\" />\n </div>\n }\n }\n <!-- Support for unlimited nesting -->\n @if (menuChild.type==='menu') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: menuChild, formGroup: form.get(item.key)\n }\" />\n }\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n }\n }\n </ng-container>\n }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height, 1px) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color, var(--mat-sys-on-surface));content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: .25rem;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color, var(--mat-sys-surface-variant))}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;background-color:var(--mdc-tab-indicator-active-indicator-color, var(--mat-sys-primary))}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "directive", type: MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "directive", type: MatTabContent, selector: "[matTabContent]" }, { kind: "component", type: GuiFieldGroup, selector: "gui-field-group", inputs: ["config"] }, { kind: "directive", type: GuiFlexDirective, selector: "[flex]", inputs: ["flex"] }, { kind: "component", type: GuiInputText, selector: "gui-input-text", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInputNumber, selector: "gui-input-number", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSelect, selector: "gui-select", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSwitch, selector: "gui-switch", inputs: ["config", "disabled"] }, { kind: "component", type: GuiSlider, selector: "gui-slider", inputs: ["config", "disabled"] }, { kind: "component", type: GuiButtonToggle, selector: "gui-button-toggle", inputs: ["config", "disabled"] }, { kind: "component", type: GuiFill, selector: "gui-fill", inputs: ["config", "disabled", "type"] }, { kind: "component", type: GuiFileUploader, selector: "gui-file-uploader", inputs: ["config", "disabled", "type", "name", "accept"], outputs: ["fileChange"] }, { kind: "component", type: GuiImageSelect, selector: "gui-image-select", inputs: ["config", "disabled", "appendTo"] }, { kind: "component", type: GuiTextarea, selector: "gui-textarea", inputs: ["config", "disabled"] }, { kind: "component", type: GuiInlineGroup, selector: "gui-inline-group", inputs: ["config"] }, { kind: "component", type: GuiFieldLabel, selector: "gui-field-label", inputs: ["config", "index"] }, { kind: "component", type: GuiIconButtonWrapper, selector: "gui-icon-button-wrapper" }, { kind: "pipe", type: GuiEjsPipe, name: "ejs" }, { kind: "component", type: GuiCombobox, selector: "gui-combobox", inputs: ["config", "disabled", "appendTo"] }, { kind: "component", type: GuiCodearea, selector: "gui-codearea", inputs: ["config", "disabled", "setup", "height", "language"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1744
1744
|
}
|
|
1745
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1745
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiForm, decorators: [{
|
|
1746
1746
|
type: Component,
|
|
1747
1747
|
args: [{ selector: 'gui-form', host: {
|
|
1748
1748
|
'[attr.id]': 'uid',
|
|
1749
1749
|
'class': 'gui-form',
|
|
1750
|
-
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1750
|
+
}, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1751
1751
|
ReactiveFormsModule,
|
|
1752
1752
|
NgTemplateOutlet,
|
|
1753
1753
|
MatExpansionPanel,
|
|
@@ -1777,7 +1777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1777
1777
|
GuiEjsPipe,
|
|
1778
1778
|
GuiCombobox,
|
|
1779
1779
|
GuiCodearea,
|
|
1780
|
-
], template: "<form [formGroup]=\"form\">\n @for (item of formFields; track item) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\" />\n </div>\n }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n @if (item.show) {\n <ng-container [formGroup]=\"form\">\n @switch (item.type) {\n @case ('text') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('number') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('select') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('switch') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('slider') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('buttonToggle') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('fill') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('file') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('image') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('video') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('audio') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('imageSelect') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n </gui-field-group>\n }\n @case ('combobox') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-combobox [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n </gui-field-group>\n }\n @case ('textarea') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('codearea') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-codearea [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('hidden') {\n <input type=\"hidden\" [formControlName]=\"item.key\">\n }\n @case ('inline') {\n <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n @for (child of item.children; track child) {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get(item.key)\n }\" />\n }\n </gui-inline-group>\n }\n @case ('group') {\n <mat-expansion-panel [formGroupName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @for (child of item.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get(item.key)\n }\" />\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('tabs') {\n <mat-expansion-panel [formArrayName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n <!-- Show operation buttons when panel opened -->\n @if (item.expanded) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'normal')\">\n <mat-icon svgIcon=\"horizontal\" />\n </button>\n <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'list')\">\n <mat-icon svgIcon=\"vertical\" />\n </button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n }\n </gui-icon-button-wrapper>\n }\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @if (item.mode!=='list') {\n <!-- Horizontal mode -->\n <mat-tab-group class=\"gui-tabs\" disableRipple\n [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n @for (tab of item.children; track tab; let i = $index) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <div>{{tab.name | ejs:{i} }}</div>\n </ng-template>\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: tab, parent: item, formGroup: form.get([item.key])\n }\" />\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get([item.key, i])\n }\" />\n </div>\n }\n }\n </mat-tab>\n }\n </mat-tab-group>\n } @else {\n <!-- Vertical mode -->\n <div class=\"gui-list\">\n @for (tab of item.children; track tab; let i = $index) {\n <div class=\"gui-list-item\"\n [class.gui-list-item-active]=\"item.selectedIndex===i\">\n <div class=\"gui-list-item-heading\">\n <button class=\"gui-list-item-title\" type=\"button\"\n (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item, i)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n </gui-icon-button-wrapper>\n }\n </div>\n <div class=\"gui-list-item-content\">\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: tab, parent: item, formGroup: form.get([item.key])\n }\" />\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get([item.key, i])\n }\" />\n </div>\n }\n }\n </div>\n </div>\n }\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('menu') {\n <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n @for (menuChild of item.children; track menuChild) {\n <mat-tab [label]=\"menuChild.name\"\n [disabled]=\"menuChild.disabled\">\n <ng-template matTabContent>\n @if (menuChild.type==='menuItem') {\n <!-- Must wrap with div -->\n @for (controlItem of menuChild.children; track controlItem) {\n <div [formGroupName]=\"menuChild.key\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: controlItem, formGroup: form.get([item.key, menuChild.key])\n }\" />\n </div>\n }\n }\n <!-- Support for unlimited nesting -->\n @if (menuChild.type==='menu') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: menuChild, formGroup: form.get(item.key)\n }\" />\n }\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n }\n }\n </ng-container>\n }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color);content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: .25rem;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color)}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;background-color:var(--mdc-tab-indicator-active-indicator-color)}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"] }]
|
|
1780
|
+
], template: "<form [formGroup]=\"form\">\n @for (item of formFields; track item) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{$implicit: item, formGroup: form}\" />\n </div>\n }\n</form>\n\n<ng-template #controlType let-item let-parent=\"parent\" let-form=\"formGroup\">\n @if (item.show) {\n <ng-container [formGroup]=\"form\">\n @switch (item.type) {\n @case ('text') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-text [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('number') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-input-number [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('select') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-select [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('switch') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-switch [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('slider') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-slider [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('buttonToggle') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-button-toggle [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('fill') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-fill [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('file') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('image') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"image\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('video') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"video\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('audio') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-file-uploader type=\"audio\" [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('imageSelect') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-image-select [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n </gui-field-group>\n }\n @case ('combobox') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-combobox [formControlName]=\"item.key\" [config]=\"item\" [appendTo]=\"'#'+uid\" />\n </gui-field-group>\n }\n @case ('textarea') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-textarea [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('codearea') {\n <gui-field-group [config]=\"item\" [flex]=\"item.col\">\n <gui-codearea [formControlName]=\"item.key\" [config]=\"item\" />\n </gui-field-group>\n }\n @case ('hidden') {\n <input type=\"hidden\" [formControlName]=\"item.key\">\n }\n @case ('inline') {\n <gui-inline-group [config]=\"item\" [formGroupName]=\"item.key\">\n @for (child of item.children; track child) {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get(item.key)\n }\" />\n }\n </gui-inline-group>\n }\n @case ('group') {\n <mat-expansion-panel [formGroupName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @for (child of item.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get(item.key)\n }\" />\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('tabs') {\n <mat-expansion-panel [formArrayName]=\"item.key\"\n [(expanded)]=\"item.expanded\" [disabled]=\"item.disabled\">\n <mat-expansion-panel-header>\n <gui-field-label [config]=\"item\" />\n <!-- Show operation buttons when panel opened -->\n @if (item.expanded) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [color]=\"item.mode!=='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'normal')\">\n <mat-icon svgIcon=\"horizontal\" />\n </button>\n <button mat-icon-button type=\"button\" [color]=\"item.mode==='list'?'primary':''\"\n (click)=\"changeTabsMode($event, item, 'list')\">\n <mat-icon svgIcon=\"vertical\" />\n </button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n }\n </gui-icon-button-wrapper>\n }\n </mat-expansion-panel-header>\n <!-- Lazy rendering -->\n <ng-template matExpansionPanelContent>\n @if (item.mode!=='list') {\n <!-- Horizontal mode -->\n <mat-tab-group class=\"gui-tabs\" disableRipple\n [mat-stretch-tabs]=\"false\" [(selectedIndex)]=\"item.selectedIndex\">\n @for (tab of item.children; track tab; let i = $index) {\n <mat-tab [disabled]=\"tab.disabled\">\n <ng-template mat-tab-label>\n <div>{{tab.name | ejs:{i} }}</div>\n </ng-template>\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: tab, parent: item, formGroup: form.get([item.key])\n }\" />\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get([item.key, i])\n }\" />\n </div>\n }\n }\n </mat-tab>\n }\n </mat-tab-group>\n } @else {\n <!-- Vertical mode -->\n <div class=\"gui-list\">\n @for (tab of item.children; track tab; let i = $index) {\n <div class=\"gui-list-item\"\n [class.gui-list-item-active]=\"item.selectedIndex===i\">\n <div class=\"gui-list-item-heading\">\n <button class=\"gui-list-item-title\" type=\"button\"\n (click)=\"item.selectedIndex=i\">{{tab.name | ejs:{i} }}</button>\n @if (item.template && (item.addable || item.addable===undefined)) {\n <gui-icon-button-wrapper>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, true, i)\">\n <mat-icon svgIcon=\"copy\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"addTab($event, form.get(item.key), item, false, i)\">\n <mat-icon svgIcon=\"add\" />\n </button>\n <button mat-icon-button type=\"button\" [disabled]=\"item.disabled\"\n (click)=\"removeTab($event, form.get(item.key), item, i)\">\n <mat-icon svgIcon=\"delete\" />\n </button>\n </gui-icon-button-wrapper>\n }\n </div>\n <div class=\"gui-list-item-content\">\n <!-- FormControl & FormArray -->\n @if (!tab.children || tab.children.length===0 || tab.type==='tabs') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: tab, parent: item, formGroup: form.get([item.key])\n }\" />\n }\n <!-- FormGroup -->\n @if (tab.children?.length>0 && tab.type!=='tabs') {\n @for (child of tab.children; track child) {\n <div>\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: child, parent: item, formGroup: form.get([item.key, i])\n }\" />\n </div>\n }\n }\n </div>\n </div>\n }\n </div>\n }\n </ng-template>\n </mat-expansion-panel>\n }\n @case ('menu') {\n <mat-tab-group class=\"gui-menu\" [formGroupName]=\"item.key\" disableRipple>\n @for (menuChild of item.children; track menuChild) {\n <mat-tab [label]=\"menuChild.name\"\n [disabled]=\"menuChild.disabled\">\n <ng-template matTabContent>\n @if (menuChild.type==='menuItem') {\n <!-- Must wrap with div -->\n @for (controlItem of menuChild.children; track controlItem) {\n <div [formGroupName]=\"menuChild.key\">\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: controlItem, formGroup: form.get([item.key, menuChild.key])\n }\" />\n </div>\n }\n }\n <!-- Support for unlimited nesting -->\n @if (menuChild.type==='menu') {\n <ng-template [ngTemplateOutlet]=\"controlType\"\n [ngTemplateOutletContext]=\"{\n $implicit: menuChild, formGroup: form.get(item.key)\n }\" />\n }\n </ng-template>\n </mat-tab>\n }\n </mat-tab-group>\n }\n }\n </ng-container>\n }\n</ng-template>\n", styles: [".gui-form{--mat-expansion-header-text-size: .75rem;--mat-expansion-header-collapsed-state-height: 2rem;--mat-expansion-header-expanded-state-height: 2rem;--mat-expansion-container-text-size: .75rem;--mat-expansion-container-shape: 0;position:relative;display:block;font-size:.75rem}.gui-form .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.gui-form .mat-expansion-panel-body{padding:0}.gui-form .mat-expansion-panel-header{padding:0 .75rem}.gui-form .mat-expansion-panel-header .mat-content{align-items:center;padding-right:.5rem}[dir=rtl] .gui-form .mat-expansion-panel-header .mat-content{padding-right:0;padding-left:.5rem}.gui-form .mat-expansion-panel-header .mat-content gui-field-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.gui-form .mat-expansion-indicator svg{width:1.5rem;height:1.5rem;margin:0 -.5rem}.gui-form .mat-expansion-indicator:after{vertical-align:.125rem}.gui-form .mat-mdc-tab-header{--mat-tab-header-label-text-size: .75rem;--mdc-secondary-navigation-tab-container-height: 1.5rem}.gui-form .mat-mdc-tab-header-pagination{min-width:var(--mdc-secondary-navigation-tab-container-height)}.gui-form .mat-mdc-tab{min-width:auto;padding:0 .75rem}.gui-list-item-heading{display:flex;align-items:center;position:relative;padding:0 .75rem;line-height:1.5rem;border-bottom:var(--mat-tab-header-divider-height, 1px) solid transparent}.gui-list-item-heading:before{position:absolute;left:0;width:.125rem;height:1rem;background-color:var(--mat-expansion-header-text-color, var(--mat-sys-on-surface));content:\"\"}[dir=rtl] .gui-list-item-heading:before{left:auto;right:0}.gui-list-item-title{display:flex;flex:1;padding:0;background-color:transparent;border:none;color:inherit;font-size:inherit;font-family:inherit;letter-spacing:inherit;line-height:inherit;cursor:pointer}.gui-list-item-active .gui-list-item-title{font-weight:700}.gui-menu .mat-mdc-tab-header{--mdc-tab-indicator-active-indicator-shape: .25rem;padding:.25rem;background-color:var(--mdc-filled-text-field-container-color, var(--mat-sys-surface-variant))}.gui-menu .mat-mdc-tab-header .mdc-tab__ripple:before{border-radius:var(--mdc-tab-indicator-active-indicator-shape)}.gui-menu .mat-mdc-tab-labels{gap:.25rem}.gui-menu .mdc-tab-indicator .mdc-tab-indicator__content{height:100%;background-color:var(--mdc-tab-indicator-active-indicator-color, var(--mat-sys-primary))}.gui-menu .mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:.24}\n"] }]
|
|
1781
1781
|
}], ctorParameters: () => [], propDecorators: { form: [{
|
|
1782
1782
|
type: Input
|
|
1783
1783
|
}], config: [{
|
|
@@ -1789,8 +1789,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1789
1789
|
}] } });
|
|
1790
1790
|
|
|
1791
1791
|
class GuiModule {
|
|
1792
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1793
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1792
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1793
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: GuiModule, imports: [CommonModule,
|
|
1794
1794
|
ReactiveFormsModule,
|
|
1795
1795
|
FormsModule,
|
|
1796
1796
|
MatFormFieldModule,
|
|
@@ -1849,7 +1849,7 @@ class GuiModule {
|
|
|
1849
1849
|
GuiIconButtonWrapper,
|
|
1850
1850
|
GuiEjsPipe,
|
|
1851
1851
|
GuiFlexDirective] }); }
|
|
1852
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1852
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiModule, imports: [CommonModule,
|
|
1853
1853
|
ReactiveFormsModule,
|
|
1854
1854
|
FormsModule,
|
|
1855
1855
|
MatFormFieldModule,
|
|
@@ -1881,7 +1881,7 @@ class GuiModule {
|
|
|
1881
1881
|
GuiCodeareaDialog,
|
|
1882
1882
|
GuiFileUploader] }); }
|
|
1883
1883
|
}
|
|
1884
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1884
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GuiModule, decorators: [{
|
|
1885
1885
|
type: NgModule,
|
|
1886
1886
|
args: [{
|
|
1887
1887
|
imports: [
|