@c10t/nice-component-library 0.0.12 → 0.0.16

package/fesm2022/c10t-nice-component-library.mjs

@@ -18,7 +18,7 @@ import * as i4 from '@angular/material/input';
 import { MAT_INPUT_VALUE_ACCESSOR, MatInputModule } from '@angular/material/input';
 import * as i8 from '@angular/flex-layout/flex';
 import * as i3$1 from 'ngx-toastr';
-import { BehaviorSubject, Subject, of, forkJoin, throwError } from 'rxjs';
+import { BehaviorSubject, Subject, of, forkJoin, debounceTime, distinctUntilChanged, filter, tap, switchMap, throwError } from 'rxjs';
 import * as i5 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i1$4 from '@angular/router';
@@ -46,19 +46,21 @@ import * as i10 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i9$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i3$2 from '@angular/material/card';
+import * as i3$2 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i7$1 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i3$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i3$3 from '@angular/material/progress-bar';
+import * as i3$4 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i4$3 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { NestedTreeControl, FlatTreeControl, CdkTreeModule, CdkTree, CdkTreeNode } from '@angular/cdk/tree';
 import * as i6$1 from '@angular/material/tree';
 import { MatTreeNestedDataSource, MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
-import * as i4$4 from '@angular/material/radio';
+import * as i4$3 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i6$2 from '@angular/material/divider';
-import * as i4$5 from 'ngx-quill';
+import * as i4$4 from 'ngx-quill';
 import { QuillModule } from 'ngx-quill';
 import * as i1$6 from 'jsog-typescript';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -76,7 +78,6 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatSortModule } from '@angular/material/sort';
 import { MatStepperModule } from '@angular/material/stepper';
 import { ScrollingModule as ScrollingModule$1 } from '@angular/cdk-experimental/scrolling';
@@ -154,6 +155,7 @@ var ColumnTypeEnum;
     ColumnTypeEnum["INPUT"] = "INPUT";
     ColumnTypeEnum["LINK"] = "LINK";
     ColumnTypeEnum["STYLE_CSS"] = "STYLE_CSS";
+    ColumnTypeEnum["LIVE_SEARCHING"] = "LIVE_SEARCHING";
 })(ColumnTypeEnum || (ColumnTypeEnum = {}));
 
 var AlignEnum;
@@ -196,6 +198,10 @@ class ColumnModel {
     footer;
     footers = [];
     button;
+    // Dùng cho cva-live-searching
+    displayKey;
+    mappingConfig = {};
+    searchFn;
     title = (e) => `${e}`;
     cell = (e) => `${e}`;
 }
@@ -238,6 +244,15 @@ class OAuth2AuthenticationDto {
     userAuthentication = null;
     authorities = null;
     name = null;
+    orgId = null;
+    orgCode = null;
+    orgName = null;
+    orgType = null;
+    orgForm = null;
+    orgPath = null;
+    orgIsApproveVo = null;
+    sapId = null;
+    voAuthentication = null;
 }
 
 class Authority {
@@ -1611,6 +1626,13 @@ class ValidatorService {
         }
         return validationFns;
     }
+    static generateNsAutocompleteValidators(conditions) {
+        const validationFns = [];
+        if (conditions.required) {
+            validationFns.push(Validators.required);
+        }
+        return validationFns;
+    }
     static getMinMaxDynamic(minOrMax) {
         return minOrMax !== null ? typeof (minOrMax) === 'function' ? minOrMax() : minOrMax : null;
     }
@@ -3939,19 +3961,13 @@ class CvaMultiSelectAutocomplete {
     valueOptionRef = [];
     // Chỉ bằng false khi trong NsSmartTable thôi nhé @@
     isFormControl = true;
+    searchInputRef;
     // Cái này là để gắn khi nó là FormControl trong 1 FormGroup
     formControl;
     filteredOptions = [];
     selectAllChecked = false;
-    _displayString = '';
-    get displayString() {
-        return this._displayString;
-    }
     labelCount = 1;
     cdkVirtualScrollViewPort;
-    get NsValidator() {
-        return ValidatorService;
-    }
     constructor(translateService, injector, ngControl) {
         this.translateService = translateService;
         this.injector = injector;
@@ -3959,6 +3975,19 @@ class CvaMultiSelectAutocomplete {
             ngControl.valueAccessor = this;
         }
     }
+    _displayString = '';
+    get displayString() {
+        return this._displayString;
+    }
+    get NsValidator() {
+        return ValidatorService;
+    }
+    get selectedValue() {
+        return this.value;
+    }
+    set selectedValue(val) {
+        // this.writeValue(val); // Đọc comment bên dưới matSelectionChange
+    }
     ngOnInit() {
         this.callValidator();
     }
@@ -3988,27 +4017,8 @@ class CvaMultiSelectAutocomplete {
                 this.formControl.setValue(this.value);
             }
             this.formControl.updateValueAndValidity();
-            // const ngControl = this.injector.get(NgControl);
-            // if (ngControl && ngControl.control && this.formControl.errors) {
-            //   ngControl.control.setErrors(this.formControl.errors);
-            // }
-            // if (this.formControl.valid) {
-            //     if (this.getRequired()) {
-            //         if (this.value === undefined || this.value === null || this.value === '' || (this.multiple && this.value.length === 0)){
-            //             this.formControl.setErrors({required: true});
-            //         }
-            //     }
-            //
-            //     this.formControl.markAllAsTouched();
-            // }
         }
     }
-    get selectedValue() {
-        return this.value;
-    }
-    set selectedValue(val) {
-        // this.writeValue(val); // Đọc comment bên dưới matSelectionChange
-    }
     propagateChange = (_) => {
         /*NON-EMPTY FOR COMPILE*/
     };
@@ -4034,16 +4044,7 @@ class CvaMultiSelectAutocomplete {
             this.selectedOptionDataChange.emit(this.valueOptionRef);
         }
         this._displayString = this.onDisplayString();
