@wlcm/angular 1.0.1 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/core/esm2022/index.mjs +4 -1
  2. package/core/esm2022/lib/constants/icon.contants.mjs +11 -0
  3. package/core/esm2022/lib/directives/icon.directive.mjs +29 -0
  4. package/core/esm2022/lib/models/icon.models.mjs +5 -0
  5. package/core/fesm2022/wlcm-angular-core.mjs +52 -13
  6. package/core/fesm2022/wlcm-angular-core.mjs.map +1 -1
  7. package/core/index.d.ts +3 -0
  8. package/core/lib/constants/icon.contants.d.ts +4 -0
  9. package/core/lib/directives/icon.directive.d.ts +12 -0
  10. package/core/lib/models/icon.models.d.ts +7 -0
  11. package/forms/esm2022/index.mjs +3 -1
  12. package/forms/esm2022/lib/forms/components/autocomplete/autocomplete.component.mjs +5 -2
  13. package/forms/esm2022/lib/forms/components/form-field/form-field.component.mjs +12 -10
  14. package/forms/esm2022/lib/forms/components/select/select.component.mjs +50 -15
  15. package/forms/esm2022/lib/forms/directives/form-field-prefix.directive.mjs +14 -0
  16. package/forms/esm2022/lib/forms/directives/input.directive.mjs +15 -7
  17. package/forms/esm2022/lib/forms/directives/select-input-binder.directive.mjs +33 -0
  18. package/forms/esm2022/lib/forms/forms.module.mjs +5 -1
  19. package/forms/esm2022/lib/forms/models/input.models.mjs +1 -1
  20. package/forms/fesm2022/wlcm-angular-forms.mjs +203 -116
  21. package/forms/fesm2022/wlcm-angular-forms.mjs.map +1 -1
  22. package/forms/index.d.ts +2 -0
  23. package/forms/lib/forms/components/form-field/form-field.component.d.ts +4 -2
  24. package/forms/lib/forms/components/select/select.component.d.ts +22 -7
  25. package/forms/lib/forms/directives/form-field-prefix.directive.d.ts +5 -0
  26. package/forms/lib/forms/directives/input.directive.d.ts +10 -1
  27. package/forms/lib/forms/directives/select-input-binder.directive.d.ts +5 -0
  28. package/forms/lib/forms/forms.module.d.ts +4 -3
  29. package/forms/lib/forms/models/input.models.d.ts +9 -3
  30. package/package.json +1 -1
  31. package/styles/components/forms/_form-field.scss +6 -0
  32. package/styles/components/forms/_select.scss +11 -21
@@ -1,18 +1,19 @@
1
1
  import * as i0 from '@angular/core';
2
- 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';
2
+ import { Component, ChangeDetectionStrategy, Injectable, InjectionToken, inject, Directive, Pipe, Inject, forwardRef, ChangeDetectorRef, Optional, ContentChild, ViewChild, HostBinding, Input, EventEmitter, NgZone, Host, Output, NgModule } from '@angular/core';
3
3
  import { __decorate, __metadata } from 'tslib';
4
4
  import * as i4 from '@angular/forms';
