@wlcm/angular 1.0.1 → 1.1.1

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

@@ -1,18 +1,19 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Injectable, InjectionToken, inject, Directive, Pipe, Inject, forwardRef, ChangeDetectorRef, Optional, ContentChild, ViewChild, HostBinding, ElementRef, Input, EventEmitter, NgZone, Host, Output, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Injectable, InjectionToken, inject, Directive, Pipe, Inject, forwardRef, ChangeDetectorRef, Optional, ContentChild, ViewChild, HostBinding, Input, EventEmitter, NgZone, Host, Output, NgModule } from '@angular/core';
 import { __decorate, __metadata } from 'tslib';
 import * as i4 from '@angular/forms';
-import { Validators, NgControl, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { Validators, NgControl, 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, first, observeOn, asyncScheduler, BehaviorSubject, Observable, tap, concatMap, EMPTY, debounceTime, filter, switchMap } from 'rxjs';
+import { Subject, takeUntil, merge, fromEvent, observeOn, asyncScheduler, BehaviorSubject, Observable, first, tap, concatMap, EMPTY, debounceTime, filter, switchMap } from 'rxjs';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import * as i2 from '@angular/material/select';
-import { MAT_SELECT_CONFIG, MatSelectModule } from '@angular/material/select';
-import * as i3 from '@angular/material/core';
+import * as i3$1 from '@angular/material/select';
+import { 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, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
-import { DEFAULT_QUERY_PARAMS } from '@wlcm/angular/core';
+import { MatAutocomplete, MatAutocompleteOrigin, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i3 from '@angular/material/core';
+import { CdkOverlayOrigin } from '@angular/cdk/overlay';
 
 class WlcmErrorComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -124,9 +125,21 @@ 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 {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormFieldPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmFormFieldPrefixDirective, isStandalone: true, selector: "[wlcmFormFieldPrefix]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormFieldPrefixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wlcmFormFieldPrefix]',
+                    standalone: true,
+                }]
+        }] });
+
 let WlcmFormFieldComponent = class WlcmFormFieldComponent {
     get isFocused() {
-        return this.inputRef?.nativeElement === document.activeElement;
+        return this.inputRef?.isFocused();
     }
     get isRequired() {
         return this.control?.hasValidator(Validators.required);
@@ -148,9 +161,8 @@ let WlcmFormFieldComponent = class WlcmFormFieldComponent {
         this.handleStateChanges();
     }
     focus() {
-        if (!this.isFocused) {
-            this.inputRef?.nativeElement.focus();
-        }
+        if (!this.isFocused)
+            this.inputRef?.focus();
     }
     get control() {
         return this.ngControl?.control;
@@ -173,8 +185,7 @@ let WlcmFormFieldComponent = class WlcmFormFieldComponent {
     get controlEvents() {
         const events = [];
         if (this.inputRef) {
-            const element = this.inputRef.nativeElement;
-            events.push(fromEvent(element, 'focus'), fromEvent(element, 'blur'));
+            events.push(this.inputRef.focus$, this.inputRef.blur$);
         }
         if (this.control) {
             events.push(this.control.statusChanges);
@@ -185,7 +196,7 @@ let WlcmFormFieldComponent = class WlcmFormFieldComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmFormFieldComponent, isStandalone: true, selector: "wlcm-form-field", host: { properties: { "class.wlcm-field-focused": "this.isFocused", "class.wlcm-field-required": "this.isRequired", "class.wlcm-field-invalid": "this.isInvalid", "class.wlcm-field-touched": "this.isTouched" }, classAttribute: "wlcm-form-field" }, providers: [
             WLCM_FORM_CONTROL_PROVIDER,
             { provide: WLCM_FORM_FIELD, useExisting: forwardRef(() => WlcmFormFieldComponent) },
-        ], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "_inputRef", first: true, predicate: WLCM_INPUT, descendants: true }, { propertyName: "customContainer", first: true, predicate: WlcmFormFieldCustomContainerDirective, descendants: true }], viewQueries: [{ propertyName: "defaultContainer", first: true, predicate: ["defaultContainer"], descendants: true }], ngImport: i0, template: "<ng-content select=\"wlcm-label\"></ng-content>\n\n<ng-content select=\"[wlcmFormFieldCustomContainer]\"></ng-content>\n\n<div\n  class=\"wlcm-field-container\"\n  (click)=\"focus()\"\n  #defaultContainer\n  *ngIf=\"!customContainer\"\n>\n  <ng-content select=\"[wlcmInput], wlcm-autocomplete\"></ng-content>\n\n  <div class=\"wlcm-field-suffix\">\n    <ng-content select=\"[wlcmFormFieldSuffix]\"></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"[wlcmFormFieldHint]\"></ng-content>\n\n<div class=\"wlcm-field-error-container\" *ngIf=\"control\">\n  <wlcm-error>{{ $any(control) | errorsMapper }}</wlcm-error>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WlcmErrorComponent, selector: "wlcm-error" }, { kind: "pipe", type: ErrorsMapperPipe, name: "errorsMapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "_inputRef", first: true, predicate: WLCM_INPUT, descendants: true }, { propertyName: "prefix", first: true, predicate: WlcmFormFieldPrefixDirective, descendants: true }, { propertyName: "customContainer", first: true, predicate: WlcmFormFieldCustomContainerDirective, descendants: true }], viewQueries: [{ propertyName: "defaultContainer", first: true, predicate: ["defaultContainer"], descendants: true }], ngImport: i0, template: "<ng-content select=\"wlcm-label\"></ng-content>\n\n<ng-content select=\"[wlcmFormFieldCustomContainer]\"></ng-content>\n\n<div\n  class=\"wlcm-field-container\"\n  (click)=\"focus()\"\n  #defaultContainer\n  *ngIf=\"!customContainer\"\n>\n  <div class=\"wlcm-field-prefix\" [class.contains-children]=\"prefix\">\n    <ng-content select=\"[wlcmFormFieldPrefix]\"></ng-content>\n  </div>\n\n  <ng-content select=\"[wlcmInput], wlcm-autocomplete\"></ng-content>\n\n  <div class=\"wlcm-field-suffix\">\n    <ng-content select=\"[wlcmFormFieldSuffix]\"></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"[wlcmFormFieldHint]\"></ng-content>\n\n<div class=\"wlcm-field-error-container\" *ngIf=\"control\">\n  <wlcm-error>{{ $any(control) | errorsMapper }}</wlcm-error>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WlcmErrorComponent, selector: "wlcm-error" }, { kind: "pipe", type: ErrorsMapperPipe, name: "errorsMapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 WlcmFormFieldComponent = __decorate([
     UntilDestroy(),
@@ -196,7 +207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             args: [{ selector: 'wlcm-form-field', standalone: true, imports: [CommonModule, WlcmErrorComponent, ErrorsMapperPipe], host: { class: 'wlcm-form-field' }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         WLCM_FORM_CONTROL_PROVIDER,
                         { provide: WLCM_FORM_FIELD, useExisting: forwardRef(() => WlcmFormFieldComponent) },
-                    ], template: "<ng-content select=\"wlcm-label\"></ng-content>\n\n<ng-content select=\"[wlcmFormFieldCustomContainer]\"></ng-content>\n\n<div\n  class=\"wlcm-field-container\"\n  (click)=\"focus()\"\n  #defaultContainer\n  *ngIf=\"!customContainer\"\n>\n  <ng-content select=\"[wlcmInput], wlcm-autocomplete\"></ng-content>\n\n  <div class=\"wlcm-field-suffix\">\n    <ng-content select=\"[wlcmFormFieldSuffix]\"></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"[wlcmFormFieldHint]\"></ng-content>\n\n<div class=\"wlcm-field-error-container\" *ngIf=\"control\">\n  <wlcm-error>{{ $any(control) | errorsMapper }}</wlcm-error>\n</div>\n" }]
+                    ], template: "<ng-content select=\"wlcm-label\"></ng-content>\n\n<ng-content select=\"[wlcmFormFieldCustomContainer]\"></ng-content>\n\n<div\n  class=\"wlcm-field-container\"\n  (click)=\"focus()\"\n  #defaultContainer\n  *ngIf=\"!customContainer\"\n>\n  <div class=\"wlcm-field-prefix\" [class.contains-children]=\"prefix\">\n    <ng-content select=\"[wlcmFormFieldPrefix]\"></ng-content>\n  </div>\n\n  <ng-content select=\"[wlcmInput], wlcm-autocomplete\"></ng-content>\n\n  <div class=\"wlcm-field-suffix\">\n    <ng-content select=\"[wlcmFormFieldSuffix]\"></ng-content>\n  </div>\n</div>\n\n<ng-content select=\"[wlcmFormFieldHint]\"></ng-content>\n\n<div class=\"wlcm-field-error-container\" *ngIf=\"control\">\n  <wlcm-error>{{ $any(control) | errorsMapper }}</wlcm-error>\n</div>\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -208,6 +219,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             }], _inputRef: [{
                 type: ContentChild,
                 args: [WLCM_INPUT]
+            }], prefix: [{
+                type: ContentChild,
+                args: [WlcmFormFieldPrefixDirective]
             }], customContainer: [{
                 type: ContentChild,
                 args: [WlcmFormFieldCustomContainerDirective]
@@ -229,14 +243,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             }] } });
 
 class WlcmInputDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    constructor(_elementRef) {
+        this._elementRef = _elementRef;
+        this.focus = () => this._elementRef.nativeElement.focus();
+        this.isFocused = () => this._elementRef.nativeElement === document.activeElement;
+        this.focus$ = fromEvent(this._elementRef.nativeElement, 'focus');
+        this.blur$ = fromEvent(this._elementRef.nativeElement, 'blur');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmInputDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmInputDirective, isStandalone: true, selector: "[wlcmInput]", host: { classAttribute: "wlcm-form-field-input" }, providers: [
             {
                 provide: WLCM_INPUT,
                 useFactory: () => {
-                    const inputRef = inject(ElementRef, { self: true });
+                    const input = inject(WlcmInputDirective, { self: true });
                     const binder = inject(WLCM_INPUT_BINDER, { self: true, optional: true });
-                    return { get: () => (binder ? binder.bind() : inputRef) };
+                    return { get: () => (binder ? binder.bind() : input) };
                 },
             },
         ], ngImport: i0 }); }
