@3kles/kles-material-dynamicforms 17.7.6 → 17.7.8

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

@@ -886,6 +886,9 @@ class KlesFieldAbstract {
             }
         }
     }
+    isPending() {
+        return (this.group.controls[this.field.name].pending || this.field.pending);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: KlesFieldAbstract, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.11", type: KlesFieldAbstract, host: { properties: { "attr.klesDirective": "this.directive" } }, ngImport: i0 }); }
 }
@@ -988,17 +991,12 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
             this.options$ = of(this.field.options);
         }
         this.filteredOption = this.group.get(this.field.name).valueChanges
-            .pipe(startWith(''), 
-        // map(data => data ? this.filterData(data) : this.field.options.slice())
-        switchMap(data => data ? this.filterData(data) : this.options$));
+            .pipe(startWith(''), switchMap(data => data ? this.filterData(data) : this.options$));
         if (!this.field.maxLength) {
             this.field.maxLength = 524288; // Max default input W3C
         }
         super.ngOnInit();
     }
-    isPending() {
-        return (this.group.controls[this.field.name].pending || this.field.pending);
-    }
     filterData(value) {
         let filterValue;
         if (typeof value === 'string' && Object.prototype.toString.call(value) === '[object String]') {
@@ -1010,10 +1008,7 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
         if (this.field.property) {
             return this.options$
                 .pipe(map(options => options.filter(option => option[this.field.property].toLowerCase().indexOf(filterValue) === 0)));
-            // return this.field.options
-            //     .filter(data => data[this.field.property].toLowerCase().indexOf(filterValue) === 0);
         }
-        // return this.field.options.filter(data => data.toLowerCase().indexOf(filterValue) === 0);
         return this.options$.pipe(map(options => options.filter(option => option.toLowerCase().indexOf(filterValue) === 0)));
     }
     displayFn(value) {
@@ -1068,20 +1063,22 @@ let KlesFormInputComponent = class KlesFormInputComponent extends KlesFieldAbstr
             <mat-hint>{{field.hint}}</mat-hint>
         }
 
-        @if (isPending()) {
-            <mat-spinner matSuffix mode="indeterminate" diameter="21"></mat-spinner>
-        }
-
-        @if (field.subComponents || field.clearable) {
-            <div matSuffix>
-                <ng-content></ng-content>
+        @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: ["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", "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 })
@@ -1125,20 +1122,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             <mat-hint>{{field.hint}}</mat-hint>
         }
 
-        @if (isPending()) {
-            <mat-spinner matSuffix mode="indeterminate" diameter="21"></mat-spinner>
-        }
-
-        @if (field.subComponents || field.clearable) {
-            <div matSuffix>
-                <ng-content></ng-content>
+        @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>
-    `, styles: ["mat-form-field{width:100%}\n"] }]
+    `, styles: [".suffix{display:flex;align-items:center}\n", "mat-form-field{width:100%}\n"] }]
         }] });
 
 class KlesTransformPipe {
@@ -2829,29 +2828,22 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
                 this.options$ = of(this.field.options);
             }
         }
+        this.options$.pipe(takeUntil(this._onDestroy)).subscribe((options) => {
+            this.optionsFiltered$.next(options);
+        });
         this.searchControl.valueChanges.pipe(takeUntil(this._onDestroy), debounceTime(this.field.debounceTime || 0), startWith(this.searchControl.value), switchMap(value => {
-            return concat(of({ loading: true, options: [] }), this.onSearchChange(value).pipe(map((options) => ({ loading: false, options }))));
+            return concat(of({ loading: true, options: [] }), this.onSearchChange(value).pipe(take(1), map((options) => ({ loading: false, options }))));
         })).subscribe(({ loading, options }) => {
             this.isLoading = loading;
             this.optionsFiltered$.next(options);
             this.ref.markForCheck();
         });
         if (this.field.multiple) {
-            this.group.controls[this.field.name]
-                .valueChanges.pipe(takeUntil(this._onDestroy), startWith(this.group.controls[this.field.name].value), map((selected) => ((this.field.property && selected) ? selected?.map(s => s[this.field.property]) : selected)), switchMap(selected => {
-                return this.optionsFiltered$.pipe(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);
+            this.updateSelectAllControl(this.group.controls[this.field.name].value);
+            this.group.controls[this.field.name].registerOnChange((values, emitViewToModelChange) => {
+                if (emitViewToModelChange) {
+                    this.updateSelectAllControl(values);
+                }
             });
         }
     }
@@ -2863,12 +2855,12 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
         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.slice());
+                    this.group.controls[this.field.name].patchValue(options.slice(), { emitModelToViewChange: false });
                 }
             });
         }
         else {
-            this.group.controls[this.field.name].patchValue([]);
+            this.group.controls[this.field.name].patchValue([], { emitModelToViewChange: false });
         }
     }
     openChangeEvent() {
@@ -2877,8 +2869,9 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
             return this.onOpenChange(isOpen);
         }))
             .subscribe((options) => {
-            this.options$.next(options);
             this.isLoading = false;
+            this.options$.next(options);
+            this.optionsFiltered$.next(options);
             this.ref.markForCheck();
         });
     }