-        // console.log(this._displayString);
-    }
-    // private emitSelectedData(val: MatSelectChange) {
-    //     if (val.value != null && val.value != undefined) {
-    //         const dataArr: SelectModel[] = val.source._selectionModel.selected.map(matOption => {
-    //             return this.options[Number(matOption._getHostElement().getAttribute('data-optionIndex'))];
-    //         });
-    //         this.selectedOptionDataChange.emit(dataArr);
-    //     }
-    // }
+    }
     registerOnChange(fn) {
         this.propagateChange = fn;
     }
@@ -4055,13 +4056,9 @@ class CvaMultiSelectAutocomplete {
             this.options = simpleChanges.options.currentValue;
             this.filteredOptions = this.options;
         }
-        // console.log('CvaMultiSelectAutocomplete - ngOnChanges: ', this.value, this.options);
-        if (this.value != null && this.value != undefined) {
+        if (this.value != null) {
             this.writeValue(this.value);
         }
-        // else if (this.formControl.value) {
-        //     this.writeValue(this.formControl.value);
-        // }
     }
     toggleSelectAll(val) {
         if (val.checked) {
@@ -4204,9 +4201,16 @@ class CvaMultiSelectAutocomplete {
         }
     }
     openChange($event) {
-        if ($event && this.cdkVirtualScrollViewPort) {
-            this.cdkVirtualScrollViewPort.scrollToIndex(0);
-            this.cdkVirtualScrollViewPort.checkViewportSize();
+        if ($event) {
+            if (this.cdkVirtualScrollViewPort) {
+                this.cdkVirtualScrollViewPort.scrollToIndex(0);
+                this.cdkVirtualScrollViewPort.checkViewportSize();
+            }
+            setTimeout(() => {
+                if (this.searchInputRef?.nativeElement) {
+                    this.searchInputRef.nativeElement.focus();
+                }
+            }, 300);
         }
     }
     getItemSize() {
@@ -4218,7 +4222,7 @@ class CvaMultiSelectAutocomplete {
         return height > 200 ? 200 : height;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiSelectAutocomplete, deps: [{ token: i1.TranslateService }, { token: i0.Injector }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaMultiSelectAutocomplete, isStandalone: false, selector: "cva-multi-select-autocomplete", inputs: { placeholder: "placeholder", label: "label", hint: "hint", value: "value", options: "options", disabled: "disabled", errorMessages: "errorMessages", multiple: "multiple", required: "required", isTree: "isTree", treeSymbol: "treeSymbol", sizeOfItemsInListByPixels: "sizeOfItemsInListByPixels", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", isFormControl: "isFormControl" }, outputs: { selectionChange: "selectionChange", selectedOptionDataChange: "selectedOptionDataChange" }, viewQueries: [{ propertyName: "cdkVirtualScrollViewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaMultiSelectAutocomplete, isStandalone: false, selector: "cva-multi-select-autocomplete", inputs: { placeholder: "placeholder", label: "label", hint: "hint", value: "value", options: "options", disabled: "disabled", errorMessages: "errorMessages", multiple: "multiple", required: "required", isTree: "isTree", treeSymbol: "treeSymbol", sizeOfItemsInListByPixels: "sizeOfItemsInListByPixels", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", isFormControl: "isFormControl" }, outputs: { selectionChange: "selectionChange", selectedOptionDataChange: "selectedOptionDataChange" }, viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "cdkVirtualScrollViewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <!-- css labelOutside trong base.theme-->
     <div class="cva-multi-select-autocomplete"
          [ngClass]="{'labelOutside': !!isLabelOutside, 'float_label': !!isFloatLabel && !isLabelOutside}"
@@ -4425,11 +4429,319 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                 type: Output
             }], isFormControl: [{
                 type: Input
+            }], searchInputRef: [{
+                type: ViewChild,
+                args: ['searchInput']
             }], cdkVirtualScrollViewPort: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport, { static: false }]
             }] } });
 
