@wlcm/angular 17.5.26 → 17.5.28

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

@@ -5,11 +5,11 @@ import * as i4 from '@angular/forms';
 import { Validators, NgControl, ControlContainer, FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { Subject, takeUntil, merge, fromEvent, observeOn, asyncScheduler, BehaviorSubject, EMPTY, switchMap, take, tap, concatMap, filter, timer, map, first } from 'rxjs';
+import { Subject, Observable, takeUntil, merge, fromEvent, observeOn, asyncScheduler, BehaviorSubject, EMPTY, switchMap, take, tap, concatMap, filter, timer, map, first } from 'rxjs';
+import { WlcmAutocompleteOption, DEFAULT_QUERY_PARAMS, WlcmIconName, WlcmIconDirective } from '@wlcm/angular/core';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import * as i3$1 from '@angular/material/select';
 import { MatOption, MAT_SELECT_CONFIG, MatSelect, MatSelectModule } from '@angular/material/select';
-import { DEFAULT_QUERY_PARAMS, WlcmIconName, WlcmIconDirective } from '@wlcm/angular/core';
 import * as i1$1 from '@angular/material/autocomplete';
 import { MatAutocomplete, MatAutocompleteOrigin, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { RxLet } from '@rx-angular/template/let';
@@ -45,6 +45,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+const WLCM_ERRORS = new InjectionToken('WLCM_ERRORS');
+const WLCM_PRIORITY_ERRORS = new InjectionToken('WLCM_PRIORITY_ERRORS', {
+    providedIn: 'root',
+    factory: () => new Set(),
+});
+
+const WLCM_INPUT = new InjectionToken('WLCM_INPUT');
+const WLCM_INPUT_BINDER = new InjectionToken('WLCM_INPUT_BINDER');
+const WLCM_FORM_FIELD = new InjectionToken('WLCM_FORM_FIELD');
+
+const WLCM_SELECT_CONFIG = new InjectionToken('WLCM_SELECT_CONFIG');
+
+const WLCM_MAPS_API_ERROR = `Google Maps JavaScript API not loaded. Please ensure the following script is included in your HTML: <script src="https://maps.googleapis.com/maps/api/js?key=[apiKey]&libraries=places"></script>`;
+
+const DEFAULT_PAGINATED_DATA = {
+    totalPages: 1,
+    totalItems: 1,
+    currPage: 1,
+    data: [],
+};
+class WlcmDefaultPlacesApi {
+    constructor() {
+        this._autocompleteService = new google.maps.places.AutocompleteService();
+        this._placesService = new google.maps.places.PlacesService(document.createElement('div'));
+        if (typeof google === 'undefined') {
+            throw new Error(WLCM_MAPS_API_ERROR);
+        }
+    }
+    getPlacesPaginated(query) {
+        return new Observable((subscriber) => {
+            const request = { input: query };
+            this._autocompleteService.getPlacePredictions(request, (predictions, status) => {
+                const result = { ...DEFAULT_PAGINATED_DATA };
+                if (status === google.maps.places.PlacesServiceStatus.OK) {
+                    result.data = predictions.map((prediction) => {
+                        return new WlcmAutocompleteOption(prediction.place_id, prediction.description, prediction.description, prediction);
+                    });
+                }
+                subscriber.next(result);
+                subscriber.complete();
+            });
+        });
+    }
+    get placesService() {
+        return this._placesService;
+    }
+    get autocompleteService() {
+        return this._autocompleteService;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDefaultPlacesApi, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDefaultPlacesApi }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDefaultPlacesApi, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+class WlcmPlacesApi {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmPlacesApi, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmPlacesApi, providedIn: 'root', useClass: WlcmDefaultPlacesApi }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmPlacesApi, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                    useClass: WlcmDefaultPlacesApi,
+                }]
+        }] });
+
 const WLCM_FORM = new InjectionToken('WLCM_FORM');
 const WLCM_FORM_PROVIDER = {
     provide: WLCM_FORM,
@@ -71,12 +138,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
-const WLCM_ERRORS = new InjectionToken('WLCM_ERRORS');
-const WLCM_PRIORITY_ERRORS = new InjectionToken('WLCM_PRIORITY_ERRORS', {
-    providedIn: 'root',
-    factory: () => new Set(),
-});
-
 class ErrorsMapperPipe {
     constructor(changeDetectorRef, errors, priorityErrors) {
         this.changeDetectorRef = changeDetectorRef;
@@ -126,10 +187,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                     args: [WLCM_PRIORITY_ERRORS]
                 }] }] });
 
-const WLCM_INPUT = new InjectionToken('WLCM_INPUT');
-const WLCM_INPUT_BINDER = new InjectionToken('WLCM_INPUT_BINDER');
-const WLCM_FORM_FIELD = new InjectionToken('WLCM_FORM_FIELD');
-
 class WlcmFormFieldPrefixDirective {
     constructor() {
         this.handlerClick = (event) => {
@@ -346,8 +403,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 args: ['class.required']
             }] } });
 
