@3kles/kles-material-dynamicforms 21.0.2 → 21.1.0

package/fesm2022/3kles-kles-material-dynamicforms.mjs

@@ -65,8 +65,6 @@ import { TextFieldModule } from '@angular/cdk/text-field';
 import * as i4$2 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { getMultipleValuesInSingleSelectionError } from '@angular/cdk/collections';
-import * as i5$1 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
 import * as i4$4 from '@3kles/kles-material-datepicker';
 import { KlesMaterialDatepickerModule } from '@3kles/kles-material-datepicker';
 import * as i1$2 from '@angular/cdk/clipboard';
@@ -217,6 +215,7 @@ class KlesFormUiControl extends KlesAbstractFormUiControl {
             icon: this.field.icon,
             iconSvg: this.field.iconSvg,
             appearance: this.field.appearance ?? 'fill',
+            buttonAppearance: this.field.buttonAppearance ?? 'text'
         });
     }
 }
@@ -308,7 +307,7 @@ class KlesFormClearComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormClearComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormClearComponent, isStandalone: true, selector: "kles-form-clear", ngImport: i0, template: `
-        <button [disabled]="disabled()" mat-icon-button aria-label="Clear" type="button" (click)="clear($event)">
+        <button [disabled]="disabled()" matIconButton aria-label="Clear" type="button" (click)="clear($event)">
             <mat-icon>close</mat-icon>
         </button>
     `, isInline: true, dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
