ets-fe-ng-sdk 19.0.66 → 19.0.68

package/fesm2022/ets-fe-ng-sdk.mjs

@@ -6536,6 +6536,7 @@ class InputBase {
     }
     constructor() {
         this.translationService = inject(TranslationService);
+        this.cdr = inject(ChangeDetectorRef);
         this.dateInputRef = viewChild(DateInputComponent);
         this.cls = input(null);
         this.hint = input();
@@ -6712,19 +6713,11 @@ class InputBase {
                 optionHintField: this.optionHintField(),
             }),
             loader: ({ request: options }) => {
-                const inout = new Set();
                 return environment.translate
                     ? forkJoin(options.map((x, i) => {
-                        inout.add(x.label);
                         return x.label
-                            ? this.translationService.pipeTransformer(x.label, { noLoader: true }).pipe(tap$1((r) => {
-                                inout.delete(x.label);
-                                if (inout.size)
-                                    console.log('fork ' + this.labelSignal(), inout.values());
-                            }), catchError$1((e) => of(x.label)), first((x) => x != null), map$1((r) => ({ ...x, label: r })))
+                            ? this.translationService.pipeTransformer(x.label, { noLoader: true }).pipe(catchError$1((e) => of(x.label)), first((x) => x != null), map$1((r) => ({ ...x, label: r })))
                             : of(x);
-                    })).pipe(tap$1((r) => {
-                        console.log('fork all ' + this.labelSignal(), r);
                     }))
                     : of(options);
             },