-const WLCM_SELECT_CONFIG = new InjectionToken('WLCM_SELECT_CONFIG');
-
 let AutocompleteDirective = class AutocompleteDirective {
     constructor(zone, autocomplete) {
         this.zone = zone;
@@ -410,6 +465,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent {
         this.required = false;
         this.placeholder = '';
         this.selectOptionFormat = input('ValueOnly');
+        this.noResultsTemplate = input();
         this.control = new FormControl('');
         this._loadMore$ = new Subject();
         this._options$ = new BehaviorSubject([]);
@@ -523,7 +579,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent {
         this._blurStream$.next(merge(...blurObservables).pipe(map(() => this.control?.markAsTouched())));
     }
     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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.5", type: WlcmAutocompleteComponent, isStandalone: true, selector: "wlcm-autocomplete", inputs: { pullDataMethod: { classPropertyName: "pullDataMethod", publicName: "pullDataMethod", 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 }, selectOptionFormat: { classPropertyName: "selectOptionFormat", publicName: "selectOptionFormat", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wlcm-autocomplete" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: WlcmAutocompleteComponent, isStandalone: true, selector: "wlcm-autocomplete", inputs: { pullDataMethod: { classPropertyName: "pullDataMethod", publicName: "pullDataMethod", 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 }, selectOptionFormat: { classPropertyName: "selectOptionFormat", publicName: "selectOptionFormat", isSignal: true, isRequired: false, transformFunction: null }, noResultsTemplate: { classPropertyName: "noResultsTemplate", publicName: "noResultsTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wlcm-autocomplete" }, 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 },
@@ -534,7 +590,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent {
                     return { bind: () => autocomplete };
                 },
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: WLCM_INPUT, descendants: true, read: ElementRef }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }], ngImport: i0, 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 *ngFor=\"let option of options\" [value]=\"option\">\n      {{ option.viewValue }}\n    </mat-option>\n\n    <mat-option [disabled]=\"true\" *ngIf=\"options.length === 0\">\n      No results found\n    </mat-option>\n  </ng-container>\n</mat-autocomplete>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$1.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: AutocompleteDirective, selector: "[wlcmAutocomplete]", outputs: ["panelScrolled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: WlcmInputDirective, selector: "[wlcmInput]" }, { kind: "directive", type: RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: WLCM_INPUT, descendants: true, read: ElementRef }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }], ngImport: i0, 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 *ngFor=\"let option of options\" [value]=\"option\">\n      {{ option.viewValue }}\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 }\n          \"\n        ></ng-container>\n      } @else {\n        No results found\n      }\n    </mat-option>\n  </ng-container>\n</mat-autocomplete>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$1.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: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: AutocompleteDirective, selector: "[wlcmAutocomplete]", outputs: ["panelScrolled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: WlcmInputDirective, selector: "[wlcmInput]" }, { kind: "directive", type: RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 WlcmAutocompleteComponent = __decorate([
     UntilDestroy(),
@@ -562,7 +618,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                                 return { bind: () => autocomplete };
                             },
                         },
-                    ], 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 *ngFor=\"let option of options\" [value]=\"option\">\n      {{ option.viewValue }}\n    </mat-option>\n\n    <mat-option [disabled]=\"true\" *ngIf=\"options.length === 0\">\n      No results found\n    </mat-option>\n  </ng-container>\n</mat-autocomplete>\n" }]
+                    ], 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 *ngFor=\"let option of options\" [value]=\"option\">\n      {{ option.viewValue }}\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 }\n          \"\n        ></ng-container>\n      } @else {\n        No results found\n      }\n    </mat-option>\n  </ng-container>\n</mat-autocomplete>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [WLCM_FORM_FIELD]
@@ -682,10 +738,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
 const PANEL_CLASS = 'wlcm-select-panel';
 const DEFAULT_CONFIG = { overlayPanelClass: [PANEL_CLASS] };
 const mergeConfig = (config) => {
-    return mergeWith({ ...DEFAULT_CONFIG }, config, (_default, _new) => {
+    const customizer = (_default, _new) => {
         if (Array.isArray(_default))
             return _default.concat(_new);
-    });
+    };
+    return mergeWith({ ...DEFAULT_CONFIG }, config, customizer);
 };
 let WlcmSelectComponent = class WlcmSelectComponent {
     openPanel() {
@@ -701,8 +758,10 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         this.selectOptionFormat = input('ValueOnly');
         this.optionTemplate = input(null);
         this.triggerTemplate = input(null);
-        this.selectionChange = output();
         this.isOptionDisabled = input(() => false);
+        this.selectionChange = output();
+        this.opened = output();
+        this.closed = output();
         this.control = new FormControl();
         this.WlcmIconName = WlcmIconName;
         this.matOptions = viewChildren(MatOption);
@@ -735,6 +794,7 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         this.selectionChange.emit(event);
     }
     panelOpened() {
+        this.opened.emit();
         this.handleClickOutside();
     }
     updateOptionsStatus() {
@@ -780,7 +840,7 @@ let WlcmSelectComponent = class WlcmSelectComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { 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 }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, 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" }, host: { listeners: { "click": "openPanel()" } }, providers: [
+    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 }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, 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,
             {
                 provide: MAT_SELECT_CONFIG,
@@ -791,7 +851,7 @@ let WlcmSelectComponent = class WlcmSelectComponent {
             },
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
-        ], viewQueries: [{ propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], hostDirectives: [{ directive: WlcmSelectInputBinderDirective }], ngImport: i0, template: "<mat-select\n  #selectComponent\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  (opened)=\"panelOpened()\"\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 options()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    @if (optionTemplate()) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionTemplate();\n          context: $any({ $implicit: option })\n        \"\n      ></ng-container>\n    } @else {\n      {{ option.viewValue }}\n    }\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", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "matOptions", predicate: MatOption, descendants: true, isSignal: true }, { propertyName: "matSelect", first: true, predicate: MatSelect, descendants: true }], hostDirectives: [{ directive: WlcmSelectInputBinderDirective }], ngImport: i0, template: "<mat-select\n  #selectComponent\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  (opened)=\"panelOpened()\"\n  (closed)=\"closed.emit()\"\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 options()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    @if (optionTemplate()) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionTemplate();\n          context: $any({ $implicit: option })\n        \"\n      ></ng-container>\n    } @else {\n      {{ option.viewValue }}\n    }\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", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 WlcmSelectComponent = __decorate([
     UntilDestroy(),
@@ -810,7 +870,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  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  (opened)=\"panelOpened()\"\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 options()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    @if (optionTemplate()) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionTemplate();\n          context: $any({ $implicit: option })\n        \"\n      ></ng-container>\n    } @else {\n      {{ option.viewValue }}\n    }\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" }]
+                    ], template: "<mat-select\n  #selectComponent\n  [multiple]=\"multiple\"\n  [disableRipple]=\"true\"\n  [formControl]=\"control\"\n  [placeholder]=\"placeholder\"\n  [hideSingleSelectionIndicator]=\"true\"\n  [ngClass]=\"{ focused: selectComponent.focused }\"\n  (selectionChange)=\"select($event)\"\n  (opened)=\"panelOpened()\"\n  (closed)=\"closed.emit()\"\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 options()\"\n    [value]=\"selectOptionFormat() === 'CompleteOption' ? option : option.value\"\n  >\n    @if (optionTemplate()) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          optionTemplate();\n          context: $any({ $implicit: option })\n        \"\n      ></ng-container>\n    } @else {\n      {{ option.viewValue }}\n    }\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" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WLCM_FORM_FIELD]
@@ -892,5 +952,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { WLCM_ERRORS, WLCM_FORM, WLCM_FORM_CONTROL, WLCM_FORM_CONTROL_PROVIDER, WLCM_FORM_FIELD, WLCM_FORM_FIELD_INPUT_CLASS, WLCM_FORM_PROVIDER, WLCM_INPUT, WLCM_INPUT_BINDER, WLCM_PRIORITY_ERRORS, WLCM_SELECT_CONFIG, WlcmAutocompleteComponent, WlcmCheckboxComponent, WlcmErrorComponent, WlcmFormFieldComponent, WlcmFormFieldCustomContainerDirective, WlcmFormFieldHintDirective, WlcmFormFieldPrefixDirective, WlcmFormFieldSuffixDirective, WlcmFormsModule, WlcmInputDirective, WlcmLabelComponent, WlcmSelectComponent, WlcmSelectInputBinderDirective };
+export { WLCM_ERRORS, WLCM_FORM, WLCM_FORM_CONTROL, WLCM_FORM_CONTROL_PROVIDER, WLCM_FORM_FIELD, WLCM_FORM_FIELD_INPUT_CLASS, WLCM_FORM_PROVIDER, WLCM_INPUT, WLCM_INPUT_BINDER, WLCM_MAPS_API_ERROR, WLCM_PRIORITY_ERRORS, WLCM_SELECT_CONFIG, WlcmAutocompleteComponent, WlcmCheckboxComponent, WlcmErrorComponent, WlcmFormFieldComponent, WlcmFormFieldCustomContainerDirective, WlcmFormFieldHintDirective, WlcmFormFieldPrefixDirective, WlcmFormFieldSuffixDirective, WlcmFormsModule, WlcmInputDirective, WlcmLabelComponent, WlcmSelectComponent, WlcmSelectInputBinderDirective };
 //# sourceMappingURL=wlcm-angular-forms.mjs.map