@@ -318,7 +317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{
                     selector: 'kles-form-clear',
                     template: `
-        <button [disabled]="disabled()" mat-icon-button aria-label="Clear" type="button" (click)="clear($event)">
+        <button [disabled]="disabled()" matIconButton aria-label="Clear" type="button" (click)="clear($event)">
             <mat-icon>close</mat-icon>
         </button>
     `,
@@ -1151,6 +1150,7 @@ class KlesFieldAbstract {
         this.color = computed(() => this.ui?.get(this.field.name)?.value()?.color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.icon = computed(() => this.ui?.get(this.field.name)?.value()?.icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         this.iconSvg = computed(() => this.ui?.get(this.field.name)?.value()?.iconSvg, ...(ngDevMode ? [{ debugName: "iconSvg" }] : /* istanbul ignore next */ []));
+        this.buttonAppearance = computed(() => this.ui?.get(this.field.name)?.value()?.buttonAppearance, ...(ngDevMode ? [{ debugName: "buttonAppearance" }] : /* istanbul ignore next */ []));
         this.viewRef = inject(ViewContainerRef);
         this._onDestroy = new Subject();
         if (this.field.directive) {
@@ -2205,7 +2205,7 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
         <div [formGroup]="group" class="form-element">
             <div class="label">
                 {{ field.label }}
-                <button mat-icon-button color="primary" (click)="addField()">
+                <button matIconButton color="primary" (click)="addField()">
                     <mat-icon>add</mat-icon>
                 </button>
             </div>
@@ -2217,7 +2217,7 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
                             <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]"> </ng-container>
                         }
                         @if (collections[idx]) {
-                            <button mat-icon-button (click)="deleteField(idx)" color="primary">
+                            <button matIconButton (click)="deleteField(idx)" color="primary">
                                 <mat-icon>delete_outlined</mat-icon>
                             </button>
                         }
@@ -2250,7 +2250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         <div [formGroup]="group" class="form-element">
             <div class="label">
                 {{ field.label }}
-                <button mat-icon-button color="primary" (click)="addField()">
+                <button matIconButton color="primary" (click)="addField()">
                     <mat-icon>add</mat-icon>
                 </button>
             </div>
@@ -2262,7 +2262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                             <ng-container klesDynamicField [field]="subfield" [group]="subGroup" [siblingFields]="collections[idx]"> </ng-container>
                         }
                         @if (collections[idx]) {
-                            <button mat-icon-button (click)="deleteField(idx)" color="primary">
+                            <button matIconButton (click)="deleteField(idx)" color="primary">
                                 <mat-icon>delete_outlined</mat-icon>
                             </button>
                         }
@@ -2436,6 +2436,7 @@ class KlesButtonBase {
         this.disabled = false;
         this.classButton = '';
         this.value = {};
+        this.buttonAppearance = 'text';
         this._type = 'button';
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -2470,6 +2471,7 @@ class KlesButtonBase {
             this.disabled = (uiButton.disabled) ? uiButton.disabled : this.disabled;
             this.classButton = (uiButton.class) ? uiButton.class : this.classButton;
             this.type = (uiButton.type) ? uiButton.type : 'submit';
+            this.buttonAppearance = (uiButton.buttonAppearance) ? uiButton.buttonAppearance : this.buttonAppearance;
         }
         this.value = value;
     }
@@ -2483,7 +2485,7 @@ class KlesButtonBase {
         this.disabled = isDisabled;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesButtonBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesButtonBase, isStandalone: true, selector: "ng-component", inputs: { name: "name", label: "label", color: "color", icon: "icon", iconSvg: "iconSvg", disabled: "disabled", type: "type", classButton: "classButton", value: "value", tooltip: "tooltip" }, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesButtonBase, isStandalone: true, selector: "ng-component", inputs: { name: "name", label: "label", color: "color", icon: "icon", iconSvg: "iconSvg", disabled: "disabled", type: "type", classButton: "classButton", value: "value", tooltip: "tooltip", buttonAppearance: "buttonAppearance" }, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesButtonBase, decorators: [{
             type: Component,
@@ -2512,54 +2514,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], tooltip: [{
                 type: Input
+            }], buttonAppearance: [{
+                type: Input
             }] } });
 
-var EnumButtonAttribute;
-(function (EnumButtonAttribute) {
-    EnumButtonAttribute["mat-button"] = "mat-button";
-    EnumButtonAttribute["mat-flat-button"] = "mat-flat-button";
-    EnumButtonAttribute["mat-raised-button"] = "mat-raised-button";
-    EnumButtonAttribute["mat-stroked-button"] = "mat-stroked-button";
-})(EnumButtonAttribute || (EnumButtonAttribute = {}));
-
-/*From angular material
-    https://github.com/angular/components/blob/17.0.x/src/material/button/button-base.ts#L40C1-L56C5
- */
-const HOST_SELECTOR_MDC_CLASS_PAIR = [
-    {
-        attribute: EnumButtonAttribute['mat-button'],
-        mdcClasses: ['mdc-button', 'mat-mdc-button'],
-    },
-    {
-        attribute: EnumButtonAttribute['mat-flat-button'],
-        mdcClasses: ['mdc-button', 'mdc-button--unelevated', 'mat-mdc-unelevated-button'],
-    },
-    {
-        attribute: EnumButtonAttribute['mat-raised-button'],
-        mdcClasses: ['mdc-button', 'mdc-button--raised', 'mat-mdc-raised-button'],
-    },
-    {
-        attribute: EnumButtonAttribute['mat-stroked-button'],
-        mdcClasses: ['mdc-button', 'mdc-button--outlined', 'mat-mdc-outlined-button'],
-    }
-];
 class KlesButtonComponent extends KlesButtonBase {
-    constructor() {
-        super(...arguments);
-        this.mdcClasses = signal(HOST_SELECTOR_MDC_CLASS_PAIR[0].mdcClasses, ...(ngDevMode ? [{ debugName: "mdcClasses" }] : /* istanbul ignore next */ []));
-    }
-    set attribute(attribute) {
-        this.mdcClasses.set(HOST_SELECTOR_MDC_CLASS_PAIR.find(selector => selector.attribute === attribute)?.mdcClasses || []);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesButtonComponent, isStandalone: true, selector: "kles-button", inputs: { attribute: "attribute" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesButtonComponent, isStandalone: true, selector: "kles-button", providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => KlesButtonComponent),
                 multi: true
             }
         ], usesInheritance: true, ngImport: i0, template: `
-            <button mat-button [type]="type" [ngClass]="classButton || mdcClasses()" [color]="(color)?color:'primary'" [disabled]="disabled"
+            <button [matButton]="buttonAppearance" [type]="type" [ngClass]="classButton" [color]="(color)?color:'primary'" [disabled]="disabled"
             (click)="click($event)" [matTooltip]="tooltip">
                 {{label}}
 
@@ -2578,7 +2546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{
                     selector: 'kles-button',
                     template: `
-            <button mat-button [type]="type" [ngClass]="classButton || mdcClasses()" [color]="(color)?color:'primary'" [disabled]="disabled"
+            <button [matButton]="buttonAppearance" [type]="type" [ngClass]="classButton" [color]="(color)?color:'primary'" [disabled]="disabled"
             (click)="click($event)" [matTooltip]="tooltip">
                 {{label}}
 
@@ -2601,9 +2569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     standalone: true,
                     imports: [CommonModule, ReactiveFormsModule, MatIcon, MatTooltip, MatButton]
                 }]