@@ -250,15 +271,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                         {
                             provide: WLCM_INPUT,
                             useFactory: () => {
-                                const inputRef = inject(ElementRef, { self: true });
+                                const input = inject(WlcmInputDirective, { self: true });
                                 const binder = inject(WLCM_INPUT_BINDER, { self: true, optional: true });
-                                return { get: () => (binder ? binder.bind() : inputRef) };
+                                return { get: () => (binder ? binder.bind() : input) };
                             },
                         },
                     ],
                     standalone: true,
                 }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 
 class WlcmLabelComponent {
     constructor() {
@@ -280,99 +301,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 args: ['class.required']
             }] } });
 
-const PANEL_CLASS = 'wlcm-select-panel';
-let WlcmSelectComponent = class WlcmSelectComponent {
-    constructor(changeDetectorRef, parentFormMember) {
-        this.changeDetectorRef = changeDetectorRef;
-        this.parentFormMember = parentFormMember;
-        this.multiple = false;
-        this.placeholder = 'Not selected';
-        this.options = [];
-        this.control = new FormControl();
-        if (this.parentFormMember) {
-            this.handleStateChange();
-        }
-    }
-    select(event) {
-        this._changed?.(event.value);
-        this._validatorChanged?.();
-    }
-    panelOpened() {
-        this.handleClickOutside();
-    }
-    writeValue(value) {
-        this.control.setValue(value);
-    }
-    registerOnChange(callback) {
-        this._changed = callback;
-    }
-    registerOnTouched(callback) {
-        this._touched = callback;
-    }
-    registerOnValidatorChange(callback) {
-        this._validatorChanged = callback;
-    }
-    validate(control) {
-        this.control.setErrors(control.errors);
-        if (control.touched) {
-            this.control.markAsTouched();
-        }
-        else {
-            this.control.markAsUntouched();
-        }
-    }
-    handleStateChange() {
-        this.parentFormMember.stateChanges$.pipe(untilDestroyed(this)).subscribe(() => {
-            this._validatorChanged?.();
-            this.changeDetectorRef.markForCheck();
-        });
-    }
-    handleClickOutside() {
-        const overlayContainer = document.querySelector(`.cdk-overlay-container:has(.${PANEL_CLASS})`);
-        const backdrop = overlayContainer?.querySelector(`.cdk-overlay-backdrop`);
-        if (backdrop instanceof HTMLElement) {
-            fromEvent(backdrop, 'click')
-                .pipe(first())
-                .subscribe(() => {
-                this._touched?.();
-                this._validatorChanged?.();
-                this.changeDetectorRef.markForCheck();
-            });
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: WLCM_FORM_CONTROL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmSelectComponent, isStandalone: true, selector: "wlcm-select", inputs: { multiple: "multiple", placeholder: "placeholder", options: "options" }, providers: [
-            WLCM_FORM_CONTROL_PROVIDER,
-            { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: PANEL_CLASS } },
-            { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
-            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
-        ], 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  <mat-option *ngFor=\"let option of options\" [value]=\"option.value\">\n    {{ option.viewValue }}\n  </mat-option>\n</mat-select>\n", styles: [":host{display:block}\n"], 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: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-};
-WlcmSelectComponent = __decorate([
-    UntilDestroy(),
-    __metadata("design:paramtypes", [ChangeDetectorRef, Object])
-], WlcmSelectComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'wlcm-select', standalone: true, imports: [CommonModule, MatSelectModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        WLCM_FORM_CONTROL_PROVIDER,
-                        { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: PANEL_CLASS } },
-                        { 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  <mat-option *ngFor=\"let option of options\" [value]=\"option.value\">\n    {{ option.viewValue }}\n  </mat-option>\n</mat-select>\n", styles: [":host{display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [WLCM_FORM_CONTROL]
-                }] }], propDecorators: { multiple: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }] } });
-
 let AutocompleteDirective = class AutocompleteDirective {
     constructor(zone, autocomplete) {
         this.zone = zone;
@@ -428,6 +356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 type: Output
             }] } });
 
