@3kles/kles-material-dynamicforms 21.6.0 → 21.7.0

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

@@ -1,19 +1,19 @@
 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, ChangeDetectionStrategy, forwardRef, ElementRef, Renderer2, HostListener, LOCALE_ID, DEFAULT_CURRENCY_CODE, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { signal, InjectionToken, inject, Component, Injector, Input, Directive, Injectable, EventEmitter, Output, NgModule, computed, ViewContainerRef, HostBinding, ChangeDetectionStrategy, forwardRef, ViewChild, Pipe, ElementRef, Renderer2, HostListener, LOCALE_ID, DEFAULT_CURRENCY_CODE, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, input, viewChild, DestroyRef, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, AsyncPipe } 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, defer, distinctUntilChanged as distinctUntilChanged$1, filter as filter$1, switchMap as switchMap$1 } 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 { Validators, FormControl, ReactiveFormsModule, FormsModule, FormControlDirective, FormControlName, FormArray, FormGroup, UntypedFormBuilder, NG_VALUE_ACCESSOR, UntypedFormGroup } from '@angular/forms';
+import { concat, of, Subject, combineLatest, startWith, map as map$1, takeUntil, Observable, defer, distinctUntilChanged as distinctUntilChanged$1, filter as filter$1, switchMap as switchMap$1, timer, shareReplay as shareReplay$1, isObservable } from 'rxjs';
+import { tap, take, catchError, map, takeUntil as takeUntil$1, distinctUntilChanged, filter, switchMap, startWith as startWith$1, shareReplay, debounceTime, debounce } from 'rxjs/operators';
+import * as i3 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 { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, ErrorStateMatcher, MatNativeDateModule, MatOptionModule, MatOption as MatOption$1 } from '@angular/material/core';
+import * as i2$1 from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
-import * as i4$4 from '@angular/material/button';
+import * as i4$3 from '@angular/material/button';
 import { MatIconButton, MatButtonModule, MatButton } from '@angular/material/button';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSidenavModule } from '@angular/material/sidenav';
@@ -26,12 +26,12 @@ import * as i3$1 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 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$1 from '@angular/material/select';
-import { MatSelectModule, MatSelectTrigger, MatSelect } from '@angular/material/select';
+import * as i6 from '@angular/material/select';
+import { MatSelectModule, MatSelect, MatSelectTrigger } from '@angular/material/select';
 import { MatRadioModule, MatRadioButton, MatRadioGroup } from '@angular/material/radio';
-import * as i2$3 from '@angular/material/chips';
+import * as i2$2 from '@angular/material/chips';
 import { MatChipsModule, MatChipOption, MatChipListbox } from '@angular/material/chips';
-import * as i4$2 from '@angular/material/tooltip';
+import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { MatTableModule } from '@angular/material/table';
 import { MatPaginatorModule } from '@angular/material/paginator';
@@ -46,14 +46,14 @@ import * as i1$1 from '@angular/material/checkbox';
 import { MatCheckboxModule, MatCheckbox } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
 import * as i5 from '@angular/material/autocomplete';
-import { MatAutocompleteModule, MatOption as MatOption$1 } from '@angular/material/autocomplete';
+import { MatAutocompleteModule, MatOption } from '@angular/material/autocomplete';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatSortModule } from '@angular/material/sort';
 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 from '@angular/cdk/scrolling';
+import * as i4$2 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkScrollable, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i3$5 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -64,10 +64,9 @@ import { cloneDeep } from 'lodash';
 import { parseColor, toCssRgba, readableTextColor, MaterialColorPickerTriggerComponent } from '@3kles/kles-material-color-picker';
 import * as i3$2 from '@angular/cdk/text-field';
 import { TextFieldModule } from '@angular/cdk/text-field';
-import * as i4$3 from 'ngx-mat-select-search';
 import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
 import { getMultipleValuesInSingleSelectionError } from '@angular/cdk/collections';
-import * as i4$5 from '@3kles/kles-material-datepicker';
+import * as i4$4 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';
@@ -1385,6 +1384,8 @@ class KlesDynamicFormIntl {
     constructor() {
         this.loading = 'Loading';
         this.selectAll = 'Select all';
+        this.clearSearch = 'clear';
+        this.search = 'search';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesDynamicFormIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesDynamicFormIntl, providedIn: 'root' }); }
@@ -1574,7 +1575,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: 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" }] }); }
+    `, 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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.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: i6.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: 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$1.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 })
@@ -1670,376 +1671,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
     `, standalone: true, imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatAutocompleteModule, MatTooltipModule, MatProgressSpinnerModule, MatOptionModule, MatError, MatErrorMessageDirective, KlesComponentDirective, MatIconModule], 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"] }]
         }], ctorParameters: () => [] });
 