5
- import { Validators, NgControl, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
5
+ import { Validators, NgControl, FormControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, ReactiveFormsModule } from '@angular/forms';
6
6
  import * as i1 from '@angular/common';
7
7
  import { CommonModule } from '@angular/common';
8
- import { Subject, takeUntil, merge, fromEvent, first, observeOn, asyncScheduler, BehaviorSubject, Observable, tap, concatMap, EMPTY, debounceTime, filter, switchMap } from 'rxjs';
8
+ import { Subject, takeUntil, merge, fromEvent, observeOn, asyncScheduler, BehaviorSubject, Observable, first, tap, concatMap, EMPTY, debounceTime, filter, switchMap } from 'rxjs';
9
9
  import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
10
- import * as i2 from '@angular/material/select';
11
- import { MAT_SELECT_CONFIG, MatSelectModule } from '@angular/material/select';
12
- import * as i3 from '@angular/material/core';
10
+ import * as i3$1 from '@angular/material/select';
11
+ import { MAT_SELECT_CONFIG, MatSelect, MatSelectModule } from '@angular/material/select';
12
+ import { DEFAULT_QUERY_PARAMS, WlcmIconName, WlcmIconDirective } from '@wlcm/angular/core';
13
13
  import * as i1$1 from '@angular/material/autocomplete';
14
- import { MatAutocomplete, MatAutocompleteOrigin, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
15
- import { DEFAULT_QUERY_PARAMS } from '@wlcm/angular/core';
14
+ import { MatAutocomplete, MatAutocompleteOrigin, MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
15
+ import * as i3 from '@angular/material/core';
16
+ import { CdkOverlayOrigin } from '@angular/cdk/overlay';
16
17
 
17
18
  class WlcmErrorComponent {
18
19
  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');
124
125
  const WLCM_INPUT_BINDER = new InjectionToken('WLCM_INPUT_BINDER');
125
126
  const WLCM_FORM_FIELD = new InjectionToken('WLCM_FORM_FIELD');
126
127
 
128
+ class WlcmFormFieldPrefixDirective {
129
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormFieldPrefixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
130
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmFormFieldPrefixDirective, isStandalone: true, selector: "[wlcmFormFieldPrefix]", ngImport: i0 }); }
131
+ }
132
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmFormFieldPrefixDirective, decorators: [{
133
+ type: Directive,
134
+ args: [{
135
+ selector: '[wlcmFormFieldPrefix]',
136
+ standalone: true,
137
+ }]
138
+ }] });
139
+
127
140
  let WlcmFormFieldComponent = class WlcmFormFieldComponent {
128
141
  get isFocused() {
129
- return this.inputRef?.nativeElement === document.activeElement;
142
+ return this.inputRef?.isFocused();
130
143
  }
131
144
  get isRequired() {
132
145
  return this.control?.hasValidator(Validators.required);
@@ -148,9 +161,8 @@ let WlcmFormFieldComponent = class WlcmFormFieldComponent {
148
161
  this.handleStateChanges();
149
162
  }
150
163
  focus() {
151
- if (!this.isFocused) {
152
- this.inputRef?.nativeElement.focus();
153
- }
164
+ if (!this.isFocused)
165
+ this.inputRef?.focus();
154
166
  }
155
167
  get control() {
156
168
  return this.ngControl?.control;
@@ -173,8 +185,7 @@ let WlcmFormFieldComponent = class WlcmFormFieldComponent {
173
185
  get controlEvents() {
174
186
  const events = [];
175
187
  if (this.inputRef) {
176
- const element = this.inputRef.nativeElement;
177
- events.push(fromEvent(element, 'focus'), fromEvent(element, 'blur'));
188
+ events.push(this.inputRef.focus$, this.inputRef.blur$);
178
189
  }
179
190
  if (this.control) {
180
191
  events.push(this.control.statusChanges);
@@ -185,7 +196,7 @@ let WlcmFormFieldComponent = class WlcmFormFieldComponent {
185
196
  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: [
186
197
  WLCM_FORM_CONTROL_PROVIDER,
187
198
  { provide: WLCM_FORM_FIELD, useExisting: forwardRef(() => WlcmFormFieldComponent) },
188
- ], 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 }); }
199
+ ], 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 }); }
189
200
  };
190
201
  WlcmFormFieldComponent = __decorate([
191
202
  UntilDestroy(),
@@ -196,7 +207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
196
207
  args: [{ selector: 'wlcm-form-field', standalone: true, imports: [CommonModule, WlcmErrorComponent, ErrorsMapperPipe], host: { class: 'wlcm-form-field' }, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
197
208
  WLCM_FORM_CONTROL_PROVIDER,
198
209
  { provide: WLCM_FORM_FIELD, useExisting: forwardRef(() => WlcmFormFieldComponent) },
199
- ], 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" }]
210
+ ], 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" }]
200
211
  }], ctorParameters: () => [{ type: undefined, decorators: [{
201
212
  type: Optional
202
213
  }, {
@@ -208,6 +219,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
208
219
  }], _inputRef: [{
209
220
  type: ContentChild,
210
221
  args: [WLCM_INPUT]
222
+ }], prefix: [{
223
+ type: ContentChild,
224
+ args: [WlcmFormFieldPrefixDirective]
211
225
  }], customContainer: [{
212
226
  type: ContentChild,
213
227
  args: [WlcmFormFieldCustomContainerDirective]
@@ -229,14 +243,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
229
243
  }] } });
230
244
 
231
245
  class WlcmInputDirective {
232
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
246
+ constructor(_elementRef) {
247
+ this._elementRef = _elementRef;
248
+ this.focus = () => this._elementRef.nativeElement.focus();
249
+ this.isFocused = () => this._elementRef.nativeElement === document.activeElement;
250
+ this.focus$ = fromEvent(this._elementRef.nativeElement, 'focus');
251
+ this.blur$ = fromEvent(this._elementRef.nativeElement, 'blur');
252
+ }
253
+ 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 }); }
233
254
  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: [
234
255
  {
235
256
  provide: WLCM_INPUT,
236
257
  useFactory: () => {
237
- const inputRef = inject(ElementRef, { self: true });
258
+ const input = inject(WlcmInputDirective, { self: true });
238
259
  const binder = inject(WLCM_INPUT_BINDER, { self: true, optional: true });
239
- return { get: () => (binder ? binder.bind() : inputRef) };
260
+ return { get: () => (binder ? binder.bind() : input) };
240
261
  },
241
262
  },
242
263
  ], ngImport: i0 }); }