+const PANEL_CLASS$1 = 'wlcm-autocomplete-panel';
 let WlcmAutocompleteComponent = class WlcmAutocompleteComponent {
     constructor(formField) {
         this.formField = formField;
@@ -532,6 +461,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent {
     }
     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: "14.0.0", version: "17.3.5", type: WlcmAutocompleteComponent, isStandalone: true, selector: "wlcm-autocomplete", inputs: { pullDataMethod: "pullDataMethod", label: "label", required: "required", placeholder: "placeholder" }, 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 },
         ], viewQueries: [{ propertyName: "wlcmInput", first: true, predicate: WLCM_INPUT, descendants: true }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, 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  (closed)=\"closed$.next()\"\n>\n  <mat-option *ngFor=\"let option of options$ | async\" [value]=\"option\">\n    {{ option.viewValue }}\n  </mat-option>\n</mat-autocomplete>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -551,6 +481,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                         WlcmLabelComponent,
                         WlcmInputDirective,
                     ], 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 },
                     ], 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  (closed)=\"closed$.next()\"\n>\n  <mat-option *ngFor=\"let option of options$ | async\" [value]=\"option\">\n    {{ option.viewValue }}\n  </mat-option>\n</mat-autocomplete>\n", styles: [":host{display:block}\n"] }]
