@wlcm/angular 17.5.34 → 17.7.0

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

@@ -1,14 +1,15 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Injectable, InjectionToken, inject, Directive, Pipe, Inject, HostListener, forwardRef, ChangeDetectorRef, Optional, Input, ContentChild, ViewChild, HostBinding, EventEmitter, NgZone, Host, Output, input, output, ElementRef, viewChildren, effect, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Injectable, InjectionToken, inject, Directive, Pipe, Inject, HostListener, forwardRef, ChangeDetectorRef, Optional, Input, ContentChild, ViewChild, HostBinding, EventEmitter, NgZone, Host, Output, input, output, ElementRef, contentChildren, computed, signal, effect, viewChildren, NgModule } from '@angular/core';
 import { __decorate, __metadata } from 'tslib';
 import * as i4 from '@angular/forms';
 import { Validators, NgControl, ControlContainer, FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 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, WlcmLoaderComponent } from '@wlcm/angular/core';
+import * as i1$3 from '@wlcm/angular/core';
+import { WlcmAutocompleteOption, DEFAULT_QUERY_PARAMS, WlcmIconName, WlcmIconDirective, WlcmLoaderComponent, ScrollDetectionApi } from '@wlcm/angular/core';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
-import * as i3$1 from '@angular/material/select';
+import * as i4$1 from '@angular/material/select';
 import { MatOption, MAT_SELECT_CONFIG, MatSelect, MatSelectModule } from '@angular/material/select';
 import * as i1$1 from '@angular/material/autocomplete';
 import { MatAutocomplete, MatAutocompleteOrigin, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
@@ -667,7 +668,8 @@ let WlcmCheckboxComponent = class WlcmCheckboxComponent {
     constructor(changeDetectorRef, parentFormMember) {
         this.changeDetectorRef = changeDetectorRef;
         this.parentFormMember = parentFormMember;
-        this.changed = output();
+        this.value = input();
+        this.changed = new EventEmitter();
         this.control = new FormControl(false);
         this.validate = () => null;
         if (this.parentFormMember) {
@@ -697,6 +699,12 @@ let WlcmCheckboxComponent = class WlcmCheckboxComponent {
         }
         this.control.enable();
     }
+    get checked() {
+        return this.control.value;
+    }
+    set checked(value) {
+        this.control.setValue(value);
+    }
     handleStateChange() {
         this.parentFormMember.stateChanges$.pipe(untilDestroyed(this)).subscribe(() => {
             this._validatorChanged?.();
@@ -704,7 +712,7 @@ let WlcmCheckboxComponent = class WlcmCheckboxComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmCheckboxComponent, 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: WlcmCheckboxComponent, isStandalone: true, selector: "wlcm-checkbox", outputs: { changed: "changed" }, host: { classAttribute: "wlcm-checkbox" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.5", type: WlcmCheckboxComponent, isStandalone: true, selector: "wlcm-checkbox", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changed: "changed" }, host: { classAttribute: "wlcm-checkbox" }, providers: [
             WLCM_FORM_CONTROL_PROVIDER,
             { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmCheckboxComponent), multi: true },
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmCheckboxComponent), multi: true },
@@ -726,7 +734,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 }, {
                     type: Inject,
                     args: [WLCM_FORM_CONTROL]
-                }] }] });
+                }] }], propDecorators: { changed: [{
+                type: Output
+            }] } });
+
+let WlcmCheckboxGroupComponent = class WlcmCheckboxGroupComponent {
+    constructor() {
+        this.checkboxes = contentChildren(WlcmCheckboxComponent);
+        this.checkboxesMap = computed(() => {
+            return new Map(this.checkboxes().map((checkbox) => [checkbox.value(), checkbox]));
+        });
+        this.values = signal(new Set());
+        this.checkboxesListUpdated = new Subject();
+        this.validate = () => null;
+        effect(() => this.handleCheckboxesToggle(this.checkboxes()));
+    }
+    ngAfterContentInit() {
+        this.updateCheckboxes(this.values());
+    }
+    writeValue(value) {
+        this.values.set(new Set(value));
+        if (this.checkboxes())
+            this.updateCheckboxes(this.values());
+    }
+    registerOnChange(callback) {
+        this._changed = callback;
+    }
+    registerOnTouched(callback) {
+        this._touched = callback;
+    }
+    registerOnValidatorChange(callback) {
+        this._validatorChanged = callback;
+    }
+    updateControl(values) {
+        this._changed?.(Array.from(values.values()));
+        this._touched?.();
+    }
+    updateCheckboxes(values) {
+        const checkboxesMap = this.checkboxesMap();
+        for (const checkbox of checkboxesMap.values()) {
+            checkbox.checked = values.has(checkbox.value());
+        }
+    }
+    handleCheckboxesToggle(checkboxes) {
+        this.checkboxesListUpdated.next();
+        const handleCheck = (checkbox) => {
+            this.values.update((values) => {
+                if (checkbox.checked) {
+                    values.add(checkbox.value());
+                }
+                else {
+                    values.delete(checkbox.value());
+                }
+                this.updateControl(values);
+                return values;
+            });
+        };
+        const changeHandlers = Array.from(checkboxes.values()).map((checkbox) => {
+            return checkbox.changed.asObservable().pipe(tap(() => handleCheck(checkbox)));
+        });
+        merge(...changeHandlers)
+            .pipe(untilDestroyed(this))
+            .pipe(takeUntil(this.checkboxesListUpdated))
+            .subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "17.3.5", type: WlcmCheckboxGroupComponent, isStandalone: true, selector: "wlcm-checkbox-group", host: { classAttribute: "wlcm-checkbox-group" }, providers: [
+            { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmCheckboxGroupComponent), multi: true },
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmCheckboxGroupComponent), multi: true },
+        ], queries: [{ propertyName: "checkboxes", predicate: WlcmCheckboxComponent, isSignal: true }], ngImport: i0, template: "<ng-content select=\"wlcm-checkbox\"></ng-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+};
+WlcmCheckboxGroupComponent = __decorate([
+    UntilDestroy(),
+    __metadata("design:paramtypes", [])
+], WlcmCheckboxGroupComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmCheckboxGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-checkbox-group', host: { class: 'wlcm-checkbox-group' }, standalone: true, imports: [CommonModule], providers: [
+                        { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmCheckboxGroupComponent), multi: true },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmCheckboxGroupComponent), multi: true },
+                    ], template: "<ng-content select=\"wlcm-checkbox\"></ng-content>\n" }]
+        }], ctorParameters: () => [] });
 
 class WlcmAutocompleteSuffixComponent {
     constructor() {
@@ -783,22 +871,31 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     openPanel() {
         this.matSelect.open();
     }
-    constructor(changeDetectorRef, formField, parentFormMember) {
+    constructor(zone, changeDetectorRef, scrollDetectionApi, formField, parentFormMember) {
+        this.zone = zone;
         this.changeDetectorRef = changeDetectorRef;
+        this.scrollDetectionApi = scrollDetectionApi;
         this.formField = formField;
         this.parentFormMember = parentFormMember;
         this.multiple = false;
         this.placeholder = 'Not selected';
+        this.queryParams = DEFAULT_QUERY_PARAMS;
+        this.paginated = input(false);
         this.options = input.required();
+        this.paginatedOptions = signal([]);
         this.selectOptionFormat = input('ValueOnly');
         this.optionTemplate = input(null);
-        this.triggerTemplate = input(null);
+        this.triggerTemplate = input();
         this.isOptionDisabled = input(() => false);
         this.selectionChange = output();
         this.opened = output();
         this.closed = output();
         this.control = new FormControl();
         this.WlcmIconName = WlcmIconName;
+        this._paginatedData = null;
+        this.computedOptions = computed(() => {
+            return this.paginated() ? this.paginatedOptions() : this.options();
+        });
         this.matOptions = viewChildren(MatOption);
         this._focusStream$ = new BehaviorSubject(EMPTY);
         this._blurStream$ = new BehaviorSubject(EMPTY);
@@ -810,7 +907,11 @@ let WlcmSelectComponent = class WlcmSelectComponent {
             this.handleStateChange();
         }
         effect(() => {
-            if (this.isOptionDisabled() && this.options().length > 0) {
+            if (this.paginated())
+                this.loadPaginatedOptions();
+        }, { allowSignalWrites: true });
+        effect(() => {
+            if (this.isOptionDisabled() && this.computedOptions().length > 0) {
                 this.updateOptionsStatus();
             }
         });
@@ -830,7 +931,11 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     }
     panelOpened() {
         this.opened.emit();
-        this.handleClickOutside();
+        this.handleScrollDown();
+    }
+    panelClosed() {
+        this.closed.emit();
+        this._touched?.();
     }
     updateOptionsStatus() {
         this.matOptions().forEach((matOption) => {
@@ -863,27 +968,41 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     get isOpen() {
         return this.matSelect?.panelOpen ?? false;
     }
+    loadPaginatedOptions() {
+        this.fetchPaginatedOptions({ ...this.queryParams, page: 1 })
+            .pipe(untilDestroyed(this), first())
+            .subscribe((paginatedData) => {
+            this._paginatedData = paginatedData;
+            this.paginatedOptions.set(paginatedData.data);
+        });
+    }
+    loadMorePaginatedOptions() {
+        if (!this._paginatedData || this._paginatedData.currPage + 1 > this._paginatedData.totalPages)
+            return;
+        this.queryParams.page++;
+        this.fetchPaginatedOptions({ ...this.queryParams })
+            .pipe(untilDestroyed(this), first())
+            .subscribe((paginatedData) => {
+            this._paginatedData = paginatedData;
+            this.paginatedOptions.update((options) => [...options, ...paginatedData.data]);
+        });
+    }
+    handleScrollDown() {
+        const element = document.querySelector('.mat-mdc-select-panel');
+        this.zone.runOutsideAngular(() => {
+            this.scrollDetectionApi.onScrolledDown(element).subscribe(() => {
+                this.zone.run(() => this.loadMorePaginatedOptions());
+            });
+        });
+    }
     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: "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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i1$3.ScrollDetectionApi }, { token: WLCM_FORM_FIELD }, { token: WLCM_FORM_CONTROL, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: WlcmSelectComponent, isStandalone: true, selector: "wlcm-select", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, fetchPaginatedOptions: { classPropertyName: "fetchPaginatedOptions", publicName: "fetchPaginatedOptions", isSignal: false, isRequired: false, transformFunction: null }, queryParams: { classPropertyName: "queryParams", publicName: "queryParams", isSignal: false, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, 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,
@@ -894,11 +1013,13 @@ 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  (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 }); }
+        ], 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)=\"panelClosed()\"\n>\n  @if (triggerTemplate()) {\n    <mat-select-trigger>\n      <ng-container\n        *ngTemplateOutlet=\"\n          triggerTemplate()!;\n          context: $any({ $implicit: selectComponent.selected })\n        \"\n      ></ng-container>\n    </mat-select-trigger>\n  }\n\n  <mat-option\n    *ngFor=\"let option of computedOptions()\"\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: i4$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: i4$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(),
-    __metadata("design:paramtypes", [ChangeDetectorRef, Object, Object])
+    __metadata("design:paramtypes", [NgZone,
+        ChangeDetectorRef,
+        ScrollDetectionApi, Object, Object])
 ], WlcmSelectComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectComponent, decorators: [{
             type: Component,
@@ -913,8 +1034,8 @@ 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  (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: [{
+                    ], 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)=\"panelClosed()\"\n>\n  @if (triggerTemplate()) {\n    <mat-select-trigger>\n      <ng-container\n        *ngTemplateOutlet=\"\n          triggerTemplate()!;\n          context: $any({ $implicit: selectComponent.selected })\n        \"\n      ></ng-container>\n    </mat-select-trigger>\n  }\n\n  <mat-option\n    *ngFor=\"let option of computedOptions()\"\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.NgZone }, { type: i0.ChangeDetectorRef }, { type: i1$3.ScrollDetectionApi }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [WLCM_FORM_FIELD]
                 }] }, { type: undefined, decorators: [{
@@ -926,6 +1047,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], fetchPaginatedOptions: [{
+                type: Input
+            }], queryParams: [{
+                type: Input
             }], matSelect: [{
                 type: ViewChild,
                 args: [MatSelect]
@@ -958,6 +1083,7 @@ const components = [
     WlcmFormFieldComponent,
     WlcmAutocompleteComponent,
     WlcmAutocompleteSuffixComponent,
+    WlcmCheckboxGroupComponent,
     WlcmCheckboxComponent,
     WlcmSelectComponent,
     WlcmLabelComponent,
@@ -967,6 +1093,7 @@ class WlcmFormsModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormsModule, imports: [WlcmFormFieldComponent,
             WlcmAutocompleteComponent,
             WlcmAutocompleteSuffixComponent,
+            WlcmCheckboxGroupComponent,
             WlcmCheckboxComponent,
             WlcmSelectComponent,
             WlcmLabelComponent, WlcmInputDirective,
@@ -976,6 +1103,7 @@ class WlcmFormsModule {
             WlcmFormFieldHintDirective, MatRadioModule], exports: [WlcmFormFieldComponent,
             WlcmAutocompleteComponent,
             WlcmAutocompleteSuffixComponent,
+            WlcmCheckboxGroupComponent,
             WlcmCheckboxComponent,
             WlcmSelectComponent,
             WlcmLabelComponent, WlcmInputDirective,
@@ -998,5 +1126,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_MAPS_API_ERROR, WLCM_PRIORITY_ERRORS, WLCM_SELECT_CONFIG, WlcmAutocomplete, WlcmAutocompleteComponent, WlcmAutocompleteSuffixComponent, WlcmCheckboxComponent, WlcmErrorComponent, WlcmFormFieldComponent, WlcmFormFieldCustomContainerDirective, WlcmFormFieldHintDirective, WlcmFormFieldPrefixDirective, WlcmFormFieldSuffixDirective, WlcmFormsModule, WlcmInputDirective, WlcmLabelComponent, WlcmPlacesApi, 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, WlcmAutocomplete, WlcmAutocompleteComponent, WlcmAutocompleteSuffixComponent, WlcmCheckboxComponent, WlcmCheckboxGroupComponent, WlcmErrorComponent, WlcmFormFieldComponent, WlcmFormFieldCustomContainerDirective, WlcmFormFieldHintDirective, WlcmFormFieldPrefixDirective, WlcmFormFieldSuffixDirective, WlcmFormsModule, WlcmInputDirective, WlcmLabelComponent, WlcmPlacesApi, WlcmSelectComponent, WlcmSelectInputBinderDirective };
 //# sourceMappingURL=wlcm-angular-forms.mjs.map