@wlcm/angular 17.7.39 → 17.7.41

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';
@@ -12,14 +12,14 @@ import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import * as i4$1 from '@angular/material/select';
 import { MatOption, MAT_SELECT_CONFIG, MatSelect, MatSelectModule } from '@angular/material/select';
 import * as i1$1 from '@angular/material/autocomplete';
-import { MatAutocomplete, MatAutocompleteOrigin, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatAutocomplete, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { RxLet } from '@rx-angular/template/let';
 import { cloneDeep, mergeWith } from 'lodash-es';
+import { CdkOverlayOrigin } from '@angular/cdk/overlay';
 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 +476,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", 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 +507,17 @@ 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;
+        runInInjectionContext(this.injector, () => {
+            if (this.formField) {
+                this.autocompleteTrigger.connectedTo = new CdkOverlayOrigin(this.formField.inputContainer);
+            }
+        });
         this.attachFocusBlurListeners();
     }
     displayWith(value) {
@@ -627,7 +629,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: "17.3.5", ngImport: i0, type: WlcmAutocompleteComponent, deps: [{ token: WLCM_FORM_FIELD }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", 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: "17.3.5", 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,20 +645,11 @@ 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: "17.3.5", ngImport: i0, type: WlcmAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-autocomplete', exportAs: 'wlcmAutocomplete', host: { class: 'wlcm-autocomplete' }, standalone: true, imports: [
-                        CommonModule,
-                        MatAutocompleteModule,
-                        AutocompleteDirective,
-                        ReactiveFormsModule,
-                        WlcmFormFieldComponent,
-                        WlcmLabelComponent,
-                        WlcmInputDirective,
-                        RxLet,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'wlcm-autocomplete', exportAs: 'wlcmAutocomplete', host: { class: 'wlcm-autocomplete' }, standalone: true, imports: [CommonModule, MatAutocompleteModule, AutocompleteDirective, ReactiveFormsModule, WlcmInputDirective, RxLet], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, useValue: { overlayPanelClass: PANEL_CLASS$1 } },
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmAutocompleteComponent), multi: true },
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmAutocompleteComponent), multi: true },
@@ -668,7 +661,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", 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: [{
@@ -902,8 +895,9 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     openPanel() {
         this.matSelect.open();
     }
-    constructor(zone, changeDetectorRef, scrollDetectionApi, formField, parentFormMember) {
+    constructor(zone, injector, changeDetectorRef, scrollDetectionApi, formField, parentFormMember) {
         this.zone = zone;
+        this.injector = injector;
         this.changeDetectorRef = changeDetectorRef;
         this.scrollDetectionApi = scrollDetectionApi;
         this.formField = formField;
@@ -937,6 +931,7 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         });
         this.prefilledOptions = signal([]);
         this.matOptions = viewChildren(MatOption);
+        this._refreshOptions$ = new Subject();
         this._focusStream$ = new BehaviorSubject(EMPTY);
         this._blurStream$ = new BehaviorSubject(EMPTY);
         this.focus$ = this._focusStream$.pipe(switchMap((stream) => stream));
@@ -952,22 +947,18 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         if (this.parentFormMember) {
             this.handleStateChange();
         }
-        if (formField) {
-            this._preferredOverlayOrigin = new CdkOverlayOrigin(this.formField.inputContainer);
-        }
         this.handleAdjustedValue();
-        toObservable(this.paginated)
+        merge(toObservable(this.paginated).pipe(filter(Boolean)), this._refreshOptions$)
             .pipe(untilDestroyed(this))
-            .subscribe((paginated) => {
-            if (paginated)
-                this.loadPaginatedOptions();
-        });
+            .subscribe(() => this.loadPaginatedOptions());
     }
     ngAfterViewInit() {
         this.viewReady$.next();
-        if (this._preferredOverlayOrigin) {
-            this.matSelect._preferredOverlayOrigin = this._preferredOverlayOrigin;
-        }
+        runInInjectionContext(this.injector, () => {
+            if (this.formField) {
+                this.matSelect._preferredOverlayOrigin = new CdkOverlayOrigin(this.formField.inputContainer);
+            }
+        });
         this._focusStream$.next(this.matSelect._openedStream);
         this._blurStream$.next(this.matSelect._closedStream);
     }