@@ -573,6 +504,159 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 args: [MatAutocompleteTrigger]
             }] } });
 
+class WlcmSelectInputBinderDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectInputBinderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmSelectInputBinderDirective, isStandalone: true, selector: "[wlcmSelectInputBinder]", providers: [
+            {
+                provide: WLCM_INPUT_BINDER,
+                useFactory: () => {
+                    const select = inject(WlcmSelectComponent, { self: true });
+                    return { bind: () => select };
+                },
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectInputBinderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[wlcmSelectInputBinder]',
+                    providers: [
+                        {
+                            provide: WLCM_INPUT_BINDER,
+                            useFactory: () => {
+                                const select = inject(WlcmSelectComponent, { self: true });
+                                return { bind: () => select };
+                            },
+                        },
+                    ],
+                }]
+        }] });
+
+const PANEL_CLASS = 'wlcm-select-panel';
+let WlcmSelectComponent = class WlcmSelectComponent {
+    constructor(changeDetectorRef, formField, parentFormMember) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.formField = formField;
+        this.parentFormMember = parentFormMember;
+        this.multiple = false;
+        this.placeholder = 'Not selected';
+        this.options = [];
+        this.control = new FormControl();
+        this.WlcmIconName = WlcmIconName;
+        this._focusStream$ = new BehaviorSubject(EMPTY);
+        this._blurStream$ = new BehaviorSubject(EMPTY);
+        this.focus$ = this._focusStream$.pipe(switchMap((stream) => stream));
+        this.blur$ = this._blurStream$.pipe(switchMap((stream) => stream));
+        this.focus = () => this.matSelect.open();
+        this.isFocused = () => this.isOpen;
+        if (this.parentFormMember) {
+            this.handleStateChange();
+        }
+    }
+    ngAfterViewInit() {
+        const formField = this.formField.inputContainer;
+        if (formField) {
+            this.matSelect._preferredOverlayOrigin = new CdkOverlayOrigin(this.formField.inputContainer);
+        }
+        this._focusStream$.next(this.matSelect._openedStream);
+        this._blurStream$.next(this.matSelect._closedStream);
+    }
+    select(event) {
+        this._changed?.(event.value);
+        this._validatorChanged?.();
+    }
+    openPanel() {
+        this.matSelect.open();
+    }
+    closePanel() {
+        this.matSelect.close();
+    }
+    panelOpened() {
+        this.handleClickOutside();
+    }
+    writeValue(value) {
+        this.control.setValue(value);
+    }
+    registerOnChange(callback) {
+        this._changed = callback;
+    }
+    registerOnTouched(callback) {
+        this._touched = callback;
+    }
+    registerOnValidatorChange(callback) {
+        this._validatorChanged = callback;
+    }
+    validate(control) {
+        this.control.setErrors(control.errors);
+        if (control.touched) {
+            this.control.markAsTouched();
+        }
+        else {
+            this.control.markAsUntouched();
+        }
+    }
+    get isOpen() {
+        return this.matSelect?.panelOpen ?? false;
+    }
+    handleStateChange() {
+        this.parentFormMember.stateChanges$.pipe(untilDestroyed(this)).subscribe(() => {
+            this._validatorChanged?.();
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    handleClickOutside() {
+        const overlayContainer = document.querySelector(`.cdk-overlay-container:has(.${PANEL_CLASS})`);
+        const backdrop = overlayContainer?.querySelector(`.cdk-overlay-backdrop`);
+        if (backdrop instanceof HTMLElement) {
+            fromEvent(backdrop, 'click')
+                .pipe(first())
+                .subscribe(() => {
+                this._touched?.();
+                this._validatorChanged?.();
+                this.changeDetectorRef.markForCheck();
+            });
+        }
+    }
+    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: "14.0.0", version: "17.3.5", type: WlcmSelectComponent, isStandalone: true, selector: "wlcm-select", inputs: { multiple: "multiple", placeholder: "placeholder", options: "options" }, providers: [
+            WLCM_FORM_CONTROL_PROVIDER,
+            { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: PANEL_CLASS } },
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
+        ], viewQueries: [{ 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  <mat-option *ngFor=\"let option of options\" [value]=\"option.value\">\n    {{ option.viewValue }}\n  </mat-option>\n</mat-select>\n\n<ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n", styles: [":host{display:flex;align-items:center}\n"], 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: "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: "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+};
+WlcmSelectComponent = __decorate([
+    UntilDestroy(),
+    __metadata("design:paramtypes", [ChangeDetectorRef, Object, Object])
+], WlcmSelectComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-select', standalone: true, imports: [CommonModule, MatSelectModule, ReactiveFormsModule, WlcmIconDirective, WlcmSelectInputBinderDirective], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [WlcmSelectInputBinderDirective], providers: [
+                        WLCM_FORM_CONTROL_PROVIDER,
+                        { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: PANEL_CLASS } },
+                        { 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  <mat-option *ngFor=\"let option of options\" [value]=\"option.value\">\n    {{ option.viewValue }}\n  </mat-option>\n</mat-select>\n\n<ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n", styles: [":host{display:flex;align-items:center}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WLCM_FORM_FIELD]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [WLCM_FORM_CONTROL]
+                }] }], propDecorators: { multiple: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], matSelect: [{
+                type: ViewChild,
+                args: [MatSelect]
+            }] } });
+
 class WlcmAcInputBinderDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmAcInputBinderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmAcInputBinderDirective, isStandalone: true, selector: "[wlcmAcInputBinder]", providers: [
@@ -631,6 +715,7 @@ const directives = [
     WlcmInputDirective,
     WlcmFormFieldCustomContainerDirective,
     WlcmFormFieldSuffixDirective,
+    WlcmFormFieldPrefixDirective,
     WlcmAcInputBinderDirective,
     WlcmFormFieldHintDirective,
 ];
@@ -648,6 +733,7 @@ class WlcmFormsModule {
             WlcmLabelComponent, WlcmInputDirective,
             WlcmFormFieldCustomContainerDirective,
             WlcmFormFieldSuffixDirective,
+            WlcmFormFieldPrefixDirective,
             WlcmAcInputBinderDirective,
             WlcmFormFieldHintDirective], exports: [WlcmFormFieldComponent,
             WlcmAutocompleteComponent,
@@ -655,6 +741,7 @@ class WlcmFormsModule {
             WlcmLabelComponent, WlcmInputDirective,
             WlcmFormFieldCustomContainerDirective,
             WlcmFormFieldSuffixDirective,
+            WlcmFormFieldPrefixDirective,
             WlcmAcInputBinderDirective,
             WlcmFormFieldHintDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormsModule, imports: [components] }); }