@@ -250,15 +271,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
250
271
  {
251
272
  provide: WLCM_INPUT,
252
273
  useFactory: () => {
253
- const inputRef = inject(ElementRef, { self: true });
274
+ const input = inject(WlcmInputDirective, { self: true });
254
275
  const binder = inject(WLCM_INPUT_BINDER, { self: true, optional: true });
255
- return { get: () => (binder ? binder.bind() : inputRef) };
276
+ return { get: () => (binder ? binder.bind() : input) };
256
277
  },
257
278
  },
258
279
  ],
259
280
  standalone: true,
260
281
  }]
261
- }] });
282
+ }], ctorParameters: () => [{ type: i0.ElementRef }] });
262
283
 
263
284
  class WlcmLabelComponent {
264
285
  constructor() {
@@ -280,99 +301,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
280
301
  args: ['class.required']
281
302
  }] } });
282
303
 
283
- const PANEL_CLASS = 'wlcm-select-panel';
284
- let WlcmSelectComponent = class WlcmSelectComponent {
285
- constructor(changeDetectorRef, parentFormMember) {
286
- this.changeDetectorRef = changeDetectorRef;
287
- this.parentFormMember = parentFormMember;
288
- this.multiple = false;
289
- this.placeholder = 'Not selected';
290
- this.options = [];
291
- this.control = new FormControl();
292
- if (this.parentFormMember) {
293
- this.handleStateChange();
294
- }
295
- }
296
- select(event) {
297
- this._changed?.(event.value);
298
- this._validatorChanged?.();
299
- }
300
- panelOpened() {
301
- this.handleClickOutside();
302
- }
303
- writeValue(value) {
304
- this.control.setValue(value);
305
- }
306
- registerOnChange(callback) {
307
- this._changed = callback;
308
- }
309
- registerOnTouched(callback) {
310
- this._touched = callback;
311
- }
312
- registerOnValidatorChange(callback) {
313
- this._validatorChanged = callback;
314
- }
315
- validate(control) {
316
- this.control.setErrors(control.errors);
317
- if (control.touched) {
318
- this.control.markAsTouched();
319
- }
320
- else {
321
- this.control.markAsUntouched();
322
- }
323
- }
324
- handleStateChange() {
325
- this.parentFormMember.stateChanges$.pipe(untilDestroyed(this)).subscribe(() => {
326
- this._validatorChanged?.();
327
- this.changeDetectorRef.markForCheck();
328
- });
329
- }
330
- handleClickOutside() {
331
- const overlayContainer = document.querySelector(`.cdk-overlay-container:has(.${PANEL_CLASS})`);
332
- const backdrop = overlayContainer?.querySelector(`.cdk-overlay-backdrop`);
333
- if (backdrop instanceof HTMLElement) {
334
- fromEvent(backdrop, 'click')
335
- .pipe(first())
336
- .subscribe(() => {
337
- this._touched?.();
338
- this._validatorChanged?.();
339
- this.changeDetectorRef.markForCheck();
340
- });
341
- }
342
- }
343
- 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 }); }
344
- 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: [
345
- WLCM_FORM_CONTROL_PROVIDER,
346
- { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: PANEL_CLASS } },
347
- { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
348
- { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
349
- ], 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 }); }
350
- };
351
- WlcmSelectComponent = __decorate([
352
- UntilDestroy(),
353
- __metadata("design:paramtypes", [ChangeDetectorRef, Object])
354
- ], WlcmSelectComponent);
355
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectComponent, decorators: [{
356
- type: Component,
357
- args: [{ selector: 'wlcm-select', standalone: true, imports: [CommonModule, MatSelectModule, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
358
- WLCM_FORM_CONTROL_PROVIDER,
359
- { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: PANEL_CLASS } },
360
- { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
361
- { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
362
- ], 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"] }]
363
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
364
- type: Optional
365
- }, {
366
- type: Inject,
367
- args: [WLCM_FORM_CONTROL]
368
- }] }], propDecorators: { multiple: [{
369
- type: Input
370
- }], placeholder: [{
371
- type: Input
372
- }], options: [{
373
- type: Input
374
- }] } });
375
-
376
304
  let AutocompleteDirective = class AutocompleteDirective {
377
305
  constructor(zone, autocomplete) {
378
306
  this.zone = zone;
@@ -428,6 +356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
428
356
  type: Output
429
357
  }] } });
