@wlcm/angular 17.5.31 → 17.5.33

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

@@ -6,7 +6,7 @@ import { Validators, NgControl, ControlContainer, FormControl, NG_VALUE_ACCESSOR
 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 } from '@wlcm/angular/core';
+import { WlcmAutocompleteOption, DEFAULT_QUERY_PARAMS, WlcmIconName, WlcmIconDirective, WlcmLoaderComponent } from '@wlcm/angular/core';
 import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
 import * as i3$1 from '@angular/material/select';
 import { MatOption, MAT_SELECT_CONFIG, MatSelect, MatSelectModule } from '@angular/material/select';
@@ -75,6 +75,10 @@ class WlcmDefaultPlacesApi {
     }
     getPlacesPaginated(query) {
         return new Observable((subscriber) => {
+            if (query.length === 0) {
+                subscriber.next({ ...DEFAULT_PAGINATED_DATA });
+                return subscriber.complete();
+            }
             const request = { input: query };
             this._autocompleteService.getPlacePredictions(request, (predictions, status) => {
                 const result = { ...DEFAULT_PAGINATED_DATA };
@@ -247,8 +251,9 @@ let WlcmFormFieldComponent = class WlcmFormFieldComponent {
         this.handleStateChanges();
     }
     focus() {
-        if (!this.isFocused)
-            this.inputRef?.focus();
+        if (this.isFocused || this.isDisabled)
+            return;
+        this.inputRef?.focus();
     }
     get control() {
         return (this.controlContainer?.control || this.ngControl?.control) ?? null;
@@ -458,9 +463,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 type: Output
             }] } });
 
+class WlcmAutocomplete {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmAutocomplete, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmAutocomplete, decorators: [{
+            type: Directive
+        }] });
+
 const PANEL_CLASS$1 = 'wlcm-autocomplete-panel';