-class KlesTransformPipe {
-    transform(value, pipes) {
-        if (pipes && pipes.length > 0) {
-            return pipes.reduce((acc, p) => {
-                acc = p.pipe.transform(acc, ...(p.options || []));
-                return acc;
-                // if (p.options) {
-                //     p.options.forEach(opt => {
-                //         acc = p.pipe.transform(acc, opt);
-                //     });
-                // } else {
-                //     acc = p.pipe.transform(acc);
-                // }
-                // return acc;
-            }, value);
-        }
-        return value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesTransformPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.20", ngImport: i0, type: KlesTransformPipe, isStandalone: true, name: "klesTransform" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesTransformPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'klesTransform',
-                    standalone: true
-                }]
-        }] });
-
-let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbstract {
-    constructor() {
-        super(...arguments);
-        this.options$ = new BehaviorSubject([]);
-        this.isLoading = false;
-        this.openChange$ = new Subject();
-        this.intl = inject(KlesDynamicFormIntl);
-        this.ref = inject(ChangeDetectorRef);
-        this.compareFn = (o1, o2) => {
-            if (this.field.property && o1 && o2) {
-                return o1[this.field.property] === o2[this.field.property];
-            }
-            return o1 === o2;
-        };
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        if (this.field.lazy) {
-            this.isLoading = true;
-            if (this.group.controls[this.field.name].value !== undefined && this.group.controls[this.field.name].value !== null) {
-                this.options$ = new BehaviorSubject(Array.isArray(this.group.controls[this.field.name].value) ? this.group.controls[this.field.name].value : [this.group.controls[this.field.name].value]);
-                this.isLoading = false;
-            }
-            else {
-                this.options$ = new BehaviorSubject([]);
-            }
-            this.openChange$
-                .pipe(takeUntil$1(this._onDestroy), switchMap((isOpen) => {
-                if (isOpen) {
-                    if (this.field.options instanceof Observable) {
-                        this.isLoading = true;
-                        return this.field.options.pipe(take(1));
-                    }
-                    else if (this.field.options instanceof Function) {
-                        this.isLoading = true;
-                        return this.field.options(undefined, this.group.getRawValue());
-                    }
-                    else {
-                        return of(this.field.options);
-                    }
-                }
-                else {
-                    return of(this.group.controls[this.field.name].value !== undefined && this.group.controls[this.field.name].value !== null
-                        ? Array.isArray(this.group.controls[this.field.name].value)
-                            ? this.group.controls[this.field.name].value
-                            : [this.group.controls[this.field.name].value]
-                        : []);
-                }
-            }))
-                .subscribe((options) => {
-                this.options$.next(options);
-                this.isLoading = false;
-                this.ref.markForCheck();
-            });
-        }
-        else {
-            if (this.field.options instanceof Observable) {
-                this.options$ = this.field.options;
-            }
-            else if (this.field.options instanceof Function) {
-                this.options$ = this.field.options(undefined, this.group.getRawValue());
-            }
-            else {
-                this.options$ = of(this.field.options ?? []);
-            }
-        }
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-    openChange($event) {
-        if (this.field.lazy) {
-            this.openChange$.next($event);
-            // if ($event) {
-            //     if (!(this.field.options instanceof Observable)) {
-            //         (this.options$ as BehaviorSubject<any[]>).next(this.field.options);
-            //     } else {
-            //         this.isLoading = true;
-            //         this.field.options.pipe(take(1)).subscribe(options => {
-            //             (this.options$ as BehaviorSubject<any[]>).next(options);
-            //             this.isLoading = false;
-            //             this.ref.markForCheck();
-            //         });
-            //     }
-            // } else {
-            //     (this.options$ as BehaviorSubject<any[]>)
-            //         .next(this.group.controls[this.field.name].value !== undefined ? [this.group.controls[this.field.name].value] : []);
-            //     this.ref.markForCheck();
-            //     // this.isLoading = true;
-            // }
-        }
-        if (this.field.virtualScroll) {
-            if ($event) {
-                this.cdkVirtualScrollViewport.scrollToIndex(0);
-                this.cdkVirtualScrollViewport.checkViewportSize();
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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 (label()) {
-                <mat-label>{{ label() }}</mat-label>
-            }
-            <mat-select
-                [matTooltip]="tooltip()"
-                [attr.id]="field.id"
-                (openedChange)="openChange($event)"
-                [compareWith]="compareFn"
-                [panelWidth]="field.panelWidth || 'auto'"
-                [ngClass]="ngClass()"
-                [placeholder]="placeholder()"
-                [formControlName]="field.name"
-                [multiple]="field.multiple"
-                (focus)="onFocus()"
-                (blur)="onBlur()"
-            >
-                @if (field.triggerComponent) {
-                    <mat-select-trigger>
-                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-                    </mat-select-trigger>
-                }
-                @if (!field.virtualScroll) {
-                    @if (!field.autocompleteComponent) {
-                        @if (!isLoading) {
-                            @for (item of options$ | async; track item) {
-                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
-                            }
-                        } @else {
-                            <mat-option class="hide-checkbox" disabled
-                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                            ></mat-option>
-                        }
-                    } @else {
-                        @if (!isLoading) {
-                            @for (item of options$ | async; track item) {
-                                <mat-option [value]="item" [disabled]="item?.disabled">
-                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                </mat-option>
-                            }
-                        } @else {
-                            <mat-option class="hide-checkbox" disabled
-                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                            ></mat-option>
-                        }
-                    }
-                } @else {
-                    <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="5 * 48">
-                        @if (!field.autocompleteComponent) {
-                            @if (!isLoading) {
-                                <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
-                                    {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                </mat-option>
-                            } @else {
-                                <mat-option class="hide-checkbox" disabled
-                                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                                ></mat-option>
-                            }
-                            @if (field.multiple) {
-                                @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
-                                    <mat-option [value]="item" style="display:none">
-                                        {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                    </mat-option>
-                                }
-                            }
-                            @if (!field.multiple && group.controls[field.name].value) {
-                                @for (item of [group?.controls[field.name]?.value]; track item) {
-                                    <mat-option [value]="item" style="display:none">
-                                        {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                    </mat-option>
-                                }
-                            }
-                        } @else {
-                            @if (!isLoading) {
-                                <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
-                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                </mat-option>
-                            } @else {
-                                <mat-option class="hide-checkbox" disabled
-                                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                                ></mat-option>
-                            }
-                            @if (field.multiple) {
-                                @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
-                                    <mat-option [value]="item" style="display:none">
-                                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                    </mat-option>
-                                }
-                            }
-                            @if (!field.multiple && group.controls[field.name].value) {
-                                @for (item of [group?.controls[field.name]?.value]; track item) {
-                                    <mat-option [value]="item" style="display:none">
-                                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                    </mat-option>
-                                }
-                            }
-                        }
-                    </cdk-virtual-scroll-viewport>
-                }
-            </mat-select>
-
-            @if (hint()) {
-                <mat-hint>{{ hint() }}</mat-hint>
-            }
-            @if (field.subComponents || field.clearable) {
-                <div matSuffix>
-                    <ng-content></ng-content>
-                </div>
-            }
-
-            <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.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 })
-], KlesFormSelectComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormSelectComponent, decorators: [{
-            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 (label()) {
-                <mat-label>{{ label() }}</mat-label>
-            }
-            <mat-select
-                [matTooltip]="tooltip()"
-                [attr.id]="field.id"
-                (openedChange)="openChange($event)"
-                [compareWith]="compareFn"
-                [panelWidth]="field.panelWidth || 'auto'"
-                [ngClass]="ngClass()"
-                [placeholder]="placeholder()"
-                [formControlName]="field.name"
-                [multiple]="field.multiple"
-                (focus)="onFocus()"
-                (blur)="onBlur()"
-            >
-                @if (field.triggerComponent) {
-                    <mat-select-trigger>
-                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-                    </mat-select-trigger>
-                }
-                @if (!field.virtualScroll) {
-                    @if (!field.autocompleteComponent) {
-                        @if (!isLoading) {
-                            @for (item of options$ | async; track item) {
-                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
-                            }
-                        } @else {
-                            <mat-option class="hide-checkbox" disabled
-                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                            ></mat-option>
-                        }
-                    } @else {
-                        @if (!isLoading) {
-                            @for (item of options$ | async; track item) {
-                                <mat-option [value]="item" [disabled]="item?.disabled">
-                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                </mat-option>
-                            }
-                        } @else {
-                            <mat-option class="hide-checkbox" disabled
-                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                            ></mat-option>
-                        }
-                    }
-                } @else {
-                    <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="5 * 48">
-                        @if (!field.autocompleteComponent) {
-                            @if (!isLoading) {
-                                <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
-                                    {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                </mat-option>
-                            } @else {
-                                <mat-option class="hide-checkbox" disabled
-                                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                                ></mat-option>
-                            }
-                            @if (field.multiple) {
-                                @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
-                                    <mat-option [value]="item" style="display:none">
-                                        {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                    </mat-option>
-                                }
-                            }
-                            @if (!field.multiple && group.controls[field.name].value) {
-                                @for (item of [group?.controls[field.name]?.value]; track item) {
-                                    <mat-option [value]="item" style="display:none">
-                                        {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                    </mat-option>
-                                }
-                            }
-                        } @else {
-                            @if (!isLoading) {
-                                <mat-option *cdkVirtualFor="let item of options$ | async" [value]="item" [disabled]="item?.disabled">
-                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                </mat-option>
-                            } @else {
-                                <mat-option class="hide-checkbox" disabled
-                                    ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                                ></mat-option>
-                            }
-                            @if (field.multiple) {
-                                @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
-                                    <mat-option [value]="item" style="display:none">
-                                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                    </mat-option>
-                                }
-                            }
-                            @if (!field.multiple && group.controls[field.name].value) {
-                                @for (item of [group?.controls[field.name]?.value]; track item) {
-                                    <mat-option [value]="item" style="display:none">
-                                        <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                    </mat-option>
-                                }
-                            }
-                        }
-                    </cdk-virtual-scroll-viewport>
-                }
-            </mat-select>
-
-            @if (hint()) {
-                <mat-hint>{{ hint() }}</mat-hint>
-            }
-            @if (field.subComponents || field.clearable) {
-                <div matSuffix>
-                    <ng-content></ng-content>
-                </div>
-            }
-
-            <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
-        </mat-form-field>
-    `, standalone: true, imports: [CommonModule, KlesTransformPipe, MatErrorMessageDirective, MatFormFieldModule, MatHint, KlesComponentDirective, MatOption, MatProgressSpinner, ScrollingModule, MatSelectModule, ReactiveFormsModule, MatTooltip], 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"] }]
-        }], propDecorators: { cdkVirtualScrollViewport: [{
-                type: ViewChild,
-                args: [CdkVirtualScrollViewport]
-            }], options: [{
-                type: ViewChildren,
-                args: [MatOption]
-            }] } });
-
 class KlesFormDateComponent extends KlesFieldAbstract {
     ngOnInit() {
         super.ngOnInit();
@@ -2065,7 +1696,7 @@ class KlesFormDateComponent extends KlesFieldAbstract {
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "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"] }] }); }
+    `, 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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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$1.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.20", ngImport: i0, type: KlesFormDateComponent, decorators: [{
             type: Component,
@@ -2410,34 +2041,29 @@ class KlesFormColorComponent extends KlesFieldAbstract {
                 [style.color]="foregroundColor()"
             />
 
-            <kles-material-color-picker-trigger
-                matSuffix
-                [color]="currentColor()"
-                [outputFormat]="colorOption().format ?? 'hex8'"
-                [commitMode]="colorOption().commitMode ?? 'live'"
-                [alpha]="colorOption().alpha ?? true"
-                [eyeDropper]="colorOption().eyeDropper ?? true"
-                [saveOnOutside]="colorOption().saveOnOutside ?? true"
-                [fallbackColor]="colorOption().fallbackColor ?? '#000000ff'"
-                [presets]="colorOption().presets ?? []"
-                
-                [disabled]="pickerDisabled()"
-                (colorChange)="setColor($event)"
-            />
-
-<!-- TODO [position]="colorOption().position ?? 'auto'"
-                [positionOffset]="colorOption().positionOffset ?? 8" -->
-
-
-            @if (field.subComponents || field.clearable) {
-                <div matSuffix>
+            <div matSuffix class="suffix">
+                <kles-material-color-picker-trigger
+                    [color]="currentColor()"
+                    [outputFormat]="colorOption().format ?? 'hex8'"
+                    [commitMode]="colorOption().commitMode ?? 'live'"
+                    [alpha]="colorOption().alpha ?? true"
+                    [eyeDropper]="colorOption().eyeDropper ?? true"
+                    [saveOnOutside]="colorOption().saveOnOutside ?? true"
+                    [fallbackColor]="colorOption().fallbackColor ?? '#000000ff'"
+                    [presets]="colorOption().presets ?? []"
+                    [position]="colorOption().position ?? 'auto'"
+                    [positionOffset]="colorOption().positionOffset ?? 8"
+                    [disabled]="pickerDisabled()"
+                    (colorChange)="setColor($event)"
+                />
+                @if (field.subComponents || field.clearable) {
                     <ng-content />
-                </div>
-            }
+                }
+            </div>
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations" />
         </mat-form-field>
-    `, isInline: true, styles: [":host{display:block;width:100%}mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "component", type: MaterialColorPickerTriggerComponent, selector: "kles-material-color-picker-trigger", inputs: ["color", "outputFormat", "commitMode", "alpha", "eyeDropper", "disabled", "saveOnOutside", "fallbackColor", "presets", "position", "positionOffset"], outputs: ["colorChange", "pickerOpened", "pickerClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, styles: [".suffix{display:flex;align-items:center}\n", ":host{display:block;width:100%}mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "component", type: MaterialColorPickerTriggerComponent, selector: "kles-material-color-picker-trigger", inputs: ["color", "outputFormat", "commitMode", "alpha", "eyeDropper", "disabled", "saveOnOutside", "fallbackColor", "presets", "position", "positionOffset"], outputs: ["colorChange", "pickerOpened", "pickerClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormColorComponent, decorators: [{
             type: Component,
@@ -2455,34 +2081,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 [style.color]="foregroundColor()"
             />
 
-            <kles-material-color-picker-trigger
-                matSuffix
-                [color]="currentColor()"
-                [outputFormat]="colorOption().format ?? 'hex8'"
-                [commitMode]="colorOption().commitMode ?? 'live'"
-                [alpha]="colorOption().alpha ?? true"
-                [eyeDropper]="colorOption().eyeDropper ?? true"
-                [saveOnOutside]="colorOption().saveOnOutside ?? true"
-                [fallbackColor]="colorOption().fallbackColor ?? '#000000ff'"
-                [presets]="colorOption().presets ?? []"
-                
-                [disabled]="pickerDisabled()"
-                (colorChange)="setColor($event)"
-            />
-
-<!-- TODO [position]="colorOption().position ?? 'auto'"
-                [positionOffset]="colorOption().positionOffset ?? 8" -->
-
-
-            @if (field.subComponents || field.clearable) {
-                <div matSuffix>
+            <div matSuffix class="suffix">
+                <kles-material-color-picker-trigger
+                    [color]="currentColor()"
+                    [outputFormat]="colorOption().format ?? 'hex8'"
+                    [commitMode]="colorOption().commitMode ?? 'live'"
+                    [alpha]="colorOption().alpha ?? true"
+                    [eyeDropper]="colorOption().eyeDropper ?? true"
+                    [saveOnOutside]="colorOption().saveOnOutside ?? true"
+                    [fallbackColor]="colorOption().fallbackColor ?? '#000000ff'"
+                    [presets]="colorOption().presets ?? []"
+                    [position]="colorOption().position ?? 'auto'"
+                    [positionOffset]="colorOption().positionOffset ?? 8"
+                    [disabled]="pickerDisabled()"
+                    (colorChange)="setColor($event)"
+                />
+                @if (field.subComponents || field.clearable) {
                     <ng-content />
-                </div>
-            }
+                }
+            </div>
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations" />
         </mat-form-field>
-    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%}mat-form-field{width:100%}\n"] }]
+    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".suffix{display:flex;align-items:center}\n", ":host{display:block;width:100%}mat-form-field{width:100%}\n"] }]
         }] });
 
 class KlesButtonBase {
@@ -3039,15 +2660,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
     `, standalone: true, imports: [CommonModule, MatErrorMessageDirective, ScrollingModule, ReactiveFormsModule, MatTooltip, MatLabel, MatFormField, TextFieldModule, MatInput], styles: ["mat-form-field{width:100%}\n"] }]
         }] });
 
-let KlesFormTextComponent = class KlesFormTextComponent extends KlesFieldAbstract {
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
+class KlesTransformPipe {
+    transform(value, pipes) {
+        if (pipes && pipes.length > 0) {
+            return pipes.reduce((acc, p) => {
+                acc = p.pipe.transform(acc, ...(p.options || []));
+                return acc;
+                // if (p.options) {
+                //     p.options.forEach(opt => {
+                //         acc = p.pipe.transform(acc, opt);
+                //     });
+                // } else {
+                //     acc = p.pipe.transform(acc);
+                // }
+                // return acc;
+            }, value);
+        }
+        return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: KlesFormTextComponent, isStandalone: true, selector: "kles-form-text", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesTransformPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.20", ngImport: i0, type: KlesTransformPipe, isStandalone: true, name: "klesTransform" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesTransformPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'klesTransform',
+                    standalone: true
+                }]
+        }] });
+
+let KlesFormTextComponent = class KlesFormTextComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: KlesFormTextComponent, isStandalone: true, selector: "kles-form-text", usesInheritance: true, ngImport: i0, template: `
         <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>
@@ -3331,7 +2981,7 @@ 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$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" }] }); }
+    `, 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: i6.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.20", ngImport: i0, type: KlesFormInputClearableComponent, decorators: [{
             type: Component,
@@ -3408,7 +3058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
 
             <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, standalone: true, imports: [CommonModule, ReactiveFormsModule, MatAutocompleteModule, MatErrorMessageDirective, MatProgressSpinner, MatIcon, MatTooltip, KlesComponentDirective, MatOption$1, MatInput, MatLabel$1, MatFormField$1], styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"] }]
+    `, standalone: true, imports: [CommonModule, ReactiveFormsModule, MatAutocompleteModule, MatErrorMessageDirective, MatProgressSpinner, MatIcon, MatTooltip, KlesComponentDirective, MatOption, MatInput, MatLabel$1, MatFormField$1], styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", "mat-form-field{width:100%}\n"] }]
         }] });
 
 class KlesFormIconComponent extends KlesFieldAbstract {
@@ -3434,772 +3084,290 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
     `, standalone: true, imports: [CommonModule, MatIcon, MatTooltip, ReactiveFormsModule] }]
         }] });
 
-class KlesFormSelectSearchComponent extends KlesFieldAbstract {
-    constructor() {
-        super(...arguments);
-        this.searchControl = new UntypedFormControl();
-        this.selectAllControl = new UntypedFormControl(false);
-        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
-        this.options$ = new BehaviorSubject([]);
-        this.optionsFiltered$ = new ReplaySubject(1);
-        this.openChange$ = new BehaviorSubject(false);
-        this.openClosed$ = new Subject();
-        this.intl = inject(KlesDynamicFormIntl);
-        this.ref = inject(ChangeDetectorRef);
-        this.compareFn = (o1, o2) => {
-            if (this.field.property && o1 && o2) {
-                return o1[this.field.property] === o2[this.field.property];
-            }
-            return o1 === o2;
-        };
+let KlesFormLineBreakComponent = class KlesFormLineBreakComponent extends KlesFieldAbstract {
+    ngOnInit() { super.ngOnInit(); }
+    ngOnDestroy() {
+        super.ngOnDestroy();
     }
-    ngOnInit() {
-        super.ngOnInit();
-        if (this.field.lazy) {
-            this.isLoading.set(true);
-            if (this.group.controls[this.field.name].value !== undefined && this.group.controls[this.field.name].value !== null) {
-                this.options$ = new BehaviorSubject(Array.isArray(this.group.controls[this.field.name].value) ? this.group.controls[this.field.name].value : [this.group.controls[this.field.name].value]);
-                this.isLoading.set(false);
-            }
-            else {
-                this.options$ = new BehaviorSubject([]);
-            }
-            this.openChangeEvent();
-        }
-        else {
-            if (this.field.options instanceof Observable) {
-                this.options$ = this.field.options;
-            }
-            else if (this.field.options instanceof Function) {
-                this.options$ = this.field.options(undefined, this.group.getRawValue());
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormLineBreakComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.20", type: KlesFormLineBreakComponent, isStandalone: true, selector: "kles-form-line-break", usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{flex-basis:100%;display:flex;height:0}\n"] }); }
+};
+KlesFormLineBreakComponent = __decorate([
+    FieldMapper({
+        type: EnumType.lineBreak,
+        factory: () => null
+    })
+], KlesFormLineBreakComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormLineBreakComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-line-break', template: ``, standalone: true, styles: [":host{flex-basis:100%;display:flex;height:0}\n"] }]
+        }] });
+
+class ArrayFormatPipe {
+    transform(values, property) {
+        if (values && Array.isArray(values)) {
+            if (property) {
+                return values.map(value => value[property]).filter(Boolean).join(', ');
             }
             else {
-                this.options$ = of(this.field.options ?? []);
+                return values.join(', ');
             }
         }
-        this.options$.pipe(takeUntil$1(this._onDestroy)).subscribe((options) => {
-            this.optionsFiltered$.next(options);
-        });
-        this.searchControl.valueChanges
-            .pipe(takeUntil$1(this._onDestroy), debounceTime(this.field.debounceTime || 0), startWith$1(this.searchControl.value), switchMap((value) => {
-            return concat(of({ loading: true, options: [] }), this.onSearchChange(value).pipe(take(1), map((options) => ({ loading: false, options }))));
-        }))
-            .subscribe(({ loading, options }) => {
-            this.isLoading.set(loading);
-            this.optionsFiltered$.next(options);
-            this.updateSelectAllControl(this.group.controls[this.field.name].value);
-            this.ref.markForCheck();
-        });
-        if (this.field.multiple) {
-            // this.updateSelectAllControl(this.group.controls[this.field.name].value);
-            this.group.controls[this.field.name].registerOnChange((values, emitViewToModelChange) => {
-                if (emitViewToModelChange) {
-                    this.updateSelectAllControl(values);
-                }
-            });
-        }
+        return '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ArrayFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.20", ngImport: i0, type: ArrayFormatPipe, isStandalone: true, name: "arrayFormat" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ArrayFormatPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'arrayFormat',
+                    standalone: true,
+                }]
+        }] });
+
+class KlesFormLinkComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
     }
     ngOnDestroy() {
-        // this._onDestroy.next();
-        this.openClosed$.next();
-        this.openClosed$.complete();
         super.ngOnDestroy();
     }
