@3kles/kles-material-dynamicforms 22.0.0 → 22.0.2
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.
|
@@ -3487,19 +3487,25 @@ class KlesFormSlideToggleComponent extends KlesFieldAbstract {
|
|
|
3487
3487
|
super.ngOnDestroy();
|
|
3488
3488
|
}
|
|
3489
3489
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormSlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3490
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
3491
|
-
<div [formGroup]="group">
|
|
3490
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: KlesFormSlideToggleComponent, isStandalone: true, selector: "kles-form-slide-toggle", viewQueries: [{ propertyName: "slideToggle", first: true, predicate: MatSlideToggle, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
3491
|
+
<div class="kles-slide-toggle" [formGroup]="group">
|
|
3492
3492
|
<mat-slide-toggle klesFocusTarget [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{ label() }}</mat-slide-toggle>
|
|
3493
|
+
@if (hint()) {
|
|
3494
|
+
<div class="kles-slide-toggle__hint">{{ hint() }}</div>
|
|
3495
|
+
}
|
|
3493
3496
|
</div>
|
|
3494
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "fullWidth", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: KlesFocusTargetDirective, selector: "[klesFocusTarget]" }] }); }
|
|
3497
|
+
`, isInline: true, styles: [".kles-slide-toggle{display:flex;flex-direction:column;align-items:flex-start}.kles-slide-toggle__hint{color:var(--mat-sys-on-surface-variant);font-size:12px;font-weight:400;line-height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "fullWidth", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: KlesFocusTargetDirective, selector: "[klesFocusTarget]" }] }); }
|
|
3495
3498
|
}
|
|
3496
3499
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: KlesFormSlideToggleComponent, decorators: [{
|
|
3497
3500
|
type: Component,
|
|
3498
3501
|
args: [{ selector: 'kles-form-slide-toggle', template: `
|
|
3499
|
-
<div [formGroup]="group">
|
|
3502
|
+
<div class="kles-slide-toggle" [formGroup]="group">
|
|
3500
3503
|
<mat-slide-toggle klesFocusTarget [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{ label() }}</mat-slide-toggle>
|
|
3504
|
+
@if (hint()) {
|
|
3505
|
+
<div class="kles-slide-toggle__hint">{{ hint() }}</div>
|
|
3506
|
+
}
|
|
3501
3507
|
</div>
|
|
3502
|
-
`, standalone: true, imports: [CommonModule, MatSlideToggle, MatTooltip, ReactiveFormsModule, KlesFocusTargetDirective] }]
|
|
3508
|
+
`, standalone: true, imports: [CommonModule, MatSlideToggle, MatTooltip, ReactiveFormsModule, KlesFocusTargetDirective], styles: [".kles-slide-toggle{display:flex;flex-direction:column;align-items:flex-start}.kles-slide-toggle__hint{color:var(--mat-sys-on-surface-variant);font-size:12px;font-weight:400;line-height:16px}\n"] }]
|
|
3503
3509
|
}], propDecorators: { slideToggle: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSlideToggle), { isSignal: true }] }] } });
|
|
3504
3510
|
|
|
3505
3511
|
/**
|
|
@@ -6116,16 +6122,7 @@ let KlesFormImageUploadComponent = class KlesFormImageUploadComponent extends Kl
|
|
|
6116
6122
|
<p class="kles-image-upload__hint">{{ hint() }}</p>
|
|
6117
6123
|
}
|
|
6118
6124
|
|
|
6119
|
-
<input
|
|
6120
|
-
#fileInput
|
|
6121
|
-
type="file"
|
|
6122
|
-
hidden
|
|
6123
|
-
[attr.id]="field.id"
|
|
6124
|
-
[accept]="accept()"
|
|
6125
|
-
[disabled]="disabled()"
|
|
6126
|
-
[attr.aria-label]="options().changeLabel ?? intl.imageUploadChange"
|
|
6127
|
-
(change)="selectFile($event)"
|
|
6128
|
-
/>
|
|
6125
|
+
<input #fileInput type="file" hidden [attr.id]="field.id" [accept]="accept()" [disabled]="disabled()" [attr.aria-label]="options().changeLabel ?? intl.imageUploadChange" (change)="selectFile($event)" />
|
|
6129
6126
|
|
|
6130
6127
|
<div class="kles-image-upload__actions">
|
|
6131
6128
|
<button matButton="outlined" type="button" [disabled]="disabled()" (click)="openFilePicker()">
|
|
@@ -6142,7 +6139,7 @@ let KlesFormImageUploadComponent = class KlesFormImageUploadComponent extends Kl
|
|
|
6142
6139
|
}
|
|
6143
6140
|
</div>
|
|
6144
6141
|
</div>
|
|
6145
|
-
`, isInline: true, styles: [":host{display:block}.kles-image-upload{display:flex;align-items:center;gap:20px}.kles-image-upload__preview{display:grid;width:120px;height:120px;flex:0 0 120px;place-items:center;overflow:hidden;border:1px solid var(--mat-sys-outline-variant);border-radius:22px;color:var(--mat-sys-outline);background:var(--mat-sys-surface-container-low)}.kles-image-upload__preview img{width:100%;height:100%;object-fit:cover}.kles-image-upload__preview mat-icon{width:42px;height:42px;font-size:42px}.kles-image-upload__content{min-width:0}.kles-image-upload__title{display:flex;align-items:center;gap:10px;font:var(--mat-sys-title-large)}.kles-image-upload__title mat-icon{color:var(--mat-sys-primary)}.kles-image-upload__hint{margin:8px 0 14px;color:var(--mat-sys-on-surface-variant)}.kles-image-upload__actions{display:flex;flex-wrap:wrap;gap:10px}.kles-image-upload__actions button{min-height:44px}.kles-image-upload__error{margin:8px 0 0;color:var(--mat-sys-error);font:var(--mat-sys-body-small)}@media(max-width:600px){.kles-image-upload{align-items:flex-start}.kles-image-upload__preview{width:96px;height:96px;flex-basis:96px;border-radius:16px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6142
|
+
`, isInline: true, styles: [":host{display:block}.kles-image-upload{display:flex;align-items:center;gap:20px}.kles-image-upload__preview{display:grid;width:120px;height:120px;flex:0 0 120px;place-items:center;overflow:hidden;border:1px solid var(--mat-sys-outline-variant);border-radius:22px;color:var(--mat-sys-outline);background:var(--mat-sys-surface-container-low)}.kles-image-upload__preview img{width:100%;height:100%;object-fit:cover}.kles-image-upload__preview mat-icon{width:42px;height:42px;font-size:42px}.kles-image-upload__content{min-width:0}.kles-image-upload__title{display:flex;align-items:center;gap:10px;font:var(--mat-sys-title-large);font-size:20px;font-weight:500}.kles-image-upload__title mat-icon{color:var(--mat-sys-primary)}.kles-image-upload__hint{margin:8px 0 14px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium)}.kles-image-upload__actions{display:flex;flex-wrap:wrap;gap:10px}.kles-image-upload__actions button{min-height:44px}.kles-image-upload__error{margin:8px 0 0;color:var(--mat-sys-error);font:var(--mat-sys-body-small)}@media(max-width:600px){.kles-image-upload{align-items:flex-start}.kles-image-upload__preview{width:96px;height:96px;flex-basis:96px;border-radius:16px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6146
6143
|
};
|
|
6147
6144
|
KlesFormImageUploadComponent = __decorate([
|
|
6148
6145
|
FieldMapper({ type: EnumType.imageUpload })
|
|
@@ -6169,16 +6166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
6169
6166
|
<p class="kles-image-upload__hint">{{ hint() }}</p>
|
|
6170
6167
|
}
|
|
6171
6168
|
|
|
6172
|
-
<input
|
|
6173
|
-
#fileInput
|
|
6174
|
-
type="file"
|
|
6175
|
-
hidden
|
|
6176
|
-
[attr.id]="field.id"
|
|
6177
|
-
[accept]="accept()"
|
|
6178
|
-
[disabled]="disabled()"
|
|
6179
|
-
[attr.aria-label]="options().changeLabel ?? intl.imageUploadChange"
|
|
6180
|
-
(change)="selectFile($event)"
|
|
6181
|
-
/>
|
|
6169
|
+
<input #fileInput type="file" hidden [attr.id]="field.id" [accept]="accept()" [disabled]="disabled()" [attr.aria-label]="options().changeLabel ?? intl.imageUploadChange" (change)="selectFile($event)" />
|
|
6182
6170
|
|
|
6183
6171
|
<div class="kles-image-upload__actions">
|
|
6184
6172
|
<button matButton="outlined" type="button" [disabled]="disabled()" (click)="openFilePicker()">
|
|
@@ -6195,7 +6183,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
|
|
|
6195
6183
|
}
|
|
6196
6184
|
</div>
|
|
6197
6185
|
</div>
|
|
6198
|
-
`, styles: [":host{display:block}.kles-image-upload{display:flex;align-items:center;gap:20px}.kles-image-upload__preview{display:grid;width:120px;height:120px;flex:0 0 120px;place-items:center;overflow:hidden;border:1px solid var(--mat-sys-outline-variant);border-radius:22px;color:var(--mat-sys-outline);background:var(--mat-sys-surface-container-low)}.kles-image-upload__preview img{width:100%;height:100%;object-fit:cover}.kles-image-upload__preview mat-icon{width:42px;height:42px;font-size:42px}.kles-image-upload__content{min-width:0}.kles-image-upload__title{display:flex;align-items:center;gap:10px;font:var(--mat-sys-title-large)}.kles-image-upload__title mat-icon{color:var(--mat-sys-primary)}.kles-image-upload__hint{margin:8px 0 14px;color:var(--mat-sys-on-surface-variant)}.kles-image-upload__actions{display:flex;flex-wrap:wrap;gap:10px}.kles-image-upload__actions button{min-height:44px}.kles-image-upload__error{margin:8px 0 0;color:var(--mat-sys-error);font:var(--mat-sys-body-small)}@media(max-width:600px){.kles-image-upload{align-items:flex-start}.kles-image-upload__preview{width:96px;height:96px;flex-basis:96px;border-radius:16px}}\n"] }]
|
|
6186
|
+
`, styles: [":host{display:block}.kles-image-upload{display:flex;align-items:center;gap:20px}.kles-image-upload__preview{display:grid;width:120px;height:120px;flex:0 0 120px;place-items:center;overflow:hidden;border:1px solid var(--mat-sys-outline-variant);border-radius:22px;color:var(--mat-sys-outline);background:var(--mat-sys-surface-container-low)}.kles-image-upload__preview img{width:100%;height:100%;object-fit:cover}.kles-image-upload__preview mat-icon{width:42px;height:42px;font-size:42px}.kles-image-upload__content{min-width:0}.kles-image-upload__title{display:flex;align-items:center;gap:10px;font:var(--mat-sys-title-large);font-size:20px;font-weight:500}.kles-image-upload__title mat-icon{color:var(--mat-sys-primary)}.kles-image-upload__hint{margin:8px 0 14px;color:var(--mat-sys-on-surface-variant);font:var(--mat-sys-body-medium)}.kles-image-upload__actions{display:flex;flex-wrap:wrap;gap:10px}.kles-image-upload__actions button{min-height:44px}.kles-image-upload__error{margin:8px 0 0;color:var(--mat-sys-error);font:var(--mat-sys-body-small)}@media(max-width:600px){.kles-image-upload{align-items:flex-start}.kles-image-upload__preview{width:96px;height:96px;flex-basis:96px;border-radius:16px}}\n"] }]
|
|
6199
6187
|
}], propDecorators: { fileInput: [{ type: i0.ViewChild, args: ['fileInput', { isSignal: true }] }] } });
|
|
6200
6188
|
|
|
6201
6189
|
const components = [
|