@@ -2941,6 +2934,29 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
             }
         }
     }
+    selectionChange(selection) {
+        if (this.field.multiple) {
+            this.updateSelectAllControl(selection.value);
+        }
+    }
+    updateSelectAllControl(values) {
+        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 });
+            });
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: KlesFormSelectSearchComponent, deps: [{ token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.11", type: KlesFormSelectSearchComponent, 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]="field.color" [formGroup]="group" [appearance]="field.appearance">
@@ -2950,7 +2966,7 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
 
         <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
         (openedChange)="openChange($event)" [compareWith]="compareFn" [panelWidth]="field.panelWidth || 'auto'"
-        [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
+        [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple"  (selectionChange)="selectionChange($event)">
         @if (field.triggerComponent) {
             <mat-select-trigger>
                 <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
@@ -3058,15 +3074,20 @@ class KlesFormSelectSearchComponent extends KlesFieldAbstract {
             <mat-hint>{{field.hint}}</mat-hint>
         }
 
-        @if (field.subComponents || field.clearable) {
-            <div matSuffix>
-                <ng-content></ng-content>
-            </div>
-        }
+        @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", "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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: 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: 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { 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$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i10.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"], outputs: ["toggleAll"] }, { 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: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
+`, isInline: true, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".suffix{display:flex;align-items:center}\n", "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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["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: 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: 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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { 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$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i10.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"], outputs: ["toggleAll"] }, { 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: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: KlesTransformPipe, name: "klesTransform" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: KlesFormSelectSearchComponent, decorators: [{
             type: Component,
@@ -3078,7 +3099,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
         <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
         (openedChange)="openChange($event)" [compareWith]="compareFn" [panelWidth]="field.panelWidth || 'auto'"
-        [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
+        [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple"  (selectionChange)="selectionChange($event)">
         @if (field.triggerComponent) {
             <mat-select-trigger>
                 <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
@@ -3186,15 +3207,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             <mat-hint>{{field.hint}}</mat-hint>
         }
 
-        @if (field.subComponents || field.clearable) {
-            <div matSuffix>
-                <ng-content></ng-content>
-            </div>
-        }
+        @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>
-`, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\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"] }]
+`, styles: [".loadingSelect{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n", ".suffix{display:flex;align-items:center}\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"] }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { cdkVirtualScrollViewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
@@ -3815,8 +3841,8 @@ let KlesFormRangeComponent = class KlesFormRangeComponent extends KlesFieldAbstr
             <input matEndDate formControlName="end" [placeholder]="(field.placeholder?.end ? field.placeholder?.end : '') | translate">
         </mat-date-range-input>
 
-        <div matSuffix>
-            <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+        <div matSuffix class="suffix">
+            <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
             <ng-content></ng-content>
         </div>
 
@@ -3827,7 +3853,7 @@ let KlesFormRangeComponent = class KlesFormRangeComponent extends KlesFieldAbstr
 
         <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: "directive", type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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: i4$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
+    `, isInline: true, styles: [".suffix{display:flex;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: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { 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: i4$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i4$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatErrorMessageDirective, selector: "[matErrorMessage]", inputs: ["validations", "asyncValidations"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] }); }
 };
 KlesFormRangeComponent = __decorate([
     FieldMapper({ type: EnumType.range, factory: (field) => (new KlesFormRange(field).create()) })
@@ -3845,8 +3871,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             <input matEndDate formControlName="end" [placeholder]="(field.placeholder?.end ? field.placeholder?.end : '') | translate">
         </mat-date-range-input>
 
-        <div matSuffix>
-            <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+        <div matSuffix class="suffix">
+            <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
             <ng-content></ng-content>
         </div>
 
@@ -3857,7 +3883,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
 
         <mat-error matErrorMessage [validations]="field.validations" [asyncValidations]="field.asyncValidations"></mat-error>
         </mat-form-field>
-    `, styles: ["mat-form-field{width:100%}\n"] }]
+    `, styles: [".suffix{display:flex;align-items:center}\n", "mat-form-field{width:100%}\n"] }]
         }] });
 
 class KlesFormSelectLazySearchComponent extends KlesFormSelectSearchComponent {