-    toggleAllSelection(state) {
-        if (state.checked) {
-            this.optionsFiltered$
-                .pipe(take(1), map((options) => options.filter((option) => !option?.disabled)))
-                .subscribe((options) => {
-                if (options.length > 0) {
-                    this.group.controls[this.field.name].patchValue(options);
-                }
-            });
-        }
-        else {
-            this.group.controls[this.field.name].patchValue([]);
-        }
-        this.ref.markForCheck();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.20", type: KlesFormLinkComponent, isStandalone: true, selector: "kles-form-link", usesInheritance: true, ngImport: i0, template: `
+        <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 }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormLinkComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kles-form-link',
+                    template: `
+        <a [href]="group.controls[field.name].value" [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()">
+            {{ label() }}
+        </a>
+    `,
+                    standalone: true,
+                    imports: [CommonModule, MatTooltip, ReactiveFormsModule],
+                }]
+        }] });
+
+class KlesFormSlideToggleComponent extends KlesFieldAbstract {
+    ngOnInit() {
+        super.ngOnInit();
     }
-    openChangeEvent() {
-        this.openChange$
-            .pipe(takeUntil$1(this._onDestroy), switchMap((isOpen) => {
-            return this.onOpenChange(isOpen);
-        }))
-            .subscribe((options) => {
-            this.isLoading.set(false);
-            this.options$.next(options);
-            this.optionsFiltered$.next(options);
-            this.updateSelectAllControl(this.group.controls[this.field.name].value);
-            this.ref.markForCheck();
-        });
+    ngOnDestroy() {
+        super.ngOnDestroy();
     }
-    onOpenChange(isOpen) {
-        if (isOpen) {
-            if (this.field.options instanceof Observable) {
-                this.isLoading.set(true);
-                return this.field.options.pipe(takeUntil$1(this.openClosed$));
-            }
-            else if (this.field.options instanceof Function) {
-                this.isLoading.set(true);
-                return this.field.options(undefined, this.group.getRawValue()).pipe(takeUntil$1(this.openClosed$));
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormSlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.20", type: KlesFormSlideToggleComponent, isStandalone: true, selector: "kles-form-slide-toggle", usesInheritance: true, ngImport: i0, template: `
+        <div [formGroup]="group">
+            <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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormSlideToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-slide-toggle', template: `
+        <div [formGroup]="group">
+            <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] }]
+        }] });
+
+/**
+ * Copy and past from https://github.com/angular/components/blob/17.0.x/src/cdk/collections/selection-model.ts
+ * (They put everything in private, thanks to angular team)
+ */
+class KlesSelectionModel {
+    /** Selected values. */
+    get selected() {
+        if (!this._selected) {
+            this._selected = Array.from(this._selection.values());
+        }
+        return this._selected;
+    }
+    constructor(_multiple = false, initiallySelectedValues, _emitChanges = true, compareWith) {
+        this._multiple = _multiple;
+        this._emitChanges = _emitChanges;
+        this.compareWith = compareWith;
+        /** Currently-selected values. */
+        this._selection = new Set();
+        /** Keeps track of the deselected options that haven't been emitted by the change event. */
+        this._deselectedToEmit = [];
+        /** Keeps track of the selected options that haven't been emitted by the change event. */
+        this._selectedToEmit = [];
+        /** Event emitted when the value has changed. */
+        this.changed = new Subject();
+        if (initiallySelectedValues && initiallySelectedValues.length) {
+            if (_multiple) {
+                initiallySelectedValues.forEach(value => this._markSelected(value));
             }
             else {
-                return of(this.field.options ?? []);
+                this._markSelected(initiallySelectedValues[0]);
             }
+            // Clear the array in order to avoid firing the change event for preselected values.
+            this._selectedToEmit.length = 0;
+        }
+    }
+    /**
+     * Selects a value or an array of values.
+     * @param values The values to select
+     * @return Whether the selection changed as a result of this call
+     * @breaking-change 16.0.0 make return type boolean
+     */
+    select(values, option) {
+        this._verifyValueAssignment(values);
+        values.forEach(value => this._markSelected(value));
+        const changed = this._hasQueuedChanges();
+        if (!option || option?.emitEvent) {
+            this._emitChangeEvent();
         }
         else {
-            return of(this.group.controls[this.field.name].value !== undefined && this.group.controls[this.field.name].value !== null
-                ? Array.isArray(this.group.controls[this.field.name].value)
-                    ? this.group.controls[this.field.name].value
-                    : [this.group.controls[this.field.name].value]
-                : []);
+            this._selected = null;
         }
+        return changed;
     }
-    onSearchChange(value) {
-        if (value) {
-            const search = value.toLowerCase();
-            return this.options$.pipe(map((options) => {
-                return options.filter((option) => {
-                    if (this.field.searchKeys && this.field.searchKeys.length) {
-                        return (this.field.searchKeys.some((searchKey) => {
-                            if (option[searchKey]) {
-                                return option[searchKey]?.toString().toLowerCase().indexOf(search) > -1;
-                            }
-                            return false;
-                        }) || (this.field.property ? option[this.field.property]?.toString().toLowerCase().indexOf(search) > -1 : false));
-                    }
-                    else {
-                        if (this.field.property) {
-                            return option[this.field.property]?.toString().toLowerCase().indexOf(search) > -1;
-                        }
-                    }
-                    return option?.toString().toLowerCase().indexOf(search) > -1;
-                });
-            }));
+    /**
+     * Deselects a value or an array of values.
+     * @param values The values to deselect
+     * @return Whether the selection changed as a result of this call
+     * @breaking-change 16.0.0 make return type boolean
+     */
+    deselect(values, option) {
+        this._verifyValueAssignment(values);
+        values.forEach(value => this._unmarkSelected(value));
+        const changed = this._hasQueuedChanges();
+        if (!option || option?.emitEvent) {
+            this._emitChangeEvent();
         }
         else {
-            return this.options$;
+            this._selected = null;
         }
+        return changed;
     }
-    openChange($event) {
-        if (this.field.lazy) {
-            if (!$event) {
-                this.openClosed$.next();
-            }
-            this.openChange$.next($event);
+    /**
+     * Sets the selected values
+     * @param values The new selected values
+     * @return Whether the selection changed as a result of this call
+     * @breaking-change 16.0.0 make return type boolean
+     */
+    setSelection(values, option) {
+        this._verifyValueAssignment(values);
+        const oldValues = this.selected;
+        const newSelectedSet = new Set(values.map((value) => this._getConcreteValue(value)));
+        values.forEach(value => this._markSelected(value));
+        oldValues
+            .filter(value => !newSelectedSet.has(value))
+            .forEach(value => this._unmarkSelected(value));
+        const changed = this._hasQueuedChanges();
+        if (!option || option?.emitEvent) {
+            this._emitChangeEvent();
         }
-        if (this.field.virtualScroll) {
-            if ($event) {
-                this.cdkVirtualScrollViewport.scrollToIndex(0);
-                this.cdkVirtualScrollViewport.checkViewportSize();
-            }
+        else {
+            this._selected = null;
         }
+        return changed;
     }
-    selectionChange(selection) {
-        this.updateSelectAllControl(selection.value);
-    }
-    updateSelectAllControl(values) {
-        if (this.field.multiple) {
-            if (values) {
-                const selected = this.field.property && values ? values.map((s) => s[this.field.property]) : values;
-                this.optionsFiltered$
-                    .pipe(take(1), map((options) => options?.filter((option) => !option?.disabled).map((option) => (this.field.property ? option[this.field.property] : option))), map((options) => {
-                    if (!selected) {
-                        return false;
-                    }
-                    if (options.length < selected.length) {
-                        return options.length > 0 && options.every((o) => selected.includes(o));
-                    }
-                    else {
-                        return options.length > 0 && options.length === selected.length && selected.every((s) => options.includes(s));
-                    }
-                }))
-                    .subscribe((isChecked) => {
-                    this.selectAllControl.setValue(isChecked, { emitEvent: false });
-                });
-            }
+    /**
+     * Toggles a value between selected and deselected.
+     * @param value The value to toggle
+     * @return Whether the selection changed as a result of this call
+     * @breaking-change 16.0.0 make return type boolean
+     */
+    toggle(value) {
+        if (Array.isArray(value)) {
+            return this.isSelected(value) ? this.deselect(value) : this.select(value);
+        }
+        else {
+            return this.isSelected(value) ? this.deselect([value]) : this.select([value]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormSelectSearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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 (label()) {
-                <mat-label>{{ label() }}</mat-label>
-            }
-
-            <mat-select
-                [matTooltip]="tooltip()"
-                [attr.id]="field.id"
-                [ngClass]="ngClass()"
-                (openedChange)="openChange($event)"
-                [compareWith]="compareFn"
-                [panelWidth]="field.panelWidth || 'auto'"
-                [placeholder]="placeholder()"
-                [formControlName]="field.name"
-                [multiple]="field.multiple"
-                (selectionChange)="selectionChange($event)"
-                (focus)="onFocus()"
-                (blur)="onBlur()"
-            >
-                @if (field.triggerComponent) {
-                    <mat-select-trigger>
-                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-                    </mat-select-trigger>
-                }
-                @if (field.virtualScroll) {
-                    <mat-option>
-                        <ngx-mat-select-search [formControl]="searchControl" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                    </mat-option>
-
-                    <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="4 * 48">
-                        @if (!isLoading()) {
-                            @if (field.multiple) {
-                                <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                                    {{ intl.selectAll }}
-                                </mat-checkbox>
-                            }
-                            @if (!field.autocompleteComponent) {
-                                <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
-
-                                @if (field.multiple) {
-                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                        </mat-option>
-                                    }
-                                }
-                                @if (!field.multiple && group.controls[field.name].value) {
-                                    @for (item of [group?.controls[field.name]?.value]; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                        </mat-option>
-                                    }
-                                }
-                            } @else {
-                                <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
-                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                </mat-option>
-
-                                @if (field.multiple) {
-                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                        </mat-option>
-                                    }
-                                }
-                                @if (!field.multiple && group.controls[field.name].value) {
-                                    @for (item of [group?.controls[field.name]?.value]; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                        </mat-option>
-                                    }
-                                }
-                            }
-                        } @else {
-                            <mat-option class="hide-checkbox" disabled
-                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                            ></mat-option>
-                        }
-                    </cdk-virtual-scroll-viewport>
-                } @else {
-                    <mat-option>
-                        <ngx-mat-select-search [formControl]="searchControl" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                    </mat-option>
-
-                    @if (!isLoading()) {
-                        @if (field.multiple) {
-                            <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                                {{ intl.selectAll }}
-                            </mat-checkbox>
-                        }
-                        @if (!field.autocompleteComponent) {
-                            @for (item of optionsFiltered$ | async; track item) {
-                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
-                            }
-                        } @else {
-                            @for (item of optionsFiltered$ | async; track item) {
-                                <mat-option [value]="item" [disabled]="item?.disabled">
-                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                </mat-option>
-                            }
-                        }
-                    } @else {
-                        <mat-option class="hide-checkbox" disabled
-                            ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                        ></mat-option>
-                    }
-
-                    <ng-template #emptyOption>
-                        <mat-option class="hide-checkbox" disabled
-                            ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                        ></mat-option>
-                    </ng-template>
-                }
-            </mat-select>
-
-            @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"></mat-spinner>
-                    }
-                    @if (field.subComponents || field.clearable) {
-                        <ng-content></ng-content>
-                    }
-                </div>
-            }
-
-            <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.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.20", 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 (label()) {
-                <mat-label>{{ label() }}</mat-label>
+    /**
+     * Clears all of the selected values.
+     * @param flushEvent Whether to flush the changes in an event.
+     *   If false, the changes to the selection will be flushed along with the next event.
+     * @return Whether the selection changed as a result of this call
+     * @breaking-change 16.0.0 make return type boolean
+     */
+    clear(flushEvent = true) {
+        this._unmarkAll();
+        const changed = this._hasQueuedChanges();
+        if (flushEvent) {
+            this._emitChangeEvent();
+        }
+        return changed;
+    }
+    /**
+     * Determines whether a value is selected.
+     */
+    isSelected(value) {
+        return this._selection.has(this._getConcreteValue(value));
+    }
+    /**
+     * Determines whether the model does not have a value.
+     */
+    isEmpty() {
+        return this._selection.size === 0;
+    }
+    /**
+     * Determines whether the model has a value.
+     */
+    hasValue() {
+        return !this.isEmpty();
+    }
+    /**
+     * Sorts the selected values based on a predicate function.
+     */
+    sort(predicate) {
+        if (this._multiple && this.selected) {
+            this._selected.sort(predicate);
+        }
+    }
+    /**
+     * Gets whether multiple values can be selected.
+     */
+    isMultipleSelection() {
+        return this._multiple;
+    }
+    /** Emits a change event and clears the records of selected and deselected values. */
+    _emitChangeEvent() {
+        // Clear the selected values so they can be re-cached.
+        this._selected = null;
+        if (this._selectedToEmit.length || this._deselectedToEmit.length) {
+            this.changed.next({
+                source: this,
+                added: this._selectedToEmit,
+                removed: this._deselectedToEmit,
+            });
+            this._deselectedToEmit = [];
+            this._selectedToEmit = [];
+        }
+    }
+    /** Selects a value. */
+    _markSelected(value) {
+        value = this._getConcreteValue(value);
+        if (!this.isSelected(value)) {
+            if (!this._multiple) {
+                this._unmarkAll();
             }
-
-            <mat-select
-                [matTooltip]="tooltip()"
-                [attr.id]="field.id"
-                [ngClass]="ngClass()"
-                (openedChange)="openChange($event)"
-                [compareWith]="compareFn"
-                [panelWidth]="field.panelWidth || 'auto'"
-                [placeholder]="placeholder()"
-                [formControlName]="field.name"
-                [multiple]="field.multiple"
-                (selectionChange)="selectionChange($event)"
-                (focus)="onFocus()"
-                (blur)="onBlur()"
-            >
-                @if (field.triggerComponent) {
-                    <mat-select-trigger>
-                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-                    </mat-select-trigger>
-                }
-                @if (field.virtualScroll) {
-                    <mat-option>
-                        <ngx-mat-select-search [formControl]="searchControl" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                    </mat-option>
-
-                    <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="4 * 48">
-                        @if (!isLoading()) {
-                            @if (field.multiple) {
-                                <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                                    {{ intl.selectAll }}
-                                </mat-checkbox>
-                            }
-                            @if (!field.autocompleteComponent) {
-                                <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
-
-                                @if (field.multiple) {
-                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                        </mat-option>
-                                    }
-                                }
-                                @if (!field.multiple && group.controls[field.name].value) {
-                                    @for (item of [group?.controls[field.name]?.value]; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                        </mat-option>
-                                    }
-                                }
-                            } @else {
-                                <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
-                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                </mat-option>
-
-                                @if (field.multiple) {
-                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                        </mat-option>
-                                    }
-                                }
-                                @if (!field.multiple && group.controls[field.name].value) {
-                                    @for (item of [group?.controls[field.name]?.value]; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                        </mat-option>
-                                    }
-                                }
-                            }
-                        } @else {
-                            <mat-option class="hide-checkbox" disabled
-                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                            ></mat-option>
-                        }
-                    </cdk-virtual-scroll-viewport>
-                } @else {
-                    <mat-option>
-                        <ngx-mat-select-search [formControl]="searchControl" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                    </mat-option>
-
-                    @if (!isLoading()) {
-                        @if (field.multiple) {
-                            <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                                {{ intl.selectAll }}
-                            </mat-checkbox>
-                        }
-                        @if (!field.autocompleteComponent) {
-                            @for (item of optionsFiltered$ | async; track item) {
-                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
-                            }
-                        } @else {
-                            @for (item of optionsFiltered$ | async; track item) {
-                                <mat-option [value]="item" [disabled]="item?.disabled">
-                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                </mat-option>
-                            }
-                        }
-                    } @else {
-                        <mat-option class="hide-checkbox" disabled
-                            ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                        ></mat-option>
-                    }
-
-                    <ng-template #emptyOption>
-                        <mat-option class="hide-checkbox" disabled
-                            ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                        ></mat-option>
-                    </ng-template>
-                }
-            </mat-select>
-
-            @if (hint()) {
-                <mat-hint>{{ hint() }}</mat-hint>
+            if (!this.isSelected(value)) {
+                this._selection.add(value);
             }
-            @if (field.subComponents || field.clearable || isPending()) {
-                <div matSuffix class="suffix">
-                    @if (isPending()) {
-                        <mat-spinner mode="indeterminate" diameter="21"></mat-spinner>
-                    }
-                    @if (field.subComponents || field.clearable) {
-                        <ng-content></ng-content>
-                    }
-                </div>
+            if (this._emitChanges) {
+                this._selectedToEmit.push(value);
             }
-
-            <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
-        </mat-form-field>
-    `, standalone: true, imports: [
-                        CommonModule,
-                        ReactiveFormsModule,
-                        KlesTransformPipe,
-                        MatErrorMessageDirective,
-                        MatProgressSpinner,
-                        MatHint,
-                        MatOption,
-                        KlesComponentDirective,
-                        ScrollingModule,
-                        MatSelectTrigger,
-                        MatSelect,
-                        MatTooltip,
-                        MatLabel,
-                        MatFormField,
-                        NgxMatSelectSearchModule,
-                        MatCheckbox,
-                        MatFormFieldModule,
-                    ], 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"] }]
-        }], propDecorators: { cdkVirtualScrollViewport: [{
-                type: ViewChild,
-                args: [CdkVirtualScrollViewport]
-            }], options: [{
-                type: ViewChildren,
-                args: [MatOption]
-            }] } });
-
-let KlesFormLineBreakComponent = class KlesFormLineBreakComponent extends KlesFieldAbstract {
-    ngOnInit() { super.ngOnInit(); }
-    ngOnDestroy() {
-        super.ngOnDestroy();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormLineBreakComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.20", type: KlesFormLineBreakComponent, isStandalone: true, selector: "kles-form-line-break", usesInheritance: true, ngImport: i0, template: ``, isInline: true, styles: [":host{flex-basis:100%;display:flex;height:0}\n"] }); }
-};
-KlesFormLineBreakComponent = __decorate([
-    FieldMapper({
-        type: EnumType.lineBreak,
-        factory: () => null
-    })
-], KlesFormLineBreakComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormLineBreakComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kles-form-line-break', template: ``, standalone: true, styles: [":host{flex-basis:100%;display:flex;height:0}\n"] }]
-        }] });
-
-class ArrayFormatPipe {
-    transform(values, property) {
-        if (values && Array.isArray(values)) {
-            if (property) {
-                return values.map(value => value[property]).filter(Boolean).join(', ');
-            }
-            else {
-                return values.join(', ');
-            }
-        }
-        return '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ArrayFormatPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.20", ngImport: i0, type: ArrayFormatPipe, isStandalone: true, name: "arrayFormat" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: ArrayFormatPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'arrayFormat',
-                    standalone: true,
-                }]
-        }] });
-
-class KlesFormLinkComponent extends KlesFieldAbstract {
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormLinkComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.20", type: KlesFormLinkComponent, isStandalone: true, selector: "kles-form-link", usesInheritance: true, ngImport: i0, template: `
-        <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 }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormLinkComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kles-form-link',
-                    template: `
-        <a [href]="group.controls[field.name].value" [matTooltip]="tooltip()" [attr.id]="field.id" [ngClass]="ngClass()">
-            {{ label() }}
-        </a>
-    `,
-                    standalone: true,
-                    imports: [CommonModule, MatTooltip, ReactiveFormsModule],
-                }]
-        }] });
-
-class KlesFormSlideToggleComponent extends KlesFieldAbstract {
-    ngOnInit() {
-        super.ngOnInit();
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormSlideToggleComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.20", type: KlesFormSlideToggleComponent, isStandalone: true, selector: "kles-form-slide-toggle", usesInheritance: true, ngImport: i0, template: `
-        <div [formGroup]="group">
-            <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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormSlideToggleComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kles-form-slide-toggle', template: `
-        <div [formGroup]="group">
-            <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] }]
-        }] });
-
-/**
- * Copy and past from https://github.com/angular/components/blob/17.0.x/src/cdk/collections/selection-model.ts
- * (They put everything in private, thanks to angular team)
- */
-class KlesSelectionModel {
-    /** Selected values. */
-    get selected() {
-        if (!this._selected) {
-            this._selected = Array.from(this._selection.values());
-        }
-        return this._selected;
-    }
-    constructor(_multiple = false, initiallySelectedValues, _emitChanges = true, compareWith) {
-        this._multiple = _multiple;
-        this._emitChanges = _emitChanges;
-        this.compareWith = compareWith;
-        /** Currently-selected values. */
-        this._selection = new Set();
-        /** Keeps track of the deselected options that haven't been emitted by the change event. */
-        this._deselectedToEmit = [];
-        /** Keeps track of the selected options that haven't been emitted by the change event. */
-        this._selectedToEmit = [];
-        /** Event emitted when the value has changed. */
-        this.changed = new Subject();
-        if (initiallySelectedValues && initiallySelectedValues.length) {
-            if (_multiple) {
-                initiallySelectedValues.forEach(value => this._markSelected(value));
-            }
-            else {
-                this._markSelected(initiallySelectedValues[0]);
-            }
-            // Clear the array in order to avoid firing the change event for preselected values.
-            this._selectedToEmit.length = 0;
-        }
-    }
-    /**
-     * Selects a value or an array of values.
-     * @param values The values to select
-     * @return Whether the selection changed as a result of this call
-     * @breaking-change 16.0.0 make return type boolean
-     */
-    select(values, option) {
-        this._verifyValueAssignment(values);
-        values.forEach(value => this._markSelected(value));
-        const changed = this._hasQueuedChanges();
-        if (!option || option?.emitEvent) {
-            this._emitChangeEvent();
-        }
-        else {
-            this._selected = null;
-        }
-        return changed;
-    }
-    /**
-     * Deselects a value or an array of values.
-     * @param values The values to deselect
-     * @return Whether the selection changed as a result of this call
-     * @breaking-change 16.0.0 make return type boolean
-     */
-    deselect(values, option) {
-        this._verifyValueAssignment(values);
-        values.forEach(value => this._unmarkSelected(value));
-        const changed = this._hasQueuedChanges();
-        if (!option || option?.emitEvent) {
-            this._emitChangeEvent();
-        }
-        else {
-            this._selected = null;
-        }
-        return changed;
-    }
-    /**
-     * Sets the selected values
-     * @param values The new selected values
-     * @return Whether the selection changed as a result of this call
-     * @breaking-change 16.0.0 make return type boolean
-     */
-    setSelection(values, option) {
-        this._verifyValueAssignment(values);
-        const oldValues = this.selected;
-        const newSelectedSet = new Set(values.map((value) => this._getConcreteValue(value)));
-        values.forEach(value => this._markSelected(value));
-        oldValues
-            .filter(value => !newSelectedSet.has(value))
-            .forEach(value => this._unmarkSelected(value));
-        const changed = this._hasQueuedChanges();
-        if (!option || option?.emitEvent) {
-            this._emitChangeEvent();
-        }
-        else {
-            this._selected = null;
-        }
-        return changed;
-    }
-    /**
-     * Toggles a value between selected and deselected.
-     * @param value The value to toggle
-     * @return Whether the selection changed as a result of this call
-     * @breaking-change 16.0.0 make return type boolean
-     */
-    toggle(value) {
-        if (Array.isArray(value)) {
-            return this.isSelected(value) ? this.deselect(value) : this.select(value);
-        }
-        else {
-            return this.isSelected(value) ? this.deselect([value]) : this.select([value]);
-        }
-    }
-    /**
-     * Clears all of the selected values.
-     * @param flushEvent Whether to flush the changes in an event.
-     *   If false, the changes to the selection will be flushed along with the next event.
-     * @return Whether the selection changed as a result of this call
-     * @breaking-change 16.0.0 make return type boolean
-     */
-    clear(flushEvent = true) {
-        this._unmarkAll();
-        const changed = this._hasQueuedChanges();
-        if (flushEvent) {
-            this._emitChangeEvent();
-        }
-        return changed;
-    }
-    /**
-     * Determines whether a value is selected.
-     */
-    isSelected(value) {
-        return this._selection.has(this._getConcreteValue(value));
-    }
-    /**
-     * Determines whether the model does not have a value.
-     */
-    isEmpty() {
-        return this._selection.size === 0;
-    }
-    /**
-     * Determines whether the model has a value.
-     */
-    hasValue() {
-        return !this.isEmpty();
-    }
-    /**
-     * Sorts the selected values based on a predicate function.
-     */
-    sort(predicate) {
-        if (this._multiple && this.selected) {
-            this._selected.sort(predicate);
-        }
-    }
-    /**
-     * Gets whether multiple values can be selected.
-     */
-    isMultipleSelection() {
-        return this._multiple;
-    }
-    /** Emits a change event and clears the records of selected and deselected values. */
-    _emitChangeEvent() {
-        // Clear the selected values so they can be re-cached.
-        this._selected = null;
-        if (this._selectedToEmit.length || this._deselectedToEmit.length) {
-            this.changed.next({
-                source: this,
-                added: this._selectedToEmit,
-                removed: this._deselectedToEmit,
-            });
-            this._deselectedToEmit = [];
-            this._selectedToEmit = [];
-        }
-    }
-    /** Selects a value. */
-    _markSelected(value) {
-        value = this._getConcreteValue(value);
-        if (!this.isSelected(value)) {
-            if (!this._multiple) {
-                this._unmarkAll();
-            }
-            if (!this.isSelected(value)) {
-                this._selection.add(value);
-            }
-            if (this._emitChanges) {
-                this._selectedToEmit.push(value);
-            }
-        }
-    }
-    /** Deselects a value. */
-    _unmarkSelected(value) {
-        value = this._getConcreteValue(value);
-        if (this.isSelected(value)) {
-            this._selection.delete(value);
-            if (this._emitChanges) {
-                this._deselectedToEmit.push(value);
+    /** Deselects a value. */
+    _unmarkSelected(value) {
+        value = this._getConcreteValue(value);
+        if (this.isSelected(value)) {
+            this._selection.delete(value);
+            if (this._emitChanges) {
+                this._deselectedToEmit.push(value);
             }
         }
     }
@@ -4307,7 +3475,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: 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" }] }); }
+    `, 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: i4$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$2.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.20", ngImport: i0, type: KlesFormSelectionListComponent, decorators: [{
             type: Component,
@@ -4354,7 +3522,7 @@ let KlesFormBadgeComponent = class KlesFormBadgeComponent extends KlesFieldAbstr
     <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$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"] }] }); }
+`, 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$4.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }] }); }
 };
 KlesFormBadgeComponent = __decorate([
     FieldMapper({ type: EnumType.badge })
@@ -4664,7 +3832,7 @@ let KlesFormRangeComponent = class KlesFormRangeComponent 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", "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"] }] }); }
+    `, 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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.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$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"] }] }); }
 };
 KlesFormRangeComponent = __decorate([
     FieldMapper({ type: EnumType.range, factory: (field) => new KlesFormRange(field).create() })
@@ -4695,283 +3863,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
     `, standalone: true, imports: [CommonModule, MatErrorMessageDirective, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatTooltipModule, ReactiveFormsModule], styles: [".suffix{display:flex;align-items:center}\n", "mat-form-field{width:100%}\n"] }]
         }] });
 