+class CvaLiveSearchingComponent {
+    injector;
+    label = '';
+    placeholder = '';
+    hint = '';
+    required = false;
+    disabled = false;
+    readonly = false;
+    errorMessages = new Map();
+    isLabelOutside = false;
+    isFloatLabel = true;
+    percentOfLabelOutside = 25;
+    suffixFontAwesomeClass = '';
+    displayKey = '';
+    mappingConfig = {};
+    searchFn;
+    onChange = new EventEmitter();
+    // Chỉ bằng false khi trong NsSmartTable thôi nhé @@
+    isFormControl = true;
+    row;
+    columnDef;
+    control = undefined;
+    textControl = new FormControl('');
+    filteredOptions = [];
+    selected;
+    loading = false;
+    searchSub;
+    constructor(injector, ngControl) {
+        this.injector = injector;
+        if (ngControl) {
+            // Hành động này thay cho provide: NG_VALUE_ACCESSOR và gắn ControlValueAccessor này vào parent FormControl
+            ngControl.valueAccessor = this;
+        }
+    }
+    get NsValidator() {
+        return ValidatorService;
+    }
+    ngOnInit() {
+        this.callValidator();
+        this.textValueChangeSubscribe();
+        if (!this.isFormControl && !!this.searchFn && this.row && this.columnDef) {
+            this.writeValue(this.row[this.columnDef]);
+        }
+    }
+    callValidator() {
+        const ngControl = this.injector.get(NgControl);
+        // Nếu parent FormControl khởi tạo xong và formControl chưa có giá trị lưu
+        if (ngControl && !this.control) {
+            // Nếu là NsSmartTable thì phải tự new FormControl còn không thì cứ hóng parent FormControl về ^^
+            if (this.isFormControl) {
+                this.control = ngControl.control ? ngControl.control : undefined;
+            }
+            else {
+                this.control = new FormControl();
+            }
+            // Hành động này gắn validator vào this.formControl
+            // - Nếu this.formControl là parent FormControl thì sẽ show error lên FormGroup
+            // - Nếu this.formControl là new FormControl thì sẽ quét QueryList để check {errors}
+            if (this.control) {
+                if (this.control.validator) {
+                    this.control.setValidators([...ValidatorService.generateNsAutocompleteValidators({
+                            required: this.required,
+                        }), this.control.validator]);
+                }
+                else {
+                    this.control.setValidators([...ValidatorService.generateNsAutocompleteValidators({
+                            required: this.required,
+                        })]);
+                }
+            }
+        }
+        if (this.control) {
+            // Nếu this.formControl thuộc NsSmartTable thì setValue lại
+            if (!this.isFormControl) {
+                this.control.setValue(this.selected);
+            }
+            // Nếu là parent FormControl rồi thì kệ
+            this.control.updateValueAndValidity();
+        }
+    }
+    propagateChange = (_) => {
+        /*NON-EMPTY FOR COMPILE*/
+    };
+    /**
+     * Set the function to be called
+     * when the formControl receives a change event.
+     */
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    /**
+     * Set the function to be called
+     * when the formControl receives a touch event.
+     */
+    registerOnTouched() {
+        /*NON-EMPTY FOR COMPILE*/
+    }
+    /**
+     * Write a new value to the element.
+     */
+    writeValue(obj) {
+        if (!obj || typeof obj !== 'string') {
+            this.selected = {};
+            this.textControl.setValue('', { emitEvent: false });
+            this.updateRowOrFormGroup();
+            return;
+        }
+        const matched = this.filteredOptions.find(opt => {
+            return JSON.stringify(opt[this.displayKey] ?? '') === JSON.stringify(obj ?? '');
+        });
+        if (!matched) {
+            if (!this.searchFn) {
+                return;
+            }
+            // Khi textValueChange chưa chạy không tìm thấy
+            this.searchFn(obj).subscribe(values => {
+                if (values && values.length > 0) {
+                    const emptyObj = {};
+                    emptyObj[this.displayKey] = '';
+                    this.filteredOptions = [emptyObj, ...values];
+                    this.onOptionSelect(obj);
+                }
+            });
+            return;
+        }
+        this.selected = matched;
+        this.textControl.setValue(matched[this.displayKey], { emitEvent: false });
+        this.updateRowOrFormGroup();
+    }
+    onOptionSelect(displayValue) {
+        this.searchSub?.unsubscribe();
+        this.writeValue(displayValue);
+        setTimeout(() => this.textValueChangeSubscribe(), 100);
+    }
+    textValueChangeSubscribe() {
+        this.searchSub = this.textControl.valueChanges.pipe(debounceTime(300), distinctUntilChanged(), filter(text => typeof text === 'string' && text.trim().length > 0), tap(() => this.loading = true), switchMap((text) => {
+            if (typeof text !== 'string' || !text || !text.trim())
+                return of([]);
+            return this.searchFn ? this.searchFn(text) : of([]);
+        }), tap(() => this.loading = false)).subscribe((data) => {
+            const emptyObj = {};
+            emptyObj[this.displayKey] = '';
+            this.filteredOptions = this.selected
+                ? [this.selected, emptyObj, ...data.filter((x) => x[this.displayKey] !== this.selected[this.displayKey])]
+                : data;
+        });
+    }
+    updateRowOrFormGroup() {
+        if (!this.isFormControl && this.row) {
+            for (const targetKey in this.mappingConfig) {
+                const sourceKey = this.mappingConfig[targetKey];
+                this.row[targetKey] = this.selected[sourceKey];
+            }
+        }
+        if (this.isFormControl && this.control?.parent) {
+            for (const targetKey in this.mappingConfig) {
+                const sourceKey = this.mappingConfig[targetKey];
+                const formControl = this.control.parent.get(targetKey);
+                if (formControl)
+                    formControl.setValue(this.selected[sourceKey]);
+            }
+        }
+        this.propagateChange(this.selected[this.displayKey]);
+        this.onChange.emit(this.selected[this.displayKey]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaLiveSearchingComponent, deps: [{ token: i0.Injector }, { token: i1$2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.5", type: CvaLiveSearchingComponent, isStandalone: false, selector: "cva-live-searching", inputs: { label: "label", placeholder: "placeholder", hint: "hint", required: "required", disabled: "disabled", readonly: "readonly", errorMessages: "errorMessages", isLabelOutside: "isLabelOutside", isFloatLabel: "isFloatLabel", percentOfLabelOutside: "percentOfLabelOutside", suffixFontAwesomeClass: "suffixFontAwesomeClass", displayKey: "displayKey", mappingConfig: "mappingConfig", searchFn: "searchFn", isFormControl: "isFormControl", row: "row", columnDef: "columnDef" }, outputs: { onChange: "onChange" }, ngImport: i0, template: `
+    <div class="cva-live-searching"
+         [ngClass]="{'labelOutside': !!isLabelOutside,
+            'float_label': !!isFloatLabel && !isLabelOutside}"
+         fxLayout="row" fxLayout.lt-sm="row wrap">
+      <mat-label *ngIf="isLabelOutside" class="label_width"
+                 fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+        <div class="label">
+          <div>
+            {{ (label ? label : placeholder) | translate }}<span
+            class="required-label-outside">{{ !!required ? '*' : '' }}</span>
+          </div>
+        </div>
+      </mat-label>
+      <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+                      [hideRequiredMarker]="!isFloatLabel"
+                      fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+        <mat-label *ngIf="!isLabelOutside && !!isFloatLabel">
+          {{ (label ? label : placeholder) | translate }}
+        </mat-label>
+        <input type="text"
+               matInput
+               [required]="required"
+               [disabled]="disabled"
+               [placeholder]="placeholder"
+               [formControl]="textControl"
+               [matAutocomplete]="auto"
+               readonly="{{readonly}}" />
+        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption
+                          (optionSelected)="onOptionSelect($event.option.value)">
+          <mat-option *ngIf="loading" class="loading-option">
+            <mat-spinner diameter="20"></mat-spinner>
+          </mat-option>
+          <mat-option *ngFor="let option of filteredOptions" [value]="option[displayKey]">
+            {{ option[displayKey] }}
+          </mat-option>
+        </mat-autocomplete>
+        <i *ngIf="!!suffixFontAwesomeClass" class="input-suffix {{suffixFontAwesomeClass}}" matSuffix></i>
+        <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{ hint | translate }}</mat-hint>
+        <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
+          {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
+        </mat-hint>
+      </mat-form-field>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaLiveSearchingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cva-live-searching',
+                    standalone: false,
+                    template: `
+    <div class="cva-live-searching"
+         [ngClass]="{'labelOutside': !!isLabelOutside,
+            'float_label': !!isFloatLabel && !isLabelOutside}"
+         fxLayout="row" fxLayout.lt-sm="row wrap">
+      <mat-label *ngIf="isLabelOutside" class="label_width"
+                 fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+        <div class="label">
+          <div>
+            {{ (label ? label : placeholder) | translate }}<span
+            class="required-label-outside">{{ !!required ? '*' : '' }}</span>
+          </div>
+        </div>
+      </mat-label>
+      <mat-form-field appearance="outline" [floatLabel]="!!isFloatLabel ? 'always' : 'auto'"
+                      [hideRequiredMarker]="!isFloatLabel"
+                      fxLayout="column" fxFlex="auto" fxFlex.lt-md="100%">
+        <mat-label *ngIf="!isLabelOutside && !!isFloatLabel">
+          {{ (label ? label : placeholder) | translate }}
+        </mat-label>
+        <input type="text"
+               matInput
+               [required]="required"
+               [disabled]="disabled"
+               [placeholder]="placeholder"
+               [formControl]="textControl"
+               [matAutocomplete]="auto"
+               readonly="{{readonly}}" />
+        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption
+                          (optionSelected)="onOptionSelect($event.option.value)">
+          <mat-option *ngIf="loading" class="loading-option">
+            <mat-spinner diameter="20"></mat-spinner>
+          </mat-option>
+          <mat-option *ngFor="let option of filteredOptions" [value]="option[displayKey]">
+            {{ option[displayKey] }}
+          </mat-option>
+        </mat-autocomplete>
+        <i *ngIf="!!suffixFontAwesomeClass" class="input-suffix {{suffixFontAwesomeClass}}" matSuffix></i>
+        <mat-hint align="start" *ngIf="!NsValidator.invalid(control)">{{ hint | translate }}</mat-hint>
+        <mat-hint style="color: red" align="start" *ngIf="NsValidator.invalid(control)">
+          {{ NsValidator.getErrorMessageV1(control, errorMessages).msg | translate: NsValidator.getErrorMessageV1(control, errorMessages).params }}
+        </mat-hint>
+      </mat-form-field>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], errorMessages: [{
+                type: Input
+            }], isLabelOutside: [{
+                type: Input
+            }], isFloatLabel: [{
+                type: Input
+            }], percentOfLabelOutside: [{
+                type: Input
+            }], suffixFontAwesomeClass: [{
+                type: Input
+            }], displayKey: [{
+                type: Input
+            }], mappingConfig: [{
+                type: Input
+            }], searchFn: [{
+                type: Input
+            }], onChange: [{
+                type: Output
+            }], isFormControl: [{
+                type: Input
+            }], row: [{
+                type: Input
+            }], columnDef: [{
+                type: Input
+            }] } });
+
 class CvaSmartTableComponent {
     ref;
     config;
@@ -4804,6 +5116,8 @@ class CvaSmartTableComponent {
                          [isFormControl]="false"
                          [disabled]="column.disabled ? column.disabled(result) : false"
                          [text]="result[column.columnDef]"
+                         [minLength]="column.min ? column.min(result) : undefined"
+                         [maxLength]="column.max ? column.max(result) : undefined"
                          [required]="getRequired(column)"
                          [errorMessages]="getErrorMessageMap(column)"
                          (onChange)="onCellValueChange(result, column, $event);">
@@ -4840,6 +5154,15 @@ class CvaSmartTableComponent {
                               (change)="toggleSelect($event,result, column)">
                 </mat-checkbox>
               </div>
+              <cva-live-searching *ngSwitchCase="ColumnTypes.LIVE_SEARCHING"
+                                  [isFormControl]="false" [required]="getRequired(column)"
+                                  [row]="result" [columnDef]="column.columnDef"
+                                  [searchFn]="column.searchFn"
+                                  [mappingConfig]="column.mappingConfig"
+                                  [displayKey]="column.displayKey"
+                                  [errorMessages]="getErrorMessageMap(column)"
+                                  (onChange)="onCellValueChange(result, column, $event)">
+              </cva-live-searching>
             </td>
           </ng-container>
         </ng-container>
@@ -4920,7 +5243,7 @@ class CvaSmartTableComponent {
         </ng-container>
       </table>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.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: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaInputComponent, selector: "cva-input", inputs: ["label", "name", "placeholder", "hint", "required", "disabled", "text", "type", "pattern", "readonly", "errorMessages", "multiline", "isLabelOutside", "isFloatLabel", "minLength", "maxLength", "maxLengthDisplay", "percentOfLabelOutside", "suffixFontAwesomeClass", "patternFilter", "isFormControl", "formatFunc"], outputs: ["onChange"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "component", type: CvaDatePickerComponent, selector: "cva-date-picker", inputs: ["label", "placeholder", "value", "disabled", "required", "minDate", "maxDate", "errorMessages", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["onChange"] }, { kind: "component", type: CvaMultiSelectAutocomplete, selector: "cva-multi-select-autocomplete", inputs: ["placeholder", "label", "hint", "value", "options", "disabled", "errorMessages", "multiple", "required", "isTree", "treeSymbol", "sizeOfItemsInListByPixels", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["selectionChange", "selectedOptionDataChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4$1.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: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i5.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i5.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i5.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: CvaInputComponent, selector: "cva-input", inputs: ["label", "name", "placeholder", "hint", "required", "disabled", "text", "type", "pattern", "readonly", "errorMessages", "multiline", "isLabelOutside", "isFloatLabel", "minLength", "maxLength", "maxLengthDisplay", "percentOfLabelOutside", "suffixFontAwesomeClass", "patternFilter", "isFormControl", "formatFunc"], outputs: ["onChange"] }, { kind: "component", type: CvaCounterInputComponent, selector: "cva-counter-input", inputs: ["label", "placeholder", "suffixText", "hint", "value", "disabled", "required", "errorMessages", "min", "max", "error", "isDecimal", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "alignNumber", "isFormControl"], outputs: ["onChange", "onEnter"] }, { kind: "component", type: CvaDatePickerComponent, selector: "cva-date-picker", inputs: ["label", "placeholder", "value", "disabled", "required", "minDate", "maxDate", "errorMessages", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["onChange"] }, { kind: "component", type: CvaMultiSelectAutocomplete, selector: "cva-multi-select-autocomplete", inputs: ["placeholder", "label", "hint", "value", "options", "disabled", "errorMessages", "multiple", "required", "isTree", "treeSymbol", "sizeOfItemsInListByPixels", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "isFormControl"], outputs: ["selectionChange", "selectedOptionDataChange"] }, { kind: "component", type: CvaLiveSearchingComponent, selector: "cva-live-searching", inputs: ["label", "placeholder", "hint", "required", "disabled", "readonly", "errorMessages", "isLabelOutside", "isFloatLabel", "percentOfLabelOutside", "suffixFontAwesomeClass", "displayKey", "mappingConfig", "searchFn", "isFormControl", "row", "columnDef"], outputs: ["onChange"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaSmartTableComponent, decorators: [{
             type: Component,
@@ -5026,6 +5349,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                          [isFormControl]="false"
                          [disabled]="column.disabled ? column.disabled(result) : false"
                          [text]="result[column.columnDef]"
+                         [minLength]="column.min ? column.min(result) : undefined"
+                         [maxLength]="column.max ? column.max(result) : undefined"
                          [required]="getRequired(column)"
                          [errorMessages]="getErrorMessageMap(column)"
                          (onChange)="onCellValueChange(result, column, $event);">
@@ -5062,6 +5387,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                               (change)="toggleSelect($event,result, column)">
                 </mat-checkbox>
               </div>
+              <cva-live-searching *ngSwitchCase="ColumnTypes.LIVE_SEARCHING"
+                                  [isFormControl]="false" [required]="getRequired(column)"
+                                  [row]="result" [columnDef]="column.columnDef"
+                                  [searchFn]="column.searchFn"
+                                  [mappingConfig]="column.mappingConfig"
+                                  [displayKey]="column.displayKey"
+                                  [errorMessages]="getErrorMessageMap(column)"
+                                  (onChange)="onCellValueChange(result, column, $event)">
+              </cva-live-searching>
             </td>
           </ng-container>
         </ng-container>
@@ -5791,7 +6125,7 @@ class CvaMultiUploadComponent {
         <mat-error *ngIf="typeError!==null">{{ typeError + ' ' + ('common.is.not-accept' | translate) }}</mat-error>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i8$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaMultiUploadComponent, decorators: [{
             type: Component,
@@ -6209,7 +6543,7 @@ class CvaUploadFileComponent {
                 <mat-error *ngIf="isRectangleError">{{ ('common.error.image.rectangle' | translate) }}</mat-error>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i3$3.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: DragDropDirective, selector: "[appDragDrop]", outputs: ["onFileDropped"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: SecureImgPipe, name: "secure" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaUploadFileComponent, decorators: [{
             type: Component,
@@ -6520,7 +6854,7 @@ class CvaLoaderComponent {
             </div>
             <img *ngIf="!!imgSrc" [src]="imgSrc"  alt=""/>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$4.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaLoaderComponent, decorators: [{
             type: Component,
@@ -6985,7 +7319,7 @@ class CvaRadiobuttonComponent {
         <mat-hint align="start" *ngIf="NsValidator.invalid(control)">{{NsValidator.getErrorMessage(control, errorMessages) | translate}}</mat-hint>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$4.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$4.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4$3.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i4$3.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaRadiobuttonComponent, decorators: [{
             type: Component,
@@ -7381,6 +7715,7 @@ class CvaFlatTreeComponent {
     isFormControl = true;
     // Cái này là để gắn khi nó là FormControl trong 1 FormGroup
     formControl;
+    mapIndexes = new Map();
     chooseVirtualScroll;
     selectedVirtualScroll;
     constructor(translateService, injector, cdr, ngControl) {
@@ -7425,9 +7760,6 @@ class CvaFlatTreeComponent {
     ngAfterViewInit() {
         // this.onChangeSearchText();
     }
-    trackByValue(index, node) {
-        return node.value;
-    }
     getDisplayInputFunc(node) {
         return typeof (node._displayFuncInput) === 'function' ? node._displayFuncInput(node) : !!node._displayFuncInput;
     }
@@ -7550,17 +7882,31 @@ class CvaFlatTreeComponent {
         this.propagateChange(fn);
     }
     writeValue(obj) {
+        // if (this.multiple && !obj) {
+        //   obj = [];
+        // }
         if (obj) {
+            // if (this.multiple) {
             this.value = obj;
+            // }
+            console.log('writeValue_0: ', new Date());
+            this.mapIndexes = new Map();
+            for (let i = 0; i < this.fullDataTreeControl.dataNodes.length; i++) {
+                this.mapIndexes.set(this.fullDataTreeControl.dataNodes[i].value, i);
+            }
+            console.log('writeValue_1: ', new Date());
             this.checkedDefaultValue();
+            console.log('writeValue_2: ', new Date());
             this.updateSelectAll();
+            console.log('writeValue_3: ', new Date());
             this.updateSelectedTree();
+            console.log('writeValue_4: ', new Date());
             this.propagateChange(this.value);
             this.callValidator();
             if (this.isView) {
-                requestAnimationFrame(() => this.selectedTreeControl.expandAll());
+                this.selectedTreeControl.expandAll();
             }
-            this.cdr.detectChanges();
+            console.log('writeValue_5: ', new Date());
             this.selectionChange.emit(Array.from(this.valueObjRef.values()));
         }
     }
@@ -7571,42 +7917,22 @@ class CvaFlatTreeComponent {
         this.expandTreeDataSource(this.selectedTreeControl, 'isExpanded');
     }
     checkedDefaultValue() {
-        const selectedSet = new Set(this.value);
-        const selectedNodes = [];
+        this.valueObjRef.clear();
+        const valueSet = new Set(this.value);
         for (const node of this.fullDataTreeControl.dataNodes) {
             const isLeaf = !FlatTreeService.hasChild(node);
-            node.checked = selectedSet.has(node.value);
+            node.checked = isLeaf && valueSet.has(node.value);
             if (isLeaf && node.checked) {
                 this.valueObjRef.set(node.value, node);
-                selectedNodes.push(node);
             }
-            else if (isLeaf && !node.checked && this.valueObjRef.has(node.value)) {
-                this.valueObjRef.delete(node.value);
-            }
-        }
-        this.bulkSelectedTreeChange(selectedNodes);
-    }
-    bulkSelectedTreeChange(nodes) {
-        const selectedRoot = new Set();
-        for (const node of nodes) {
-            if (node.level < 1) {
-                this.selectedFullValues.set(node.value, node.value);
-                this.selectedTreeControl.expandDescendants(node);
-            }
-            else {
-                const rootNode = this.getRootNode(node);
-                if (rootNode && !selectedRoot.has(rootNode.value)) {
-                    this.selectedFullValues.set(rootNode.value, rootNode.value);
-                    if (rootNode.checked) {
-                        this.selectedTreeControl.expandDescendants(rootNode);
-                    }
-                    selectedRoot.add(rootNode.value);
-                }
+            const orgNodeIndex = this.mapIndexes.get(node.value);
+            if (orgNodeIndex !== undefined) {
+                this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = node.checked;
             }
         }
     }
     getAllChildNode(treeControl, node) {
-        const index = treeControl.dataNodes.findIndex(n => node.value === n.value);
+        const index = this.mapIndexes.get(node.value);
         let sameLevelNextIndex = -1;
         for (let i = index + 1; i < treeControl.dataNodes.length; i++) {
             if (node.level >= treeControl.dataNodes[i].level) {
@@ -7631,7 +7957,7 @@ class CvaFlatTreeComponent {
         node.checked = checked;
         let indexLeaf = -1;
         // update origin node
-        let orgNodeIndex = this.fullDataTreeControl.dataNodes.findIndex(n => n.value === node.value);
+        let orgNodeIndex = this.mapIndexes.get(node.value);
         /*this.getNodeInFullDataSource(child)*/
         this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = checked;
         if (orgNodeIndex > -1 && !checked) {
@@ -7658,7 +7984,7 @@ class CvaFlatTreeComponent {
                 }
             }
             else {
-                orgNodeIndex = this.fullDataTreeControl.dataNodes.findIndex(n => n.value === child.value);
+                orgNodeIndex = this.mapIndexes.get(child.value);
                 if (orgNodeIndex > -1) {
                     this.fullDataTreeControl.dataNodes[orgNodeIndex].isExpanded = false;
                     this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = this.fullDataTreeControl.dataNodes[orgNodeIndex].children?.every(n => n.checked);
@@ -7707,7 +8033,7 @@ class CvaFlatTreeComponent {
         if ((node.display && !this.checkDisabledNode(node)) || !!isSelectedChange) {
             node.checked = checked;
             // update origin node
-            const orgNodeIndex = this.fullDataTreeControl.dataNodes.findIndex(n => n.value === node.value);
+            const orgNodeIndex = this.mapIndexes.get(node.value);
             this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = checked;
             if (checked) {
                 if (this.multiple) {
@@ -7883,6 +8209,50 @@ class CvaFlatTreeComponent {
             this.checkParentNode(true, node);
         }
     }
+    toggleNodeCheck(node, checked) {
+        const isLeaf = !FlatTreeService.hasChild(node);
+        console.log('1: ', new Date());
+        // Gọi 1 lần duy nhất nếu là parent
+        const descendants = isLeaf ? [] : this.fullDataTreeControl.getDescendants(node);
+        const affectedNodes = isLeaf ? [node] : descendants.filter(n => !FlatTreeService.hasChild(n));
+        console.log('2: ', new Date());
+        for (const leaf of affectedNodes) {
+            if (!leaf.display || this.checkDisabledNode(leaf))
+                continue;
+            const index = this.value.indexOf(leaf.value);
+            if (checked && index < 0) {
+                this.value.push(leaf.value);
+                this.valueObjRef.set(leaf.value, leaf);
+                leaf.checked = true;
+            }
+            if (!checked && index >= 0) {
+                this.value.splice(index, 1);
+                this.valueObjRef.delete(leaf.value);
+                leaf.checked = false;
+            }
+            const orgNodeIndex = this.mapIndexes.get(leaf.value);
+            if (orgNodeIndex !== undefined) {
+                this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = leaf.checked;
+            }
+        }
+        console.log('3: ', new Date());
+        // Nếu node là cha → cập nhật isExpanded
+        if (!isLeaf) {
+            node.checked = checked;
+            const orgNodeIndex = this.mapIndexes.get(node.value);
+            if (orgNodeIndex !== undefined) {
+                this.fullDataTreeControl.dataNodes[orgNodeIndex].checked = checked;
+                this.fullDataTreeControl.dataNodes[orgNodeIndex].isExpanded = false;
+            }
+        }
+        else {
+            node.checked = checked;
+        }
+        console.log('4: ', new Date());
+        this.writeValue(this.value);
+        console.log('5: ', new Date());
+        this.cdr.detectChanges();
+    }
     _getLevel = (node) => node.level;
     _isExpandable = (node) => FlatTreeService.hasChild(node);
     _getChildren = (node) => of(node.children ? node.children : []);
@@ -7925,7 +8295,7 @@ class CvaFlatTreeComponent {
             </div>
             <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
                                          [ngStyle]="{height: viewHeight + 'px'}">
-              <ng-container *cdkVirtualFor="let node of dataSource; trackBy: trackByValue">
+              <ng-container *cdkVirtualFor="let node of dataSource">
                 <cva-flat-tree-node-left [style.padding-left]="node.level * paddingLeft + 'px'"
                                          [attr.aria-level]="node.level"
                                          [treeControl]="treeControl"
@@ -7934,8 +8304,8 @@ class CvaFlatTreeComponent {
                                          (toggle)="toggleTreeControl(treeControl, node)"
                                          (onParentNodeClick)="onParentNodeClick(node)"
                                          (onLeafNodeClick)="onLeafNodeClick(node)"
-                                         (ngModelParentChange)="checkParentNode($event, node)"
-                                         (ngModelLeafChange)="checkLeafNode($event, node)">
+                                         (ngModelParentChange)="toggleNodeCheck(node, $event)"
+                                         (ngModelLeafChange)="toggleNodeCheck(node, $event)">
                 </cva-flat-tree-node-left>
               </ng-container>
             </cdk-virtual-scroll-viewport>
@@ -7953,7 +8323,7 @@ class CvaFlatTreeComponent {
             <cdk-virtual-scroll-viewport #selectedScrollViewport
                                          *ngIf="!isCollapseSelected"
                                          itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
-              <ng-container *cdkVirtualFor="let node of selectedDataSource; trackBy: trackByValue">
+              <ng-container *cdkVirtualFor="let node of selectedDataSource">
                 <cva-flat-tree-node-right [style.padding-left]="node.level * paddingLeft + 'px'"
                                           [attr.aria-level]="node.level"
                                           [treeControl]="selectedTreeControl"
@@ -8017,7 +8387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             </div>
             <cdk-virtual-scroll-viewport #chooseAreaScrollViewport itemSize="{{itemSize}}"
                                          [ngStyle]="{height: viewHeight + 'px'}">
-              <ng-container *cdkVirtualFor="let node of dataSource; trackBy: trackByValue">
+              <ng-container *cdkVirtualFor="let node of dataSource">
                 <cva-flat-tree-node-left [style.padding-left]="node.level * paddingLeft + 'px'"
                                          [attr.aria-level]="node.level"
                                          [treeControl]="treeControl"
@@ -8026,8 +8396,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                                          (toggle)="toggleTreeControl(treeControl, node)"
                                          (onParentNodeClick)="onParentNodeClick(node)"
                                          (onLeafNodeClick)="onLeafNodeClick(node)"
-                                         (ngModelParentChange)="checkParentNode($event, node)"
-                                         (ngModelLeafChange)="checkLeafNode($event, node)">
+                                         (ngModelParentChange)="toggleNodeCheck(node, $event)"
+                                         (ngModelLeafChange)="toggleNodeCheck(node, $event)">
                 </cva-flat-tree-node-left>
               </ng-container>
             </cdk-virtual-scroll-viewport>
@@ -8045,7 +8415,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
             <cdk-virtual-scroll-viewport #selectedScrollViewport
                                          *ngIf="!isCollapseSelected"
                                          itemSize="{{itemSize}}" [ngStyle]="{height: viewHeight + 'px'}">
-              <ng-container *cdkVirtualFor="let node of selectedDataSource; trackBy: trackByValue">
+              <ng-container *cdkVirtualFor="let node of selectedDataSource">
                 <cva-flat-tree-node-right [style.padding-left]="node.level * paddingLeft + 'px'"
                                           [attr.aria-level]="node.level"
                                           [treeControl]="selectedTreeControl"
@@ -8510,7 +8880,7 @@ class CvaQuillEditorComponent {
                 </mat-hint>
             </div>
         </div>
-    `, isInline: true, styles: [".cva-quill-editor{margin-bottom:1rem}.cva-quill-editor .required-label-outside{color:red}.cva-quill-editor .ql-container.ql-snow{height:100px;overflow-y:auto}.cva-quill-editor #counter{border:1px solid #ccc;border-width:0px 1px 1px 1px;color:#aaa;padding:5px 15px;text-align:right}.cva-quill-editor quill-editor{margin-bottom:0!important;word-break:break-word}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4$5.QuillEditorComponent, selector: "quill-editor" }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i9.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: [".cva-quill-editor{margin-bottom:1rem}.cva-quill-editor .required-label-outside{color:red}.cva-quill-editor .ql-container.ql-snow{height:100px;overflow-y:auto}.cva-quill-editor #counter{border:1px solid #ccc;border-width:0px 1px 1px 1px;color:#aaa;padding:5px 15px;text-align:right}.cva-quill-editor quill-editor{margin-bottom:0!important;word-break:break-word}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i4$4.QuillEditorComponent, selector: "quill-editor" }, { kind: "directive", type: i8.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i8.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i9.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i9.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: CvaQuillEditorComponent, decorators: [{
             type: Component,
@@ -8657,14 +9027,14 @@ class LoaderInterceptor {
         this.loaderService.isLoading.next(this.requests.length > 0);
     }
     intercept(request, next) {
-        if (!request.headers.get('is_image')) {
+        if (!request.headers.get('is_image') && !request.headers.get('is_live_searching')) {
             this.requests.push(request);
             // console.log('LoaderInterceptor: wait for ' + this.requests.length + 'requests');
             this.loaderService.isLoading.next(true);
         }
         else {
             request = request.clone({
-                headers: request.headers.delete('is_image'),
+                headers: request.headers.delete('is_image').delete('is_live_searching'),
             });
         }
         return next.handle(request).pipe(map((event) => {
@@ -8943,10 +9313,11 @@ class NiceComponentLibraryModule {
             CvaDialogImportFileComponent,
             BaseSearchComponent,
             BaseAddEditComponent,
-            CvaQuillEditorComponent], imports: [CommonModule,
+            CvaQuillEditorComponent,
+            CvaLiveSearchingComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
-            AngularMaterialModule, i1$4.RouterModule, i1.TranslateModule, i4$5.QuillModule, FlexLayoutModule], exports: [CvaTableComponent,
+            AngularMaterialModule, i1$4.RouterModule, i1.TranslateModule, i4$4.QuillModule, FlexLayoutModule], exports: [CvaTableComponent,
             CvaSmartTableComponent,
             CvaInputComponent,
             CvaCounterInputComponent,
@@ -8972,7 +9343,8 @@ class NiceComponentLibraryModule {
             CvaDialogImportFileComponent,
             BaseSearchComponent,
             BaseAddEditComponent,
-            CvaQuillEditorComponent] });
+            CvaQuillEditorComponent,
+            CvaLiveSearchingComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.5", ngImport: i0, type: NiceComponentLibraryModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
@@ -9024,6 +9396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         BaseSearchComponent,
                         BaseAddEditComponent,
                         CvaQuillEditorComponent,
+                        CvaLiveSearchingComponent,
                     ],
                     exports: [
                         CvaTableComponent,
@@ -9053,6 +9426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
                         BaseSearchComponent,
                         BaseAddEditComponent,
                         CvaQuillEditorComponent,
+                        CvaLiveSearchingComponent,
                     ],
                     schemas: [
                         NO_ERRORS_SCHEMA,
@@ -9069,5 +9443,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionTypeEnum, AlignEnum, ApiService, AuthoritiesResolverService, AuthoritiesService, Authority, BaseAddEditComponent, BaseModel, BaseSearchComponent, BaseStatusEnum, BaseTableComponent, BreadCrumbModel, ButtonClickEvent, ButtonModel, CheckboxModel, ColumnModel, ColumnTypeEnum, CustomDialogDataConfigModel, CvaBreadcrumbComponent, CvaCounterInputComponent, CvaCustomDialogComponent, CvaDatePickerComponent, CvaDialogImportFileComponent, CvaFlatTreeComponent, CvaFlatTreeNodeLeftComponent, CvaFlatTreeNodeRightComponent, CvaInputComponent, CvaLoaderComponent, CvaMultiSelectAutocomplete, CvaMultiUploadComponent, CvaMultiUploadImgComponent, CvaQuillEditorComponent, CvaRadiobuttonComponent, CvaRangeDatePickerComponent, CvaSmartTableComponent, CvaTableComponent, CvaTreeComponent, CvaUploadFileComponent, DateUtilService, DialogImportFileConfigModel, DialogTypeEnum, DragDropDirective, FileTypeEnum, FlatTreeConfigModel, FlatTreeModel, FlatTreeNodeModel, FormStateService, FormatInputDirective, IconTypeEnum, InjectTokenNextSolutionsConfig, JsogHttpInterceptor, LoaderInterceptor, LoaderService, MenuModel, MultiTranslateHttpLoader, NavigatorModel, NiceComponentLibraryModule, OAuth2AuthenticationDto, PatternDirective, PermissionModel, Principal, RangeDatePickerModel, RoleModel, SecureImgPipe, SelectModel, SingletonTranslateService, StylePaginatorDirective, TableFooterModel, TablePagingRequestModel, TablePagingResponseModel, TableService, UIState, UploadModel, UtilsService, ValidatorService };
+export { ActionTypeEnum, AlignEnum, ApiService, AuthoritiesResolverService, AuthoritiesService, Authority, BaseAddEditComponent, BaseModel, BaseSearchComponent, BaseStatusEnum, BaseTableComponent, BreadCrumbModel, ButtonClickEvent, ButtonModel, CheckboxModel, ColumnModel, ColumnTypeEnum, CustomDialogDataConfigModel, CvaBreadcrumbComponent, CvaCounterInputComponent, CvaCustomDialogComponent, CvaDatePickerComponent, CvaDialogImportFileComponent, CvaFlatTreeComponent, CvaFlatTreeNodeLeftComponent, CvaFlatTreeNodeRightComponent, CvaInputComponent, CvaLiveSearchingComponent, CvaLoaderComponent, CvaMultiSelectAutocomplete, CvaMultiUploadComponent, CvaMultiUploadImgComponent, CvaQuillEditorComponent, CvaRadiobuttonComponent, CvaRangeDatePickerComponent, CvaSmartTableComponent, CvaTableComponent, CvaTreeComponent, CvaUploadFileComponent, DateUtilService, DialogImportFileConfigModel, DialogTypeEnum, DragDropDirective, FileTypeEnum, FlatTreeConfigModel, FlatTreeModel, FlatTreeNodeModel, FormStateService, FormatInputDirective, IconTypeEnum, InjectTokenNextSolutionsConfig, JsogHttpInterceptor, LoaderInterceptor, LoaderService, MenuModel, MultiTranslateHttpLoader, NavigatorModel, NiceComponentLibraryModule, OAuth2AuthenticationDto, PatternDirective, PermissionModel, Principal, RangeDatePickerModel, RoleModel, SecureImgPipe, SelectModel, SingletonTranslateService, StylePaginatorDirective, TableFooterModel, TablePagingRequestModel, TablePagingResponseModel, TableService, UIState, UploadModel, UtilsService, ValidatorService };
 //# sourceMappingURL=c10t-nice-component-library.mjs.map