@3kles/kles-material-dynamicforms 22.0.1 → 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.2.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 [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
  /**