-class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent {
-    ngOnInit() {
-        this.field.lazy = true;
-        this.field.debounceTime = this.field.debounceTime ? this.field.debounceTime : 500;
-        super.ngOnInit();
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-    onSearchChange(value) {
-        if (this.field.options instanceof Function) {
-            if (this.openChange$.getValue() && this.field.options instanceof Function) {
-                if (value) {
-                    return this.field.options(value, this.group.getRawValue()).pipe(take(1));
-                }
-                else {
-                    return this.field.options(undefined, this.group.getRawValue()).pipe(take(1));
-                }
-            }
-            return of(this.group.controls[this.field.name].value ? [this.group.controls[this.field.name].value] : []);
-        }
-        else {
-            return super.onSearchChange(value);
-        }
-    }
-    openChangeEvent() {
-        this.openChange$
-            .pipe(takeUntil$1(this._onDestroy), switchMap((isOpen) => {
-            return this.onOpenChange(isOpen).pipe(map((options) => ({ options, isOpen })));
-        }))
-            .subscribe(({ options, isOpen }) => {
-            if (!isOpen) {
-                this.searchControl.reset(null, { emitEvent: false });
-            }
-            this.optionsFiltered$.next(options);
-            this.isLoading.set(false);
-            this.ref.markForCheck();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormSelectLazySearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", 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 (label()) {
-                <mat-label>{{ label() }}</mat-label>
-            }
-
-            <mat-select
-                [matTooltip]="tooltip()"
-                [attr.id]="field.id"
-                [ngClass]="ngClass()"
-                (openedChange)="openChange($event)"
-                [compareWith]="compareFn"
-                [panelWidth]="field.panelWidth || 'auto'"
-                [placeholder]="placeholder()"
-                [formControlName]="field.name"
-                [multiple]="field.multiple"
-            >
-                @if (field.triggerComponent) {
-                    <mat-select-trigger>
-                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-                    </mat-select-trigger>
-                }
-                @if (field.virtualScroll) {
-                    <mat-option>
-                        <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                    </mat-option>
-
-                    <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="4 * 48">
-                        @if (!isLoading()) {
-                            @if (field.multiple) {
-                                <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                                    {{ intl.selectAll }}
-                                </mat-checkbox>
-                            }
-                            @if (!field.autocompleteComponent) {
-                                <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
-
-                                @if (field.multiple) {
-                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                        </mat-option>
-                                    }
-                                }
-                                @if (!field.multiple && group.controls[field.name].value) {
-                                    @for (item of [group?.controls[field.name]?.value]; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                        </mat-option>
-                                    }
-                                }
-                            } @else {
-                                <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
-                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                </mat-option>
-
-                                @if (field.multiple) {
-                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                        </mat-option>
-                                    }
-                                }
-                                @if (!field.multiple && group.controls[field.name].value) {
-                                    @for (item of [group?.controls[field.name]?.value]; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                        </mat-option>
-                                    }
-                                }
-                            }
-                        } @else {
-                            <mat-option class="hide-checkbox" disabled
-                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                            ></mat-option>
-                        }
-                    </cdk-virtual-scroll-viewport>
-                } @else {
-                    <mat-option>
-                        <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                    </mat-option>
-
-                    @if (!isLoading()) {
-                        @if (field.multiple) {
-                            <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                                {{ intl.selectAll }}
-                            </mat-checkbox>
-                        }
-                        @if (!field.autocompleteComponent) {
-                            @for (item of optionsFiltered$ | async; track item) {
-                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
-                            }
-                        } @else {
-                            @for (item of optionsFiltered$ | async; track item) {
-                                <mat-option [value]="item" [disabled]="item?.disabled">
-                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                </mat-option>
-                            }
-                        }
-                    } @else {
-                        <mat-option class="hide-checkbox" disabled
-                            ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                        ></mat-option>
-                    }
-                }
-            </mat-select>
-
-            @if (field.subComponents || field.clearable) {
-                <div matSuffix>
-                    <ng-content></ng-content>
-                </div>
-            }
-
-            <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: 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.20", 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 (label()) {
-                <mat-label>{{ label() }}</mat-label>
-            }
-
-            <mat-select
-                [matTooltip]="tooltip()"
-                [attr.id]="field.id"
-                [ngClass]="ngClass()"
-                (openedChange)="openChange($event)"
-                [compareWith]="compareFn"
-                [panelWidth]="field.panelWidth || 'auto'"
-                [placeholder]="placeholder()"
-                [formControlName]="field.name"
-                [multiple]="field.multiple"
-            >
-                @if (field.triggerComponent) {
-                    <mat-select-trigger>
-                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
-                    </mat-select-trigger>
-                }
-                @if (field.virtualScroll) {
-                    <mat-option>
-                        <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                    </mat-option>
-
-                    <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 50" [style.height.px]="4 * 48">
-                        @if (!isLoading()) {
-                            @if (field.multiple) {
-                                <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                                    {{ intl.selectAll }}
-                                </mat-checkbox>
-                            }
-                            @if (!field.autocompleteComponent) {
-                                <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
-
-                                @if (field.multiple) {
-                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                        </mat-option>
-                                    }
-                                }
-                                @if (!field.multiple && group.controls[field.name].value) {
-                                    @for (item of [group?.controls[field.name]?.value]; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
-                                        </mat-option>
-                                    }
-                                }
-                            } @else {
-                                <mat-option *cdkVirtualFor="let item of optionsFiltered$ | async" [value]="item" [disabled]="item?.disabled">
-                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                </mat-option>
-
-                                @if (field.multiple) {
-                                    @for (item of group.controls[field.name].value | slice: 0 : 30; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                        </mat-option>
-                                    }
-                                }
-                                @if (!field.multiple && group.controls[field.name].value) {
-                                    @for (item of [group?.controls[field.name]?.value]; track item) {
-                                        <mat-option [value]="item" style="display:none">
-                                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                        </mat-option>
-                                    }
-                                }
-                            }
-                        } @else {
-                            <mat-option class="hide-checkbox" disabled
-                                ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                            ></mat-option>
-                        }
-                    </cdk-virtual-scroll-viewport>
-                } @else {
-                    <mat-option>
-                        <ngx-mat-select-search [formControl]="searchControl" [clearSearchInput]="false" placeholderLabel="" noEntriesFoundLabel=""></ngx-mat-select-search>
-                    </mat-option>
-
-                    @if (!isLoading()) {
-                        @if (field.multiple) {
-                            <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" (change)="toggleAllSelection($event)">
-                                {{ intl.selectAll }}
-                            </mat-checkbox>
-                        }
-                        @if (!field.autocompleteComponent) {
-                            @for (item of optionsFiltered$ | async; track item) {
-                                <mat-option [value]="item" [disabled]="item?.disabled">{{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}</mat-option>
-                            }
-                        } @else {
-                            @for (item of optionsFiltered$ | async; track item) {
-                                <mat-option [value]="item" [disabled]="item?.disabled">
-                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field"></ng-container>
-                                </mat-option>
-                            }
-                        }
-                    } @else {
-                        <mat-option class="hide-checkbox" disabled
-                            ><div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20"></mat-spinner></div
-                        ></mat-option>
-                    }
-                }
-            </mat-select>
-
-            @if (field.subComponents || field.clearable) {
-                <div matSuffix>
-                    <ng-content></ng-content>
-                </div>
-            }
-
-            <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
-        </mat-form-field>
-    `, standalone: true, imports: [CommonModule, KlesTransformPipe, MatErrorMessageDirective, MatFormFieldModule, MatProgressSpinnerModule, MatSelectModule, KlesComponentDirective, ReactiveFormsModule, NgxMatSelectSearchModule, ScrollingModule, MatTooltipModule], 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"] }]
-        }] });
-
 class KlesFabComponent extends KlesButtonBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: KlesFabComponent, isStandalone: true, selector: "kles-fab", providers: [
@@ -4993,7 +3884,7 @@ 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$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"] }] }); }
+    `, 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$1.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFabComponent, decorators: [{
             type: Component,
@@ -5097,7 +3988,7 @@ 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$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"] }] }); }
+    `, 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$1.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesMiniFabComponent, decorators: [{
             type: Component,
@@ -5190,7 +4081,7 @@ class KlesIconButtonComponent 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: 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"] }] }); }
+    `, 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$1.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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesIconButtonComponent, decorators: [{
             type: Component,
@@ -5363,7 +4254,7 @@ 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: 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" }] }); }
+    `, 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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.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$1.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: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i4$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$2.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.20", ngImport: i0, type: KlesFormSelectionListSearchComponent, decorators: [{
             type: Component,
@@ -5515,7 +4406,7 @@ let KlesFormCheckboxIndeterminateComponent = class KlesFormCheckboxIndeterminate
                 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$2.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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 };
 KlesFormCheckboxIndeterminateComponent = __decorate([
     FieldMapper({ type: EnumType.checkbox })
@@ -5640,7 +4531,7 @@ class KlesFormDateTimeComponent extends KlesFieldAbstract {
 
         <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
     </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n", ".suffix{display:flex;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "directive", type: i3$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"] }] }); }
+    `, 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$4.KlesMatDatepicker, selector: "kles-mat-datepicker", outputs: ["timeSelected"], exportAs: ["klesMatDatepicker"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormDateTimeComponent, decorators: [{
             type: Component,
@@ -5704,7 +4595,7 @@ class KlesFormCopyComponent {
         <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$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 }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.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 }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormCopyComponent, decorators: [{
             type: Component,
@@ -5821,7 +4712,7 @@ let KlesFormActionMenuComponent = class KlesFormActionMenuComponent extends Kles
                 </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 }); }
+    `, 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$3.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$1.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$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 KlesFormActionMenuComponent = __decorate([
     FieldMapper({
@@ -5919,7 +4810,7 @@ class KlesFormTileComponent extends KlesFieldAbstract {
                 }
             </div>
         </div>
-    `, isInline: true, styles: [":host{display:flex;justify-content:inherit}.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 }); }
+    `, isInline: true, styles: [":host{display:flex;justify-content:inherit}.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$1.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.20", ngImport: i0, type: KlesFormTileComponent, decorators: [{
             type: Component,
@@ -6228,7 +5119,7 @@ let KlesFormCurrencyComponent = class KlesFormCurrencyComponent extends KlesFiel
 
             <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"] }] }); }
+    `, 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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.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$1.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: 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({
@@ -6396,7 +5287,7 @@ let KlesFormStatusComponent = class KlesFormStatusComponent extends KlesFieldAbs
                 </span>
             }
         </span>
-    `, isInline: true, styles: [":host{display:flex;justify-content:inherit}.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 }); }
+    `, isInline: true, styles: [":host{display:flex;justify-content:inherit}.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$1.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: 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({
@@ -6598,7 +5489,7 @@ class KlesFormChipGridComponent extends KlesFieldAbstract {
                 }
             </mat-autocomplete>
         </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: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$3.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$3.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$3.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$3.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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.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: "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: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "pipe", type: 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: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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.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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { 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: i6.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: MatProgressSpinnerModule }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormChipGridComponent, decorators: [{
             type: Component,
@@ -6661,7 +5552,6 @@ const components = [
     KlesFormButtonCheckerComponent,
     KlesButtonFileComponent,
     KlesFormButtonFileComponent,
-    KlesFormSelectComponent,
     KlesFormDateComponent,
     KlesFormDateTimeComponent,
     KlesFormRadioComponent,
@@ -6675,7 +5565,6 @@ const components = [
     KlesFormChipComponent,
     KlesFormGroupComponent,
     KlesFormIconComponent,
-    KlesFormSelectSearchComponent,
     KlesFormLineBreakComponent,
     KlesFormLinkComponent,
     KlesFormSlideToggleComponent,
@@ -6684,7 +5573,6 @@ const components = [
     KlesFormArrayComponent,
     KlesFormRangeComponent,
     KlesFormClearComponent,
-    KlesFormSelectLazySearchComponent,
     KlesFormFabComponent,
     KlesFabComponent,
     KlesMiniFabComponent,
@@ -6717,7 +5605,6 @@ class KlesMaterialDynamicformsModule {
             KlesFormButtonCheckerComponent,
             KlesButtonFileComponent,
             KlesFormButtonFileComponent,
-            KlesFormSelectComponent,
             KlesFormDateComponent,
             KlesFormDateTimeComponent,
             KlesFormRadioComponent,
@@ -6731,7 +5618,6 @@ class KlesMaterialDynamicformsModule {
             KlesFormChipComponent,
             KlesFormGroupComponent,
             KlesFormIconComponent,
-            KlesFormSelectSearchComponent,
             KlesFormLineBreakComponent,
             KlesFormLinkComponent,
             KlesFormSlideToggleComponent,
@@ -6740,7 +5626,6 @@ class KlesMaterialDynamicformsModule {
             KlesFormArrayComponent,
             KlesFormRangeComponent,
             KlesFormClearComponent,
-            KlesFormSelectLazySearchComponent,
             KlesFormFabComponent,
             KlesFabComponent,
             KlesMiniFabComponent,
@@ -6766,7 +5651,6 @@ class KlesMaterialDynamicformsModule {
             KlesFormButtonCheckerComponent,
             KlesButtonFileComponent,
             KlesFormButtonFileComponent,
-            KlesFormSelectComponent,
             KlesFormDateComponent,
             KlesFormDateTimeComponent,
             KlesFormRadioComponent,
@@ -6780,7 +5664,6 @@ class KlesMaterialDynamicformsModule {
             KlesFormChipComponent,
             KlesFormGroupComponent,
             KlesFormIconComponent,
-            KlesFormSelectSearchComponent,
             KlesFormLineBreakComponent,
             KlesFormLinkComponent,
             KlesFormSlideToggleComponent,
@@ -6789,7 +5672,6 @@ class KlesMaterialDynamicformsModule {
             KlesFormArrayComponent,
             KlesFormRangeComponent,
             KlesFormClearComponent,
-            KlesFormSelectLazySearchComponent,
             KlesFormFabComponent,
             KlesFabComponent,
             KlesMiniFabComponent,
@@ -6816,7 +5698,6 @@ class KlesMaterialDynamicformsModule {
             KlesFormButtonCheckerComponent,
             KlesButtonFileComponent,
             KlesFormButtonFileComponent,
-            KlesFormSelectComponent,
             KlesFormDateComponent,
             KlesFormDateTimeComponent,
             KlesFormRadioComponent,
@@ -6830,7 +5711,6 @@ class KlesMaterialDynamicformsModule {
             KlesFormChipComponent,
             KlesFormGroupComponent,
             KlesFormIconComponent,
-            KlesFormSelectSearchComponent,
             KlesFormLinkComponent,
             KlesFormSlideToggleComponent,
             KlesFormSelectionListComponent,
@@ -6838,7 +5718,6 @@ class KlesMaterialDynamicformsModule {
             KlesFormArrayComponent,
             KlesFormRangeComponent,
             KlesFormClearComponent,
-            KlesFormSelectLazySearchComponent,
             KlesFormFabComponent,
             KlesFabComponent,
             KlesMiniFabComponent,
@@ -6898,6 +5777,695 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                 }]
         }] });
 
+/** Internal search input used by the Kles select field. */
+class KlesSelectSearchInputComponent {
+    constructor() {
+        this.control = input.required(...(ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []));
+        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input('Search options', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.clearAriaLabel = input('Clear search', ...(ngDevMode ? [{ debugName: "clearAriaLabel" }] : /* istanbul ignore next */ []));
+        this.searching = input(false, ...(ngDevMode ? [{ debugName: "searching" }] : /* istanbul ignore next */ []));
+        this.inputElement = viewChild('searchInput', ...(ngDevMode ? [{ debugName: "inputElement" }] : /* istanbul ignore next */ []));
+        this.destroyRef = inject(DestroyRef);
+        this.matSelect = inject(MatSelect);
+        this.matOption = inject(MatOption$1);
+    }
+    ngOnInit() {
+        this.matOption.disabled = true;
+        const optionElement = this.matOption._getHostElement();
+        optionElement.classList.add('kles-select-search-option');
+        optionElement.setAttribute('role', 'presentation');
+    }
+    ngAfterViewInit() {
+        this.matSelect.openedChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((opened) => {
+            if (opened) {
+                setTimeout(() => {
+                    this.focusInput();
+                    this.installPanelKeyboardGuard();
+                });
+            }
+            else {
+                this.removePanelKeyboardGuard?.();
+                this.removePanelKeyboardGuard = undefined;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.removePanelKeyboardGuard?.();
+    }
+    onKeydown(event) {
+        if (event.key.length === 1) {
+            event.stopPropagation();
+        }
+        if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault();
+        }
+        if (this.matSelect.multiple && event.key === 'Enter') {
+            setTimeout(() => this.focusInput());
+        }
+    }
+    preserveInputFocus(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    clearSearch(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.control().setValue('');
+        this.focusInput();
+    }
+    focusInput() {
+        const panel = this.matSelect.panel?.nativeElement;
+        const inputElement = this.inputElement();
+        if (!panel || !inputElement) {
+            return;
+        }
+        const scrollTop = panel.scrollTop;
+        inputElement.nativeElement.focus();
+        panel.scrollTop = scrollTop;
+    }
+    /**
+     * Material 21 renders the panel inline. Without this listener the panel and
+     * the mat-select host both process the same keydown and skip an option.
+     */
+    installPanelKeyboardGuard() {
+        this.removePanelKeyboardGuard?.();
+        const panel = this.matSelect.panel?.nativeElement;
+        if (!panel) {
+            return;
+        }
+        const handler = (event) => {
+            if (event.key !== 'Escape') {
+                event.stopPropagation();
+            }
+        };
+        panel.addEventListener('keydown', handler);
+        this.removePanelKeyboardGuard = () => panel.removeEventListener('keydown', handler);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesSelectSearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: KlesSelectSearchInputComponent, isStandalone: true, selector: "kles-select-search-input", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clearAriaLabel: { classPropertyName: "clearAriaLabel", publicName: "clearAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, searching: { classPropertyName: "searching", publicName: "searching", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+        <div class="kles-select-search-row">
+            <mat-icon class="kles-select-search-icon" aria-hidden="true">search</mat-icon>
+            <input
+                #searchInput
+                class="kles-select-search-input"
+                type="search"
+                autocomplete="off"
+                tabindex="-1"
+                [formControl]="control()"
+                [placeholder]="placeholder()"
+                [attr.aria-label]="ariaLabel()"
+                (keydown)="onKeydown($event)"
+            />
+            @if (searching()) {
+                <mat-spinner class="kles-select-search-spinner" diameter="16" />
+            } @else if (control().value) {
+                <button
+                    mat-icon-button
+                    type="button"
+                    class="kles-select-search-clear"
+                    [attr.aria-label]="clearAriaLabel()"
+                    (mousedown)="preserveInputFocus($event)"
+                    (click)="clearSearch($event)"
+                >
+                    <mat-icon>close</mat-icon>
+                </button>
+            }
+        </div>
+    `, isInline: true, styles: ["kles-select-search-input{display:block;width:100%}.kles-select-panel .kles-select-search-row{position:relative;display:flex;align-items:center;width:100%;min-height:48px;background:var(--mat-sys-surface-container, var(--mat-select-panel-background-color, white));box-shadow:inset 0 -1px 0 var(--mat-sys-outline-variant, currentColor)}.kles-select-panel .kles-select-search-icon{position:absolute;inset-inline-start:14px;width:20px;height:20px;color:var(--mat-sys-on-surface-variant, currentColor);font-size:20px;line-height:20px;pointer-events:none}.kles-select-panel .kles-select-search-input{box-sizing:border-box;width:100%;height:47px;padding:0 44px;border:0;outline:0;color:currentColor;background:transparent;font:inherit}.kles-select-panel .kles-select-search-input::placeholder{color:var(--mat-sys-on-surface-variant, currentColor);opacity:.8}.kles-select-panel .kles-select-search-input::-webkit-search-cancel-button{display:none}.kles-select-panel .kles-select-search-clear{position:absolute;inset-inline-end:4px;width:40px;height:40px;color:currentColor;cursor:pointer}.kles-select-panel .kles-select-search-spinner{position:absolute;inset-inline-end:16px}.kles-select-panel .mat-mdc-option.kles-select-search-option{position:sticky;top:-8px;z-index:2;min-height:48px;margin-top:-8px;padding:0;opacity:1;pointer-events:all;background:var(--mat-sys-surface-container, var(--mat-select-panel-background-color, white))}.kles-select-panel .mat-mdc-option.kles-select-search-option .mat-pseudo-checkbox{display:none}.kles-select-panel .mat-mdc-option.kles-select-search-option .mdc-list-item__primary-text{width:100%;opacity:1}\n"], dependencies: [{ 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesSelectSearchInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-select-search-input', standalone: true, imports: [ReactiveFormsModule, MatIconButton, MatIcon, MatProgressSpinner], template: `
+        <div class="kles-select-search-row">
+            <mat-icon class="kles-select-search-icon" aria-hidden="true">search</mat-icon>
+            <input
+                #searchInput
+                class="kles-select-search-input"
+                type="search"
+                autocomplete="off"
+                tabindex="-1"
+                [formControl]="control()"
+                [placeholder]="placeholder()"
+                [attr.aria-label]="ariaLabel()"
+                (keydown)="onKeydown($event)"
+            />
+            @if (searching()) {
+                <mat-spinner class="kles-select-search-spinner" diameter="16" />
+            } @else if (control().value) {
+                <button
+                    mat-icon-button
+                    type="button"
+                    class="kles-select-search-clear"
+                    [attr.aria-label]="clearAriaLabel()"
+                    (mousedown)="preserveInputFocus($event)"
+                    (click)="clearSearch($event)"
+                >
+                    <mat-icon>close</mat-icon>
+                </button>
+            }
+        </div>
+    `, encapsulation: ViewEncapsulation.None, styles: ["kles-select-search-input{display:block;width:100%}.kles-select-panel .kles-select-search-row{position:relative;display:flex;align-items:center;width:100%;min-height:48px;background:var(--mat-sys-surface-container, var(--mat-select-panel-background-color, white));box-shadow:inset 0 -1px 0 var(--mat-sys-outline-variant, currentColor)}.kles-select-panel .kles-select-search-icon{position:absolute;inset-inline-start:14px;width:20px;height:20px;color:var(--mat-sys-on-surface-variant, currentColor);font-size:20px;line-height:20px;pointer-events:none}.kles-select-panel .kles-select-search-input{box-sizing:border-box;width:100%;height:47px;padding:0 44px;border:0;outline:0;color:currentColor;background:transparent;font:inherit}.kles-select-panel .kles-select-search-input::placeholder{color:var(--mat-sys-on-surface-variant, currentColor);opacity:.8}.kles-select-panel .kles-select-search-input::-webkit-search-cancel-button{display:none}.kles-select-panel .kles-select-search-clear{position:absolute;inset-inline-end:4px;width:40px;height:40px;color:currentColor;cursor:pointer}.kles-select-panel .kles-select-search-spinner{position:absolute;inset-inline-end:16px}.kles-select-panel .mat-mdc-option.kles-select-search-option{position:sticky;top:-8px;z-index:2;min-height:48px;margin-top:-8px;padding:0;opacity:1;pointer-events:all;background:var(--mat-sys-surface-container, var(--mat-select-panel-background-color, white))}.kles-select-panel .mat-mdc-option.kles-select-search-option .mat-pseudo-checkbox{display:none}.kles-select-panel .mat-mdc-option.kles-select-search-option .mdc-list-item__primary-text{width:100%;opacity:1}\n"] }]
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], searching: [{ type: i0.Input, args: [{ isSignal: true, alias: "searching", required: false }] }], inputElement: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }] } });
+
+let KlesFormSelectComponent = class KlesFormSelectComponent extends KlesFieldAbstract {
+    constructor() {
+        super(...arguments);
+        this.searchControl = new FormControl('');
+        this.selectAllControl = new FormControl(false, { nonNullable: true });
+        this.selectAllIndeterminate = signal(false, ...(ngDevMode ? [{ debugName: "selectAllIndeterminate" }] : /* istanbul ignore next */ []));
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.filteredOptions = signal([], ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+        this.intl = inject(KlesDynamicFormIntl);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.matSelect = viewChild(MatSelect, ...(ngDevMode ? [{ debugName: "matSelect" }] : /* istanbul ignore next */ []));
+        this.virtualViewport = viewChild(CdkVirtualScrollViewport, ...(ngDevMode ? [{ debugName: "virtualViewport" }] : /* istanbul ignore next */ []));
+        this.searchOptions = {};
+        this.deferredQuery$ = new Subject();
+        this.sourceOptions = [];
+        this.visibleOptions = [];
+        this.isPanelOpen = false;
+        this.isDeferredSourceLoaded = false;
+        this.compareFn = (first, second) => {
+            if (this.field.property && first && second) {
+                return first[this.field.property] === second[this.field.property];
+            }
+            return first === second;
+        };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.searchOptions = this.normalizeSearchOptions();
+        this.group.controls[this.field.name].valueChanges.pipe(takeUntil(this._onDestroy)).subscribe((values) => {
+            this.updateSelectAllState(values);
+            this.changeDetectorRef.markForCheck();
+        });
+        if (this.usesDeferredSource()) {
+            const selected = this.selectedValues();
+            this.sourceOptions = selected;
+            this.setVisibleOptions(selected);
+            // MatSelect cannot open without at least one MatOption. When search is
+            // disabled, keep the loading option rendered until the deferred source
+            // is requested on the first opening.
+            this.isLoading.set(!this.isSearchEnabled() && selected.length === 0);
+            this.initializeDeferredQueries();
+        }
+        else {
+            this.loadInitialOptions();
+        }
+        if (this.isSearchEnabled() && !this.usesDeferredSource()) {
+            this.searchControl.valueChanges
+                .pipe(startWith$1(this.searchControl.value), debounce((value) => timer(value ? (this.searchOptions.debounceTime ?? this.field.debounceTime ?? 0) : 0)), distinctUntilChanged$1(), takeUntil(this._onDestroy))
+                .subscribe((value) => this.applyLocalFilter(value || ''));
+        }
+        else if (this.isSearchEnabled()) {
+            this.searchControl.valueChanges
+                .pipe(debounce((value) => timer(value ? (this.searchOptions.debounceTime ?? this.field.debounceTime ?? 0) : 0)), distinctUntilChanged$1(), takeUntil(this._onDestroy))
+                .subscribe((value) => {
+                if (this.isPanelOpen) {
+                    this.deferredQuery$.next({ kind: 'search', value: value || '' });
+                }
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.restoreMatSelectScroll?.();
+        this.deferredQuery$.complete();
+        super.ngOnDestroy();
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this.installMatSelectScrollCorrection();
+    }
+    isSearchEnabled() {
+        return this.field.search === true || (this.field.search != null && typeof this.field.search === 'object');
+    }
+    panelClasses() {
+        const classes = ['kles-select-panel'];
+        if (this.field.virtualScroll) {
+            classes.push('kles-select-virtual-panel');
+        }
+        if (this.isSearchEnabled()) {
+            classes.push('kles-select-has-search');
+        }
+        return classes;
+    }
+    onOpenedChange(opened) {
+        this.isPanelOpen = opened;
+        if (this.usesDeferredSource()) {
+            if (opened) {
+                this.isDeferredSourceLoaded = false;
+                // Keep the initial request alive while search terms replace each
+                // other, otherwise switchMap cancels the baseline option loading.
+                this.deferredOptionsRequest$ = this.resolveOptions().pipe(shareReplay$1({ bufferSize: 1, refCount: false }));
+            }
+            this.deferredQuery$.next(opened ? { kind: 'open', value: this.searchControl.value || '' } : { kind: 'close' });
+        }
+        if (!opened && this.isSearchEnabled() && (this.searchOptions.clearOnClose ?? true)) {
+            this.searchControl.setValue('');
+        }
+        if (opened && this.field.virtualScroll) {
+            setTimeout(() => {
+                this.virtualViewport()?.scrollToIndex(0);
+                this.virtualViewport()?.checkViewportSize();
+            });
+        }
+    }
+    toggleVisibleOptions(state) {
+        const selected = this.selectedValues();
+        const enabledOptions = this.visibleOptions.filter((option) => !option?.disabled);
+        if (!state.checked) {
+            const remaining = selected.filter((value) => !enabledOptions.some((option) => this.compareFn(value, option)));
+            this.group.controls[this.field.name].patchValue(remaining);
+            return;
+        }
+        if (enabledOptions.length > 0) {
+            const added = enabledOptions.filter((option) => !selected.some((value) => this.compareFn(value, option)));
+            this.group.controls[this.field.name].patchValue([...selected, ...added]);
+        }
+    }
+    getHiddenSelectedOptions() {
+        const selected = this.selectedValues();
+        if (this.field.virtualScroll) {
+            return selected;
+        }
+        return selected.filter((selectedOption) => !this.visibleOptions.some((option) => this.compareFn(selectedOption, option)));
+    }
+    normalizeSearchOptions() {
+        if (!this.isSearchEnabled()) {
+            return {};
+        }
+        const configured = typeof this.field.search === 'object' ? this.field.search : {};
+        return {
+            mode: configured.mode ?? 'local',
+            keys: configured.keys ?? this.field.searchKeys,
+            debounceTime: configured.debounceTime ?? this.field.debounceTime,
+            minLength: configured.minLength ?? 0,
+            clearOnClose: configured.clearOnClose ?? true,
+            placeholder: configured.placeholder,
+            ariaLabel: configured.ariaLabel,
+        };
+    }
+    usesDeferredSource() {
+        return !!this.field.lazy || this.searchOptions.mode === 'remote';
+    }
+    loadInitialOptions() {
+        if (isObservable(this.field.options) || typeof this.field.options === 'function') {
+            this.isLoading.set(true);
+        }
+        this.resolveOptions()
+            .pipe(takeUntil(this._onDestroy))
+            .subscribe((options) => {
+            const safeOptions = options ?? [];
+            this.isLoading.set(false);
+            this.sourceOptions = safeOptions;
+            if (this.isSearchEnabled()) {
+                this.applyLocalFilter(this.searchControl.value || '');
+            }
+            else {
+                this.setVisibleOptions(safeOptions);
+            }
+        });
+    }
+    initializeDeferredQueries() {
+        this.deferredQuery$
+            .pipe(switchMap$1((query) => {
+            if (query.kind === 'close') {
+                const selected = this.selectedValues();
+                // Preserve a disabled loading option when the closed select
+                // would otherwise contain no option and could not reopen.
+                return of({ loading: !this.isSearchEnabled() && selected.length === 0, options: selected, sourceOptions: undefined });
+            }
+            const search = query.value || '';
+            const searchLength = search.trim().length;
+            const isBelowMinimumLength = searchLength > 0 && searchLength < (this.searchOptions.minLength ?? 0);
+            if (query.kind === 'search' && isBelowMinimumLength) {
+                if (this.isDeferredSourceLoaded) {
+                    return of({ loading: false, options: this.sourceOptions, sourceOptions: undefined });
+                }
+                const options$ = this.deferredOptionsRequest$ ?? this.resolveOptions();
+                return concat(of({ loading: true, options: [], sourceOptions: undefined }), options$.pipe(map$1((options) => options ?? []), map$1((sourceOptions) => ({ loading: false, options: sourceOptions, sourceOptions }))));
+            }
+            if (query.kind === 'search' && this.searchOptions.mode !== 'remote' && this.isDeferredSourceLoaded) {
+                return of({ loading: false, options: this.filterOptions(this.sourceOptions, search), sourceOptions: undefined });
+            }
+            const options$ = this.searchOptions.mode === 'remote' && typeof this.field.options === 'function' && searchLength > 0
+                ? this.resolveOptions(search)
+                : (this.deferredOptionsRequest$ ?? this.resolveOptions());
+            return concat(of({ loading: true, options: [], sourceOptions: undefined }), options$.pipe(map$1((options) => options ?? []), map$1((sourceOptions) => ({
+                loading: false,
+                sourceOptions: this.searchOptions.mode === 'remote' && searchLength > 0 ? undefined : sourceOptions,
+                options: this.searchOptions.mode === 'remote' ? sourceOptions : this.filterOptions(sourceOptions, search),
+            }))));
+        }), takeUntil(this._onDestroy))
+            .subscribe(({ loading, options, sourceOptions }) => {
+            this.isLoading.set(loading);
+            if (!loading) {
+                if (sourceOptions !== undefined) {
+                    this.sourceOptions = sourceOptions;
+                    this.isDeferredSourceLoaded = true;
+                }
+                this.setVisibleOptions(options);
+            }
+        });
+    }
+    resolveOptions(search) {
+        if (isObservable(this.field.options)) {
+            return this.field.options;
+        }
+        if (typeof this.field.options === 'function') {
+            return this.field.options(search, this.group.getRawValue());
+        }
+        return of(this.field.options ?? []);
+    }
+    applyLocalFilter(value) {
+        const searchLength = value.trim().length;
+        const options = searchLength > 0 && searchLength < (this.searchOptions.minLength ?? 0) ? this.sourceOptions : this.filterOptions(this.sourceOptions, value);
+        this.setVisibleOptions(options);
+    }
+    setVisibleOptions(options) {
+        this.visibleOptions = options;
+        this.filteredOptions.set(options);
+        this.updateSelectAllState(this.group.controls[this.field.name].value);
+        this.changeDetectorRef.markForCheck();
+    }
+    filterOptions(options, value) {
+        const search = value.trim().toLocaleLowerCase();
+        if (!search) {
+            return options;
+        }
+        const keys = this.searchOptions.keys ?? [];
+        return options.filter((option) => {
+            const keyMatch = keys.some((key) => this.normalizeSearchValue(option?.[key]).includes(search));
+            const propertyMatch = this.field.property ? this.normalizeSearchValue(option?.[this.field.property]).includes(search) : false;
+            return keyMatch || propertyMatch || (!keys.length && !this.field.property && this.normalizeSearchValue(option).includes(search));
+        });
+    }
+    normalizeSearchValue(value) {
+        return value == null ? '' : String(value).toLocaleLowerCase();
+    }
+    installMatSelectScrollCorrection() {
+        if (this.restoreMatSelectScroll || (!this.isSearchEnabled() && !this.field.multiple)) {
+            return;
+        }
+        const matSelect = this.matSelect();
+        if (!matSelect) {
+            return;
+        }
+        const originalScrollOptionIntoView = matSelect._scrollOptionIntoView;
+        matSelect._scrollOptionIntoView = (index) => {
+            const options = matSelect.options.toArray();
+            const option = options[index];
+            const optionElement = option?._getHostElement();
+            if (optionElement?.classList.contains('kles-select-search-option')) {
+                const firstOptionIndex = options.findIndex((candidate) => {
+                    const element = candidate._getHostElement();
+                    return !candidate.disabled && !element.classList.contains('kles-hidden-selected-option');
+                });
+                if (firstOptionIndex >= 0 && matSelect._keyManager.activeItemIndex !== firstOptionIndex) {
+                    matSelect._keyManager.setActiveItem(firstOptionIndex);
+                }
+                return;
+            }
+            originalScrollOptionIntoView.call(matSelect, index);
+            requestAnimationFrame(() => this.keepOptionVisible(option?._getHostElement()));
+        };
+        this.restoreMatSelectScroll = () => {
+            matSelect._scrollOptionIntoView = originalScrollOptionIntoView;
+            this.restoreMatSelectScroll = undefined;
+        };
+    }
+    keepOptionVisible(activeOption) {
+        const panel = this.matSelect()?.panel?.nativeElement;
+        if (!panel || !activeOption || !panel.contains(activeOption)) {
+            return;
+        }
+        const options = panel.querySelectorAll('.mat-mdc-option:not(.kles-select-search-option):not(.kles-hidden-selected-option)');
+        if (activeOption === options.item(0)) {
+            panel.scrollTop = 0;
+            return;
+        }
+        if (activeOption === options.item(options.length - 1)) {
+            panel.scrollTop = panel.scrollHeight;
+            return;
+        }
+        const panelRect = panel.getBoundingClientRect();
+        const fixedHeader = panel.querySelector('.selectAll') ?? panel.querySelector('.kles-select-search-option');
+        const visibleTop = fixedHeader?.getBoundingClientRect().bottom ?? panelRect.top;
+        const optionRect = activeOption.getBoundingClientRect();
+        if (optionRect.top < visibleTop) {
+            panel.scrollTop += optionRect.top - visibleTop;
+        }
+        else if (optionRect.bottom > panelRect.bottom) {
+            panel.scrollTop += optionRect.bottom - panelRect.bottom;
+        }
+    }
+    selectedValues() {
+        const value = this.group.controls[this.field.name].value;
+        if (value === undefined || value === null) {
+            return [];
+        }
+        return Array.isArray(value) ? value : [value];
+    }
+    updateSelectAllState(values) {
+        if (!this.field.multiple) {
+            return;
+        }
+        const selected = Array.isArray(values) ? values : [];
+        const enabledOptions = this.visibleOptions.filter((option) => !option?.disabled);
+        const selectedCount = enabledOptions.filter((option) => selected.some((value) => this.compareFn(value, option))).length;
+        const allSelected = enabledOptions.length > 0 && selectedCount === enabledOptions.length;
+        this.selectAllIndeterminate.set(selectedCount > 0 && !allSelected);
+        this.selectAllControl.setValue(allSelected, { emitEvent: false });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: KlesFormSelectComponent, isStandalone: true, selector: "kles-form-select", viewQueries: [{ propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true, isSignal: true }, { propertyName: "virtualViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" [color]="color()" [formGroup]="group" [appearance]="appearance()">
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
+            }
+
+            <mat-select
+                [matTooltip]="tooltip()"
+                [attr.id]="field.id"
+                [ngClass]="ngClass()"
+                [compareWith]="compareFn"
+                [panelClass]="panelClasses()"
+                [panelWidth]="field.panelWidth || 'auto'"
+                [placeholder]="placeholder()"
+                [formControlName]="field.name"
+                [multiple]="field.multiple"
+                (openedChange)="onOpenedChange($event)"
+                (focus)="onFocus()"
+                (blur)="onBlur()"
+            >
+                @if (field.triggerComponent) {
+                    <mat-select-trigger>
+                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field" />
+                    </mat-select-trigger>
+                }
+
+                @if (isSearchEnabled()) {
+                    <mat-option>
+                        <kles-select-search-input [control]="searchControl" [placeholder]="searchOptions.placeholder || intl.search" [ariaLabel]="searchOptions.ariaLabel || intl.search" [clearAriaLabel]="intl.clearSearch" [searching]="isLoading()" />
+                    </mat-option>
+                }
+
+                @if (!isLoading()) {
+                    @if (field.multiple) {
+                        <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" [indeterminate]="selectAllIndeterminate()" (change)="toggleVisibleOptions($event)">
+                            {{ intl.selectAll }}
+                        </mat-checkbox>
+                    }
+
+                    @if (field.virtualScroll) {
+                        <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 48" [style.height.px]="5 * (field.itemSize || 48)">
+                            @if (!field.autocompleteComponent) {
+                                <mat-option *cdkVirtualFor="let item of filteredOptions()" [value]="item" [disabled]="item?.disabled">
+                                    {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                </mat-option>
+                            } @else {
+                                <mat-option *cdkVirtualFor="let item of filteredOptions()" [value]="item" [disabled]="item?.disabled">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field" />
+                                </mat-option>
+                            }
+                        </cdk-virtual-scroll-viewport>
+                    } @else {
+                        @if (!field.autocompleteComponent) {
+                            @for (item of filteredOptions(); track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">
+                                    {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                </mat-option>
+                            }
+                        } @else {
+                            @for (item of filteredOptions(); track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field" />
+                                </mat-option>
+                            }
+                        }
+                    }
+
+                    @for (item of getHiddenSelectedOptions(); track item) {
+                        <mat-option [value]="item" class="kles-hidden-selected-option">
+                            @if (!field.autocompleteComponent) {
+                                {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                            } @else {
+                                <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field" />
+                            }
+                        </mat-option>
+                    }
+                } @else {
+                    <mat-option class="hide-checkbox" disabled>
+                        <div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20" /></div>
+                    </mat-option>
+                }
+            </mat-select>
+
+            @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: ["kles-form-select mat-form-field{width:100%}\n", "kles-form-select .suffix{display:flex;align-items:center}\n", ".kles-select-panel .loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".kles-select-panel .selectAll{padding:0 16px 0 5px!important;display:flex!important}\n", ".kles-select-panel .selectAll .mdc-form-field{width:100%}\n", ".kles-select-panel .selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", ".kles-select-panel .selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", ".kles-select-panel .kles-hidden-selected-option{display:none!important}\n", ".kles-select-panel .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n", ".kles-select-panel:not(.kles-select-virtual-panel) .selectAll{position:sticky;top:-8px;z-index:1;background:var(--mat-select-panel-background-color, var(--mat-sys-surface-container, white))}\n", ".kles-select-panel.kles-select-has-search:not(.kles-select-virtual-panel) .selectAll{top:40px}\n", "div.kles-select-panel.kles-select-virtual-panel{display:flex;flex-direction:column;overflow:hidden}\n", ".kles-select-panel.kles-select-virtual-panel .kles-select-search-option,.kles-select-panel.kles-select-virtual-panel .selectAll{flex:0 0 48px}\n", ".kles-select-panel.kles-select-virtual-panel cdk-virtual-scroll-viewport{flex:1 1 auto;min-height:0;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.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$1, 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: i4$2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4$2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4$2.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: "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: "component", type: KlesSelectSearchInputComponent, selector: "kles-select-search-input", inputs: ["control", "placeholder", "ariaLabel", "clearAriaLabel", "searching"] }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }], encapsulation: i0.ViewEncapsulation.None }); }
+};
+KlesFormSelectComponent = __decorate([
+    FieldMapper({ type: EnumType.select })
+], KlesFormSelectComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: KlesFormSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kles-form-select', template: `
+        <mat-form-field [subscriptSizing]="field.subscriptSizing" [color]="color()" [formGroup]="group" [appearance]="appearance()">
+            @if (label()) {
+                <mat-label>{{ label() }}</mat-label>
+            }
+
+            <mat-select
+                [matTooltip]="tooltip()"
+                [attr.id]="field.id"
+                [ngClass]="ngClass()"
+                [compareWith]="compareFn"
+                [panelClass]="panelClasses()"
+                [panelWidth]="field.panelWidth || 'auto'"
+                [placeholder]="placeholder()"
+                [formControlName]="field.name"
+                [multiple]="field.multiple"
+                (openedChange)="onOpenedChange($event)"
+                (focus)="onFocus()"
+                (blur)="onBlur()"
+            >
+                @if (field.triggerComponent) {
+                    <mat-select-trigger>
+                        <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field" />
+                    </mat-select-trigger>
+                }
+
+                @if (isSearchEnabled()) {
+                    <mat-option>
+                        <kles-select-search-input [control]="searchControl" [placeholder]="searchOptions.placeholder || intl.search" [ariaLabel]="searchOptions.ariaLabel || intl.search" [clearAriaLabel]="intl.clearSearch" [searching]="isLoading()" />
+                    </mat-option>
+                }
+
+                @if (!isLoading()) {
+                    @if (field.multiple) {
+                        <mat-checkbox class="selectAll mat-mdc-option mdc-list-item" [formControl]="selectAllControl" [indeterminate]="selectAllIndeterminate()" (change)="toggleVisibleOptions($event)">
+                            {{ intl.selectAll }}
+                        </mat-checkbox>
+                    }
+
+                    @if (field.virtualScroll) {
+                        <cdk-virtual-scroll-viewport [itemSize]="field.itemSize || 48" [style.height.px]="5 * (field.itemSize || 48)">
+                            @if (!field.autocompleteComponent) {
+                                <mat-option *cdkVirtualFor="let item of filteredOptions()" [value]="item" [disabled]="item?.disabled">
+                                    {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                </mat-option>
+                            } @else {
+                                <mat-option *cdkVirtualFor="let item of filteredOptions()" [value]="item" [disabled]="item?.disabled">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field" />
+                                </mat-option>
+                            }
+                        </cdk-virtual-scroll-viewport>
+                    } @else {
+                        @if (!field.autocompleteComponent) {
+                            @for (item of filteredOptions(); track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">
+                                    {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                                </mat-option>
+                            }
+                        } @else {
+                            @for (item of filteredOptions(); track item) {
+                                <mat-option [value]="item" [disabled]="item?.disabled">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field" />
+                                </mat-option>
+                            }
+                        }
+                    }
+
+                    @for (item of getHiddenSelectedOptions(); track item) {
+                        <mat-option [value]="item" class="kles-hidden-selected-option">
+                            @if (!field.autocompleteComponent) {
+                                {{ (field.property ? item[field.property] : item) | klesTransform: field.pipeTransform }}
+                            } @else {
+                                <ng-container klesComponent [component]="field.autocompleteComponent" [value]="item" [field]="field" />
+                            }
+                        </mat-option>
+                    }
+                } @else {
+                    <mat-option class="hide-checkbox" disabled>
+                        <div class="loadingSelect">{{ intl.loading }}... <mat-spinner class="spinner" diameter="20" /></div>
+                    </mat-option>
+                }
+            </mat-select>
+
+            @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>
+    `, encapsulation: ViewEncapsulation.None, standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        KlesTransformPipe,
+                        MatErrorMessageDirective,
+                        MatProgressSpinner,
+                        MatHint,
+                        MatOption$1,
+                        KlesComponentDirective,
+                        ScrollingModule,
+                        MatSelectTrigger,
+                        MatSelect,
+                        MatTooltip,
+                        MatLabel,
+                        MatFormField,
+                        MatCheckbox,
+                        KlesSelectSearchInputComponent,
+                    ], styles: ["kles-form-select mat-form-field{width:100%}\n", "kles-form-select .suffix{display:flex;align-items:center}\n", ".kles-select-panel .loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".kles-select-panel .selectAll{padding:0 16px 0 5px!important;display:flex!important}\n", ".kles-select-panel .selectAll .mdc-form-field{width:100%}\n", ".kles-select-panel .selectAll .mdc-form-field .mdc-label{width:100%;min-height:48px;align-items:center;display:flex}\n", ".kles-select-panel .selectAll .mdc-form-field .mdc-checkbox__ripple{display:none!important}\n", ".kles-select-panel .kles-hidden-selected-option{display:none!important}\n", ".kles-select-panel .hide-checkbox .mat-pseudo-checkbox{display:none!important}\n", ".kles-select-panel:not(.kles-select-virtual-panel) .selectAll{position:sticky;top:-8px;z-index:1;background:var(--mat-select-panel-background-color, var(--mat-sys-surface-container, white))}\n", ".kles-select-panel.kles-select-has-search:not(.kles-select-virtual-panel) .selectAll{top:40px}\n", "div.kles-select-panel.kles-select-virtual-panel{display:flex;flex-direction:column;overflow:hidden}\n", ".kles-select-panel.kles-select-virtual-panel .kles-select-search-option,.kles-select-panel.kles-select-virtual-panel .selectAll{flex:0 0 48px}\n", ".kles-select-panel.kles-select-virtual-panel cdk-virtual-scroll-viewport{flex:1 1 auto;min-height:0;width:100%}\n"] }]
+        }], propDecorators: { matSelect: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSelect), { isSignal: true }] }], virtualViewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }] } });
+
 function autocompleteObjectValidator(optional) {
     return (control) => {
         if ((control.value === null || control.value === undefined) && !optional)
@@ -6929,5 +6497,5 @@ function autocompleteStringValidator(validOptions, optional) {
  * Generated bundle index. Do not edit.
  */
 
-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, KlesFormChipGridComponent, 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 };
+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, KlesFormChipGridComponent, 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, 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