@@ -1036,6 +1027,9 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     validate() {
         return null;
     }
+    refreshOptions() {
+        this._refreshOptions$.next();
+    }
     get isOpen() {
         return this.matSelect?.panelOpen ?? false;
     }
@@ -1129,7 +1123,7 @@ let WlcmSelectComponent = class WlcmSelectComponent {
             .pipe(switchMap(() => this.adjustedValue$.pipe(filter(Boolean))))
             .subscribe((value) => this._changed?.(value));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1$3.ScrollDetectionApi }, { token: WLCM_FORM_FIELD }, { token: WLCM_FORM_CONTROL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectComponent, deps: [{ token: i0.NgZone }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$3.ScrollDetectionApi }, { token: WLCM_FORM_FIELD }, { token: WLCM_FORM_CONTROL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: WlcmSelectComponent, isStandalone: true, selector: "wlcm-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, fetchPaginatedOptions: { classPropertyName: "fetchPaginatedOptions", publicName: "fetchPaginatedOptions", isSignal: false, isRequired: false, transformFunction: null }, canSelect: { classPropertyName: "canSelect", publicName: "canSelect", isSignal: false, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: false, isRequired: false, transformFunction: (params) => cloneDeep(params) }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectOptionFormat: { classPropertyName: "selectOptionFormat", publicName: "selectOptionFormat", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, triggerTemplate: { classPropertyName: "triggerTemplate", publicName: "triggerTemplate", isSignal: true, isRequired: false, transformFunction: null }, isOptionDisabled: { classPropertyName: "isOptionDisabled", publicName: "isOptionDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", opened: "opened", closed: "closed" }, host: { listeners: { "click": "openPanel()" } }, providers: [
             WLCM_FORM_CONTROL_PROVIDER,
             {
@@ -1146,6 +1140,7 @@ let WlcmSelectComponent = class WlcmSelectComponent {
 WlcmSelectComponent = __decorate([
     UntilDestroy(),
     __metadata("design:paramtypes", [NgZone,
+        Injector,
         ChangeDetectorRef,
         ScrollDetectionApi, Object, Object])
 ], WlcmSelectComponent);
@@ -1163,7 +1158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                         { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
                     ], template: "<mat-select\n  #selectComponent\n  [value]=\"value()\"\n  [disabled]=\"disabled()\"\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  [compareWith]=\"compareWith\"\n  (opened)=\"panelOpened()\"\n  (closed)=\"panelClosed()\"\n>\n  @if (triggerTemplate()) {\n    <mat-select-trigger>\n      <ng-container\n        *ngTemplateOutlet=\"\n          triggerTemplate()!;\n          context: $any({ $implicit: selectComponent.selected })\n        \"\n      ></ng-container>\n    </mat-select-trigger>\n  }\n\n  <mat-option\n    *ngFor=\"let option of prefilledOptions()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: option }\"\n    ></ng-container>\n  </mat-option>\n\n  <mat-option\n    *ngFor=\"let option of computedOptions()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"wlcmSelectOptionContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: option }\"\n    ></ng-container>\n  </mat-option>\n</mat-select>\n\n<div class=\"wlcm-select-arrow\">\n  <ng-container\n    [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"\n    [wlcmIconStopPropagation]=\"false\"\n  ></ng-container>\n</div>\n\n<ng-template #wlcmSelectOptionContent let-option>\n  @if (optionTemplate()) {\n    <ng-container\n      *ngTemplateOutlet=\"optionTemplate(); context: $any({ $implicit: option })\"\n    ></ng-container>\n  } @else {\n    {{ option.viewValue }}\n  }\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$3.ScrollDetectionApi }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$3.ScrollDetectionApi }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WLCM_FORM_FIELD]
                 }] }, { type: undefined, decorators: [{