@wlcm/angular 0.0.0

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

@@ -0,0 +1,675 @@
+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 { __decorate, __metadata } from 'tslib';
+import * as i4 from '@angular/forms';
+import { Validators, NgControl, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, 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 { 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 i1$1 from '@angular/material/autocomplete';
+import { MatAutocomplete, MatAutocompleteOrigin, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import { DEFAULT_QUERY_PARAMS } from '@wlcm/angular/core';
+
+class WlcmErrorComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmErrorComponent, isStandalone: true, selector: "wlcm-error", host: { classAttribute: "wlcm-error" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmErrorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-error', standalone: true, imports: [CommonModule], host: { class: 'wlcm-error' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
+        }] });
+
+class FormStateHandlerService {
+    constructor() {
+        this._stateChanges$ = new Subject();
+        this.stateChanges$ = this._stateChanges$.asObservable();
+    }
+    updateFormState() {
+        this._stateChanges$.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FormStateHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FormStateHandlerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: FormStateHandlerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const WLCM_FORM = new InjectionToken('WLCM_FORM');
+const WLCM_FORM_PROVIDER = {
+    provide: WLCM_FORM,
+    useClass: FormStateHandlerService,
+};
+const WLCM_FORM_CONTROL = new InjectionToken('WLCM_FORM_CONTROL');
+const WLCM_FORM_CONTROL_PROVIDER = {
+    provide: WLCM_FORM_CONTROL,
+    useFactory: () => inject(WLCM_FORM, { optional: true, skipSelf: true }),
+};
+
+class WlcmFormFieldCustomContainerDirective {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormFieldCustomContainerDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmFormFieldCustomContainerDirective, isStandalone: true, selector: "[wlcmFormFieldCustomContainer]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormFieldCustomContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wlcmFormFieldCustomContainer]',
+                    standalone: true,
+                }]
+        }], 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;
+        this.errors = errors;
+        this.priorityErrors = priorityErrors;
+        this.destroy$ = new Subject();
+        this.currentError = null;
+    }
+    transform(control) {
+        this.handleStatusChanges(control);
+        this.retrieveFirstError(control.errors);
+        return this.currentError;
+    }
+    retrieveFirstError(errors) {
+        if (!errors)
+            return;
+        Object.keys(errors).forEach((key) => !errors[key] && delete errors[key]);
+        const errorsTypes = Object.getOwnPropertyNames(errors);
+        const priorityType = errorsTypes.find((type) => this.priorityErrors.has(type));
+        const outputError = priorityType || errorsTypes[0];
+        if (outputError) {
+            this.currentError = this.errors[outputError]?.(errors[outputError]);
+        }
+    }
+    handleStatusChanges(control) {
+        this.destroy$.next();
+        control.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            this.retrieveFirstError(control.errors);
+            this.changeDetectorRef.markForCheck();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ErrorsMapperPipe, deps: [{ token: i0.ChangeDetectorRef }, { token: WLCM_ERRORS }, { token: WLCM_PRIORITY_ERRORS }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.5", ngImport: i0, type: ErrorsMapperPipe, isStandalone: true, name: "errorsMapper", pure: false }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: ErrorsMapperPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'errorsMapper',
+                    standalone: true,
+                    pure: false,
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WLCM_ERRORS]
+                }] }, { type: Set, decorators: [{
+                    type: Inject,
+                    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');
+
+let WlcmFormFieldComponent = class WlcmFormFieldComponent {
+    get isFocused() {
+        return this.inputRef?.nativeElement === document.activeElement;
+    }
+    get isRequired() {
+        return this.control?.hasValidator(Validators.required);
+    }
+    get isInvalid() {
+        return this.control?.invalid;
+    }
+    get isTouched() {
+        return this.control?.touched;
+    }
+    constructor(parentFormMember, changeDetectorRef) {
+        this.parentFormMember = parentFormMember;
+        this.changeDetectorRef = changeDetectorRef;
+    }
+    ngAfterViewInit() {
+        if (!this.inputRef && !this.customContainer) {
+            throw new Error('Input element should be bound to the wlcmInput directive.');
+        }
+        this.handleStateChanges();
+    }
+    focus() {
+        if (!this.isFocused) {
+            this.inputRef?.nativeElement.focus();
+        }
+    }
+    get control() {
+        return this.ngControl?.control;
+    }
+    get inputContainer() {
+        return this.customContainer?.elementRef || this.defaultContainer;
+    }
+    handleStateChanges() {
+        const events = this.controlEvents;
+        if (this.parentFormMember) {
+            events.push(this.parentFormMember.stateChanges$);
+        }
+        merge(...events)
+            .pipe(untilDestroyed(this))
+            .subscribe(() => this.changeDetectorRef.markForCheck());
+    }
+    get inputRef() {
+        return this._inputRef?.get();
+    }
+    get controlEvents() {
+        const events = [];
+        if (this.inputRef) {
+            const element = this.inputRef.nativeElement;
+            events.push(fromEvent(element, 'focus'), fromEvent(element, 'blur'));
+        }
+        if (this.control) {
+            events.push(this.control.statusChanges);
+        }
+        return events;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormFieldComponent, deps: [{ token: WLCM_FORM_CONTROL, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    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 }); }
+};
+WlcmFormFieldComponent = __decorate([
+    UntilDestroy(),
+    __metadata("design:paramtypes", [Object, ChangeDetectorRef])
+], WlcmFormFieldComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormFieldComponent, decorators: [{
+            type: Component,
+            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" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [WLCM_FORM_CONTROL]
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { ngControl: [{
+                type: ContentChild,
+                args: [NgControl, { descendants: true }]
+            }], _inputRef: [{
+                type: ContentChild,
+                args: [WLCM_INPUT]
+            }], customContainer: [{
+                type: ContentChild,
+                args: [WlcmFormFieldCustomContainerDirective]
+            }], defaultContainer: [{
+                type: ViewChild,
+                args: ['defaultContainer']
+            }], isFocused: [{
+                type: HostBinding,
+                args: ['class.wlcm-field-focused']
+            }], isRequired: [{
+                type: HostBinding,
+                args: ['class.wlcm-field-required']
+            }], isInvalid: [{
+                type: HostBinding,
+                args: ['class.wlcm-field-invalid']
+            }], isTouched: [{
+                type: HostBinding,
+                args: ['class.wlcm-field-touched']
+            }] } });
+
+class WlcmInputDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmInputDirective, deps: [], 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 binder = inject(WLCM_INPUT_BINDER, { self: true, optional: true });
+                    return { get: () => (binder ? binder.bind() : inputRef) };
+                },
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wlcmInput]',
+                    host: { class: 'wlcm-form-field-input' },
+                    providers: [
+                        {
+                            provide: WLCM_INPUT,
+                            useFactory: () => {
+                                const inputRef = inject(ElementRef, { self: true });
+                                const binder = inject(WLCM_INPUT_BINDER, { self: true, optional: true });
+                                return { get: () => (binder ? binder.bind() : inputRef) };
+                            },
+                        },
+                    ],
+                    standalone: true,
+                }]
+        }] });
+
+class WlcmLabelComponent {
+    constructor() {
+        this.required = false;
+    }
+    get isRequired() {
+        return this.required;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmLabelComponent, isStandalone: true, selector: "wlcm-label", inputs: { required: "required" }, host: { properties: { "class.required": "this.isRequired" }, classAttribute: "wlcm-label" }, ngImport: i0, template: "<span class=\"wlcm-label-asterisk\">*</span>\n\n<ng-content></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmLabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-label', standalone: true, imports: [CommonModule], host: { class: 'wlcm-label' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"wlcm-label-asterisk\">*</span>\n\n<ng-content></ng-content>\n" }]
+        }], propDecorators: { required: [{
+                type: Input
+            }], isRequired: [{
+                type: HostBinding,
+                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;
+        this.autocomplete = autocomplete;
+        this.panelScrolled = new EventEmitter();
+        this._scrollWidth = 0;
+        this._scrollWidthChanged = false;
+        this.handleOpenEvent();
+    }
+    handleOpenEvent() {
+        this.autocomplete.opened
+            .pipe(untilDestroyed(this))
+            .pipe(observeOn(asyncScheduler))
+            .subscribe(() => this.zone.runOutsideAngular(() => this.handleScrolling()));
+    }
+    handleScrolling() {
+        const panel = this.autocomplete.panel.nativeElement;
+        this.setScrollWidth(panel.scrollWidth);
+        fromEvent(panel, 'scroll')
+            .pipe(takeUntil(this.autocomplete.closed))
+            .subscribe(() => {
+            if (this._scrollWidth !== panel.scrollWidth) {
+                this.setScrollWidth(panel.scrollWidth);
+            }
+            if (panel.scrollWidth * 0.6 <= panel.scrollTop && this._scrollWidthChanged) {
+                this.zone.run(() => this.panelScrolled.emit());
+                this._scrollWidthChanged = false;
+            }
+        });
+    }
+    setScrollWidth(width) {
+        this._scrollWidth = width;
+        this._scrollWidthChanged = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: AutocompleteDirective, deps: [{ token: i0.NgZone }, { token: i1$1.MatAutocomplete, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: AutocompleteDirective, isStandalone: true, selector: "[wlcmAutocomplete]", outputs: { panelScrolled: "panelScrolled" }, ngImport: i0 }); }
+};
+AutocompleteDirective = __decorate([
+    UntilDestroy(),
+    __metadata("design:paramtypes", [NgZone, MatAutocomplete])
+], AutocompleteDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: AutocompleteDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wlcmAutocomplete]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1$1.MatAutocomplete, decorators: [{
+                    type: Host
+                }, {
+                    type: Optional
+                }] }], propDecorators: { panelScrolled: [{
+                type: Output
+            }] } });
+
+let WlcmAutocompleteComponent = class WlcmAutocompleteComponent {
+    constructor(formField) {
+        this.formField = formField;
+        this.required = false;
+        this.placeholder = '';
+        this.control = new FormControl('');
+        this._loadMore$ = new Subject();
+        this._options$ = new BehaviorSubject([]);
+        this.options$ = this._options$.asObservable();
+        this.closed$ = new Subject();
+        this.queryParams = { ...DEFAULT_QUERY_PARAMS, limit: 15 };
+        this._paginatedData = null;
+        this.handleLoadMoreEvent();
+        this.handleControlValueChanges();
+    }
+    ngOnInit() {
+        this.loadOptions(this.queryParams).subscribe();
+    }
+    ngAfterViewInit() {
+        const container = this.formField.inputContainer;
+        const origin = new MatAutocompleteOrigin(container);
+        this.autocompleteTrigger.connectedTo = origin;
+    }
+    displayWith(value) {
+        if (value instanceof Object) {
+            return value.viewValue;
+        }
+        return value;
+    }
+    loadMore() {
+        this._loadMore$.next();
+    }
+    writeValue(value) {
+        this.control.setValue(value);
+    }
+    registerOnChange(callback) {
+        this._changed = callback;
+    }
+    registerOnTouched(callback) {
+        this._touched = callback;
+    }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            return this.control.disable();
+        }
+        this.control.enable();
+    }
+    blured() {
+        let closed = new Observable((observer) => (observer.next(), observer.complete()));
+        if (this.autocompleteTrigger.panelOpen) {
+            closed = this.closed$.pipe(first(), observeOn(asyncScheduler));
+        }
+        closed.subscribe(() => this._touched?.());
+    }
+    validate(control) {
+        if (!!this.control.value) {
+            if (this.control.value instanceof Object)
+                return null;
+            return { ...control.errors, unselected: true, required: false };
+        }
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this._onValidatorChange = fn;
+    }
+    loadOptions(params) {
+        this._options$.next([]);
+        return this.pullDataMethod({ ...params, page: 1 }).pipe(tap((paginatedData) => {
+            this._paginatedData = paginatedData;
+            this._options$.next(paginatedData.data);
+        }));
+    }
+    handleLoadMoreEvent() {
+        this._loadMore$
+            .pipe(concatMap(() => {
+            if (this._paginatedData && this._paginatedData.currPage + 1 <= this._paginatedData.totalPages) {
+                this.queryParams.page++;
+                return this.pullDataMethod(this.queryParams).pipe(tap((paginatedData) => {
+                    this._paginatedData = paginatedData;
+                    this._options$.next([...this._options$.value, ...paginatedData.data]);
+                }));
+            }
+            return EMPTY;
+        }))
+            .subscribe();
+    }
+    handleControlValueChanges() {
+        this.control.valueChanges
+            .pipe(debounceTime(200))
+            .pipe(untilDestroyed(this))
+            .pipe(filter((value) => {
+            this._onValidatorChange?.();
+            if (!(value instanceof Object))
+                return true;
+            this._changed?.(value.value);
+            return false;
+        }))
+            .pipe(switchMap((value) => {
+            return this.loadOptions({ ...this.queryParams, query: value });
+        }))
+            .subscribe();
+    }
+    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: 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 }); }
+};
+WlcmAutocompleteComponent = __decorate([
+    UntilDestroy(),
+    __metadata("design:paramtypes", [Object])
+], WlcmAutocompleteComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-autocomplete', standalone: true, imports: [
+                        CommonModule,
+                        MatAutocompleteModule,
+                        AutocompleteDirective,
+                        ReactiveFormsModule,
+                        WlcmFormFieldComponent,
+                        WlcmLabelComponent,
+                        WlcmInputDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { 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"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [WLCM_FORM_FIELD]
+                }] }], propDecorators: { pullDataMethod: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], wlcmInput: [{
+                type: ViewChild,
+                args: [WLCM_INPUT]
+            }], autocompleteTrigger: [{
+                type: ViewChild,
+                args: [MatAutocompleteTrigger]
+            }] } });
+
+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: [
+            {
+                provide: WLCM_INPUT_BINDER,
+                useFactory: () => {
+                    const ac = inject(WlcmAutocompleteComponent, { self: true });
+                    return { bind: () => ac.wlcmInput?.get() };
+                },
+            },
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmAcInputBinderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[wlcmAcInputBinder]',
+                    providers: [
+                        {
+                            provide: WLCM_INPUT_BINDER,
+                            useFactory: () => {
+                                const ac = inject(WlcmAutocompleteComponent, { self: true });
+                                return { bind: () => ac.wlcmInput?.get() };
+                            },
+                        },
+                    ],
+                }]
+        }] });
+
+class WlcmFormFieldSuffixDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormFieldSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmFormFieldSuffixDirective, isStandalone: true, selector: "[wlcmFormFieldSuffix]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormFieldSuffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wlcmFormFieldSuffix]',
+                    standalone: true,
+                }]
+        }] });
+
+class WlcmFormFieldHintDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormFieldHintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmFormFieldHintDirective, isStandalone: true, selector: "[wlcmFormFieldHint]", host: { classAttribute: "wlcm-hint" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormFieldHintDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wlcmFormFieldHint]',
+                    host: { class: 'wlcm-hint' },
+                    standalone: true,
+                }]
+        }] });
+
+const directives = [
+    WlcmInputDirective,
+    WlcmFormFieldCustomContainerDirective,
+    WlcmFormFieldSuffixDirective,
+    WlcmAcInputBinderDirective,
+    WlcmFormFieldHintDirective,
+];
+const components = [
+    WlcmFormFieldComponent,
+    WlcmAutocompleteComponent,
+    WlcmSelectComponent,
+    WlcmLabelComponent,
+];
+class WlcmFormsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormsModule, imports: [WlcmFormFieldComponent,
+            WlcmAutocompleteComponent,
+            WlcmSelectComponent,
+            WlcmLabelComponent, WlcmInputDirective,
+            WlcmFormFieldCustomContainerDirective,
+            WlcmFormFieldSuffixDirective,
+            WlcmAcInputBinderDirective,
+            WlcmFormFieldHintDirective], exports: [WlcmFormFieldComponent,
+            WlcmAutocompleteComponent,
+            WlcmSelectComponent,
+            WlcmLabelComponent, WlcmInputDirective,
+            WlcmFormFieldCustomContainerDirective,
+            WlcmFormFieldSuffixDirective,
+            WlcmAcInputBinderDirective,
+            WlcmFormFieldHintDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormsModule, imports: [components] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...components, ...directives],
+                    exports: [...components, ...directives],
+                }]
+        }] });
+
+/**
+ * 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 };
+//# sourceMappingURL=wlcm-angular-forms.mjs.map