@@ -7053,7 +7046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
 class AutocompleteTdRfComponent extends InputTD_RFComponent {
     set _options(v) {
         super._options = v;
-        if (this.autoCompleteRef && this.control()?.getRawValue())
+        if (this.autoCompleteRef() && this.control()?.getRawValue())
             this.control().setValue(this.control()?.getRawValue(), { emitEvent: false });
     }
     constructor(autoS) {
@@ -7063,16 +7056,17 @@ class AutocompleteTdRfComponent extends InputTD_RFComponent {
         this.filteredOptions = linkedSignal(() => this.autoS.filterOptions(this.valueSignal(), this.cOptions()));
         // readonly cfilteredOptions = computed(() => this.autoS.filterOptions(this.valueSignal(), this.cOptions()));
         this.validate = true;
+        this.autoCompleteRef = viewChild(MatAutocomplete);
         this.matOptions = viewChildren(MatOption);
         this.skipDoesOptionExistCheck = model();
         this.valueChanged = new ReplaySubject();
-        this.displayWith = (val) => 
-        // {
-        // if (this.debug()) debugger;
-        val instanceof MatOption
+        this.retriggerDisplayWith = effect(() => {
+            this.optionsMap();
+            this.control().patchValue(this.control().value, { emitEvent: false });
+        });
+        this.displayWith = (val) => val instanceof MatOption
             ? this.displayWith(val.value)
             : this.doesOptionExist(val)?.label || val;
-        // };
         this.includesOption = (control) => {
             if (this.debug())
                 debugger;
@@ -7125,7 +7119,7 @@ class AutocompleteTdRfComponent extends InputTD_RFComponent {
         }, 600);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AutocompleteTdRfComponent, deps: [{ token: AutocompleteService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AutocompleteTdRfComponent, isStandalone: true, selector: "autocomplete-td-rf,app-autocomplete-td-rf", inputs: { validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }, { propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        [class]=\"inputClassSignal()\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"displayWith\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: ["i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.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: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AutocompleteTdRfComponent, isStandalone: true, selector: "autocomplete-td-rf,app-autocomplete-td-rf", inputs: { validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true, isSignal: true }, { propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        [class]=\"inputClassSignal()\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: ["i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.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: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AutocompleteTdRfComponent, decorators: [{
             type: Component,
@@ -7141,15 +7135,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         AsyncPipe,
                         ToAnyPipe,
                         SDKTranslateNoLoaderPipe,
-                    ], template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        [class]=\"inputClassSignal()\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"displayWith\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: ["i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+                    ], template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        [class]=\"inputClassSignal()\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: ["i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: AutocompleteService }], propDecorators: { validate: [{
                 type: Input
             }], _options: [{
                 type: Input,
                 args: ['options']
-            }], autoCompleteRef: [{
-                type: ViewChild,
-                args: [MatAutocomplete]
             }] } });
 
 class AutocompleteComponent extends InputBasicComponent {
@@ -7162,18 +7153,19 @@ class AutocompleteComponent extends InputBasicComponent {
         this.showRequiredTag = true;
         this.validate = true;
         this.skipDoesOptionExistCheck = model();
+        this.autoCompleteRef = viewChild(MatAutocomplete);
         this.matOptions = viewChildren(MatOption);
         this.selectedMatOptionLabel = computed(() => {
-            console.log('1', this.valueSignal());
             return this.matOptions()
                 ?.find((x) => x.value == this.valueSignal())
                 ?.getLabel();
         });
         this.valueChanged = new ReplaySubject();
         this.autoS = inject(AutocompleteService);
-        this.cdr = inject(ChangeDetectorRef);
-        // readonly selectedValue = signal<MatOptionSelectionChange>(null);
-        this.selectedValue = (null);
+        this.retriggerDisplayWith = effect(() => {
+            this.optionsMap();
+            this.control().patchValue(this.control().value, { emitEvent: false });
+        });
         this.displayWith = (val) => val instanceof MatOption
             ? this.displayWith(val.value)
             : this.doesOptionExist(val)?.label || val;
@@ -7201,7 +7193,7 @@ class AutocompleteComponent extends InputBasicComponent {
     set _options(v) {
         // debugger;
         super._options = v;
-        if (this.autoCompleteRef && this.control()?.getRawValue())
+        if (this.autoCompleteRef() && this.control()?.getRawValue())
             this.control()?.setValue(this.control()?.getRawValue(), { emitEvent: false });
     }
     ngOnInit() {
@@ -7240,16 +7232,8 @@ class AutocompleteComponent extends InputBasicComponent {
             this.filteredOptions.set(this.cOptions());
         }, 600);
     }
-    // displayWith = (val: any) =>
-    //   val instanceof MatOption
-    //     ? this.displayWith(val.value)
-    //     : this.doesOptionExist(val)?.label || val;
-    setSelectedValue(e) {
-        this.selectedValue = e;
-        console.log('setSelectedValue', e);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AutocompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete,autocomplete", inputs: { showRequiredTag: { classPropertyName: "showRequiredTag", publicName: "showRequiredTag", isSignal: false, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }, { propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        [class]=\"inputClassSignal()\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"displayWith\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n", "i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.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: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.1", type: AutocompleteComponent, isStandalone: true, selector: "app-autocomplete,autocomplete", inputs: { showRequiredTag: { classPropertyName: "showRequiredTag", publicName: "showRequiredTag", isSignal: false, isRequired: false, transformFunction: null }, validate: { classPropertyName: "validate", publicName: "validate", isSignal: false, isRequired: false, transformFunction: null }, skipDoesOptionExistCheck: { classPropertyName: "skipDoesOptionExistCheck", publicName: "skipDoesOptionExistCheck", isSignal: true, isRequired: false, transformFunction: null }, _options: { classPropertyName: "_options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { skipDoesOptionExistCheck: "skipDoesOptionExistCheckChange" }, viewQueries: [{ propertyName: "autoCompleteRef", first: true, predicate: MatAutocomplete, descendants: true, isSignal: true }, { propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        [class]=\"inputClassSignal()\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n", "i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "component", type: InputLabelComponent, selector: "app-input-label", inputs: ["colored", "form", "hint", "inlineHint", "id", "invalidCheckbox", "isRequired", "label", "labelLink", "lblCl", "light", "mini", "showLabel", "showRequiredTag", "small", "stacked", "theme", "xsmall"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$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: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3$3.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: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: ToAnyPipe, name: "toAny" }, { kind: "pipe", type: SDKTranslateNoLoaderPipe, name: "appTranslateNL" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -7265,7 +7249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
                         AsyncPipe,
                         ToAnyPipe,
                         SDKTranslateNoLoaderPipe,
-                    ], template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        [class]=\"inputClassSignal()\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"displayWith\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n", "i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+                    ], template: "<div class=\"row align-items-center\">\n  <!-- {{options()|json}} -->\n  @if (verbose()) {\n    <div>disabledSignal: {{ disabledSignal() }}</div>\n    <div>showValidationSignal: {{ showValidationSignal() }}</div>\n    <div>validSignal: {{ validSignal() }}</div>\n    <div>invalidSignal: {{ invalidSignal() }}</div>\n    <div>valueSignal: {{ valueSignal() | json }}</div>\n    <div>hasValue: {{ hasValue() }}</div>\n    <div>dirtySignal: {{ dirtySignal() }}</div>\n    <div>touchedSignal: {{ touchedSignal() }}</div>\n    <div>errorsSignal: {{ errorsSignaljson() }}</div>\n    <div>pendingSignal: {{ pendingSignal() }}</div>\n    <div>pristineSignal: {{ pristineSignal() }}</div>\n    <div>controlRequiredSignal: {{ controlRequiredSignal() }}</div>\n    <div>isRequiredSignal: {{ isRequiredSignal() }}</div>\n    <div class=\"\">onControlObtainedList Length: {{ onControlObtainedList().length }}</div>\n    <div>selectedOption: {{ selectedOption() | json }}</div>\n    <div>optionsMap: {{ optionsMap() | json }}</div>\n  }\n  @if (computedShowLabel()) {\n    <app-input-label\n      [colored]=\"coloredSignal()\"\n      [form]=\"form() | toAny\"\n      [hint]=\"hint()\"\n      [id]=\"idSignal()\"\n      [invalidCheckbox]=\"invalidCheckboxSignal()\"\n      [isRequired]=\"isRequiredSignal()\"\n      [label]=\"labelSignal()\"\n      [lblCl]=\"lblCl()\"\n      [light]=\"light()\"\n      [mini]=\"miniSignal()\"\n      [showRequiredTag]=\"showRequiredTagSignal()\"\n      [showLabel]=\"showLabelSignal()\"\n      [small]=\"smallSignal()\"\n      [stacked]=\"stackedSignal()\"\n      [theme]=\"theme()\"\n      [xsmall]=\"xsmall()\" />\n  }\n  <div class=\"{{ stackedSignal() ? 'col-12' : 'col-md' }} position-relative\">\n    <form [formGroup]=\"form() | toAny\" class=\"position-relative\">\n      <input\n        type=\"text\"\n        data-noformat=\"true\"\n        [formControlName]=\"nameStrSignal()\"\n        placeholder=\"{{ placeholder() | appTranslateNL: translatorOptions() | async }}\"\n        [id]=\"idSignal()\"\n        (keyup)=\"fetchOptions()\"\n        [class]=\"inputClassSignal()\"\n        [required]=\"requiredSignal()\"\n        [readonly]=\"readonlySignal()\"\n        #trigger=\"matAutocompleteTrigger\"\n        [matAutocomplete]=\"auto\"\n        [matTooltip]=\"selectedOption()?.hint || inp.innerText | appTranslateNL | async\"\n        [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n        [matTooltipDisabled]=\"!selectedOption()?.hint && inp.scrollWidth <= inp.offsetWidth\"\n        #inp />\n      @if (!disabledSignal()) {\n        <i\n          class=\"input-icon fa fa-search\"\n          (click)=\"$event.stopPropagation(); trigger.openPanel()\"></i>\n      }\n      <mat-autocomplete\n        #auto=\"matAutocomplete\"\n        (optionSelected)=\"selected($event)\"\n        [displayWith]=\"options().length ? displayWith : null\"\n        class=\"options-w-auto\">\n        <!-- <ng-container *ngIf=\"duplicateCheck; else elseNoDulicateTemplate\">\n          <mat-option\n            *ngFor=\"let item of filteredOptions|removeUsedOptionsReactive:(form.parent|toAny):(form.value):'value':name;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-container>\n        <ng-template #elseNoDulicateTemplate>\n          <mat-option\n            *ngFor=\"let item of filteredOptions;trackBy:iS.trackByValue\"\n            [value]=\"item.value\">\n            <div class=\"option\" [matTooltip]=\"ele.innerText\" [matTooltipDisabled]=\"ele.scrollWidth<=ele.offsetWidth\"\n              #ele>\n              {{ item.label | appTranslate: translateOptions | async }}\n            </div>\n          </mat-option>\n        </ng-template> -->\n\n        @if (showEmptyOptionSignal()) {\n          <mat-option selected [value]=\"null\" class=\"empty-option\">\n            {{\n              (optionsFunc ? 'Type to search' : placeholder())\n                | appTranslateNL: translatorOptions()\n                | async\n            }}\n          </mat-option>\n        }\n        @for (item of filteredOptions(); track item._id) {\n          @let labll = item.label;\n          <mat-option\n            [value]=\"item.value\"\n            (onSelectionChange)=\"selectOption(item)\"\n            [matTooltip]=\"\n              (item.hint | appTranslateNL: translatorOptions() | async) || ele.innerText\n            \"\n            [matTooltipShowDelay]=\"iS.matTooltipShowDelay()\"\n            [matTooltipDisabled]=\"!item.hint && ele.scrollWidth <= ele.offsetWidth\">\n            <div class=\"option\" #ele>\n              {{ labll }}\n            </div>\n          </mat-option>\n        }\n      </mat-autocomplete>\n      @if (dirtySignal() && showValidationSignal() && showValidationIconSignal()) {\n        <div [class.valid]=\"validSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-check\"></i>\n        </div>\n        @if (pendingSignal()) {\n          <div [class.pending]=\"pendingSignal()\" class=\"validity-icon\">\n            <i class=\"fa fa-spinner fa-spin\"></i>\n          </div>\n        }\n        <div [class.invalid]=\"invalidSignal()\" class=\"validity-icon\">\n          <i class=\"fa fa-times\"></i>\n        </div>\n      }\n      @if (loading()) {\n        <div class=\"d-flex text-primary me-1 validity-icon\">\n          <i class=\"fa fa-spinner fa-spin\"></i>\n        </div>\n      }\n    </form>\n  </div>\n</div>\n@if (showValidationMsgSignal()) {\n  <app-validation-message [label]=\"labelSignal()\" [control]=\"control()\" />\n}\n", styles: [".bordercheck{border:1px solid #4ef580!important;outline:0}.borderuncheck{border:1px solid red!important;outline:0}.light{font-weight:500}.validity-icon{display:none;position:absolute;top:0;left:unset;right:20px;height:100%;align-items:center}.select .validity-icon{right:30px}.valid{display:flex!important;color:#4ef580}.pending{display:flex!important;color:#ff4500}.invalid{display:flex!important;color:red}.inputform{height:41px}.invalid-label{color:red!important}input[type=checkbox]:checked{position:relative}.showValidationIcon .form-control:not(input[type=checkbox].form-control),.showValidationIcon select.form-control:not(input[type=checkbox].form-control){padding:10px 36px 10px 12px}.password-icons{position:absolute;right:20px;top:17%}[disabled]{cursor:default}.link{cursor:pointer}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n", "i.input-icon{position:absolute;top:15px;right:7px;opacity:.4;font-size:10px}.option{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
         }], propDecorators: { showRequiredTag: [{
                 type: Input
             }], validate: [{
@@ -7273,9 +7257,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.1", ngImpor
             }], _options: [{
                 type: Input,
                 args: ['options']
-            }], autoCompleteRef: [{
-                type: ViewChild,
-                args: [MatAutocomplete]
             }] } });
 
 const AutocompleteModule = [AutocompleteComponent, AutocompleteTdRfComponent];