@3kles/kles-material-dynamicforms 21.6.0 → 21.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2410,34 +2410,29 @@ class KlesFormColorComponent extends KlesFieldAbstract {
|
|
|
2410
2410
|
[style.color]="foregroundColor()"
|
|
2411
2411
|
/>
|
|
2412
2412
|
|
|
2413
|
-
<
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2427
|
-
|
|
2428
|
-
|
|
2429
|
-
[positionOffset]="colorOption().positionOffset ?? 8" -->
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
@if (field.subComponents || field.clearable) {
|
|
2433
|
-
<div matSuffix>
|
|
2413
|
+
<div matSuffix class="suffix">
|
|
2414
|
+
<kles-material-color-picker-trigger
|
|
2415
|
+
[color]="currentColor()"
|
|
2416
|
+
[outputFormat]="colorOption().format ?? 'hex8'"
|
|
2417
|
+
[commitMode]="colorOption().commitMode ?? 'live'"
|
|
2418
|
+
[alpha]="colorOption().alpha ?? true"
|
|
2419
|
+
[eyeDropper]="colorOption().eyeDropper ?? true"
|
|
2420
|
+
[saveOnOutside]="colorOption().saveOnOutside ?? true"
|
|
2421
|
+
[fallbackColor]="colorOption().fallbackColor ?? '#000000ff'"
|
|
2422
|
+
[presets]="colorOption().presets ?? []"
|
|
2423
|
+
[position]="colorOption().position ?? 'auto'"
|
|
2424
|
+
[positionOffset]="colorOption().positionOffset ?? 8"
|
|
2425
|
+
[disabled]="pickerDisabled()"
|
|
2426
|
+
(colorChange)="setColor($event)"
|
|
2427
|
+
/>
|
|
2428
|
+
@if (field.subComponents || field.clearable) {
|
|
2434
2429
|
<ng-content />
|
|
2435
|
-
|
|
2436
|
-
|
|
2430
|
+
}
|
|
2431
|
+
</div>
|
|
2437
2432
|
|
|
2438
2433
|
<mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations" />
|
|
2439
2434
|
</mat-form-field>
|
|
2440
|
-
`, isInline: true, styles: [":host{display:block;width:100%}mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "component", type: MaterialColorPickerTriggerComponent, selector: "kles-material-color-picker-trigger", inputs: ["color", "outputFormat", "commitMode", "alpha", "eyeDropper", "disabled", "saveOnOutside", "fallbackColor", "presets", "position", "positionOffset"], outputs: ["colorChange", "pickerOpened", "pickerClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2435
|
+
`, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", ":host{display:block;width:100%}mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.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: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "component", type: MaterialColorPickerTriggerComponent, selector: "kles-material-color-picker-trigger", inputs: ["color", "outputFormat", "commitMode", "alpha", "eyeDropper", "disabled", "saveOnOutside", "fallbackColor", "presets", "position", "positionOffset"], outputs: ["colorChange", "pickerOpened", "pickerClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2441
2436
|
}
|
|
2442
2437
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormColorComponent, decorators: [{
|
|
2443
2438
|
type: Component,
|
|
@@ -2455,34 +2450,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
|
|
|
2455
2450
|
[style.color]="foregroundColor()"
|
|
2456
2451
|
/>
|
|
2457
2452
|
|
|
2458
|
-
<
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
[positionOffset]="colorOption().positionOffset ?? 8" -->
|
|
2475
|
-
|
|
2476
|
-
|
|
2477
|
-
@if (field.subComponents || field.clearable) {
|
|
2478
|
-
<div matSuffix>
|
|
2453
|
+
<div matSuffix class="suffix">
|
|
2454
|
+
<kles-material-color-picker-trigger
|
|
2455
|
+
[color]="currentColor()"
|
|
2456
|
+
[outputFormat]="colorOption().format ?? 'hex8'"
|
|
2457
|
+
[commitMode]="colorOption().commitMode ?? 'live'"
|
|
2458
|
+
[alpha]="colorOption().alpha ?? true"
|
|
2459
|
+
[eyeDropper]="colorOption().eyeDropper ?? true"
|
|
2460
|
+
[saveOnOutside]="colorOption().saveOnOutside ?? true"
|
|
2461
|
+
[fallbackColor]="colorOption().fallbackColor ?? '#000000ff'"
|
|
2462
|
+
[presets]="colorOption().presets ?? []"
|
|
2463
|
+
[position]="colorOption().position ?? 'auto'"
|
|
2464
|
+
[positionOffset]="colorOption().positionOffset ?? 8"
|
|
2465
|
+
[disabled]="pickerDisabled()"
|
|
2466
|
+
(colorChange)="setColor($event)"
|
|
2467
|
+
/>
|
|
2468
|
+
@if (field.subComponents || field.clearable) {
|
|
2479
2469
|
<ng-content />
|
|
2480
|
-
|
|
2481
|
-
|
|
2470
|
+
}
|
|
2471
|
+
</div>
|
|
2482
2472
|
|
|
2483
2473
|
<mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations" />
|
|
2484
2474
|
</mat-form-field>
|
|
2485
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}mat-form-field{width:100%}\n"] }]
|
|
2475
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".suffix{display:flex;align-items:center}\n", ":host{display:block;width:100%}mat-form-field{width:100%}\n"] }]
|
|
2486
2476
|
}] });
|
|
2487
2477
|
|
|
2488
2478
|
class KlesButtonBase {
|