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

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

@@ -1,44 +1,45 @@
 import * as i0 from '@angular/core';
-import { signal, InjectionToken, inject, Component, Injector, Input, Directive, Injectable, EventEmitter, Output, NgModule, computed, ViewContainerRef, HostBinding, Pipe, ChangeDetectorRef, ViewChildren, ViewChild, forwardRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { signal, InjectionToken, inject, Component, Injector, Input, Directive, Injectable, EventEmitter, Output, NgModule, computed, ViewContainerRef, HostBinding, Pipe, ChangeDetectorRef, ViewChildren, ViewChild, forwardRef, ChangeDetectionStrategy, ElementRef, Renderer2, HostListener, LOCALE_ID, DEFAULT_CURRENCY_CODE, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { Validators, FormControl, ReactiveFormsModule, FormsModule, FormControlDirective, FormControlName, FormArray, FormGroup, UntypedFormBuilder, NG_VALUE_ACCESSOR, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
-import { concat, of, Subject, combineLatest, startWith, map as map$1, takeUntil, Observable, BehaviorSubject, ReplaySubject } from 'rxjs';
+import { concat, of, Subject, combineLatest, startWith, map as map$1, takeUntil, Observable, BehaviorSubject, ReplaySubject, defer } from 'rxjs';
 import { tap, take, catchError, map, takeUntil as takeUntil$1, distinctUntilChanged, filter, switchMap, startWith as startWith$1, debounceTime, shareReplay } from 'rxjs/operators';
 import * as i2$1 from '@angular/material/form-field';
 import { MatError, MatFormFieldModule, MatFormField, MatHint, MatLabel, MatSuffix } from '@angular/material/form-field';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, ErrorStateMatcher, MatNativeDateModule, MatOptionModule, MatOption } from '@angular/material/core';
 import * as i2$2 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
-import * as i4$3 from '@angular/material/button';
+import * as i4$4 from '@angular/material/button';
 import { MatIconButton, MatButtonModule, MatButton } from '@angular/material/button';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i3$5 from '@angular/material/badge';
+import * as i3$4 from '@angular/material/badge';
 import { MatBadgeModule, MatBadge } from '@angular/material/badge';
-import * as i3$4 from '@angular/material/list';
+import * as i3$3 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import { MatGridListModule } from '@angular/material/grid-list';
-import * as i3$2 from '@angular/material/datepicker';
+import * as i3$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import * as i3 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule, MatInput, MatLabel as MatLabel$1, MatFormField as MatFormField$1 } from '@angular/material/input';
-import * as i4 from '@angular/material/select';
+import * as i4$1 from '@angular/material/select';
 import { MatSelectModule, MatSelectTrigger, MatSelect } from '@angular/material/select';
 import { MatRadioModule, MatRadioButton, MatRadioGroup } from '@angular/material/radio';
 import { MatChipsModule, MatChipOption, MatChipListbox } from '@angular/material/chips';
-import * as i4$1 from '@angular/material/tooltip';
+import * as i4$2 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { MatTableModule } from '@angular/material/table';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatCardModule } from '@angular/material/card';
+import * as i5$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import { CdkTableModule } from '@angular/cdk/table';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i8 from '@angular/material/progress-spinner';
+import * as i7 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
 import * as i1$1 from '@angular/material/checkbox';
 import { MatCheckboxModule, MatCheckbox } from '@angular/material/checkbox';
@@ -51,26 +52,25 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTreeModule } from '@angular/material/tree';
 import { MatSlideToggleModule, MatSlideToggle } from '@angular/material/slide-toggle';
-import * as i3$1 from '@angular/cdk/scrolling';
+import * as i3 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkScrollable, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import * as i3$6 from '@angular/material/button-toggle';
+import * as i3$5 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { PortalModule } from '@angular/cdk/portal';
 import { __decorate } from 'tslib';
 import { v4 } from 'uuid';
 import { cloneDeep } from 'lodash';
 import { ColorPickerDirective, ColorPickerComponent } from 'ngx-color-picker';
-import * as i3$3 from '@angular/cdk/text-field';
+import * as i3$2 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import * as i4$2 from 'ngx-mat-select-search';
+import * as i4$3 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 * as i4$5 from '@3kles/kles-material-datepicker';
 import { KlesMaterialDatepickerModule } from '@3kles/kles-material-datepicker';
 import * as i1$2 from '@angular/cdk/clipboard';
 import { ClipboardModule } from '@angular/cdk/clipboard';
+import { MatDividerModule } from '@angular/material/divider';
 
 class KlesAbstractFormControl {
     constructor(field, ref) {
@@ -217,6 +217,13 @@ class KlesFormUiControl extends KlesAbstractFormUiControl {
             icon: this.field.icon,
             iconSvg: this.field.iconSvg,
             appearance: this.field.appearance ?? 'fill',
+            buttonAppearance: this.field.buttonAppearance ?? 'text',
+            imageUrl: this.field.imageUrl,
+            imageAlt: this.field.imageAlt,
+            label: this.field.label,
+            hint: this.field.hint,
+            placeholder: this.field.placeholder,
+            tooltip: this.field.tooltip,
         });
     }
 }
@@ -261,6 +268,8 @@ var EnumType;
     EnumType["lineBreak"] = "lineBreak";
     EnumType["badge"] = "badge";
     EnumType["range"] = "range";
+    EnumType["currency"] = "currency";
+    EnumType["status"] = "status";
 })(EnumType || (EnumType = {}));
 
 const FIELD_NAME = new InjectionToken('FIELD_NAME');
@@ -268,6 +277,7 @@ const GROUP = new InjectionToken('GROUP');
 const SIBLING_FIELDS = new InjectionToken('SIBLING_FIELDS');
 const GROUP_UI = new InjectionToken('GROUP_UI');
 const FIELD = new InjectionToken('FIELD');