-let WlcmAutocompleteComponent = class WlcmAutocompleteComponent {
+let WlcmAutocompleteComponent = class WlcmAutocompleteComponent extends WlcmAutocomplete {
     constructor(formField) {
+        super();
         this.formField = formField;
         this.required = false;
         this.placeholder = '';
@@ -547,11 +561,11 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent {
         }));
     }
     handleLoadMoreEvent() {
-        this._loading$.next(true);
         this._loadMore$
             .pipe(concatMap(() => {
             if (this._paginatedData && this._paginatedData.currPage + 1 <= this._paginatedData.totalPages) {
                 this.queryParams.page++;
+                this._loading$.next(true);
                 return this.pullDataMethod(this.queryParams).pipe(tap((paginatedData) => {
                     this._paginatedData = paginatedData;
                     this._options$.next([...this._options$.value, ...paginatedData.data]);
@@ -597,7 +611,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent {
                     return { bind: () => autocomplete };
                 },
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: WLCM_INPUT, descendants: true, read: ElementRef }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }], ngImport: i0, template: "<input\n  wlcmInput\n  type=\"text\"\n  [matAutocomplete]=\"autocomplete\"\n  [placeholder]=\"placeholder\"\n  [formControl]=\"control\"\n  (blur)=\"blured()\"\n/>\n\n<mat-autocomplete\n  #autocomplete=\"matAutocomplete\"\n  wlcmAutocomplete\n  [disableRipple]=\"true\"\n  [displayWith]=\"displayWith\"\n  [hideSingleSelectionIndicator]=\"true\"\n  (panelScrolled)=\"loadMore()\"\n>\n  <ng-container *rxLet=\"$any(options$ | async); let options\">\n    <mat-option *ngFor=\"let option of options\" [value]=\"option\">\n      {{ option.viewValue }}\n    </mat-option>\n\n    <mat-option [disabled]=\"true\" *ngIf=\"options.length === 0\">\n      @if (noResultsTemplate()) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            noResultsTemplate()!;\n            context: { $implicit: control.value }\n          \"\n        ></ng-container>\n      } @else {\n        No results found\n      }\n    </mat-option>\n  </ng-container>\n</mat-autocomplete>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: AutocompleteDirective, selector: "[wlcmAutocomplete]", outputs: ["panelScrolled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: WlcmInputDirective, selector: "[wlcmInput]" }, { kind: "directive", type: RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: WLCM_INPUT, descendants: true, read: ElementRef }, { propertyName: "autocompleteTrigger", first: true, predicate: MatAutocompleteTrigger, descendants: true }, { propertyName: "autocomplete", first: true, predicate: MatAutocomplete, descendants: true }], exportAs: ["wlcmAutocomplete"], usesInheritance: true, ngImport: i0, template: "<input\n  wlcmInput\n  type=\"text\"\n  [matAutocomplete]=\"autocomplete\"\n  [placeholder]=\"placeholder\"\n  [formControl]=\"control\"\n  (blur)=\"blured()\"\n/>\n\n<mat-autocomplete\n  #autocomplete=\"matAutocomplete\"\n  wlcmAutocomplete\n  [disableRipple]=\"true\"\n  [displayWith]=\"displayWith\"\n  [hideSingleSelectionIndicator]=\"true\"\n  (panelScrolled)=\"loadMore()\"\n>\n  <ng-container *rxLet=\"$any(options$ | async); let options\">\n    <mat-option *ngFor=\"let option of options\" [value]=\"option\">\n      {{ option.viewValue }}\n    </mat-option>\n\n    <mat-option [disabled]=\"true\" *ngIf=\"options.length === 0\">\n      @if (noResultsTemplate()) {\n        <ng-container\n          *ngTemplateOutlet=\"\n            noResultsTemplate()!;\n            context: { $implicit: control.value }\n          \"\n        ></ng-container>\n      } @else {\n        No results found\n      }\n    </mat-option>\n  </ng-container>\n</mat-autocomplete>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: AutocompleteDirective, selector: "[wlcmAutocomplete]", outputs: ["panelScrolled"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: WlcmInputDirective, selector: "[wlcmInput]" }, { kind: "directive", type: RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 WlcmAutocompleteComponent = __decorate([
     UntilDestroy(),
@@ -605,7 +619,7 @@ WlcmAutocompleteComponent = __decorate([
 ], WlcmAutocompleteComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmAutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-autocomplete', host: { class: 'wlcm-autocomplete' }, standalone: true, imports: [
+            args: [{ selector: 'wlcm-autocomplete', exportAs: 'wlcmAutocomplete', host: { class: 'wlcm-autocomplete' }, standalone: true, imports: [
                         CommonModule,
                         MatAutocompleteModule,
                         AutocompleteDirective,
@@ -713,6 +727,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                     args: [WLCM_FORM_CONTROL]
                 }] }] });
 
+class WlcmAutocompleteSuffixComponent {
+    constructor() {
+        this.autocomplete = input.required();
+        this.WlcmIconName = WlcmIconName;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmAutocompleteSuffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: WlcmAutocompleteSuffixComponent, isStandalone: true, selector: "wlcm-autocomplete-suffix", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "wlcm-autocomplete-suffix" }, ngImport: i0, template: "<ng-container *rxLet=\"autocomplete().loading$ | async; let loading\">\n  @if (!loading) {\n    <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n  }\n\n  <wlcm-loader [hidden]=\"!loading\"></wlcm-loader>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }, { kind: "component", type: WlcmLoaderComponent, selector: "wlcm-loader", inputs: ["hidden"] }, { kind: "directive", type: RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmAutocompleteSuffixComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-autocomplete-suffix', host: { class: 'wlcm-autocomplete-suffix' }, standalone: true, imports: [CommonModule, WlcmIconDirective, WlcmLoaderComponent, RxLet], template: "<ng-container *rxLet=\"autocomplete().loading$ | async; let loading\">\n  @if (!loading) {\n    <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n  }\n\n  <wlcm-loader [hidden]=\"!loading\"></wlcm-loader>\n</ng-container>\n" }]
+        }] });
+
 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: [
@@ -821,6 +848,14 @@ let WlcmSelectComponent = class WlcmSelectComponent {
     registerOnValidatorChange(callback) {
         this._validatorChanged = callback;
     }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.control.disable();
+        }
+        else {
+            this.control.enable();
+        }
+    }
     validate() {
         return null;
     }
@@ -921,6 +956,7 @@ const directives = [
 const components = [
     WlcmFormFieldComponent,
     WlcmAutocompleteComponent,
+    WlcmAutocompleteSuffixComponent,
     WlcmCheckboxComponent,
     WlcmSelectComponent,
     WlcmLabelComponent,
@@ -929,6 +965,7 @@ 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,
+            WlcmAutocompleteSuffixComponent,
             WlcmCheckboxComponent,
             WlcmSelectComponent,
             WlcmLabelComponent, WlcmInputDirective,
@@ -937,6 +974,7 @@ class WlcmFormsModule {
             WlcmFormFieldPrefixDirective,
             WlcmFormFieldHintDirective, MatRadioModule], exports: [WlcmFormFieldComponent,
             WlcmAutocompleteComponent,
+            WlcmAutocompleteSuffixComponent,
             WlcmCheckboxComponent,
             WlcmSelectComponent,
             WlcmLabelComponent, WlcmInputDirective,
@@ -959,5 +997,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, WlcmAutocompleteComponent, 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, WlcmErrorComponent, WlcmFormFieldComponent, WlcmFormFieldCustomContainerDirective, WlcmFormFieldHintDirective, WlcmFormFieldPrefixDirective, WlcmFormFieldSuffixDirective, WlcmFormsModule, WlcmInputDirective, WlcmLabelComponent, WlcmPlacesApi, WlcmSelectComponent, WlcmSelectInputBinderDirective };
 //# sourceMappingURL=wlcm-angular-forms.mjs.map