@wlcm/angular 18.2.22 → 18.2.25

package/forms/fesm2022/wlcm-angular-forms.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Injectable, InjectionToken, inject, Directive, Pipe, Inject, HostListener, forwardRef, ChangeDetectorRef, Optional, Input, ContentChild, ViewChild, HostBinding, EventEmitter, NgZone, Host, Output, input, output, ElementRef, contentChildren, computed, signal, effect, viewChildren, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Injectable, InjectionToken, inject, Directive, Pipe, Inject, HostListener, forwardRef, ChangeDetectorRef, Optional, Input, ContentChild, ViewChild, HostBinding, EventEmitter, NgZone, Host, Output, input, output, runInInjectionContext, ElementRef, Injector, contentChildren, computed, signal, effect, viewChildren, NgModule } from '@angular/core';
 import { __decorate, __metadata } from 'tslib';
 import * as i4 from '@angular/forms';
 import { Validators, NgControl, ControlContainer, FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
@@ -19,7 +19,6 @@ import * as i3 from '@angular/material/core';
 import * as i1$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { toObservable } from '@angular/core/rxjs-interop';
-import { CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { MatRadioModule, MAT_RADIO_DEFAULT_OPTIONS } from '@angular/material/radio';
 
 class WlcmErrorComponent {
@@ -476,8 +475,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 const PANEL_CLASS$1 = 'wlcm-autocomplete-panel';
 let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAutocomplete {
-    constructor(formField) {
+    constructor(injector, formField) {
         super();
+        this.injector = injector;
         this.formField = formField;
         this.required = false;
         this.placeholder = '';
@@ -506,16 +506,14 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
         this.handleLoadMoreEvent();
         this.handleControlValueChanges();
         this.handleAdjustedValue();
-        if (formField) {
-            this._preferredOverlayOrigin = new MatAutocompleteOrigin(this.formField.inputContainer);
-        }
     }
     ngOnInit() {
         this.loadOptions().pipe(first()).subscribe();
     }
     ngAfterViewInit() {
         this.viewReady$.next();
-        this.autocompleteTrigger.connectedTo = this._preferredOverlayOrigin;
+        const origin = runInInjectionContext(this.injector, () => new MatAutocompleteOrigin(this.formField.inputContainer));
+        this.autocompleteTrigger.connectedTo = origin;
         this.attachFocusBlurListeners();
     }
     displayWith(value) {
@@ -627,7 +625,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
             .pipe(switchMap(() => this.adjustedValue$.pipe(filter(Boolean))))
             .subscribe((value) => this._changed?.(value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmAutocompleteComponent, deps: [{ token: WLCM_FORM_FIELD }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmAutocompleteComponent, deps: [{ token: i0.Injector }, { token: WLCM_FORM_FIELD }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: WlcmAutocompleteComponent, isStandalone: true, selector: "wlcm-autocomplete", inputs: { fetchPaginatedOptions: { classPropertyName: "fetchPaginatedOptions", publicName: "fetchPaginatedOptions", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: false, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: false, isRequired: false, transformFunction: (params) => cloneDeep(params) }, selectOptionFormat: { classPropertyName: "selectOptionFormat", publicName: "selectOptionFormat", isSignal: true, isRequired: false, transformFunction: null }, noResultsTemplate: { classPropertyName: "noResultsTemplate", publicName: "noResultsTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, host: { classAttribute: "wlcm-autocomplete" }, providers: [
             { provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, useValue: { overlayPanelClass: PANEL_CLASS$1 } },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmAutocompleteComponent), multi: true },
@@ -643,7 +641,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAuto
 };
 WlcmAutocompleteComponent = __decorate([
     UntilDestroy(),
-    __metadata("design:paramtypes", [Object])
+    __metadata("design:paramtypes", [Injector, Object])
 ], WlcmAutocompleteComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: WlcmAutocompleteComponent, decorators: [{
             type: Component,
@@ -668,7 +666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                             },
                         },
                     ], template: "<input\n  wlcmInput\n  type=\"text\"\n  [matAutocomplete]=\"autocomplete\"\n  [placeholder]=\"placeholder\"\n  [formControl]=\"control\"\n  (blur)=\"blured()\"\n/>\n\n<mat-autocomplete\n  #autocomplete=\"matAutocomplete\"\n  wlcmAutocomplete\n  [disableRipple]=\"true\"\n  [displayWith]=\"displayWith\"\n  [hideSingleSelectionIndicator]=\"true\"\n  (panelScrolled)=\"loadMore()\"\n>\n  <ng-container *rxLet=\"$any(options$ | async); let options\">\n    <mat-option\n      *ngFor=\"let option of options\"\n      [ngClass]=\"{ 'wlcm-custom-option-content': optionTemplate }\"\n      [value]=\"option\"\n    >\n      @if (optionTemplate) {\n        <ng-container\n          *ngTemplateOutlet=\"optionTemplate; context: { $implicit: option }\"\n        ></ng-container>\n      } @else {\n        {{ option.viewValue }}\n      }\n    </mat-option>\n\n    <mat-option [disabled]=\"true\" *ngIf=\"options.length === 0\">\n      @if (noResultsTemplate()) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            noResultsTemplate()!;\n            context: { $implicit: control.value, loading: loading$ | async }\n          \"\n        ></ng-container>\n      } @else {\n        <ng-container\n          *ngTemplateOutlet=\"\n            defaultNoResultsTemplate;\n            context: { $implicit: control.value, loading: loading$ | async }\n          \"\n        ></ng-container>\n      }\n    </mat-option>\n  </ng-container>\n</mat-autocomplete>\n\n<ng-template #defaultNoResultsTemplate let-loading=\"loading\">\n  @if (loading) {\n    Please wait...\n  } @else {\n    No results found\n  }\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WLCM_FORM_FIELD]
                 }] }], propDecorators: { fetchPaginatedOptions: [{
@@ -945,16 +943,19 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         this.viewReady$ = new Subject();
         this.selected$ = new Subject();
         this.compareWith = (optionA, optionB) => {
-            return (optionA?.value || optionA) === (optionB?.value || optionB);
+            if (this.areOptionsEqual(optionA, optionB)) {
+                if (this.selectOptionFormat() === 'CompleteOption' && typeof optionB !== 'object') {
+                    this._changed?.(optionA);
+                }
+                return true;
+            }
+            return false;
         };
         this.focus = () => this.matSelect.open();
         this.isFocused = () => this.isOpen;
         if (this.parentFormMember) {
             this.handleStateChange();
         }
-        if (formField) {
-            this._preferredOverlayOrigin = new CdkOverlayOrigin(this.formField.inputContainer);
-        }
         this.handleAdjustedValue();
         toObservable(this.paginated)
             .pipe(untilDestroyed(this))
@@ -965,8 +966,8 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     }
     ngAfterViewInit() {
         this.viewReady$.next();
-        if (this._preferredOverlayOrigin) {
-            this.matSelect._preferredOverlayOrigin = this._preferredOverlayOrigin;
+        if (this.formField) {
+            this.matSelect._preferredOverlayOrigin = this.formField.inputContainer;
         }
         this._focusStream$.next(this.matSelect._openedStream);
         this._blurStream$.next(this.matSelect._closedStream);
@@ -985,6 +986,9 @@ let WlcmSelectComponent = class WlcmSelectComponent {
             this.selectionChange.emit(event);
         });
     }
+    areOptionsEqual(optionA, optionB) {
+        return (optionA?.value || optionA) === (optionB?.value || optionB);
+    }
     revertPreviousValue() {
         this.matSelect.value = this._previousValue;
     }