+const FIELD_CONTEXT = new InjectionToken('FIELD_CONTEXT');
 
 class KlesFormClearComponent {
     constructor() {
@@ -308,7 +318,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 +328,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>
     `,
@@ -1139,18 +1149,27 @@ class KlesFieldAbstract {
         this.group = inject(GROUP);
         this.siblingFields = inject(SIBLING_FIELDS);
         this.ui = inject(GROUP_UI, { optional: true });
-        this.appearance = computed(() => this.ui?.get(this.field.name)?.value()?.appearance, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-        this.inputType = computed(() => this.ui?.get(this.field.name)?.value()?.inputType, ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
-        this.min = computed(() => this.ui?.get(this.field.name)?.value()?.min, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
-        this.max = computed(() => this.ui?.get(this.field.name)?.value()?.max, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
-        this.maxLength = computed(() => this.ui?.get(this.field.name)?.value()?.maxLength ?? 524288, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
-        this.step = computed(() => this.ui?.get(this.field.name)?.value()?.step, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
-        this.ngClass = computed(() => this.ui?.get(this.field.name)?.value()?.ngClass, ...(ngDevMode ? [{ debugName: "ngClass" }] : /* istanbul ignore next */ []));
-        this.ngStyle = computed(() => this.ui?.get(this.field.name)?.value()?.ngStyle, ...(ngDevMode ? [{ debugName: "ngStyle" }] : /* istanbul ignore next */ []));
-        this.indeterminate = computed(() => this.ui?.get(this.field.name)?.value()?.indeterminate ?? false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
-        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.context = inject(FIELD_CONTEXT, { optional: true });
+        this.fieldUi = computed(() => this.ui?.get(this.field.name)?.value(), ...(ngDevMode ? [{ debugName: "fieldUi" }] : /* istanbul ignore next */ []));
+        this.appearance = computed(() => this.fieldUi()?.appearance, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        this.inputType = computed(() => this.fieldUi()?.inputType, ...(ngDevMode ? [{ debugName: "inputType" }] : /* istanbul ignore next */ []));
+        this.min = computed(() => this.fieldUi()?.min, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = computed(() => this.fieldUi()?.max, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.maxLength = computed(() => this.fieldUi()?.maxLength ?? 524288, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+        this.step = computed(() => this.fieldUi()?.step, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        this.ngClass = computed(() => this.fieldUi()?.ngClass, ...(ngDevMode ? [{ debugName: "ngClass" }] : /* istanbul ignore next */ []));
+        this.ngStyle = computed(() => this.fieldUi()?.ngStyle, ...(ngDevMode ? [{ debugName: "ngStyle" }] : /* istanbul ignore next */ []));
+        this.indeterminate = computed(() => this.fieldUi()?.indeterminate ?? false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+        this.color = computed(() => this.fieldUi()?.color, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.icon = computed(() => this.fieldUi()?.icon, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        this.iconSvg = computed(() => this.fieldUi()?.iconSvg, ...(ngDevMode ? [{ debugName: "iconSvg" }] : /* istanbul ignore next */ []));
+        this.buttonAppearance = computed(() => this.fieldUi()?.buttonAppearance, ...(ngDevMode ? [{ debugName: "buttonAppearance" }] : /* istanbul ignore next */ []));
+        this.label = computed(() => this.fieldUi()?.label ?? this.field.label, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.hint = computed(() => this.fieldUi()?.hint ?? this.field.hint, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+        this.placeholder = computed(() => this.fieldUi()?.placeholder ?? this.field.placeholder, ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.tooltip = computed(() => this.fieldUi()?.tooltip ?? this.field.tooltip, ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+        this.imageUrl = computed(() => this.fieldUi()?.imageUrl, ...(ngDevMode ? [{ debugName: "imageUrl" }] : /* istanbul ignore next */ []));
+        this.imageAlt = computed(() => this.fieldUi()?.imageAlt ?? this.label(), ...(ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []));
         this.viewRef = inject(ViewContainerRef);
         this._onDestroy = new Subject();
         if (this.field.directive) {
@@ -1220,6 +1239,17 @@ class KlesFieldAbstract {
             this.field.onBlur(this.field, this.group);
         }
     }
+    triggerAction(actionId, originalEvent, value) {
+        originalEvent.stopPropagation();
+        this.field.onAction?.({
+            actionId,
+            value,
+            context: this.context?.() ?? null,
+            field: this.field,
+            group: this.group,
+            originalEvent,
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFieldAbstract, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.19", type: KlesFieldAbstract, isStandalone: true, host: { properties: { "attr.klesDirective": "this.directive" } }, ngImport: i0 }); }
 }
@@ -1244,9 +1274,9 @@ class KlesFormLabelComponent extends KlesFieldAbstract {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormLabelComponent, isStandalone: true, selector: "kles-form-label", usesInheritance: true, ngImport: i0, template: `
         <div [formGroup]="group">
-            <input matInput matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="{ color: 'inherit' }" [formControlName]="field.name" [placeholder]="field.placeholder" [type]="inputType()" />
+            <input matInput [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="{ color: 'inherit' }" [formControlName]="field.name" [placeholder]="placeholder()" [type]="inputType()" />
         </div>
-    `, isInline: true, 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: "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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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"] }] }); }
+    `, isInline: true, 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: "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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormLabelComponent, decorators: [{
             type: Component,
@@ -1254,7 +1284,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     selector: 'kles-form-label',
                     template: `
         <div [formGroup]="group">
-            <input matInput matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="{ color: 'inherit' }" [formControlName]="field.name" [placeholder]="field.placeholder" [type]="inputType()" />
+            <input matInput [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="{ color: 'inherit' }" [formControlName]="field.name" [placeholder]="placeholder()" [type]="inputType()" />
         </div>
     `,
                     standalone: true,
@@ -1354,7 +1384,7 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
                         obs$ = this.field.options();
                     }
                     else {
-                        obs$ = of(this.field.options);
+                        obs$ = of(this.field.options ?? []);
                     }
                     return concat(of({ loading: true, options: [] }), obs$.pipe(map((options) => {
                         return { loading: false, options };
@@ -1380,7 +1410,7 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
                 this.options$ = of({ loading: false, options: this.field.options });
             }
         }
-        this.filteredOption$ = concat(combineLatest([this.group.get(this.field.name).valueChanges.pipe(startWith$1('')), this.options$]).pipe(map(([data, response]) => {
+        this.filteredOption$ = concat(combineLatest([this.group.get(this.field.name)?.valueChanges.pipe(startWith$1('')) ?? of(''), this.options$]).pipe(map(([data, response]) => {
             if (response.loading) {
                 return response;
             }
@@ -1426,8 +1456,8 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormInputComponent, isStandalone: true, selector: "kles-form-input", usesInheritance: true, ngImport: i0, template: `
         <mat-form-field [formGroup]="group" [color]="color()" [subscriptSizing]="field.subscriptSizing" class="form-element" [appearance]="appearance()" class="field-bottom">
-            @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
             }
             @if (icon()) {
                 <mat-icon matPrefix>{{ icon() }}</mat-icon>
@@ -1436,11 +1466,11 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
             @if (field.autocomplete) {
                 <input
                     matInput
-                    matTooltip="{{ field.tooltip }}"
+                    [matTooltip]="tooltip()"
                     [attr.id]="field.id"
                     [ngClass]="ngClass()"
                     [formControlName]="field.name"
-                    [placeholder]="field.placeholder"
+                    [placeholder]="placeholder()"
                     [type]="inputType()"
                     [maxLength]="maxLength()"
                     [min]="min()"
@@ -1480,11 +1510,11 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
             } @else {
                 <input
                     matInput
-                    matTooltip="{{ field.tooltip }}"
+                    [matTooltip]="tooltip()"
                     [attr.id]="field.id"
                     [ngClass]="ngClass()"
                     [formControlName]="field.name"
-                    [placeholder]="field.placeholder"
+                    [placeholder]="placeholder()"
                     [type]="inputType()"
                     [maxLength]="maxLength()"
                     [min]="min()"
@@ -1494,8 +1524,8 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
                     (blur)="onBlur()"
                 />
             }
-            @if (field.hint) {
-                <mat-hint>{{ field.hint }}</mat-hint>
+            @if (hint()) {
+                <mat-hint>{{ hint() }}</mat-hint>
             }
             @if (field.subComponents || field.clearable || isPending()) {
                 <div matSuffix class="suffix">
@@ -1510,7 +1540,7 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", ".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    `, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", ".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 };
 KlesFormInputComponent = __decorate([
     FieldMapper({ type: EnumType.input })
@@ -1519,8 +1549,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Component,
             args: [{ selector: 'kles-form-input', template: `
         <mat-form-field [formGroup]="group" [color]="color()" [subscriptSizing]="field.subscriptSizing" class="form-element" [appearance]="appearance()" class="field-bottom">
-            @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
             }
             @if (icon()) {
                 <mat-icon matPrefix>{{ icon() }}</mat-icon>
@@ -1529,11 +1559,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             @if (field.autocomplete) {
                 <input
                     matInput
-                    matTooltip="{{ field.tooltip }}"
+                    [matTooltip]="tooltip()"
                     [attr.id]="field.id"
                     [ngClass]="ngClass()"
                     [formControlName]="field.name"
-                    [placeholder]="field.placeholder"
+                    [placeholder]="placeholder()"
                     [type]="inputType()"
                     [maxLength]="maxLength()"
                     [min]="min()"
@@ -1573,11 +1603,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             } @else {
                 <input
                     matInput
-                    matTooltip="{{ field.tooltip }}"
+                    [matTooltip]="tooltip()"
                     [attr.id]="field.id"
                     [ngClass]="ngClass()"
                     [formControlName]="field.name"
-                    [placeholder]="field.placeholder"
+                    [placeholder]="placeholder()"
                     [type]="inputType()"
                     [maxLength]="maxLength()"
                     [min]="min()"
@@ -1587,8 +1617,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                     (blur)="onBlur()"
                 />
             }
-            @if (field.hint) {
-                <mat-hint>{{ field.hint }}</mat-hint>
+            @if (hint()) {
+                <mat-hint>{{ hint() }}</mat-hint>
             }
             @if (field.subComponents || field.clearable || isPending()) {
                 <div matSuffix class="suffix">
@@ -1736,17 +1766,17 @@ let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbs
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormSelectComponent, isStandalone: true, selector: "kles-form-select", viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()" class="field-bottom">
-            @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
             }
             <mat-select
-                matTooltip="{{ field.tooltip }}"
+                [matTooltip]="tooltip()"
                 [attr.id]="field.id"
                 (openedChange)="openChange($event)"
                 [compareWith]="compareFn"
                 [panelWidth]="field.panelWidth || 'auto'"
                 [ngClass]="ngClass()"
-                [placeholder]="field.placeholder"
+                [placeholder]="placeholder()"
                 [formControlName]="field.name"
                 [multiple]="field.multiple"
                 (focus)="onFocus()"
@@ -1836,8 +1866,8 @@ let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbs
                 }
             </mat-select>
 
-            @if (field.hint) {
-                <mat-hint>{{ field.hint }}</mat-hint>
+            @if (hint()) {
+                <mat-hint>{{ hint() }}</mat-hint>
             }
             @if (field.subComponents || field.clearable) {
                 <div matSuffix>
@@ -1847,7 +1877,7 @@ let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbs
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { 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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.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: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
+    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { 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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$1.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: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
 };
 KlesFormSelectComponent = __decorate([
     FieldMapper({ type: EnumType.select })
@@ -1856,17 +1886,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Component,
             args: [{ selector: 'kles-form-select', template: `
         <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()" class="field-bottom">
-            @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
             }
             <mat-select
-                matTooltip="{{ field.tooltip }}"
+                [matTooltip]="tooltip()"
                 [attr.id]="field.id"
                 (openedChange)="openChange($event)"
                 [compareWith]="compareFn"
                 [panelWidth]="field.panelWidth || 'auto'"
                 [ngClass]="ngClass()"
-                [placeholder]="field.placeholder"
+                [placeholder]="placeholder()"
                 [formControlName]="field.name"
                 [multiple]="field.multiple"
                 (focus)="onFocus()"
@@ -1956,8 +1986,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 }
             </mat-select>
 
-            @if (field.hint) {
-                <mat-hint>{{ field.hint }}</mat-hint>
+            @if (hint()) {
+                <mat-hint>{{ hint() }}</mat-hint>
             }
             @if (field.subComponents || field.clearable) {
                 <div matSuffix>
@@ -1986,38 +2016,38 @@ class KlesFormDateComponent extends KlesFieldAbstract {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormDateComponent, isStandalone: true, selector: "kles-form-datepicker", usesInheritance: true, ngImport: i0, template: `
         <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()">
-            @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
             }
-            <input matInput matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder" [min]="field.min" [max]="field.max" />
+            <input matInput [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="placeholder()" [min]="min()" [max]="max()" />
             <div matSuffix class="suffix">
                 <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
                 <ng-content></ng-content>
             </div>
             <mat-datepicker #picker></mat-datepicker>
-            @if (field.hint) {
-                <mat-hint>{{ field.hint }}</mat-hint>
+            @if (hint()) {
+                <mat-hint>{{ hint() }}</mat-hint>
             }
 
             <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: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { 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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: i3.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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { 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: 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"] }] }); }
+    `, 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: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { 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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormDateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-datepicker', template: `
         <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()">
-            @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
             }
-            <input matInput matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder" [min]="field.min" [max]="field.max" />
+            <input matInput [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="placeholder()" [min]="min()" [max]="max()" />
             <div matSuffix class="suffix">
                 <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
                 <ng-content></ng-content>
             </div>
             <mat-datepicker #picker></mat-datepicker>
-            @if (field.hint) {
-                <mat-hint>{{ field.hint }}</mat-hint>
+            @if (hint()) {
+                <mat-hint>{{ hint() }}</mat-hint>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
@@ -2044,8 +2074,8 @@ class KlesFormRadioComponent extends KlesFieldAbstract {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormRadioComponent, isStandalone: true, selector: "kles-form-radiobutton", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">
-        <label class="radio-label-padding">{{field.label}}</label>
-        <mat-radio-group matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="ngClass()" [formControlName]="field.name">
+        <label class="radio-label-padding">{{label()}}</label>
+        <mat-radio-group [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [formControlName]="field.name">
             @for (item of options$ | async; track item) {
                 <mat-radio-button [value]="item">{{item}}</mat-radio-button>
             }
@@ -2057,8 +2087,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Component,
             args: [{ selector: 'kles-form-radiobutton', template: `
     <div [formGroup]="group">
-        <label class="radio-label-padding">{{field.label}}</label>
-        <mat-radio-group matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="ngClass()" [formControlName]="field.name">
+        <label class="radio-label-padding">{{label()}}</label>
+        <mat-radio-group [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [formControlName]="field.name">
             @for (item of options$ | async; track item) {
                 <mat-radio-button [value]="item">{{item}}</mat-radio-button>
             }
@@ -2080,7 +2110,7 @@ let KlesFormCheckboxComponent = class KlesFormCheckboxComponent extends KlesFiel
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormCheckboxComponent, isStandalone: true, selector: "kles-form-checkbox", usesInheritance: true, ngImport: i0, template: `
         <div [formGroup]="group">
-            <mat-checkbox matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [indeterminate]="indeterminate()" (change)="onChange($event)" [color]="color()" [formControlName]="field.name">{{ field.label }}</mat-checkbox>
+            <mat-checkbox [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [indeterminate]="indeterminate()" (change)="onChange($event)" [color]="color()" [formControlName]="field.name">{{ label() }}</mat-checkbox>
         </div>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 };
@@ -2091,7 +2121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Component,
             args: [{ selector: 'kles-form-checkbox', template: `
         <div [formGroup]="group">
-            <mat-checkbox matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [indeterminate]="indeterminate()" (change)="onChange($event)" [color]="color()" [formControlName]="field.name">{{ field.label }}</mat-checkbox>
+            <mat-checkbox [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [indeterminate]="indeterminate()" (change)="onChange($event)" [color]="color()" [formControlName]="field.name">{{ label() }}</mat-checkbox>
         </div>
     `, standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckbox, MatTooltip] }]
         }] });
@@ -2204,8 +2234,8 @@ let KlesFormListFieldComponent = class KlesFormListFieldComponent extends KlesFi
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormListFieldComponent, isStandalone: true, selector: "kles-form-listfield", usesInheritance: true, ngImport: i0, template: `
         <div [formGroup]="group" class="form-element">
             <div class="label">
-                {{ field.label }}
-                <button mat-icon-button color="primary" (click)="addField()">
+                {{ label() }}
+                <button matIconButton color="primary" (click)="addField()">
                     <mat-icon>add</mat-icon>
                 </button>
             </div>
@@ -2217,7 +2247,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>
                         }
@@ -2249,8 +2279,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ selector: 'kles-form-listfield', template: `
         <div [formGroup]="group" class="form-element">
             <div class="label">
-                {{ field.label }}
-                <button mat-icon-button color="primary" (click)="addField()">
+                {{ label() }}
+                <button matIconButton color="primary" (click)="addField()">
                     <mat-icon>add</mat-icon>
                 </button>
             </div>
@@ -2262,7 +2292,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>
                         }
@@ -2366,10 +2396,10 @@ class KlesFormColorComponent extends KlesFieldAbstract {
         >
             <input
                 matInput
-                matTooltip="{{ field.tooltip }}"
+                [matTooltip]="tooltip()"
                 [attr.id]="field.id"
                 [ngClass]="ngClass()"
-                [placeholder]="field.placeholder"
+                [placeholder]="placeholder()"
                 [value]="group.get(field.name).value"
                 class="colorPicker"
                 [style.background]="group.get(field.name).value"
@@ -2378,9 +2408,9 @@ class KlesFormColorComponent extends KlesFieldAbstract {
             />
 
             @if (field.subComponents || field.clearable) {
-            <div matSuffix>
-                <ng-content></ng-content>
-            </div>
+                <div matSuffix>
+                    <ng-content></ng-content>
+                </div>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
@@ -2404,10 +2434,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
         >
             <input
                 matInput
-                matTooltip="{{ field.tooltip }}"
+                [matTooltip]="tooltip()"
                 [attr.id]="field.id"
                 [ngClass]="ngClass()"
-                [placeholder]="field.placeholder"
+                [placeholder]="placeholder()"
                 [value]="group.get(field.name).value"
                 class="colorPicker"
                 [style.background]="group.get(field.name).value"
@@ -2416,9 +2446,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             />
 
             @if (field.subComponents || field.clearable) {
-            <div matSuffix>
-                <ng-content></ng-content>
-            </div>
+                <div matSuffix>
+                    <ng-content></ng-content>
+                </div>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
@@ -2436,6 +2466,8 @@ class KlesButtonBase {
         this.disabled = false;
         this.classButton = '';
         this.value = {};
+        this.buttonAppearance = 'text';
+        this.action = new EventEmitter();
         this._type = 'button';
         this.onChange = () => { };
         this.onTouched = () => { };
@@ -2446,13 +2478,16 @@ class KlesButtonBase {
     set type(value) {
         this._type = value || this._type;
     }
-    ngOnInit() {
-    }
+    ngOnInit() { }
     click(event) {
-        if (!this.disabled && this.value && this._type === 'button') {
+        if (this.disabled || this._type !== 'button') {
+            return;
+        }
+        if (this.value) {
             this.value.event = this.name;
             this.onChange(this.value);
         }
+        this.action.emit(event);
     }
     writeValue(value) {
         if (!value) {
@@ -2463,13 +2498,14 @@ class KlesButtonBase {
         }
         if (value.uiButton) {
             const uiButton = value.uiButton;
-            this.label = (uiButton.label) ? uiButton.label : this.label;
-            this.color = (uiButton.color) ? uiButton.color : this.color;
-            this.icon = (uiButton.icon) ? uiButton.icon : this.icon;
-            this.iconSvg = (uiButton.iconSvg) ? uiButton.iconSvg : this.iconSvg;
-            this.disabled = (uiButton.disabled) ? uiButton.disabled : this.disabled;
-            this.classButton = (uiButton.class) ? uiButton.class : this.classButton;
-            this.type = (uiButton.type) ? uiButton.type : 'submit';
+            this.label = uiButton.label ? uiButton.label : this.label;
+            this.color = uiButton.color ? uiButton.color : this.color;
+            this.icon = uiButton.icon ? uiButton.icon : this.icon;
+            this.iconSvg = uiButton.iconSvg ? uiButton.iconSvg : this.iconSvg;
+            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,13 +2519,13 @@ 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" }, outputs: { action: "action" }, ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesButtonBase, decorators: [{
             type: Component,
             args: [{
                     template: '',
-                    standalone: true
+                    standalone: true,
                 }]
         }], propDecorators: { name: [{
                 type: Input
@@ -2512,54 +2548,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 type: Input
             }], tooltip: [{
                 type: Input
+            }], buttonAppearance: [{
+                type: Input
+            }], action: [{
+                type: Output
             }] } });
 
-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 +2582,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 +2605,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() {
@@ -2619,19 +2621,20 @@ class KlesFormButtonComponent extends KlesFieldAbstract {
                 [attr.id]="field.id"
                 [classButton]="ngClass()"
                 [name]="field.name"
-                [label]="field.label"
+                [label]="label()"
                 [color]="color()"
-                [attribute]="field.attribute"
                 [icon]="icon()"
                 [iconSvg]="iconSvg()"
                 [value]="field.value"
                 [formControlName]="field.name"
-                [tooltip]="field.tooltip"
+                [tooltip]="tooltip()"
                 [type]="field.buttonType"
+                [buttonAppearance]="buttonAppearance()"
+                (action)="triggerAction(field.name, $event)"
             >
             </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,
@@ -2641,15 +2644,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 [attr.id]="field.id"
                 [classButton]="ngClass()"
                 [name]="field.name"
-                [label]="field.label"
+                [label]="label()"
                 [color]="color()"
-                [attribute]="field.attribute"
                 [icon]="icon()"
                 [iconSvg]="iconSvg()"
                 [value]="field.value"
                 [formControlName]="field.name"
-                [tooltip]="field.tooltip"
+                [tooltip]="tooltip()"
                 [type]="field.buttonType"
+                [buttonAppearance]="buttonAppearance()"
+                (action)="triggerAction(field.name, $event)"
             >
             </kles-button>
         </div>
@@ -2693,7 +2697,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,
@@ -2739,37 +2743,45 @@ class KlesFormButtonCheckerComponent extends KlesFieldAbstract {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormButtonCheckerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormButtonCheckerComponent, isStandalone: true, selector: "kles-form-button-checker", usesInheritance: true, ngImport: i0, template: `
-    <div [formGroup]="group">
-        <kles-button-checker
-            [attr.id]="field.id" [classButton]="ngClass()"
-            [name]="field.name" [label]="field.label" [color]="color()"
-            [icon]="icon()"
-            [iconSvg]="iconSvg()"
-            [value]="field.value"
-            [formControlName]="field.name"
-            [tooltip]="field.tooltip"
-            [disabled]="field.disabled"
+        <div [formGroup]="group">
+            <kles-button-checker
+                [attr.id]="field.id"
+                [classButton]="ngClass()"
+                [name]="field.name"
+                [label]="label()"
+                [color]="color()"
+                [icon]="icon()"
+                [iconSvg]="iconSvg()"
+                [value]="field.value"
+                [formControlName]="field.name"
+                [tooltip]="tooltip()"
+                [disabled]="field.disabled"
+                (action)="triggerAction(field.name, $event)"
             >
-        </kles-button-checker>
-    </div>
+            </kles-button-checker>
+        </div>
     `, isInline: true, dependencies: [{ kind: "component", type: KlesButtonCheckerComponent, selector: "kles-button-checker" }, { 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: KlesFormButtonCheckerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-button-checker', template: `
-    <div [formGroup]="group">
-        <kles-button-checker
-            [attr.id]="field.id" [classButton]="ngClass()"
-            [name]="field.name" [label]="field.label" [color]="color()"
-            [icon]="icon()"
-            [iconSvg]="iconSvg()"
-            [value]="field.value"
-            [formControlName]="field.name"
-            [tooltip]="field.tooltip"
-            [disabled]="field.disabled"
+        <div [formGroup]="group">
+            <kles-button-checker
+                [attr.id]="field.id"
+                [classButton]="ngClass()"
+                [name]="field.name"
+                [label]="label()"
+                [color]="color()"
+                [icon]="icon()"
+                [iconSvg]="iconSvg()"
+                [value]="field.value"
+                [formControlName]="field.name"
+                [tooltip]="tooltip()"
+                [disabled]="field.disabled"
+                (action)="triggerAction(field.name, $event)"
             >
-        </kles-button-checker>
-    </div>
+            </kles-button-checker>
+        </div>
     `, standalone: true, imports: [KlesButtonCheckerComponent, ReactiveFormsModule] }]
         }] });
 
@@ -2860,7 +2872,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,
@@ -2908,7 +2920,7 @@ class KlesFormButtonFileComponent extends KlesFieldAbstract {
                 [attr.id]="field.id"
                 [classButton]="ngClass()"
                 [name]="field.name"
-                [label]="field.label"
+                [label]="label()"
                 [color]="color()"
                 [icon]="icon()"
                 [iconSvg]="iconSvg()"
@@ -2930,7 +2942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 [attr.id]="field.id"
                 [classButton]="ngClass()"
                 [name]="field.name"
-                [label]="field.label"
+                [label]="label()"
                 [color]="color()"
                 [icon]="icon()"
                 [iconSvg]="iconSvg()"
@@ -2955,12 +2967,12 @@ class KlesFormTextareaComponent extends KlesFieldAbstract {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormTextareaComponent, isStandalone: true, selector: "kles-form-textarea", usesInheritance: true, ngImport: i0, template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="color()" class="form-element" [appearance]="appearance()">
-        @if (field.label) {
-            <mat-label>{{field.label}}</mat-label>
+        @if (label()) {
+            <mat-label>{{label()}}</mat-label>
         }
 
-        <textarea matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="ngClass()"
-        [formControlName]="field.name" cdkTextareaAutosize [placeholder]="field.placeholder"
+        <textarea matInput [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()"
+        [formControlName]="field.name" cdkTextareaAutosize [placeholder]="placeholder()"
         [cdkAutosizeMinRows]="field.textareaAutoSize?.minRows" [cdkAutosizeMaxRows]="field.textareaAutoSize?.maxRows"  [maxlength]="maxLength()">
         </textarea>
 
@@ -2972,18 +2984,18 @@ class KlesFormTextareaComponent 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: ScrollingModule }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "directive", type: i3$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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"] }] }); }
+    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "ngmodule", type: ScrollingModule }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: TextFieldModule }, { kind: "directive", type: i3$2.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormTextareaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-textarea', template: `
     <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="color()" class="form-element" [appearance]="appearance()">
-        @if (field.label) {
-            <mat-label>{{field.label}}</mat-label>
+        @if (label()) {
+            <mat-label>{{label()}}</mat-label>
         }
 
-        <textarea matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="ngClass()"
-        [formControlName]="field.name" cdkTextareaAutosize [placeholder]="field.placeholder"
+        <textarea matInput [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()"
+        [formControlName]="field.name" cdkTextareaAutosize [placeholder]="placeholder()"
         [cdkAutosizeMinRows]="field.textareaAutoSize?.minRows" [cdkAutosizeMaxRows]="field.textareaAutoSize?.maxRows"  [maxlength]="maxLength()">
         </textarea>
 
@@ -3007,7 +3019,7 @@ let KlesFormTextComponent = class KlesFormTextComponent extends KlesFieldAbstrac
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormTextComponent, isStandalone: true, selector: "kles-form-text", usesInheritance: true, ngImport: i0, template: `
-        <span matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+        <span [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="ngStyle()">
             {{ (field.property && group.controls[field.name].value ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform: field.pipeTransform }}
         </span>
         @if (field.subComponents || isPending()) {
@@ -3021,7 +3033,7 @@ KlesFormTextComponent = __decorate([
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-text', template: `
-        <span matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+        <span [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="ngStyle()">
             {{ (field.property && group.controls[field.name].value ? group.controls[field.name].value[field.property] : group.controls[field.name].value) | klesTransform: field.pipeTransform }}
         </span>
         @if (field.subComponents || isPending()) {
@@ -3039,7 +3051,7 @@ class KlesFormChipComponent extends KlesFieldAbstract {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormChipComponent, isStandalone: true, selector: "kles-form-chip", usesInheritance: true, ngImport: i0, template: `
     <div [formGroup]="group">  
         <mat-chip-listbox>
-            <mat-chip-option [color]="color()" matTooltip="{{field.tooltip}}" [attr.id]="field.id" selected [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+            <mat-chip-option [color]="color()" [matTooltip]="tooltip()" [attr.id]="field.id" selected [ngClass]="ngClass()" [ngStyle]="ngStyle()">
                 @if (icon()) {
                     <mat-icon>{{icon()}}</mat-icon>
                 }
@@ -3054,7 +3066,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ selector: "kles-form-chip", template: `
     <div [formGroup]="group">  
         <mat-chip-listbox>
-            <mat-chip-option [color]="color()" matTooltip="{{field.tooltip}}" [attr.id]="field.id" selected [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+            <mat-chip-option [color]="color()" [matTooltip]="tooltip()" [attr.id]="field.id" selected [ngClass]="ngClass()" [ngStyle]="ngStyle()">
                 @if (icon()) {
                     <mat-icon>{{icon()}}</mat-icon>
                 }
@@ -3170,9 +3182,9 @@ let KlesFormGroupComponent = class KlesFormGroupComponent extends KlesFieldAbstr
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormGroupComponent, isStandalone: true, selector: "kles-group", host: { properties: { "class": "this.className" } }, usesInheritance: true, ngImport: i0, template: `
         <ng-container [formGroup]="group">
             <ng-container [formGroupName]="field.name">
-                @if (field.label) {
+                @if (label()) {
                     <h4>
-                        <span [matTooltip]="field.tooltip || ''">{{ field.label }}</span>
+                        <span [matTooltip]="tooltip() ?? ''">{{ label() }}</span>
                     </h4>
                 }
 
@@ -3193,9 +3205,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{ selector: 'kles-group', template: `
         <ng-container [formGroup]="group">
             <ng-container [formGroupName]="field.name">
-                @if (field.label) {
+                @if (label()) {
                     <h4>
-                        <span [matTooltip]="field.tooltip || ''">{{ field.label }}</span>
+                        <span [matTooltip]="tooltip() ?? ''">{{ label() }}</span>
                     </h4>
                 }
 
@@ -3219,17 +3231,17 @@ class KlesFormInputClearableComponent extends KlesFormInputComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormInputClearableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormInputClearableComponent, isStandalone: true, selector: "kles-form-input-clearable", usesInheritance: true, ngImport: i0, template: `
         <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="color()" class="form-element" [appearance]="appearance()">
-            @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
             }
             @if (field.autocomplete) {
                 <input
                     matInput
-                    matTooltip="{{ field.tooltip }}"
+                    [matTooltip]="tooltip()"
                     [attr.id]="field.id"
                     [ngClass]="ngClass()"
                     [formControlName]="field.name"
-                    [placeholder]="field.placeholder"
+                    [placeholder]="placeholder()"
                     [type]="inputType()"
                     [maxLength]="maxLength()"
                     [min]="min()"
@@ -3267,11 +3279,11 @@ class KlesFormInputClearableComponent extends KlesFormInputComponent {
             } @else {
                 <input
                     matInput
-                    matTooltip="{{ field.tooltip }}"
+                    [matTooltip]="tooltip()"
                     [attr.id]="field.id"
                     [ngClass]="ngClass()"
                     [formControlName]="field.name"
-                    [placeholder]="field.placeholder"
+                    [placeholder]="placeholder()"
                     [type]="inputType()"
                     [maxLength]="maxLength()"
                     [min]="min()"
@@ -3280,7 +3292,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>
             }
@@ -3290,23 +3302,23 @@ class KlesFormInputClearableComponent extends KlesFormInputComponent {
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "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: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { 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: MatLabel$1, selector: "mat-label" }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
+    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "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: MatAutocompleteModule }, { kind: "component", type: i5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { 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: MatLabel$1, selector: "mat-label" }, { kind: "component", type: MatFormField$1, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormInputClearableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-input-clearable', template: `
         <mat-form-field [subscriptSizing]="field.subscriptSizing" [formGroup]="group" [color]="color()" class="form-element" [appearance]="appearance()">
-            @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
             }
             @if (field.autocomplete) {
                 <input
                     matInput
-                    matTooltip="{{ field.tooltip }}"
+                    [matTooltip]="tooltip()"
                     [attr.id]="field.id"
                     [ngClass]="ngClass()"
                     [formControlName]="field.name"
-                    [placeholder]="field.placeholder"
+                    [placeholder]="placeholder()"
                     [type]="inputType()"
                     [maxLength]="maxLength()"
                     [min]="min()"
@@ -3344,11 +3356,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             } @else {
                 <input
                     matInput
-                    matTooltip="{{ field.tooltip }}"
+                    [matTooltip]="tooltip()"
                     [attr.id]="field.id"
                     [ngClass]="ngClass()"
                     [formControlName]="field.name"
-                    [placeholder]="field.placeholder"
+                    [placeholder]="placeholder()"
                     [type]="inputType()"
                     [maxLength]="maxLength()"
                     [min]="min()"
@@ -3357,7 +3369,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>
             }
@@ -3379,7 +3391,7 @@ class KlesFormIconComponent extends KlesFieldAbstract {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormIconComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormIconComponent, isStandalone: true, selector: "kles-form-icon", usesInheritance: true, ngImport: i0, template: `
-        <mat-icon [color]="color()" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+        <mat-icon [color]="color()" [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="ngStyle()">
             {{ group.controls[field.name].value }}
         </mat-icon>
     `, isInline: true, 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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
@@ -3387,7 +3399,7 @@ class KlesFormIconComponent extends KlesFieldAbstract {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-icon', template: `
-        <mat-icon [color]="color()" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+        <mat-icon [color]="color()" [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [ngStyle]="ngStyle()">
             {{ group.controls[field.name].value }}
         </mat-icon>
     `, standalone: true, imports: [CommonModule, MatIcon, MatTooltip, ReactiveFormsModule] }]
@@ -3582,18 +3594,18 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormSelectSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormSelectSearchComponent, isStandalone: true, selector: "kles-form-select-search", viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()" class="field-bottom">
-            @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
             }
 
             <mat-select
-                matTooltip="{{ field.tooltip }}"
+                [matTooltip]="tooltip()"
                 [attr.id]="field.id"
                 [ngClass]="ngClass()"
                 (openedChange)="openChange($event)"
                 [compareWith]="compareFn"
                 [panelWidth]="field.panelWidth || 'auto'"
-                [placeholder]="field.placeholder"
+                [placeholder]="placeholder()"
                 [formControlName]="field.name"
                 [multiple]="field.multiple"
                 (selectionChange)="selectionChange($event)"
@@ -3696,8 +3708,8 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
                 }
             </mat-select>
 
-            @if (field.hint) {
-                <mat-hint>{{ field.hint }}</mat-hint>
+            @if (hint()) {
+                <mat-hint>{{ hint() }}</mat-hint>
             }
             @if (field.subComponents || field.clearable || isPending()) {
                 <div matSuffix class="suffix">
@@ -3712,24 +3724,24 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", "::ng-deep .selectAll{padding:0 16px 0 5px!important;display:flex!important}\n", "::ng-deep .selectAll .mdc-form-field{width:100%}\n", "::ng-deep .selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", "::ng-deep .selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i4$2.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
+    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", "::ng-deep .selectAll{padding:0 16px 0 5px!important;display:flex!important}\n", "::ng-deep .selectAll .mdc-form-field{width:100%}\n", "::ng-deep .selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", "::ng-deep .selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: NgxMatSelectSearchModule }, { kind: "component", type: i4$3.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { 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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormSelectSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-select-search', template: `
         <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()" class="field-bottom">
-            @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
             }
 
             <mat-select
-                matTooltip="{{ field.tooltip }}"
+                [matTooltip]="tooltip()"
                 [attr.id]="field.id"
                 [ngClass]="ngClass()"
                 (openedChange)="openChange($event)"
                 [compareWith]="compareFn"
                 [panelWidth]="field.panelWidth || 'auto'"
-                [placeholder]="field.placeholder"
+                [placeholder]="placeholder()"
                 [formControlName]="field.name"
                 [multiple]="field.multiple"
                 (selectionChange)="selectionChange($event)"
@@ -3832,8 +3844,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 }
             </mat-select>
 
-            @if (field.hint) {
-                <mat-hint>{{ field.hint }}</mat-hint>
+            @if (hint()) {
+                <mat-hint>{{ hint() }}</mat-hint>
             }
             @if (field.subComponents || field.clearable || isPending()) {
                 <div matSuffix class="suffix">
@@ -3926,8 +3938,8 @@ class KlesFormLinkComponent extends KlesFieldAbstract {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormLinkComponent, isStandalone: true, selector: "kles-form-link", usesInheritance: true, ngImport: i0, template: `
-        <a [href]="group.controls[field.name].value" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()">
-            {{ field.label }}
+        <a [href]="group.controls[field.name].value" [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()">
+            {{ label() }}
         </a>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
@@ -3936,8 +3948,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{
                     selector: 'kles-form-link',
                     template: `
-        <a [href]="group.controls[field.name].value" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()">
-            {{ field.label }}
+        <a [href]="group.controls[field.name].value" [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()">
+            {{ label() }}
         </a>
     `,
                     standalone: true,
@@ -3955,7 +3967,7 @@ class KlesFormSlideToggleComponent extends KlesFieldAbstract {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormSlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormSlideToggleComponent, isStandalone: true, selector: "kles-form-slide-toggle", usesInheritance: true, ngImport: i0, template: `
         <div [formGroup]="group">
-            <mat-slide-toggle matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{ field.label }}</mat-slide-toggle>
+            <mat-slide-toggle [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{ label() }}</mat-slide-toggle>
         </div>
     `, 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", "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"] }] }); }
 }
@@ -3963,7 +3975,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Component,
             args: [{ selector: 'kles-form-slide-toggle', template: `
         <div [formGroup]="group">
-            <mat-slide-toggle matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{ field.label }}</mat-slide-toggle>
+            <mat-slide-toggle [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{ label() }}</mat-slide-toggle>
         </div>
     `, standalone: true, imports: [CommonModule, MatSlideToggle, MatTooltip, ReactiveFormsModule] }]
         }] });
@@ -4266,7 +4278,7 @@ class KlesFormSelectionListComponent extends KlesFieldAbstract {
                 }
             </mat-selection-list>
         </div>
-    `, isInline: true, styles: ["mat-selection-list{width:100%;height:250px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$4.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$4.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
+    `, isInline: true, styles: ["mat-selection-list{width:100%;height:250px;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormSelectionListComponent, decorators: [{
             type: Component,
@@ -4310,10 +4322,10 @@ let KlesFormBadgeComponent = class KlesFormBadgeComponent extends KlesFieldAbstr
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormBadgeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormBadgeComponent, isStandalone: true, selector: "kles-form-badge", usesInheritance: true, ngImport: i0, template: `
-    <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="ngClass()" 
+    <span [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" 
         matBadge="{{group.controls[field.name].value}}" matBadgeOverlap="false" [matBadgeColor]="color()">
     </span>
-`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: MatBadgeModule }, { kind: "directive", type: i3$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }] }); }
+`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i3$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }] }); }
 };
 KlesFormBadgeComponent = __decorate([
     FieldMapper({ type: EnumType.badge })
@@ -4323,7 +4335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             args: [{
                     selector: 'kles-form-badge',
                     template: `
-    <span matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="ngClass()" 
+    <span [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" 
         matBadge="{{group.controls[field.name].value}}" matBadgeOverlap="false" [matBadgeColor]="color()">
     </span>
 `,
@@ -4359,7 +4371,7 @@ class KlesFormButtonToogleGroupComponent extends KlesFieldAbstract {
                 }
             </mat-button-toggle-group>
         </div>
-`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
+`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i3$5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i3$5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormButtonToogleGroupComponent, decorators: [{
             type: Component,
@@ -4604,11 +4616,11 @@ let KlesFormRangeComponent = class KlesFormRangeComponent extends KlesFieldAbstr
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormRangeComponent, isStandalone: true, selector: "kles-form-rangepicker", usesInheritance: true, ngImport: i0, template: `
         <mat-form-field [subscriptSizing]="field.subscriptSizing" [color]="color()" [formGroup]="group" [appearance]="appearance()">
-            <mat-label>{{ field.label }}</mat-label>
+            <mat-label>{{ label() }}</mat-label>
 
-            <mat-date-range-input [formGroupName]="field.name" [rangePicker]="picker" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [min]="min()" [max]="max()">
-                <input matStartDate formControlName="start" [placeholder]="field.placeholder?.start ? field.placeholder?.start : ''" />
-                <input matEndDate formControlName="end" [placeholder]="field.placeholder?.end ? field.placeholder?.end : ''" />
+            <mat-date-range-input [formGroupName]="field.name" [rangePicker]="picker" [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [min]="min()" [max]="max()">
+                <input matStartDate formControlName="start" [placeholder]="placeholder()?.start ? placeholder()?.start : ''" />
+                <input matEndDate formControlName="end" [placeholder]="placeholder()?.end ? placeholder()?.end : ''" />
             </mat-date-range-input>
 
             <div matSuffix class="suffix">
@@ -4617,13 +4629,13 @@ let KlesFormRangeComponent = class KlesFormRangeComponent extends KlesFieldAbstr
             </div>
 
             <mat-date-range-picker #picker></mat-date-range-picker>
-            @if (field.hint) {
-                <mat-hint>{{ field.hint }}</mat-hint>
+            @if (hint) {
+                <mat-hint>{{ hint() }}</mat-hint>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { 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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { 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: 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: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
+    `, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { 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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }] }); }
 };
 KlesFormRangeComponent = __decorate([
     FieldMapper({ type: EnumType.range, factory: (field) => new KlesFormRange(field).create() })
@@ -4632,11 +4644,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Component,
             args: [{ selector: 'kles-form-rangepicker', template: `
         <mat-form-field [subscriptSizing]="field.subscriptSizing" [color]="color()" [formGroup]="group" [appearance]="appearance()">
-            <mat-label>{{ field.label }}</mat-label>
+            <mat-label>{{ label() }}</mat-label>
 
-            <mat-date-range-input [formGroupName]="field.name" [rangePicker]="picker" matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [min]="min()" [max]="max()">
-                <input matStartDate formControlName="start" [placeholder]="field.placeholder?.start ? field.placeholder?.start : ''" />
-                <input matEndDate formControlName="end" [placeholder]="field.placeholder?.end ? field.placeholder?.end : ''" />
+            <mat-date-range-input [formGroupName]="field.name" [rangePicker]="picker" [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [min]="min()" [max]="max()">
+                <input matStartDate formControlName="start" [placeholder]="placeholder()?.start ? placeholder()?.start : ''" />
+                <input matEndDate formControlName="end" [placeholder]="placeholder()?.end ? placeholder()?.end : ''" />
             </mat-date-range-input>
 
             <div matSuffix class="suffix">
@@ -4645,8 +4657,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             </div>
 
             <mat-date-range-picker #picker></mat-date-range-picker>
-            @if (field.hint) {
-                <mat-hint>{{ field.hint }}</mat-hint>
+            @if (hint) {
+                <mat-hint>{{ hint() }}</mat-hint>
             }
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
@@ -4696,18 +4708,18 @@ class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormSelectLazySearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormSelectLazySearchComponent, isStandalone: true, selector: "kles-form-select-lazy-search", usesInheritance: true, ngImport: i0, template: `
         <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()" class="field-bottom">
-            @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
             }
 
             <mat-select
-                matTooltip="{{ field.tooltip }}"
+                [matTooltip]="tooltip()"
                 [attr.id]="field.id"
                 [ngClass]="ngClass()"
                 (openedChange)="openChange($event)"
                 [compareWith]="compareFn"
                 [panelWidth]="field.panelWidth || 'auto'"
-                [placeholder]="field.placeholder"
+                [placeholder]="placeholder()"
                 [formControlName]="field.name"
                 [multiple]="field.multiple"
             >
@@ -4809,24 +4821,24 @@ class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent {
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", ".selectAll{padding:0 16px 0 5px;display:flex!important}\n", ".selectAll .mdc-form-field{width:100%}\n", ".selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", ".selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { 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.MatLabel, selector: "mat-label" }, { 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: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4.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: "directive", type: i4.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: NgxMatSelectSearchModule }, { kind: "component", type: i4$2.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
+    `, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n", ".selectAll{padding:0 16px 0 5px;display:flex!important}\n", ".selectAll .mdc-form-field{width:100%}\n", ".selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", ".selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", "::ng-deep .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { 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.MatLabel, selector: "mat-label" }, { 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: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$1.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: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: NgxMatSelectSearchModule }, { kind: "component", type: i4$3.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormSelectLazySearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-select-lazy-search', template: `
         <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()" class="field-bottom">
-            @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
             }
 
             <mat-select
-                matTooltip="{{ field.tooltip }}"
+                [matTooltip]="tooltip()"
                 [attr.id]="field.id"
                 [ngClass]="ngClass()"
                 (openedChange)="openChange($event)"
                 [compareWith]="compareFn"
                 [panelWidth]="field.panelWidth || 'auto'"
-                [placeholder]="field.placeholder"
+                [placeholder]="placeholder()"
                 [formControlName]="field.name"
                 [multiple]="field.multiple"
             >
@@ -4940,7 +4952,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}}
 
@@ -4952,14 +4964,14 @@ class KlesFabComponent extends KlesButtonBase {
                     <mat-icon svgIcon="{{iconSvg}}"></mat-icon>
                 }
             </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatButtonModule }, { kind: "component", type: i4$3.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$4.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFabComponent, decorators: [{
             type: Component,
             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}}
 
@@ -4993,37 +5005,45 @@ class KlesFormFabComponent extends KlesFieldAbstract {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormFabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormFabComponent, isStandalone: true, selector: "kles-form-fab", usesInheritance: true, ngImport: i0, template: `
-    <div [formGroup]="group">
-        <kles-fab
-            [attr.id]="field.id" [classButton]="ngClass()" 
-            [name]="field.name" [label]="field.label" [color]="color()"
-            [icon]="icon()"
-            [iconSvg]="iconSvg()"
-            [value]="field.value"
-            [formControlName]="field.name"
-            [tooltip]="field.tooltip"
-            [type]="field.buttonType"
+        <div [formGroup]="group">
+            <kles-fab
+                [attr.id]="field.id"
+                [classButton]="ngClass()"
+                [name]="field.name"
+                [label]="label()"
+                [color]="color()"
+                [icon]="icon()"
+                [iconSvg]="iconSvg()"
+                [value]="field.value"
+                [formControlName]="field.name"
+                [tooltip]="tooltip()"
+                [type]="field.buttonType"
+                (action)="triggerAction(field.name, $event)"
             >
-        </kles-fab>
-    </div>
+            </kles-fab>
+        </div>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: KlesFabComponent, selector: "kles-fab" }, { 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: KlesFormFabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-fab', template: `
-    <div [formGroup]="group">
-        <kles-fab
-            [attr.id]="field.id" [classButton]="ngClass()" 
-            [name]="field.name" [label]="field.label" [color]="color()"
-            [icon]="icon()"
-            [iconSvg]="iconSvg()"
-            [value]="field.value"
-            [formControlName]="field.name"
-            [tooltip]="field.tooltip"
-            [type]="field.buttonType"
+        <div [formGroup]="group">
+            <kles-fab
+                [attr.id]="field.id"
+                [classButton]="ngClass()"
+                [name]="field.name"
+                [label]="label()"
+                [color]="color()"
+                [icon]="icon()"
+                [iconSvg]="iconSvg()"
+                [value]="field.value"
+                [formControlName]="field.name"
+                [tooltip]="tooltip()"
+                [type]="field.buttonType"
+                (action)="triggerAction(field.name, $event)"
             >
-        </kles-fab>
-    </div>
+            </kles-fab>
+        </div>
     `, standalone: true, imports: [MatIconModule, MatTooltipModule, MatButtonModule, KlesFabComponent, ReactiveFormsModule] }]
         }] });
 
@@ -5036,7 +5056,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}}
 
@@ -5048,14 +5068,14 @@ class KlesMiniFabComponent extends KlesButtonBase {
                     <mat-icon svgIcon="{{iconSvg}}"></mat-icon>
                 }
             </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: MatButtonModule }, { kind: "component", type: i4$3.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesMiniFabComponent, decorators: [{
             type: Component,
             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}}
 
@@ -5092,13 +5112,14 @@ class KlesFormMiniFabComponent extends KlesFieldAbstract {
     <div [formGroup]="group">
         <kles-mini-fab
             [attr.id]="field.id" [classButton]="ngClass()" 
-            [name]="field.name" [label]="field.label" [color]="color()" 
+            [name]="field.name" [label]="label()" [color]="color()" 
             [icon]="icon()"
             [iconSvg]="iconSvg()"
             [value]="field.value"
             [formControlName]="field.name"
-            [tooltip]="field.tooltip"
+            [tooltip]="tooltip()"
             [type]="field.buttonType"
+            (action)="triggerAction(field.name, $event)"
             >
         </kles-mini-fab>
     </div>
@@ -5110,13 +5131,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
     <div [formGroup]="group">
         <kles-mini-fab
             [attr.id]="field.id" [classButton]="ngClass()" 
-            [name]="field.name" [label]="field.label" [color]="color()" 
+            [name]="field.name" [label]="label()" [color]="color()" 
             [icon]="icon()"
             [iconSvg]="iconSvg()"
             [value]="field.value"
             [formControlName]="field.name"
-            [tooltip]="field.tooltip"
+            [tooltip]="tooltip()"
             [type]="field.buttonType"
+            (action)="triggerAction(field.name, $event)"
             >
         </kles-mini-fab>
     </div>
@@ -5132,21 +5154,21 @@ 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) {
             <mat-icon svgIcon="{{ iconSvg }}"></mat-icon>
             }
         </button>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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$4.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$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesIconButtonComponent, decorators: [{
             type: Component,
             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) {
@@ -5175,37 +5197,43 @@ class KlesFormIconButtonComponent extends KlesFieldAbstract {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormIconButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormIconButtonComponent, isStandalone: true, selector: "kles-form-icon-button", usesInheritance: true, ngImport: i0, template: `
-    <div [formGroup]="group">
-        <kles-icon-button
-            [attr.id]="field.id" [classButton]="ngClass()" 
-            [name]="field.name" [color]="color()" 
-            [icon]="icon()"
-            [iconSvg]="iconSvg()"
-            [value]="field.value"
-            [formControlName]="field.name"
-            [tooltip]="field.tooltip"
-            [type]="field.buttonType"
+        <div [formGroup]="group">
+            <kles-icon-button
+                [attr.id]="field.id"
+                [classButton]="ngClass()"
+                [name]="field.name"
+                [color]="color()"
+                [icon]="icon()"
+                [iconSvg]="iconSvg()"
+                [value]="field.value"
+                [formControlName]="field.name"
+                [tooltip]="tooltip()"
+                [type]="field.buttonType"
+                (action)="triggerAction(field.name, $event)"
             >
-        </kles-icon-button>
-    </div>
+            </kles-icon-button>
+        </div>
     `, isInline: true, dependencies: [{ 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: "component", type: KlesIconButtonComponent, selector: "kles-icon-button" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormIconButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-icon-button', template: `
-    <div [formGroup]="group">
-        <kles-icon-button
-            [attr.id]="field.id" [classButton]="ngClass()" 
-            [name]="field.name" [color]="color()" 
-            [icon]="icon()"
-            [iconSvg]="iconSvg()"
-            [value]="field.value"
-            [formControlName]="field.name"
-            [tooltip]="field.tooltip"
-            [type]="field.buttonType"
+        <div [formGroup]="group">
+            <kles-icon-button
+                [attr.id]="field.id"
+                [classButton]="ngClass()"
+                [name]="field.name"
+                [color]="color()"
+                [icon]="icon()"
+                [iconSvg]="iconSvg()"
+                [value]="field.value"
+                [formControlName]="field.name"
+                [tooltip]="tooltip()"
+                [type]="field.buttonType"
+                (action)="triggerAction(field.name, $event)"
             >
-        </kles-icon-button>
-    </div>
+            </kles-icon-button>
+        </div>
     `, standalone: true, imports: [ReactiveFormsModule, KlesIconButtonComponent] }]
         }] });
 
@@ -5271,11 +5299,11 @@ class KlesFormSelectionListSearchComponent extends KlesFieldAbstract {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormSelectionListSearchComponent, isStandalone: true, selector: "kles-form-selection-list-search", usesInheritance: true, ngImport: i0, template: `
         <div class="selection-list" [formGroup]="group">
             <mat-form-field [subscriptSizing]="field.subscriptSizing" [appearance]="appearance()">
-                @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+                @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
                 }
-                <input matInput [placeholder]="field.placeholder" [formControl]="searchControl" />
-                <button matSuffix mat-icon-button aria-label="Clear" (click)="searchControl.reset(); $event.stopPropagation()">
+                <input matInput [placeholder]="placeholder()" [formControl]="searchControl" />
+                <button matSuffix matIconButton aria-label="Clear" (click)="searchControl.reset(); $event.stopPropagation()">
                     <mat-icon>close</mat-icon>
                 </button>
             </mat-form-field>
@@ -5306,18 +5334,18 @@ class KlesFormSelectionListSearchComponent extends KlesFieldAbstract {
                 }
             </mat-selection-list>
         </div>
-    `, isInline: true, styles: [".selection-list{display:flex;flex-direction:column;gap:5px}\n", "mat-selection-list{width:100%;height:250px;overflow:auto;flex-grow:1}\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: 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: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$4.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$4.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
+    `, isInline: true, styles: [".selection-list{display:flex;flex-direction:column;gap:5px}\n", "mat-selection-list{width:100%;height:250px;overflow:auto;flex-grow:1}\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { 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.MatLabel, selector: "mat-label" }, { 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: 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$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$3.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i3$3.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormSelectionListSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kles-form-selection-list-search', template: `
         <div class="selection-list" [formGroup]="group">
             <mat-form-field [subscriptSizing]="field.subscriptSizing" [appearance]="appearance()">
-                @if (field.label) {
-                <mat-label>{{ field.label }}</mat-label>
+                @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
                 }
-                <input matInput [placeholder]="field.placeholder" [formControl]="searchControl" />
-                <button matSuffix mat-icon-button aria-label="Clear" (click)="searchControl.reset(); $event.stopPropagation()">
+                <input matInput [placeholder]="placeholder()" [formControl]="searchControl" />
+                <button matSuffix matIconButton aria-label="Clear" (click)="searchControl.reset(); $event.stopPropagation()">
                     <mat-icon>close</mat-icon>
                 </button>
             </mat-form-field>
@@ -5454,11 +5482,11 @@ let KlesFormCheckboxIndeterminateComponent = class KlesFormCheckboxIndeterminate
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormCheckboxIndeterminateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.19", type: KlesFormCheckboxIndeterminateComponent, isStandalone: true, selector: "kles-form-checkbox-indeterminate", usesInheritance: true, ngImport: i0, template: `
         <div [formGroup]="group">
-            <kles-checkbox-indeterminate matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{
-                field.label
+            <kles-checkbox-indeterminate [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{
+                label()
             }}</kles-checkbox-indeterminate>
         </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: KlesIndeterminateCheckboxComponent, selector: "kles-checkbox-indeterminate", inputs: ["label", "color"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: KlesIndeterminateCheckboxComponent, selector: "kles-checkbox-indeterminate", inputs: ["label", "color"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 };
 KlesFormCheckboxIndeterminateComponent = __decorate([
     FieldMapper({ type: EnumType.checkbox })
@@ -5467,8 +5495,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
             type: Component,
             args: [{ selector: 'kles-form-checkbox-indeterminate', template: `
         <div [formGroup]="group">
-            <kles-checkbox-indeterminate matTooltip="{{ field.tooltip }}" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{
-                field.label
+            <kles-checkbox-indeterminate [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()" [color]="color()" [formControlName]="field.name">{{
+                label()
             }}</kles-checkbox-indeterminate>
         </div>
     `, standalone: true, imports: [CommonModule, FormsModule, ReactiveFormsModule, KlesIndeterminateCheckboxComponent, MatTooltipModule] }]
@@ -5563,13 +5591,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">
-        @if (field.label) {
-            <mat-label>{{ field.label }}</mat-label>
+    <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()">
+        @if (label()) {
+            <mat-label>{{ 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">
+        <input matInput [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name"
+            [placeholder]="placeholder()" [min]="field.min" [max]="field.max">
         <div matSuffix class="suffix">
             <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
             <ng-content></ng-content>
@@ -5577,24 +5605,24 @@ class KlesFormDateTimeComponent extends KlesFieldAbstract {
 
         <kles-mat-datepicker #picker [hasBackdrop]="false"></kles-mat-datepicker>
 
-        @if (field.hint) {
-            <mat-hint>{{ field.hint }}</mat-hint>
+        @if (hint()) {
+            <mat-hint>{{ hint() }}</mat-hint>
         }
 
         <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$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$1.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$5.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">
-        @if (field.label) {
-            <mat-label>{{ field.label }}</mat-label>
+    <mat-form-field [subscriptSizing]="field.subscriptSizing" class="margin-top" [color]="color()" [formGroup]="group" [appearance]="appearance()">
+        @if (label()) {
+            <mat-label>{{ 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">
+        <input matInput [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name"
+            [placeholder]="placeholder()" [min]="field.min" [max]="field.max">
         <div matSuffix class="suffix">
             <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
             <ng-content></ng-content>
@@ -5602,8 +5630,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
 
         <kles-mat-datepicker #picker [hasBackdrop]="false"></kles-mat-datepicker>
 
-        @if (field.hint) {
-            <mat-hint>{{ field.hint }}</mat-hint>
+        @if (hint()) {
+            <mat-hint>{{ hint() }}</mat-hint>
         }
 
         <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
@@ -5619,7 +5647,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,17 +5672,17 @@ 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 }] }); }
+    `, 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$4.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$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ClipboardModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormCopyComponent, decorators: [{
             type: Component,
             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>
     `,
@@ -5667,6 +5694,705 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
                 args: ['tooltip']
             }] } });
 
+let KlesFormActionMenuComponent = class KlesFormActionMenuComponent extends KlesFieldAbstract {
+    constructor() {
+        super(...arguments);
+        /**
+         * Configuration du field avec le typage spécialisé.
+         */
+        this.actionField = this.field;
+        this.control = this.group.controls[this.field.name];
+        this.controlStatus = toSignal(this.control.statusChanges, {
+            initialValue: this.control.status,
+        });
+        /**
+         * Options statiques ou asynchrones.
+         */
+        this.actionsSource$ = defer(() => this.resolveOptions());
+        this.actions = toSignal(this.actionsSource$, {
+            initialValue: [],
+        });
+        this.disabled = computed(() => {
+            this.controlStatus();
+            return this.control.disabled;
+        }, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.visibleActions = computed(() => this.actions().filter((action) => this.resolveCondition(action.visible, true)), ...(ngDevMode ? [{ debugName: "visibleActions" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = computed(() => this.label() || this.tooltip() || 'Actions', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    }
+    onTriggerClick(event) {
+        event.stopPropagation();
+    }
+    isDisabled(action) {
+        return this.disabled() || this.resolveCondition(action.disabled, false);
+    }
+    execute(action, event) {
+        if (this.isDisabled(action)) {
+            event.stopPropagation();
+            return;
+        }
+        this.triggerAction(action.id, event, action);
+    }
+    resolveCondition(condition, defaultValue) {
+        if (typeof condition === 'function') {
+            return condition(this.context?.() ?? null, this.field, this.group);
+        }
+        return condition ?? defaultValue;
+    }
+    resolveOptions() {
+        const options = this.actionField.options;
+        if (options instanceof Observable) {
+            return options;
+        }
+        if (typeof options === 'function') {
+            return options(undefined, this.group.getRawValue());
+        }
+        return of(options ?? []);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormActionMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormActionMenuComponent, isStandalone: true, selector: "kles-form-action-menu", usesInheritance: true, ngImport: i0, template: `
+        <button
+            matIconButton
+            type="button"
+            [attr.id]="field.id"
+            [attr.aria-label]="ariaLabel()"
+            [disabled]="disabled()"
+            [matTooltip]="tooltip() || ''"
+            [matMenuTriggerFor]="actionMenu"
+            [ngClass]="ngClass()"
+            [ngStyle]="ngStyle()"
+            (click)="onTriggerClick($event)"
+        >
+            @if (iconSvg()) {
+                <mat-icon [svgIcon]="iconSvg()!" />
+            } @else {
+                <mat-icon>
+                    {{ icon() || 'more_vert' }}
+                </mat-icon>
+            }
+        </button>
+
+        <mat-menu #actionMenu="matMenu" [xPosition]="actionField.menuXPosition || 'before'" [yPosition]="actionField.menuYPosition || 'below'">
+            @for (action of visibleActions(); track action.id) {
+                @if (action.dividerBefore) {
+                    <mat-divider />
+                }
+
+                <button mat-menu-item type="button" [disabled]="isDisabled(action)" [class.kles-action-menu__warn]="action.color === 'warn'" (click)="execute(action, $event)">
+                    @if (action.iconSvg) {
+                        <mat-icon [svgIcon]="action.iconSvg" />
+                    } @else if (action.icon) {
+                        <mat-icon>
+                            {{ action.icon }}
+                        </mat-icon>
+                    }
+
+                    <span>
+                        {{ action.label }}
+                    </span>
+                </button>
+            }
+        </mat-menu>
+    `, isInline: true, styles: [".kles-action-menu__warn{color:var(--mat-sys-error)}.kles-action-menu__warn mat-icon{color:var(--mat-sys-error)}\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: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4$4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+KlesFormActionMenuComponent = __decorate([
+    FieldMapper({
+        type: 'actionMenu',
+    })
+], KlesFormActionMenuComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormActionMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-action-menu', standalone: true, imports: [CommonModule, MatButtonModule, MatDividerModule, MatIconModule, MatMenuModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        <button
+            matIconButton
+            type="button"
+            [attr.id]="field.id"
+            [attr.aria-label]="ariaLabel()"
+            [disabled]="disabled()"
+            [matTooltip]="tooltip() || ''"
+            [matMenuTriggerFor]="actionMenu"
+            [ngClass]="ngClass()"
+            [ngStyle]="ngStyle()"
+            (click)="onTriggerClick($event)"
+        >
+            @if (iconSvg()) {
+                <mat-icon [svgIcon]="iconSvg()!" />
+            } @else {
+                <mat-icon>
+                    {{ icon() || 'more_vert' }}
+                </mat-icon>
+            }
+        </button>
+
+        <mat-menu #actionMenu="matMenu" [xPosition]="actionField.menuXPosition || 'before'" [yPosition]="actionField.menuYPosition || 'below'">
+            @for (action of visibleActions(); track action.id) {
+                @if (action.dividerBefore) {
+                    <mat-divider />
+                }
+
+                <button mat-menu-item type="button" [disabled]="isDisabled(action)" [class.kles-action-menu__warn]="action.color === 'warn'" (click)="execute(action, $event)">
+                    @if (action.iconSvg) {
+                        <mat-icon [svgIcon]="action.iconSvg" />
+                    } @else if (action.icon) {
+                        <mat-icon>
+                            {{ action.icon }}
+                        </mat-icon>
+                    }
+
+                    <span>
+                        {{ action.label }}
+                    </span>
+                </button>
+            }
+        </mat-menu>
+    `, styles: [".kles-action-menu__warn{color:var(--mat-sys-error)}.kles-action-menu__warn mat-icon{color:var(--mat-sys-error)}\n"] }]
+        }] });
+
+class KlesFormTileComponent extends KlesFieldAbstract {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormTileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormTileComponent, isStandalone: true, selector: "app-kles-form-tile", usesInheritance: true, ngImport: i0, template: `
+        <div class="kles-tile" [ngClass]="ngClass()" [ngStyle]="ngStyle()" [matTooltip]="tooltip()">
+            @if (imageUrl()) {
+                <img class="kles-tile__image" [src]="imageUrl()" [alt]="imageAlt()" />
+            }
+
+            <div class="kles-tile__content">
+                @if (label()) {
+                    <div class="kles-tile__label">
+                        {{ label() }}
+                    </div>
+                }
+
+                @if (hint()) {
+                    <div class="kles-tile__hint">
+                        {{ hint() }}
+                    </div>
+                }
+            </div>
+        </div>
+    `, isInline: true, styles: [":host{display:block;width:100%}.kles-tile{display:flex;align-items:center;min-width:0;gap:12px;padding:8px}.kles-tile__image{width:36px;height:36px;flex:0 0 36px;object-fit:contain}.kles-tile__content{display:flex;flex-direction:column;min-width:0;gap:2px}.kles-tile__label{overflow:hidden;color:var(--mat-sys-on-surface);font-size:14px;font-weight:500;line-height:20px;text-overflow:ellipsis;white-space:nowrap}.kles-tile__hint{overflow:hidden;color:var(--mat-sys-on-surface-variant);font-size:12px;font-weight:400;line-height:16px;text-overflow:ellipsis;white-space:nowrap}\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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-kles-form-tile', standalone: true, imports: [CommonModule, MatTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        <div class="kles-tile" [ngClass]="ngClass()" [ngStyle]="ngStyle()" [matTooltip]="tooltip()">
+            @if (imageUrl()) {
+                <img class="kles-tile__image" [src]="imageUrl()" [alt]="imageAlt()" />
+            }
+
+            <div class="kles-tile__content">
+                @if (label()) {
+                    <div class="kles-tile__label">
+                        {{ label() }}
+                    </div>
+                }
+
+                @if (hint()) {
+                    <div class="kles-tile__hint">
+                        {{ hint() }}
+                    </div>
+                }
+            </div>
+        </div>
+    `, styles: [":host{display:block;width:100%}.kles-tile{display:flex;align-items:center;min-width:0;gap:12px;padding:8px}.kles-tile__image{width:36px;height:36px;flex:0 0 36px;object-fit:contain}.kles-tile__content{display:flex;flex-direction:column;min-width:0;gap:2px}.kles-tile__label{overflow:hidden;color:var(--mat-sys-on-surface);font-size:14px;font-weight:500;line-height:20px;text-overflow:ellipsis;white-space:nowrap}.kles-tile__hint{overflow:hidden;color:var(--mat-sys-on-surface-variant);font-size:12px;font-weight:400;line-height:16px;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }] });
+
+/**
+ * ValueAccessor monétaire.
+ *
+ * La valeur du FormControl reste un number | null.
+ * Seule la valeur affichée dans l'input est formatée.
+ */
+class KlesCurrencyValueAccessorDirective {
+    constructor() {
+        /**
+         * Public pour rester compatible avec le mécanisme
+         * nativeElement utilisé par la librairie.
+         */
+        this._elementRef = inject(ElementRef);
+        this.renderer = inject(Renderer2);
+        this.currency = 'EUR';
+        this.locale = 'fr-FR';
+        this.currencyDisplay = 'symbol';
+        this.useGrouping = true;
+        this.allowNegative = true;
+        this.currentValue = null;
+        this.focused = false;
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    ngOnChanges(changes) {
+        if (!this.focused) {
+            this.renderFormattedValue();
+        }
+    }
+    writeValue(value) {
+        this.currentValue = this.normalizeModelValue(value);
+        if (!this.focused) {
+            this.renderFormattedValue();
+        }
+    }
+    registerOnChange(callback) {
+        this.onChange = callback;
+    }
+    registerOnTouched(callback) {
+        this.onTouched = callback;
+    }
+    setDisabledState(disabled) {
+        this.renderer.setProperty(this._elementRef.nativeElement, 'disabled', disabled);
+    }
+    handleFocus() {
+        this.focused = true;
+        this.setInputValue(this.formatEditableValue(this.currentValue));
+    }
+    handleInput(event) {
+        const input = event.target;
+        const rawValue = input.value;
+        if (rawValue.trim() === '') {
+            this.currentValue = null;
+            this.onChange(null);
+            return;
+        }
+        const parsedValue = this.parseLocalizedNumber(rawValue);
+        /*
+         * Une saisie intermédiaire comme "-" ou ","
+         * n'écrase pas encore le FormControl.
+         */
+        if (parsedValue === null) {
+            return;
+        }
+        if (!this.allowNegative && parsedValue < 0) {
+            return;
+        }
+        this.currentValue = parsedValue;
+        this.onChange(parsedValue);
+    }
+    handleBlur() {
+        this.focused = false;
+        this.renderFormattedValue();
+        this.onTouched();
+    }
+    normalizeModelValue(value) {
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+        const numberValue = typeof value === 'number' ? value : Number(value);
+        return Number.isFinite(numberValue) ? numberValue : null;
+    }
+    renderFormattedValue() {
+        this.setInputValue(this.formatCurrency(this.currentValue));
+    }
+    setInputValue(value) {
+        this.renderer.setProperty(this._elementRef.nativeElement, 'value', value);
+    }
+    formatCurrency(value) {
+        if (value === null) {
+            return '';
+        }
+        const options = this.createCurrencyFormatOptions();
+        return new Intl.NumberFormat(this.locale, options).format(value);
+    }
+    /**
+     * Pendant l'édition, on retire le symbole et
+     * les séparateurs de milliers.
+     */
+    formatEditableValue(value) {
+        if (value === null) {
+            return '';
+        }
+        return new Intl.NumberFormat(this.locale, {
+            useGrouping: false,
+            maximumFractionDigits: this.maximumFractionDigits ?? 20,
+        }).format(value);
+    }
+    createCurrencyFormatOptions() {
+        const minimum = this.minimumFractionDigits;
+        let maximum = this.maximumFractionDigits;
+        if (minimum !== undefined && maximum !== undefined && maximum < minimum) {
+            maximum = minimum;
+        }
+        return {
+            style: 'currency',
+            currency: this.currency,
+            currencyDisplay: this.currencyDisplay,
+            useGrouping: this.useGrouping,
+            ...(minimum !== undefined
+                ? {
+                    minimumFractionDigits: minimum,
+                }
+                : {}),
+            ...(maximum !== undefined
+                ? {
+                    maximumFractionDigits: maximum,
+                }
+                : {}),
+        };
+    }
+    parseLocalizedNumber(rawValue) {
+        const parts = new Intl.NumberFormat(this.locale).formatToParts(-12345.6);
+        const groupSeparator = parts.find((part) => part.type === 'group')?.value;
+        const decimalSeparator = parts.find((part) => part.type === 'decimal')?.value ?? '.';
+        const minusSign = parts.find((part) => part.type === 'minusSign')?.value ?? '-';
+        let normalized = this.normalizeLocalizedDigits(rawValue);
+        if (groupSeparator) {
+            normalized = normalized.split(groupSeparator).join('');
+        }
+        normalized = normalized.split(decimalSeparator).join('.');
+        normalized = normalized.split(minusSign).join('-');
+        /*
+         * Retire les symboles monétaires,
+         * espaces et codes de devise.
+         */
+        normalized = normalized.replace(/[^0-9+\-.]/g, '');
+        if (normalized === '' || normalized === '-' || normalized === '+' || normalized === '.' || normalized === '-.' || normalized === '+.') {
+            return null;
+        }
+        const parsed = Number(normalized);
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+    /**
+     * Convertit également les chiffres localisés
+     * vers 0-9.
+     */
+    normalizeLocalizedDigits(value) {
+        const formatter = new Intl.NumberFormat(this.locale, {
+            useGrouping: false,
+        });
+        let normalized = value;
+        for (let digit = 0; digit <= 9; digit++) {
+            const localizedDigit = formatter.formatToParts(digit).find((part) => part.type === 'integer')?.value;
+            if (localizedDigit) {
+                normalized = normalized.split(localizedDigit).join(String(digit));
+            }
+        }
+        return normalized;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesCurrencyValueAccessorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.19", type: KlesCurrencyValueAccessorDirective, isStandalone: true, selector: "input[klesCurrency]", inputs: { currency: "currency", locale: "locale", currencyDisplay: "currencyDisplay", minimumFractionDigits: "minimumFractionDigits", maximumFractionDigits: "maximumFractionDigits", useGrouping: "useGrouping", allowNegative: "allowNegative" }, host: { listeners: { "focus": "handleFocus()", "input": "handleInput($event)", "blur": "handleBlur()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => KlesCurrencyValueAccessorDirective),
+                multi: true,
+            },
+        ], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesCurrencyValueAccessorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[klesCurrency]',
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => KlesCurrencyValueAccessorDirective),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], propDecorators: { currency: [{
+                type: Input
+            }], locale: [{
+                type: Input
+            }], currencyDisplay: [{
+                type: Input
+            }], minimumFractionDigits: [{
+                type: Input
+            }], maximumFractionDigits: [{
+                type: Input
+            }], useGrouping: [{
+                type: Input
+            }], allowNegative: [{
+                type: Input
+            }], handleFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], handleInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }], handleBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+let KlesFormCurrencyComponent = class KlesFormCurrencyComponent extends KlesFieldAbstract {
+    constructor() {
+        super(...arguments);
+        this.localeId = inject(LOCALE_ID);
+        this.defaultCurrencyCode = inject(DEFAULT_CURRENCY_CODE);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormCurrencyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormCurrencyComponent, isStandalone: true, selector: "kles-form-currency", usesInheritance: true, ngImport: i0, template: `
+        <mat-form-field [formGroup]="group" [color]="color()" [subscriptSizing]="field.subscriptSizing" [appearance]="appearance()" class="form-element field-bottom">
+            @if (label()) {
+                <mat-label>
+                    {{ label() }}
+                </mat-label>
+            }
+
+            @if (icon()) {
+                <mat-icon matPrefix>
+                    {{ icon() }}
+                </mat-icon>
+            }
+
+            <input
+                matInput
+                klesCurrency
+                type="text"
+                inputmode="decimal"
+                autocomplete="off"
+                [attr.id]="field.id"
+                [attr.aria-valuemin]="min()"
+                [attr.aria-valuemax]="max()"
+                [ngClass]="ngClass()"
+                [matTooltip]="tooltip()"
+                [formControlName]="field.name"
+                [placeholder]="placeholder()"
+                [currency]="field.currencyOptions?.code || defaultCurrencyCode"
+                [locale]="field.currencyOptions?.locale || localeId"
+                [currencyDisplay]="field.currencyOptions?.display || 'symbol'"
+                [minimumFractionDigits]="field.currencyOptions?.minimumFractionDigits"
+                [maximumFractionDigits]="field.currencyOptions?.maximumFractionDigits"
+                [useGrouping]="field.currencyOptions?.useGrouping !== false"
+                [allowNegative]="field.currencyOptions?.allowNegative !== false"
+                (focus)="onFocus()"
+                (blur)="onBlur()"
+            />
+
+            @if (hint()) {
+                <mat-hint>
+                    {{ hint() }}
+                </mat-hint>
+            }
+
+            @if (field.subComponents || field.clearable || isPending()) {
+                <div matSuffix class="suffix">
+                    @if (isPending()) {
+                        <mat-spinner mode="indeterminate" diameter="21" />
+                    }
+
+                    @if (field.subComponents || field.clearable) {
+                        <ng-content />
+                    }
+                </div>
+            }
+
+            <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations" />
+        </mat-form-field>
+    `, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "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.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "directive", type: KlesCurrencyValueAccessorDirective, selector: "input[klesCurrency]", inputs: ["currency", "locale", "currencyDisplay", "minimumFractionDigits", "maximumFractionDigits", "useGrouping", "allowNegative"] }] }); }
+};
+KlesFormCurrencyComponent = __decorate([
+    FieldMapper({
+        type: EnumType.currency,
+    })
+], KlesFormCurrencyComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormCurrencyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-currency', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatIconModule, MatTooltipModule, MatProgressSpinnerModule, MatError, MatErrorMessageDirective, KlesCurrencyValueAccessorDirective], template: `
+        <mat-form-field [formGroup]="group" [color]="color()" [subscriptSizing]="field.subscriptSizing" [appearance]="appearance()" class="form-element field-bottom">
+            @if (label()) {
+                <mat-label>
+                    {{ label() }}
+                </mat-label>
+            }
+
+            @if (icon()) {
+                <mat-icon matPrefix>
+                    {{ icon() }}
+                </mat-icon>
+            }
+
+            <input
+                matInput
+                klesCurrency
+                type="text"
+                inputmode="decimal"
+                autocomplete="off"
+                [attr.id]="field.id"
+                [attr.aria-valuemin]="min()"
+                [attr.aria-valuemax]="max()"
+                [ngClass]="ngClass()"
+                [matTooltip]="tooltip()"
+                [formControlName]="field.name"
+                [placeholder]="placeholder()"
+                [currency]="field.currencyOptions?.code || defaultCurrencyCode"
+                [locale]="field.currencyOptions?.locale || localeId"
+                [currencyDisplay]="field.currencyOptions?.display || 'symbol'"
+                [minimumFractionDigits]="field.currencyOptions?.minimumFractionDigits"
+                [maximumFractionDigits]="field.currencyOptions?.maximumFractionDigits"
+                [useGrouping]="field.currencyOptions?.useGrouping !== false"
+                [allowNegative]="field.currencyOptions?.allowNegative !== false"
+                (focus)="onFocus()"
+                (blur)="onBlur()"
+            />
+
+            @if (hint()) {
+                <mat-hint>
+                    {{ hint() }}
+                </mat-hint>
+            }
+
+            @if (field.subComponents || field.clearable || isPending()) {
+                <div matSuffix class="suffix">
+                    @if (isPending()) {
+                        <mat-spinner mode="indeterminate" diameter="21" />
+                    }
+
+                    @if (field.subComponents || field.clearable) {
+                        <ng-content />
+                    }
+                </div>
+            }
+
+            <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations" />
+        </mat-form-field>
+    `, styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n"] }]
+        }] });
+
+let KlesFormStatusComponent = class KlesFormStatusComponent extends KlesFieldAbstract {
+    constructor() {
+        super(...arguments);
+        this.control = this.group.controls[this.field.name];
+        this.controlValue = toSignal(this.control.valueChanges.pipe(startWith(this.control.value)), {
+            initialValue: this.control.value,
+        });
+        this.controlStatus = toSignal(this.control.statusChanges.pipe(startWith(this.control.status)), {
+            initialValue: this.control.status,
+        });
+        this.appearance = computed(() => this.field.statusOptions?.appearance ?? 'chip', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+        this.showDot = computed(() => this.field.statusOptions?.showDot ?? true, ...(ngDevMode ? [{ debugName: "showDot" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => {
+            this.controlStatus();
+            return this.control.disabled;
+        }, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.pending = computed(() => {
+            this.controlStatus();
+            return this.control.pending || this.field.pending === true;
+        }, ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+        this.resolvedStatus = computed(() => {
+            const value = this.controlValue();
+            const options = this.field.statusOptions;
+            if (options?.resolve) {
+                return options.resolve(value, this.context?.() ?? null, this.field, this.group);
+            }
+            const key = this.resolveStatusKey(value);
+            const configuredStatus = options?.values?.[key];
+            if (configuredStatus) {
+                return {
+                    tone: 'neutral',
+                    ...configuredStatus,
+                };
+            }
+            if (options?.fallback) {
+                return {
+                    tone: 'neutral',
+                    ...options.fallback,
+                };
+            }
+            if (value === null || value === undefined || value === '') {
+                return null;
+            }
+            return {
+                label: this.resolveDefaultLabel(value),
+                tone: 'neutral',
+            };
+        }, ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : /* istanbul ignore next */ []));
+    }
+    resolveStatusKey(value) {
+        if (this.field.property && value !== null && typeof value === 'object') {
+            return String(value[this.field.property]);
+        }
+        return String(value);
+    }
+    resolveDefaultLabel(value) {
+        if (this.field.property && value !== null && typeof value === 'object') {
+            return String(value[this.field.property] ?? '');
+        }
+        return String(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormStatusComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: KlesFormStatusComponent, isStandalone: true, selector: "kles-form-status", usesInheritance: true, ngImport: i0, template: `
+        <span [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+            @if (pending()) {
+                <mat-spinner mode="indeterminate" diameter="18" />
+            } @else if (resolvedStatus(); as status) {
+                <span
+                    class="kles-status"
+                    [class.kles-status--chip]="appearance() === 'chip'"
+                    [class.kles-status--badge]="appearance() === 'badge'"
+                    [class.kles-status--text]="appearance() === 'text'"
+                    [class.kles-status--neutral]="status.tone === 'neutral'"
+                    [class.kles-status--info]="status.tone === 'info'"
+                    [class.kles-status--success]="status.tone === 'success'"
+                    [class.kles-status--warning]="status.tone === 'warning'"
+                    [class.kles-status--error]="status.tone === 'error'"
+                    [class.kles-status--disabled]="disabled()"
+                    [ngClass]="status.ngClass"
+                    [matTooltip]="status.tooltip || tooltip() || ''"
+                    [attr.aria-label]="status.ariaLabel || status.label"
+                >
+                    @if (status.iconSvg) {
+                        <mat-icon class="kles-status__icon" [svgIcon]="status.iconSvg" />
+                    } @else if (status.icon) {
+                        <mat-icon class="kles-status__icon">
+                            {{ status.icon }}
+                        </mat-icon>
+                    } @else if (showDot()) {
+                        <span class="kles-status__dot" aria-hidden="true"></span>
+                    }
+
+                    <span class="kles-status__label">
+                        {{ status.label }}
+                    </span>
+                </span>
+            }
+        </span>
+    `, isInline: true, styles: [".kles-status{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;color:var(--kles-status-color, var(--mat-sys-on-surface-variant));background:var(--kles-status-container, var(--mat-sys-surface-container-high))}.kles-status--chip{min-height:28px;padding:3px 10px;border-radius:999px;font:var(--mat-sys-label-medium)}.kles-status--badge{min-height:22px;padding:2px 7px;border-radius:4px;font:var(--mat-sys-label-small)}.kles-status--text{padding:0;border-radius:0;background:transparent}.kles-status__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;line-height:20px;overflow:visible;vertical-align:middle}.kles-status__icon svg{width:100%;height:100%;overflow:visible}.kles-status__dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:currentColor}.kles-status__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kles-status--disabled{opacity:.56}.kles-status--neutral{--kles-status-color: var(--mat-sys-on-surface-variant);--kles-status-container: var(--mat-sys-surface-container-high)}.kles-status--info{--kles-status-color: var(--mat-sys-on-primary-container);--kles-status-container: var(--mat-sys-primary-container)}.kles-status--success{--kles-status-color: var(--kles-status-success-color, #1b5e20);--kles-status-container: var(--kles-status-success-container, #d7f5df)}.kles-status--warning{--kles-status-color: var(--kles-status-warning-color, #7a4f00);--kles-status-container: var(--kles-status-warning-container, #ffecb3)}.kles-status--error{--kles-status-color: var(--mat-sys-on-error-container);--kles-status-container: var(--mat-sys-error-container)}\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: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+KlesFormStatusComponent = __decorate([
+    FieldMapper({
+        type: EnumType.status,
+    })
+], KlesFormStatusComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesFormStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-status', standalone: true, imports: [CommonModule, MatIconModule, MatTooltipModule, MatProgressSpinnerModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        <span [ngClass]="ngClass()" [ngStyle]="ngStyle()">
+            @if (pending()) {
+                <mat-spinner mode="indeterminate" diameter="18" />
+            } @else if (resolvedStatus(); as status) {
+                <span
+                    class="kles-status"
+                    [class.kles-status--chip]="appearance() === 'chip'"
+                    [class.kles-status--badge]="appearance() === 'badge'"
+                    [class.kles-status--text]="appearance() === 'text'"
+                    [class.kles-status--neutral]="status.tone === 'neutral'"
+                    [class.kles-status--info]="status.tone === 'info'"
+                    [class.kles-status--success]="status.tone === 'success'"
+                    [class.kles-status--warning]="status.tone === 'warning'"
+                    [class.kles-status--error]="status.tone === 'error'"
+                    [class.kles-status--disabled]="disabled()"
+                    [ngClass]="status.ngClass"
+                    [matTooltip]="status.tooltip || tooltip() || ''"
+                    [attr.aria-label]="status.ariaLabel || status.label"
+                >
+                    @if (status.iconSvg) {
+                        <mat-icon class="kles-status__icon" [svgIcon]="status.iconSvg" />
+                    } @else if (status.icon) {
+                        <mat-icon class="kles-status__icon">
+                            {{ status.icon }}
+                        </mat-icon>
+                    } @else if (showDot()) {
+                        <span class="kles-status__dot" aria-hidden="true"></span>
+                    }
+
+                    <span class="kles-status__label">
+                        {{ status.label }}
+                    </span>
+                </span>
+            }
+        </span>
+    `, styles: [".kles-status{display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;color:var(--kles-status-color, var(--mat-sys-on-surface-variant));background:var(--kles-status-container, var(--mat-sys-surface-container-high))}.kles-status--chip{min-height:28px;padding:3px 10px;border-radius:999px;font:var(--mat-sys-label-medium)}.kles-status--badge{min-height:22px;padding:2px 7px;border-radius:4px;font:var(--mat-sys-label-small)}.kles-status--text{padding:0;border-radius:0;background:transparent}.kles-status__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px;line-height:20px;overflow:visible;vertical-align:middle}.kles-status__icon svg{width:100%;height:100%;overflow:visible}.kles-status__dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:currentColor}.kles-status__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kles-status--disabled{opacity:.56}.kles-status--neutral{--kles-status-color: var(--mat-sys-on-surface-variant);--kles-status-container: var(--mat-sys-surface-container-high)}.kles-status--info{--kles-status-color: var(--mat-sys-on-primary-container);--kles-status-container: var(--mat-sys-primary-container)}.kles-status--success{--kles-status-color: var(--kles-status-success-color, #1b5e20);--kles-status-container: var(--kles-status-success-container, #d7f5df)}.kles-status--warning{--kles-status-color: var(--kles-status-warning-color, #7a4f00);--kles-status-container: var(--kles-status-warning-container, #ffecb3)}.kles-status--error{--kles-status-color: var(--mat-sys-on-error-container);--kles-status-container: var(--mat-sys-error-container)}\n"] }]
+        }] });
+
 const components = [
     KlesDynamicFormComponent,
     KlesFormLabelComponent,
@@ -5713,6 +6439,10 @@ const components = [
     KlesFormIconButtonComponent,
     KlesFormSelectionListSearchComponent,
     KlesFormCopyComponent,
+    KlesFormTileComponent,
+    KlesFormActionMenuComponent,
+    KlesFormCurrencyComponent,
+    KlesFormStatusComponent
 ];
 const colorPicker = [ColorPickerComponent, ColorPickerDirective];
 const directives = [KlesDynamicFieldDirective, KlesComponentDirective, MatErrorMessageDirective, MatErrorFormDirective];
@@ -5764,7 +6494,11 @@ class KlesMaterialDynamicformsModule {
             KlesIconButtonComponent,
             KlesFormIconButtonComponent,
             KlesFormSelectionListSearchComponent,
-            KlesFormCopyComponent, KlesDynamicFieldDirective, KlesComponentDirective, MatErrorMessageDirective, MatErrorFormDirective, KlesTransformPipe, ArrayFormatPipe, ColorPickerComponent, ColorPickerDirective], exports: [KlesDynamicFormComponent,
+            KlesFormCopyComponent,
+            KlesFormTileComponent,
+            KlesFormActionMenuComponent,
+            KlesFormCurrencyComponent,
+            KlesFormStatusComponent, KlesDynamicFieldDirective, KlesComponentDirective, MatErrorMessageDirective, MatErrorFormDirective, KlesTransformPipe, ArrayFormatPipe, ColorPickerComponent, ColorPickerDirective], exports: [KlesDynamicFormComponent,
             KlesFormLabelComponent,
             KlesFormInputComponent,
             KlesFormInputClearableComponent,
@@ -5808,7 +6542,11 @@ class KlesMaterialDynamicformsModule {
             KlesIconButtonComponent,
             KlesFormIconButtonComponent,
             KlesFormSelectionListSearchComponent,
-            KlesFormCopyComponent, KlesTransformPipe, ArrayFormatPipe, KlesDynamicFieldDirective, KlesComponentDirective, MatErrorMessageDirective, MatErrorFormDirective] }); }
+            KlesFormCopyComponent,
+            KlesFormTileComponent,
+            KlesFormActionMenuComponent,
+            KlesFormCurrencyComponent,
+            KlesFormStatusComponent, KlesTransformPipe, ArrayFormatPipe, KlesDynamicFieldDirective, KlesComponentDirective, MatErrorMessageDirective, MatErrorFormDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesMaterialDynamicformsModule, providers: [{ provide: ErrorStateMatcher, useClass: KlesFormErrorStateMatcher }, pipes], imports: [CommonModule, ReactiveFormsModule, FormsModule, MaterialModule, NgxMatSelectSearchModule, KlesDynamicFormComponent,
             KlesFormLabelComponent,
             KlesFormInputComponent,
@@ -5852,7 +6590,11 @@ class KlesMaterialDynamicformsModule {
             KlesIconButtonComponent,
             KlesFormIconButtonComponent,
             KlesFormSelectionListSearchComponent,
-            KlesFormCopyComponent, MatErrorMessageDirective, MatErrorFormDirective, ColorPickerComponent] }); }
+            KlesFormCopyComponent,
+            KlesFormTileComponent,
+            KlesFormActionMenuComponent,
+            KlesFormCurrencyComponent,
+            KlesFormStatusComponent, MatErrorMessageDirective, MatErrorFormDirective, ColorPickerComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: KlesMaterialDynamicformsModule, decorators: [{
             type: NgModule,
@@ -5879,7 +6621,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 +6631,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 +6671,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_CONTEXT, FIELD_NAME, FieldMapper, GROUP, GROUP_UI, GroupUiState, KlesAbstractFormControl, KlesAbstractFormUiControl, KlesButtonBase, KlesButtonCheckerComponent, KlesButtonComponent, KlesButtonFileComponent, KlesComponentDirective, KlesCurrencyValueAccessorDirective, KlesDynamicFieldDirective, KlesDynamicFormComponent, KlesDynamicFormIntl, KlesFabComponent, KlesFieldAbstract, KlesFileControlComponent, KlesFormActionMenuComponent, KlesFormArray, KlesFormArrayComponent, KlesFormBadgeComponent, KlesFormButtonCheckerComponent, KlesFormButtonComponent, KlesFormButtonFileComponent, KlesFormButtonToogleGroupComponent, KlesFormCheckboxComponent, KlesFormCheckboxIndeterminateComponent, KlesFormChipComponent, KlesFormClearComponent, KlesFormColorComponent, KlesFormControl, KlesFormCopyComponent, KlesFormCurrencyComponent, 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, KlesFormStatusComponent, KlesFormTextComponent, KlesFormTextareaComponent, KlesFormTileComponent, 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