-        }], propDecorators: { attribute: [{
-                type: Input
-            }] } });
+        }] });
 
 class KlesFormButtonComponent extends KlesFieldAbstract {
     ngOnInit() {
@@ -2621,17 +2587,17 @@ class KlesFormButtonComponent extends KlesFieldAbstract {
                 [name]="field.name"
                 [label]="field.label"
                 [color]="color()"
-                [attribute]="field.attribute"
                 [icon]="icon()"
                 [iconSvg]="iconSvg()"
                 [value]="field.value"
                 [formControlName]="field.name"
                 [tooltip]="field.tooltip"
                 [type]="field.buttonType"
+                [buttonAppearance]="buttonAppearance()"
             >
             </kles-button>
         </div>
-    `, isInline: true, dependencies: [{ kind: "component", type: KlesButtonComponent, selector: "kles-button", inputs: ["attribute"] }, { 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"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: KlesButtonComponent, selector: "kles-button" }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormButtonComponent, decorators: [{
             type: Component,
@@ -2643,13 +2609,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 [name]="field.name"
                 [label]="field.label"
                 [color]="color()"
-                [attribute]="field.attribute"
                 [icon]="icon()"
                 [iconSvg]="iconSvg()"
                 [value]="field.value"
                 [formControlName]="field.name"
                 [tooltip]="field.tooltip"
                 [type]="field.buttonType"
+                [buttonAppearance]="buttonAppearance()"
             >
             </kles-button>
         </div>
@@ -2693,7 +2659,7 @@ class KlesButtonCheckerComponent extends KlesButtonBase {
             </span>
             }
         </span>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KlesButtonComponent, selector: "kles-button", inputs: ["attribute"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: KlesButtonComponent, selector: "kles-button" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesButtonCheckerComponent, decorators: [{
             type: Component,
@@ -2860,7 +2826,7 @@ class KlesButtonFileComponent extends KlesButtonBase {
             [disabled]="disabled"
             [value]="value" (click)="click($event)">
         </kles-button>
-    `, isInline: true, dependencies: [{ kind: "component", type: KlesButtonComponent, selector: "kles-button", inputs: ["attribute"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: KlesButtonComponent, selector: "kles-button" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesButtonFileComponent, decorators: [{
             type: Component,
@@ -3280,7 +3246,7 @@ class KlesFormInputClearableComponent extends KlesFormInputComponent {
                 />
             }
             @if (!group.get(field.name).disabled) {
-                <button matSuffix mat-icon-button aria-label="Clear" type="button" (click)="group.controls[field.name].reset()">
+                <button matSuffix matIconButton aria-label="Clear" type="button" (click)="group.controls[field.name].reset()">
                     <mat-icon>close</mat-icon>
                 </button>
             }
@@ -3357,7 +3323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 />
             }
             @if (!group.get(field.name).disabled) {
-                <button matSuffix mat-icon-button aria-label="Clear" type="button" (click)="group.controls[field.name].reset()">
+                <button matSuffix matIconButton aria-label="Clear" type="button" (click)="group.controls[field.name].reset()">
                     <mat-icon>close</mat-icon>
                 </button>
             }
@@ -4940,7 +4906,7 @@ class KlesFabComponent extends KlesButtonBase {
                 multi: true
             }
         ], usesInheritance: true, ngImport: i0, template: `
-            <button mat-fab [extended]="!!label" [type]="type" [ngClass]="classButton" [color]="(color)?color:'primary'" [disabled]="disabled"
+            <button matFab [extended]="!!label" [type]="type" [ngClass]="classButton" [color]="(color)?color:'primary'" [disabled]="disabled"
             (click)="click($event)" [matTooltip]="tooltip">
                 {{label}}
 
@@ -4959,7 +4925,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{
                     selector: 'kles-fab',
                     template: `
-            <button mat-fab [extended]="!!label" [type]="type" [ngClass]="classButton" [color]="(color)?color:'primary'" [disabled]="disabled"
+            <button matFab [extended]="!!label" [type]="type" [ngClass]="classButton" [color]="(color)?color:'primary'" [disabled]="disabled"
             (click)="click($event)" [matTooltip]="tooltip">
                 {{label}}
 
@@ -5036,7 +5002,7 @@ class KlesMiniFabComponent extends KlesButtonBase {
                 multi: true
             }
         ], usesInheritance: true, ngImport: i0, template: `
-            <button mat-mini-fab extended [type]="type" [ngClass]="classButton" [color]="(color)?color:'primary'" [disabled]="disabled"
+            <button matMiniFab [type]="type" [ngClass]="classButton" [color]="(color)?color:'primary'" [disabled]="disabled"
             (click)="click($event)" [matTooltip]="tooltip">
                 {{label}}
 
@@ -5055,7 +5021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{
                     selector: 'kles-mini-fab',
                     template: `
-            <button mat-mini-fab extended [type]="type" [ngClass]="classButton" [color]="(color)?color:'primary'" [disabled]="disabled"
+            <button matMiniFab [type]="type" [ngClass]="classButton" [color]="(color)?color:'primary'" [disabled]="disabled"
             (click)="click($event)" [matTooltip]="tooltip">
                 {{label}}
 
@@ -5132,7 +5098,7 @@ class KlesIconButtonComponent extends KlesButtonBase {
                 multi: true,
             },
         ], usesInheritance: true, ngImport: i0, template: `
-        <button mat-icon-button [type]="type" [ngClass]="classButton" [color]="color ? color : 'primary'" [disabled]="disabled" (click)="click($event)" [matTooltip]="tooltip">
+        <button matIconButton [type]="type" [ngClass]="classButton" [color]="color ? color : 'primary'" [disabled]="disabled" (click)="click($event)" [matTooltip]="tooltip">
             @if (icon) {
             <mat-icon>{{ icon }}</mat-icon>
             } @if (iconSvg) {
@@ -5146,7 +5112,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{
                     selector: 'kles-icon-button',
                     template: `
-        <button mat-icon-button [type]="type" [ngClass]="classButton" [color]="color ? color : 'primary'" [disabled]="disabled" (click)="click($event)" [matTooltip]="tooltip">
+        <button matIconButton [type]="type" [ngClass]="classButton" [color]="color ? color : 'primary'" [disabled]="disabled" (click)="click($event)" [matTooltip]="tooltip">
             @if (icon) {
             <mat-icon>{{ icon }}</mat-icon>
             } @if (iconSvg) {
@@ -5275,7 +5241,7 @@ class KlesFormSelectionListSearchComponent extends KlesFieldAbstract {
                 <mat-label>{{ field.label }}</mat-label>
                 }
                 <input matInput [placeholder]="field.placeholder" [formControl]="searchControl" />
-                <button matSuffix mat-icon-button aria-label="Clear" (click)="searchControl.reset(); $event.stopPropagation()">
+                <button matSuffix matIconButton aria-label="Clear" (click)="searchControl.reset(); $event.stopPropagation()">
                     <mat-icon>close</mat-icon>
                 </button>
             </mat-form-field>
@@ -5317,7 +5283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 <mat-label>{{ field.label }}</mat-label>
                 }
                 <input matInput [placeholder]="field.placeholder" [formControl]="searchControl" />
-                <button matSuffix mat-icon-button aria-label="Clear" (click)="searchControl.reset(); $event.stopPropagation()">
+                <button matSuffix matIconButton aria-label="Clear" (click)="searchControl.reset(); $event.stopPropagation()">
                     <mat-icon>close</mat-icon>
                 </button>
             </mat-form-field>
@@ -5563,13 +5529,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
 class KlesFormDateTimeComponent extends KlesFieldAbstract {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormDateTimeComponent, isStandalone: true, selector: "kles-form-datetimepicker", usesInheritance: true, ngImport: i0, template: `
-    <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
+    <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()">
         @if (field.label) {
             <mat-label>{{ field.label }}</mat-label>
         }
 
         <input matInput matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name"
-            [placeholder]="field.placeholder | translate" [min]="field.min" [max]="field.max">
+            [placeholder]="field.placeholder" [min]="field.min" [max]="field.max">
         <div matSuffix class="suffix">
             <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
             <ng-content></ng-content>
@@ -5583,18 +5549,18 @@ class KlesFormDateTimeComponent extends KlesFieldAbstract {
 
         <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
     </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\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: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: KlesMaterialDatepickerModule }, { kind: "component", type: i4$4.KlesMatDatepicker, selector: "kles-mat-datepicker", outputs: ["timeSelected"], exportAs: ["klesMatDatepicker"] }, { kind: "pipe", type: i5$1.TranslatePipe, name: "translate" }] }); }
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\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: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: KlesMaterialDatepickerModule }, { kind: "component", type: i4$4.KlesMatDatepicker, selector: "kles-mat-datepicker", outputs: ["timeSelected"], exportAs: ["klesMatDatepicker"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormDateTimeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-datetimepicker', template: `
-    <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="field.color" [formGroup]="group" [appearance]="field.appearance">
+    <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()">
         @if (field.label) {
             <mat-label>{{ field.label }}</mat-label>
         }
 
         <input matInput matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name"
-            [placeholder]="field.placeholder | translate" [min]="field.min" [max]="field.max">
+            [placeholder]="field.placeholder" [min]="field.min" [max]="field.max">
         <div matSuffix class="suffix">
             <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
             <ng-content></ng-content>
@@ -5619,7 +5585,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                         MatInput,
                         MatTooltip,
                         MatDatepickerModule,
-                        TranslateModule,
                         MatErrorMessageDirective,
                         KlesMaterialDatepickerModule
                     ], styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\n"] }]
@@ -5645,7 +5610,7 @@ class KlesFormCopyComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormCopyComponent, deps: [{ token: i1$2.Clipboard }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormCopyComponent, isStandalone: true, selector: "kles-form-copy", viewQueries: [{ propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: `
-        <button #tooltip="matTooltip" mat-icon-button color="primary" type="button" (click)="copy($event)" [matTooltipDisabled]="true" [matTooltip]="tooltipText" matTooltipPosition="above">
+        <button #tooltip="matTooltip" matIconButton color="primary" type="button" (click)="copy($event)" [matTooltipDisabled]="true" [matTooltip]="tooltipText" matTooltipPosition="above">
             <mat-icon>content_copy</mat-icon>
         </button>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ClipboardModule }] }); }
@@ -5655,7 +5620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{
                     selector: 'kles-form-copy',
                     template: `
-        <button #tooltip="matTooltip" mat-icon-button color="primary" type="button" (click)="copy($event)" [matTooltipDisabled]="true" [matTooltip]="tooltipText" matTooltipPosition="above">
+        <button #tooltip="matTooltip" matIconButton color="primary" type="button" (click)="copy($event)" [matTooltipDisabled]="true" [matTooltip]="tooltipText" matTooltipPosition="above">
             <mat-icon>content_copy</mat-icon>
         </button>
     `,
@@ -5879,7 +5844,7 @@ class KlesFormPasswordVisibilityComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormPasswordVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormPasswordVisibilityComponent, isStandalone: true, selector: "kles-form-password-visibility", ngImport: i0, template: `
-        <button [disabled]="group?.get(field?.name).disabled" mat-icon-button aria-label="visibility" type="button" (click)="toggleVisibility($event)">
+        <button [disabled]="group?.get(field?.name).disabled" matIconButton aria-label="visibility" type="button" (click)="toggleVisibility($event)">
             <mat-icon>{{ hide() ? 'visibility_off' : 'visibility' }}</mat-icon>
         </button>
     `, isInline: true, dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
@@ -5889,7 +5854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{
                     selector: 'kles-form-password-visibility',
                     template: `
-        <button [disabled]="group?.get(field?.name).disabled" mat-icon-button aria-label="visibility" type="button" (click)="toggleVisibility($event)">
+        <button [disabled]="group?.get(field?.name).disabled" matIconButton aria-label="visibility" type="button" (click)="toggleVisibility($event)">
             <mat-icon>{{ hide() ? 'visibility_off' : 'visibility' }}</mat-icon>
         </button>
     `,
@@ -5929,5 +5894,5 @@ function autocompleteStringValidator(validOptions, optional) {
  * Generated bundle index. Do not edit.
  */
 
-export { AbstractUiState, ArrayFormatPipe, ArrayUiState, ControlUiState, EnumButtonAttribute, EnumType, FIELD, FIELD_NAME, FieldMapper, GROUP, GROUP_UI, GroupUiState, KlesAbstractFormControl, KlesAbstractFormUiControl, KlesButtonBase, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesDynamicFormIntl, KlesFabComponent, KlesFieldAbstract, KlesFileControlComponent, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormCheckboxIndeterminateComponent, KlesFormChipComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormCopyComponent, KlesFormDateComponent, KlesFormDateTimeComponent, KlesFormErrorStateMatcher, KlesFormFabComponent, KlesFormFileComponent, KlesFormGroup, KlesFormGroupComponent, KlesFormIconButtonComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormMiniFabComponent, KlesFormPasswordVisibilityComponent, KlesFormRadioComponent, KlesFormRange, KlesFormRangeComponent, KlesFormSelectComponent, KlesFormSelectLazySearchComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSelectionListSearchComponent, KlesFormSlideToggleComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesFormUiArray, KlesFormUiControl, KlesFormUiGroup, KlesIconButtonComponent, KlesIndeterminateCheckboxComponent, KlesMaterialDynamicformsModule, KlesMiniFabComponent, KlesSelectionModel, KlesTransformPipe, MatErrorFormDirective, MatErrorMessageDirective, SIBLING_FIELDS, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, isDestroyable, klesFieldControlFactory, klesFieldUiFactory };
+export { AbstractUiState, ArrayFormatPipe, ArrayUiState, ControlUiState, EnumType, FIELD, FIELD_NAME, FieldMapper, GROUP, GROUP_UI, GroupUiState, KlesAbstractFormControl, KlesAbstractFormUiControl, KlesButtonBase, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesDynamicFormIntl, KlesFabComponent, KlesFieldAbstract, KlesFileControlComponent, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormCheckboxIndeterminateComponent, KlesFormChipComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormCopyComponent, KlesFormDateComponent, KlesFormDateTimeComponent, KlesFormErrorStateMatcher, KlesFormFabComponent, KlesFormFileComponent, KlesFormGroup, KlesFormGroupComponent, KlesFormIconButtonComponent, KlesFormIconComponent, KlesFormInputClearableComponent, KlesFormInputComponent, KlesFormLabelComponent, KlesFormLineBreakComponent, KlesFormLinkComponent, KlesFormListFieldComponent, KlesFormMiniFabComponent, KlesFormPasswordVisibilityComponent, KlesFormRadioComponent, KlesFormRange, KlesFormRangeComponent, KlesFormSelectComponent, KlesFormSelectLazySearchComponent, KlesFormSelectSearchComponent, KlesFormSelectionListComponent, KlesFormSelectionListSearchComponent, KlesFormSlideToggleComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesFormUiArray, KlesFormUiControl, KlesFormUiGroup, KlesIconButtonComponent, KlesIndeterminateCheckboxComponent, KlesMaterialDynamicformsModule, KlesMiniFabComponent, KlesSelectionModel, KlesTransformPipe, MatErrorFormDirective, MatErrorMessageDirective, SIBLING_FIELDS, autocompleteObjectValidator, autocompleteStringValidator, componentMapper, isDestroyable, klesFieldControlFactory, klesFieldUiFactory };
 //# sourceMappingURL=3kles-kles-material-dynamicforms.mjs.map