@3kles/kles-material-dynamicforms 17.8.5 → 17.8.7

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

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, Injector, Directive, Input, EventEmitter, Output, Injectable, NgModule, HostBinding, Pipe, ViewChild, ViewChildren, signal, forwardRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
+import { Component, Injector, Directive, Input, EventEmitter, Output, Injectable, NgModule, HostBinding, signal, Pipe, ViewChild, ViewChildren, forwardRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
 import { FormControl, Validators, FormControlDirective, FormControlName, FormArray, FormGroup, NG_VALUE_ACCESSOR, UntypedFormGroup, UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { concat, of, Subject, Observable, BehaviorSubject, ReplaySubject } from 'rxjs';
-import { take, catchError, map, takeUntil, startWith, switchMap, debounceTime, shareReplay, distinctUntilChanged } from 'rxjs/operators';
+import { concat, of, Subject, Observable, combineLatest, BehaviorSubject, ReplaySubject } from 'rxjs';
+import { take, catchError, map, takeUntil, distinctUntilChanged, filter, switchMap, startWith, debounceTime, shareReplay } from 'rxjs/operators';
 import * as i4 from '@angular/material/form-field';
 import { MatFormFieldModule, MatFormField } from '@angular/material/form-field';
 import * as i5$1 from '@angular/material/core';
@@ -980,24 +980,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstract {
+    constructor() {
+        super(...arguments);
+        this.isFocused = new Subject();
+        this.isLoading = signal(false);
+    }
     ngOnInit() {
-        if (this.field.options instanceof Observable) {
-            this.options$ = this.field.options;
-        }
-        else if (this.field.options instanceof Function) {
-            this.options$ = this.field.options();
+        if (this.field.lazy) {
+            this.options$ = this.isFocused.pipe(distinctUntilChanged(), filter((isFocused) => isFocused), switchMap((isFocused) => {
+                if (isFocused) {
+                    let obs$;
+                    if (this.field.options instanceof Observable) {
+                        obs$ = this.field.options;
+                    }
+                    else if (this.field.options instanceof Function) {
+                        obs$ = this.field.options();
+                    }
+                    else {
+                        obs$ = of(this.field.options);
+                    }
+                    return concat(of({ loading: true, options: [] }), obs$.pipe(map((options) => {
+                        return { loading: false, options };
+                    })));
+                }
+                else {
+                    return of({ loading: false, options: [] });
+                }
+            }));
         }
         else {
-            this.options$ = of(this.field.options);
+            if (this.field.options instanceof Observable) {
+                this.options$ = concat(of({ loading: true, options: [] }), this.field.options.pipe(map((options) => {
+                    return { loading: false, options };
+                })));
+            }
+            else if (this.field.options instanceof Function) {
+                this.options$ = concat(of({ loading: true, options: [] }), this.field.options().pipe(map((options) => {
+                    return { loading: false, options };
+                })));
+            }
+            else {
+                this.options$ = of({ loading: false, options: this.field.options });
+            }
         }
-        this.filteredOption = this.group.get(this.field.name).valueChanges
-            .pipe(startWith(''), switchMap(data => data ? this.filterData(data) : this.options$));
+        this.filteredOption$ = concat(combineLatest([this.group.get(this.field.name).valueChanges.pipe(startWith('')), this.options$])
+            .pipe(map(([data, response]) => {
+            if (response.loading) {
+                return response;
+            }
+            else {
+                return { loading: false, options: ((data && response.options) ? this.filterData(data, response.options) : response.options) };
+            }
+        })));
         if (!this.field.maxLength) {
             this.field.maxLength = 524288; // Max default input W3C
         }
         super.ngOnInit();
     }
-    filterData(value) {
+    onFocus() {
+        if (this.field.autocomplete && this.field.lazy) {
+            this.isFocused.next(true);
+        }
+    }
+    filterData(value, options) {
         let filterValue;
         if (typeof value === 'string' && Object.prototype.toString.call(value) === '[object String]') {
             filterValue = value.toLowerCase();
@@ -1006,10 +1051,9 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
             filterValue = value[this.field.property].toLowerCase();
         }
         if (this.field.property) {
-            return this.options$
-                .pipe(map(options => options.filter(option => option[this.field.property].toLowerCase().indexOf(filterValue) === 0)));
+            return options.filter(option => option[this.field.property].toLowerCase().indexOf(filterValue) === 0);
         }
-        return this.options$.pipe(map(options => options.filter(option => option.toLowerCase().indexOf(filterValue) === 0)));
+        return options.filter(option => option.toLowerCase().indexOf(filterValue) === 0);
     }
     displayFn(value) {
         if (this.field.displayWith) {
@@ -1035,23 +1079,36 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
         @if (field.autocomplete) {
             <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
             [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
-            [matAutocomplete]="auto">
+            [matAutocomplete]="auto"
+            (focus)="onFocus()">
 
             <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
-                @if (!field.autocompleteComponent) {
-                    @for (option of filteredOption | async; track option) {
-                        <mat-option [value]="option">
-                            {{field.property ? option[field.property] : option}}
-                        </mat-option>
-                    }
-                }
-                @else {
-                    @for (option of filteredOption | async; track option) {
-                        <mat-option [value]="option">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
-                            </ng-container>
+                @if(filteredOption$ | async; as filteredOption){
+                    @if(filteredOption.loading){
+                        <mat-option disabled>
+                            <div class="loadingSelect">{{'loading' | translate}}... 
+                                <mat-spinner class="spinner" diameter="20"></mat-spinner>
+                            </div>
                         </mat-option>
+                    }@else{
+                        @if (!field.autocompleteComponent) {
+                            @for (option of filteredOption.options; track option) {
+                                <mat-option [value]="option">
+                                    {{field.property ? option[field.property] : option}}
+                                </mat-option>
+                            }
+                        }
+                        @else {
+                            @for (option of filteredOption.options; track option) {
+                                <mat-option [value]="option">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
+                                    </ng-container>
+                                </mat-option>
+                            }
+                        }
+                    
                     }
+                    
                 }
             </mat-autocomplete>
         }
@@ -1078,7 +1135,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", "mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.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: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    `, 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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.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: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
 };
 KlesFormInputComponent = __decorate([
     FieldMapper({ type: EnumType.input })
@@ -1094,23 +1151,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         @if (field.autocomplete) {
             <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
             [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
-            [matAutocomplete]="auto">
+            [matAutocomplete]="auto"
+            (focus)="onFocus()">
 
             <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
-                @if (!field.autocompleteComponent) {
-                    @for (option of filteredOption | async; track option) {
-                        <mat-option [value]="option">
-                            {{field.property ? option[field.property] : option}}
-                        </mat-option>
-                    }
-                }
-                @else {
-                    @for (option of filteredOption | async; track option) {
-                        <mat-option [value]="option">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
-                            </ng-container>
+                @if(filteredOption$ | async; as filteredOption){
+                    @if(filteredOption.loading){
+                        <mat-option disabled>
+                            <div class="loadingSelect">{{'loading' | translate}}... 
+                                <mat-spinner class="spinner" diameter="20"></mat-spinner>
+                            </div>
                         </mat-option>
+                    }@else{
+                        @if (!field.autocompleteComponent) {
+                            @for (option of filteredOption.options; track option) {
+                                <mat-option [value]="option">
+                                    {{field.property ? option[field.property] : option}}
+                                </mat-option>
+                            }
+                        }
+                        @else {
+                            @for (option of filteredOption.options; track option) {
+                                <mat-option [value]="option">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
+                                    </ng-container>
+                                </mat-option>
+                            }
+                        }
+                    
                     }
+                    
                 }
             </mat-autocomplete>
         }
@@ -1137,7 +1207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
   
     </mat-form-field>
-    `, styles: [".suffix{display:flex;align-items:center}\n", ".field-bottom .mat-mdc-form-field-bottom-align:before{content:none!important}\n", "mat-form-field{width:100%}\n"] }]
+    `, 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"] }]
         }] });
 
 class KlesTransformPipe {
@@ -2670,20 +2740,32 @@ class KlesFormInputClearableComponent extends KlesFormInputComponent {
             [matAutocomplete]="auto">
 
             <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
-                @if (!field.autocompleteComponent) {
-                    @for (option of filteredOption | async; track option) {
-                        <mat-option [value]="option">
-                            {{field.property ? option[field.property] : option}}
-                        </mat-option>
-                    }
-                }
-                @else {
-                    @for (option of filteredOption | async; track option) {
-                        <mat-option [value]="option">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
-                            </ng-container>
+                @if(filteredOption$ | async; as filteredOption){
+                    @if(filteredOption.loading){
+                        <mat-option class="hide-checkbox" disabled>
+                            <div class="loadingSelect">{{'loading' | translate}}... 
+                                <mat-spinner class="spinner" diameter="20"></mat-spinner>
+                            </div>
                         </mat-option>
+                    }@else{
+                        @if (!field.autocompleteComponent) {
+                            @for (option of filteredOption.options; track option) {
+                                <mat-option [value]="option">
+                                    {{field.property ? option[field.property] : option}}
+                                </mat-option>
+                            }
+                        }
+                        @else {
+                            @for (option of filteredOption.options; track option) {
+                                <mat-option [value]="option">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
+                                    </ng-container>
+                                </mat-option>
+                            }
+                        }
+                    
                     }
+                    
                 }
             </mat-autocomplete>
         }
@@ -2704,7 +2786,7 @@ class KlesFormInputClearableComponent extends KlesFormInputComponent {
 
         <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
     </mat-form-field>
-    `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.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: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    `, 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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.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: "directive", type: i8.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: KlesComponentDirective, selector: "[klesComponent]", inputs: ["component", "value", "field"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: KlesFormInputClearableComponent, decorators: [{
             type: Component,
@@ -2720,20 +2802,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             [matAutocomplete]="auto">
 
             <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
-                @if (!field.autocompleteComponent) {
-                    @for (option of filteredOption | async; track option) {
-                        <mat-option [value]="option">
-                            {{field.property ? option[field.property] : option}}
-                        </mat-option>
-                    }
-                }
-                @else {
-                    @for (option of filteredOption | async; track option) {
-                        <mat-option [value]="option">
-                            <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
-                            </ng-container>
+                @if(filteredOption$ | async; as filteredOption){
+                    @if(filteredOption.loading){
+                        <mat-option class="hide-checkbox" disabled>
+                            <div class="loadingSelect">{{'loading' | translate}}... 
+                                <mat-spinner class="spinner" diameter="20"></mat-spinner>
+                            </div>
                         </mat-option>
+                    }@else{
+                        @if (!field.autocompleteComponent) {
+                            @for (option of filteredOption.options; track option) {
+                                <mat-option [value]="option">
+                                    {{field.property ? option[field.property] : option}}
+                                </mat-option>
+                            }
+                        }
+                        @else {
+                            @for (option of filteredOption.options; track option) {
+                                <mat-option [value]="option">
+                                    <ng-container klesComponent [component]="field.autocompleteComponent" [value]="option" [field]="field">
+                                    </ng-container>
+                                </mat-option>
+                            }
+                        }
+                    
                     }
+                    
                 }
             </mat-autocomplete>
         }
@@ -2754,7 +2848,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 
         <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
     </mat-form-field>
-    `, styles: ["mat-form-field{width:100%}\n"] }]
+    `, 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 {