430
358
 
359
+ const PANEL_CLASS$1 = 'wlcm-autocomplete-panel';
431
360
  let WlcmAutocompleteComponent = class WlcmAutocompleteComponent {
432
361
  constructor(formField) {
433
362
  this.formField = formField;
@@ -532,6 +461,7 @@ let WlcmAutocompleteComponent = class WlcmAutocompleteComponent {
532
461
  }
533
462
  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 }); }
534
463
  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: [
464
+ { provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, useValue: { overlayPanelClass: PANEL_CLASS$1 } },
535
465
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmAutocompleteComponent), multi: true },
536
466
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmAutocompleteComponent), multi: true },
537
467
  ], 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
551
481
  WlcmLabelComponent,
552
482
  WlcmInputDirective,
553
483
  ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
484
+ { provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, useValue: { overlayPanelClass: PANEL_CLASS$1 } },
554
485
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmAutocompleteComponent), multi: true },
555
486
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmAutocompleteComponent), multi: true },
556
487
  ], 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
573
504
  args: [MatAutocompleteTrigger]
574
505
  }] } });
575
506
 
507
+ class WlcmSelectInputBinderDirective {
508
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectInputBinderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
509
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmSelectInputBinderDirective, isStandalone: true, selector: "[wlcmSelectInputBinder]", providers: [
510
+ {
511
+ provide: WLCM_INPUT_BINDER,
512
+ useFactory: () => {
513
+ const select = inject(WlcmSelectComponent, { self: true });
514
+ return { bind: () => select };
515
+ },
516
+ },
517
+ ], ngImport: i0 }); }
518
+ }
519
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectInputBinderDirective, decorators: [{
520
+ type: Directive,
521
+ args: [{
522
+ standalone: true,
523
+ selector: '[wlcmSelectInputBinder]',
524
+ providers: [
525
+ {
526
+ provide: WLCM_INPUT_BINDER,
527
+ useFactory: () => {
528
+ const select = inject(WlcmSelectComponent, { self: true });
529
+ return { bind: () => select };
530
+ },
531
+ },
532
+ ],
533
+ }]
534
+ }] });
535
+
536
+ const PANEL_CLASS = 'wlcm-select-panel';
537
+ let WlcmSelectComponent = class WlcmSelectComponent {
538
+ constructor(changeDetectorRef, formField, parentFormMember) {
539
+ this.changeDetectorRef = changeDetectorRef;
540
+ this.formField = formField;
541
+ this.parentFormMember = parentFormMember;
542
+ this.multiple = false;
543
+ this.placeholder = 'Not selected';
544
+ this.options = [];
545
+ this.control = new FormControl();
546
+ this.WlcmIconName = WlcmIconName;
547
+ this._focusStream$ = new BehaviorSubject(EMPTY);
548
+ this._blurStream$ = new BehaviorSubject(EMPTY);
549
+ this.focus$ = this._focusStream$.pipe(switchMap((stream) => stream));
550
+ this.blur$ = this._blurStream$.pipe(switchMap((stream) => stream));
551
+ this.focus = () => this.matSelect.open();
552
+ this.isFocused = () => this.isOpen;
553
+ if (this.parentFormMember) {
554
+ this.handleStateChange();
555
+ }
556
+ }
557
+ ngAfterViewInit() {
558
+ const formField = this.formField.inputContainer;
559
+ if (formField) {
560
+ this.matSelect._preferredOverlayOrigin = new CdkOverlayOrigin(this.formField.inputContainer);
561
+ }
562
+ this._focusStream$.next(this.matSelect._openedStream);
563
+ this._blurStream$.next(this.matSelect._closedStream);
564
+ }
565
+ select(event) {
566
+ this._changed?.(event.value);
567
+ this._validatorChanged?.();
568
+ }
569
+ openPanel() {
570
+ this.matSelect.open();
571
+ }
572
+ closePanel() {
573
+ this.matSelect.close();
574
+ }
575
+ panelOpened() {
576
+ this.handleClickOutside();
577
+ }
578
+ writeValue(value) {
579
+ this.control.setValue(value);
580
+ }
581
+ registerOnChange(callback) {
582
+ this._changed = callback;
583
+ }
584
+ registerOnTouched(callback) {
585
+ this._touched = callback;
586
+ }
587
+ registerOnValidatorChange(callback) {
588
+ this._validatorChanged = callback;
589
+ }
590
+ validate(control) {
591
+ this.control.setErrors(control.errors);
592
+ if (control.touched) {
593
+ this.control.markAsTouched();
594
+ }
595
+ else {
596
+ this.control.markAsUntouched();
597
+ }
598
+ }
599
+ get isOpen() {
600
+ return this.matSelect?.panelOpen ?? false;
601
+ }
602
+ handleStateChange() {
603
+ this.parentFormMember.stateChanges$.pipe(untilDestroyed(this)).subscribe(() => {
604
+ this._validatorChanged?.();
605
+ this.changeDetectorRef.markForCheck();
606
+ });
607
+ }
608
+ handleClickOutside() {
609
+ const overlayContainer = document.querySelector(`.cdk-overlay-container:has(.${PANEL_CLASS})`);
610
+ const backdrop = overlayContainer?.querySelector(`.cdk-overlay-backdrop`);
611
+ if (backdrop instanceof HTMLElement) {
612
+ fromEvent(backdrop, 'click')
613
+ .pipe(first())
614
+ .subscribe(() => {
615
+ this._touched?.();
616
+ this._validatorChanged?.();
617
+ this.changeDetectorRef.markForCheck();
618
+ });
619
+ }
620
+ }
621
+ 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 }); }
622
+ 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: [
623
+ WLCM_FORM_CONTROL_PROVIDER,
624
+ { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: PANEL_CLASS } },
625
+ { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
626
+ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
627
+ ], 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 }); }
628
+ };
629
+ WlcmSelectComponent = __decorate([
630
+ UntilDestroy(),
631
+ __metadata("design:paramtypes", [ChangeDetectorRef, Object, Object])
632
+ ], WlcmSelectComponent);
633
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmSelectComponent, decorators: [{
634
+ type: Component,
635
+ args: [{ selector: 'wlcm-select', standalone: true, imports: [CommonModule, MatSelectModule, ReactiveFormsModule, WlcmIconDirective, WlcmSelectInputBinderDirective], changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [WlcmSelectInputBinderDirective], providers: [
636
+ WLCM_FORM_CONTROL_PROVIDER,
637
+ { provide: MAT_SELECT_CONFIG, useValue: { overlayPanelClass: PANEL_CLASS } },
638
+ { provide: NG_VALIDATORS, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
639
+ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => WlcmSelectComponent), multi: true },
640
+ ], 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"] }]
641
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
642
+ type: Inject,
643
+ args: [WLCM_FORM_FIELD]
644
+ }] }, { type: undefined, decorators: [{
645
+ type: Optional
646
+ }, {
647
+ type: Inject,
648
+ args: [WLCM_FORM_CONTROL]
649
+ }] }], propDecorators: { multiple: [{
650
+ type: Input
651
+ }], placeholder: [{
652
+ type: Input
653
+ }], options: [{
654
+ type: Input
655
+ }], matSelect: [{
656
+ type: ViewChild,
657
+ args: [MatSelect]
658
+ }] } });
659
+
576
660
  class WlcmAcInputBinderDirective {
577
661
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmAcInputBinderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
578
662
  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 = [
631
715
  WlcmInputDirective,
632
716
  WlcmFormFieldCustomContainerDirective,
633
717
  WlcmFormFieldSuffixDirective,
718
+ WlcmFormFieldPrefixDirective,
634
719
  WlcmAcInputBinderDirective,
635
720
  WlcmFormFieldHintDirective,
636
721
  ];
@@ -648,6 +733,7 @@ class WlcmFormsModule {
648
733
  WlcmLabelComponent, WlcmInputDirective,
649
734
  WlcmFormFieldCustomContainerDirective,
650
735
  WlcmFormFieldSuffixDirective,
736
+ WlcmFormFieldPrefixDirective,
651
737
  WlcmAcInputBinderDirective,
652
738
  WlcmFormFieldHintDirective], exports: [WlcmFormFieldComponent,
653
739
  WlcmAutocompleteComponent,
@@ -655,6 +741,7 @@ class WlcmFormsModule {
655
741
  WlcmLabelComponent, WlcmInputDirective,
656
742
  WlcmFormFieldCustomContainerDirective,
657
743
  WlcmFormFieldSuffixDirective,
744
+ WlcmFormFieldPrefixDirective,
658
745
  WlcmAcInputBinderDirective,
659
746
  WlcmFormFieldHintDirective] }); }
660
747
  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
671
758
  * Generated bundle index. Do not edit.
672
759
  */
673
760
 
674
- 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 };
761
+ 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 };
675
762
  //# sourceMappingURL=wlcm-angular-forms.mjs.map