@@ -671,5 +758,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_PROVIDER, WLCM_INPUT, WLCM_INPUT_BINDER, WLCM_PRIORITY_ERRORS, WlcmAcInputBinderDirective, WlcmAutocompleteComponent, WlcmErrorComponent, WlcmFormFieldComponent, WlcmFormFieldCustomContainerDirective, WlcmFormFieldHintDirective, WlcmFormFieldSuffixDirective, WlcmFormsModule, WlcmInputDirective, WlcmLabelComponent, WlcmSelectComponent };
+export { WLCM_ERRORS, WLCM_FORM, WLCM_FORM_CONTROL, WLCM_FORM_CONTROL_PROVIDER, WLCM_FORM_FIELD, WLCM_FORM_PROVIDER, WLCM_INPUT, WLCM_INPUT_BINDER, WLCM_PRIORITY_ERRORS, WlcmAcInputBinderDirective, WlcmAutocompleteComponent, WlcmErrorComponent, WlcmFormFieldComponent, WlcmFormFieldCustomContainerDirective, WlcmFormFieldHintDirective, WlcmFormFieldPrefixDirective, WlcmFormFieldSuffixDirective, WlcmFormsModule, WlcmInputDirective, WlcmLabelComponent, WlcmSelectComponent, WlcmSelectInputBinderDirective };
 //# sourceMappingURL=wlcm-angular-forms.mjs.map