@wlcm/angular 1.1.2 → 17.1.0

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 (65) hide show
  1. package/core/esm2022/lib/components/calendar-icon/calendar-icon.component.mjs +12 -0
  2. package/core/esm2022/lib/constants/icon.contants.mjs +3 -1
  3. package/core/esm2022/lib/directives/icon.directive.mjs +21 -6
  4. package/core/esm2022/lib/models/icon.models.mjs +2 -1
  5. package/core/fesm2022/wlcm-angular-core.mjs +30 -6
  6. package/core/fesm2022/wlcm-angular-core.mjs.map +1 -1
  7. package/core/lib/components/calendar-icon/calendar-icon.component.d.ts +5 -0
  8. package/core/lib/directives/icon.directive.d.ts +4 -2
  9. package/core/lib/models/icon.models.d.ts +1 -0
  10. package/date-range-picker/README.md +7 -0
  11. package/date-range-picker/esm2022/index.mjs +7 -0
  12. package/date-range-picker/esm2022/lib/components/calendar-header/calendar-header.component.mjs +62 -0
  13. package/date-range-picker/esm2022/lib/components/date-range-picker/date-range-picker.component.mjs +158 -0
  14. package/date-range-picker/esm2022/lib/components/date-range-picker-bottom-panel/date-range-picker-bottom-panel.component.mjs +19 -0
  15. package/date-range-picker/esm2022/lib/components/date-range-picker-input/date-range-picker-input.component.mjs +122 -0
  16. package/date-range-picker/esm2022/lib/constants/date-range-selection-model.constants.mjs +10 -0
  17. package/date-range-picker/esm2022/lib/constants/date-range-trigger-selection-model.constants.mjs +10 -0
  18. package/date-range-picker/esm2022/lib/date-range-picker.module.mjs +64 -0
  19. package/date-range-picker/esm2022/lib/directives/date-range-picker-input-base.directive.mjs +92 -0
  20. package/date-range-picker/esm2022/lib/directives/date-range-picker-input-end.directive.mjs +65 -0
  21. package/date-range-picker/esm2022/lib/directives/date-range-picker-input-start.directive.mjs +65 -0
  22. package/date-range-picker/esm2022/lib/directives/date-range-picker-trigger.directive.mjs +80 -0
  23. package/date-range-picker/esm2022/lib/directives/left-calendar.directive.mjs +50 -0
  24. package/date-range-picker/esm2022/lib/directives/right-calendar.directive.mjs +59 -0
  25. package/date-range-picker/esm2022/lib/models/data-range-calendar.models.mjs +43 -0
  26. package/date-range-picker/esm2022/lib/models/date-range-validation.models.mjs +5 -0
  27. package/date-range-picker/esm2022/lib/utils/date-range-input.validators.mjs +16 -0
  28. package/date-range-picker/esm2022/lib/utils/date-range-picker-errors.mjs +9 -0
  29. package/date-range-picker/esm2022/wlcm-angular-date-range-picker.mjs +5 -0
  30. package/date-range-picker/fesm2022/wlcm-angular-date-range-picker.mjs +822 -0
  31. package/date-range-picker/fesm2022/wlcm-angular-date-range-picker.mjs.map +1 -0
  32. package/date-range-picker/index.d.ts +6 -0
  33. package/date-range-picker/lib/components/calendar-header/calendar-header.component.d.ts +20 -0
  34. package/date-range-picker/lib/components/date-range-picker/date-range-picker.component.d.ts +37 -0
  35. package/date-range-picker/lib/components/date-range-picker-bottom-panel/date-range-picker-bottom-panel.component.d.ts +8 -0
  36. package/date-range-picker/lib/components/date-range-picker-input/date-range-picker-input.component.d.ts +35 -0
  37. package/date-range-picker/lib/constants/date-range-selection-model.constants.d.ts +5 -0
  38. package/date-range-picker/lib/constants/date-range-trigger-selection-model.constants.d.ts +5 -0
  39. package/date-range-picker/lib/date-range-picker.module.d.ts +10 -0
  40. package/date-range-picker/lib/directives/date-range-picker-input-base.directive.d.ts +32 -0
  41. package/date-range-picker/lib/directives/date-range-picker-input-end.directive.d.ts +16 -0
  42. package/date-range-picker/lib/directives/date-range-picker-input-start.directive.d.ts +17 -0
  43. package/date-range-picker/lib/directives/date-range-picker-trigger.directive.d.ts +26 -0
  44. package/date-range-picker/lib/directives/left-calendar.directive.d.ts +15 -0
  45. package/date-range-picker/lib/directives/right-calendar.directive.d.ts +18 -0
  46. package/date-range-picker/lib/models/data-range-calendar.models.d.ts +21 -0
  47. package/date-range-picker/lib/models/date-range-validation.models.d.ts +3 -0
  48. package/date-range-picker/lib/utils/date-range-input.validators.d.ts +2 -0
  49. package/date-range-picker/lib/utils/date-range-picker-errors.d.ts +4 -0
  50. package/forms/esm2022/lib/forms/components/form-field/form-field.component.mjs +8 -5
  51. package/forms/esm2022/lib/forms/components/select/select.component.mjs +1 -1
  52. package/forms/esm2022/lib/forms/directives/form-field-prefix.directive.mjs +12 -4
  53. package/forms/fesm2022/wlcm-angular-forms.mjs +18 -7
  54. package/forms/fesm2022/wlcm-angular-forms.mjs.map +1 -1
  55. package/forms/lib/forms/components/form-field/form-field.component.d.ts +4 -3
  56. package/forms/lib/forms/directives/form-field-prefix.directive.d.ts +1 -0
  57. package/package.json +2 -1
  58. package/styles/components/date-range-picker/_date-range-picker-body.scss +117 -0
  59. package/styles/components/date-range-picker/_date-range-picker-header.scss +59 -0
  60. package/styles/components/date-range-picker/_date-range-picker-input.scss +38 -0
  61. package/styles/components/date-range-picker/_date-range-picker-panel.scss +21 -0
  62. package/styles/components/date-range-picker/index.scss +11 -0
  63. package/styles/components/forms/_form-field.scss +4 -0
  64. package/styles/core/_all-theme.scss +2 -0
  65. package/styles/core/_utils.scss +2 -0
@@ -0,0 +1,822 @@
1
+ import * as i0 from '@angular/core';
2
+ import { Injector, ViewContainerRef, Directive, HostListener, InjectionToken, forwardRef, ElementRef, Optional, Inject, output, input, effect, Component, signal, computed, ViewChild, inject, Host, ContentChild, NgModule } from '@angular/core';
3
+ import { CommonModule } from '@angular/common';
4
+ import { __decorate, __metadata } from 'tslib';
5
+ import * as i1 from '@angular/cdk/overlay';
6
+ import { OverlayRef, CdkOverlayOrigin, OverlayConfig, Overlay } from '@angular/cdk/overlay';
7
+ import { ComponentPortal } from '@angular/cdk/portal';
8
+ import * as i2 from '@angular/material/datepicker';
9
+ import { MatDateSelectionModel, MatRangeDateSelectionModel, DateRange, yearsPerPage, MatCalendar, MAT_DATE_RANGE_SELECTION_STRATEGY, DefaultMatCalendarRangeStrategy, MatMonthView, MatDatepickerModule } from '@angular/material/datepicker';
10
+ import { untilDestroyed, UntilDestroy } from '@ngneat/until-destroy';
11
+ import { merge, EMPTY, filter, Subject, tap, startWith, takeUntil, BehaviorSubject, switchMap, fromEvent, map } from 'rxjs';
12
+ import { WLCM_FORM_FIELD, WLCM_FORM_CONTROL_PROVIDER, WLCM_INPUT_BINDER, WlcmFormsModule } from '@wlcm/angular/forms';
13
+ import * as i1$1 from '@angular/material/core';
14
+ import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
15
+ import * as i3 from '@angular/forms';
16
+ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlContainer } from '@angular/forms';
17
+ import { WlcmIconName, WlcmIconDirective } from '@wlcm/angular/core';
18
+ import * as i2$1 from '@wlcm/angular/button';
19
+ import { WlcmButtonModule } from '@wlcm/angular/button';
20
+ import * as moment from 'moment';
21
+ import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
22
+
23
+ let WlcmDateRangePickerTrigger = class WlcmDateRangePickerTrigger {
24
+ constructor(overlay, viewContainerRef, selectionModel) {
25
+ this.overlay = overlay;
26
+ this.viewContainerRef = viewContainerRef;
27
+ this.selectionModel = selectionModel;
28
+ this.overlayRef = this.overlay.create(this.createOverlayConfig());
29
+ this.handleBackdropClick();
30
+ }
31
+ open() {
32
+ const injector = Injector.create({
33
+ providers: [{ provide: OverlayRef, useValue: this.overlayRef }],
34
+ parent: this.viewContainerRef.injector,
35
+ });
36
+ const portal = new ComponentPortal(this.componentType, this.viewContainerRef, injector);
37
+ this.updatePositionStrategy();
38
+ this.componentRef = this.overlayRef.attach(portal);
39
+ }
40
+ close() {
41
+ this.overlayRef.detach();
42
+ }
43
+ get isOpen() {
44
+ return this.overlayRef.hasAttached();
45
+ }
46
+ get opened() {
47
+ return merge(this.overlayRef?.attachments() || EMPTY).pipe(filter(() => this.overlayRef.hasAttached()));
48
+ }
49
+ get closed() {
50
+ return (this.overlayRef?.detachments() || EMPTY).pipe(filter(() => !this.overlayRef.hasAttached()));
51
+ }
52
+ get overlayOrigin() {
53
+ return new CdkOverlayOrigin(this.connectedTo);
54
+ }
55
+ handleBackdropClick() {
56
+ this.overlayRef
57
+ .backdropClick()
58
+ .pipe(untilDestroyed(this))
59
+ .subscribe(() => this.close());
60
+ }
61
+ updatePositionStrategy() {
62
+ const origin = this.overlayOrigin.elementRef;
63
+ const strategy = this.overlay.position().flexibleConnectedTo(origin);
64
+ strategy.withPositions([
65
+ { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
66
+ { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
67
+ ]);
68
+ strategy.withLockedPosition(false);
69
+ strategy.withDefaultOffsetY(4);
70
+ this.overlayRef.updatePositionStrategy(strategy);
71
+ }
72
+ createOverlayConfig() {
73
+ return new OverlayConfig({
74
+ hasBackdrop: true,
75
+ scrollStrategy: this.overlay.scrollStrategies.reposition(),
76
+ backdropClass: 'transparent',
77
+ });
78
+ }
79
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerTrigger, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i2.MatDateSelectionModel }], target: i0.ɵɵFactoryTarget.Directive }); }
80
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDateRangePickerTrigger, ngImport: i0 }); }
81
+ };
82
+ WlcmDateRangePickerTrigger = __decorate([
83
+ UntilDestroy(),
84
+ __metadata("design:paramtypes", [Overlay,
85
+ ViewContainerRef,
86
+ MatDateSelectionModel])
87
+ ], WlcmDateRangePickerTrigger);
88
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerTrigger, decorators: [{
89
+ type: Directive
90
+ }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.MatDateSelectionModel }] });
91
+
92
+ var WlcmDateRangeValidation;
93
+ (function (WlcmDateRangeValidation) {
94
+ WlcmDateRangeValidation["format"] = "wlcmDateRangeFormat";
95
+ })(WlcmDateRangeValidation || (WlcmDateRangeValidation = {}));
96
+
97
+ class DateRangePickerInputBase {
98
+ constructor(element, dateAdapter, dateFormats) {
99
+ this.element = element;
100
+ this.dateAdapter = dateAdapter;
101
+ this.dateFormats = dateFormats;
102
+ this.handleBlur = () => { };
103
+ this.handleInput = () => {
104
+ this.changeInputSize();
105
+ this._validatorChanged?.();
106
+ };
107
+ this._inputMirror = this.createInputMirror();
108
+ }
109
+ ngAfterViewInit() {
110
+ this.inputElement.parentElement?.appendChild(this._inputMirror);
111
+ this.copyInputElementStyles(this._inputMirror);
112
+ }
113
+ writeValue(value) {
114
+ if (!value)
115
+ return;
116
+ this.updateInputValue(value);
117
+ }
118
+ validate() {
119
+ const value = this.currentValue;
120
+ if (!value)
121
+ return null;
122
+ const parsed = this.dateAdapter.parse(value, this.dateFormats.parse.dateInput);
123
+ if (!this.dateAdapter.isValid(parsed)) {
124
+ return { [WlcmDateRangeValidation.format]: { value, format: this.dateFormats.parse.dateInput }, required: false };
125
+ }
126
+ return null;
127
+ }
128
+ registerOnChange(callback) {
129
+ this._changed = callback;
130
+ }
131
+ registerOnTouched(callback) {
132
+ this._touched = callback;
133
+ }
134
+ registerOnValidatorChange(callback) {
135
+ this._validatorChanged = callback;
136
+ }
137
+ parseCurrentValue() {
138
+ const date = this.dateAdapter.parse(this.currentValue, this.dateFormats.parse.dateInput);
139
+ return this.dateAdapter.getValidDateOrNull(date);
140
+ }
141
+ updateInputValue(value) {
142
+ let newValue = '';
143
+ if (value) {
144
+ newValue = this.dateAdapter.format(value, this.dateFormats.display.dateInput);
145
+ }
146
+ this.inputElement.value = newValue;
147
+ this.changeInputSize();
148
+ }
149
+ changeInputSize() {
150
+ const value = this.currentValue || this.inputElement.placeholder;
151
+ this._inputMirror.innerHTML = value;
152
+ this.inputElement.style.width = `${this._inputMirror.offsetWidth + 2}px`;
153
+ }
154
+ createInputMirror() {
155
+ const inputMirror = document.createElement('div');
156
+ inputMirror.classList.add('wlcm-date-range-picker-input-field-mirror');
157
+ return inputMirror;
158
+ }
159
+ copyInputElementStyles(target) {
160
+ const inputElementStyles = window.getComputedStyle(this.inputElement);
161
+ target.style.fontSize = inputElementStyles.fontSize;
162
+ target.style.fontFamily = inputElementStyles.fontFamily;
163
+ target.style.letterSpacing = inputElementStyles.letterSpacing;
164
+ }
165
+ get inputElement() {
166
+ return this.element.nativeElement;
167
+ }
168
+ get currentValue() {
169
+ return this.inputElement.value;
170
+ }
171
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
172
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: DateRangePickerInputBase, host: { listeners: { "blur": "handleBlur()", "input": "handleInput()" } }, ngImport: i0 }); }
173
+ }
174
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputBase, decorators: [{
175
+ type: Directive
176
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined }], propDecorators: { handleBlur: [{
177
+ type: HostListener,
178
+ args: ['blur']
179
+ }], handleInput: [{
180
+ type: HostListener,
181
+ args: ['input']
182
+ }] } });
183
+
184
+ const WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL = new InjectionToken('WLCM_DATE_RANGE_SELECTION_MODEL');
185
+ const WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL_PROVIDER = {
186
+ provide: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL,
187
+ useFactory: (adapter) => new MatRangeDateSelectionModel(adapter),
188
+ deps: [DateAdapter],
189
+ };
190
+
191
+ let DateRangePickerInputStartDirective = class DateRangePickerInputStartDirective extends DateRangePickerInputBase {
192
+ constructor(element, dateAdapter, dateFormats, selectionModel) {
193
+ super(element, dateAdapter, dateFormats);
194
+ this.element = element;
195
+ this.dateAdapter = dateAdapter;
196
+ this.dateFormats = dateFormats;
197
+ this.selectionModel = selectionModel;
198
+ this.handleBlur = () => {
199
+ let start = this.parseCurrentValue();
200
+ this.selectionModel.updateSelection(new DateRange(start, this.selectionModel.selection.end), this);
201
+ };
202
+ this.handleSelectionChange();
203
+ }
204
+ handleSelectionChange() {
205
+ this.selectionModel.selectionChanged.pipe(untilDestroyed(this)).subscribe(({ selection }) => {
206
+ const validDate = this.dateAdapter.getValidDateOrNull(selection.start);
207
+ this._changed?.(validDate);
208
+ this.updateInputValue(validDate);
209
+ this._validatorChanged?.();
210
+ });
211
+ }
212
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputStartDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter }, { token: MAT_DATE_FORMATS, optional: true }, { token: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL }], target: i0.ɵɵFactoryTarget.Directive }); }
213
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: DateRangePickerInputStartDirective, isStandalone: true, selector: "[wlcmDateRangePickerInputStart]", host: { classAttribute: "wlcm-date-range-picker-input-field" }, providers: [
214
+ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
215
+ { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
216
+ ], usesInheritance: true, ngImport: i0 }); }
217
+ };
218
+ DateRangePickerInputStartDirective = __decorate([
219
+ UntilDestroy(),
220
+ __metadata("design:paramtypes", [ElementRef,
221
+ DateAdapter, Object, MatDateSelectionModel])
222
+ ], DateRangePickerInputStartDirective);
223
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputStartDirective, decorators: [{
224
+ type: Directive,
225
+ args: [{
226
+ selector: '[wlcmDateRangePickerInputStart]',
227
+ host: { class: 'wlcm-date-range-picker-input-field' },
228
+ standalone: true,
229
+ providers: [
230
+ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
231
+ { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputStartDirective), multi: true },
232
+ ],
233
+ }]
234
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined, decorators: [{
235
+ type: Optional
236
+ }, {
237
+ type: Inject,
238
+ args: [MAT_DATE_FORMATS]
239
+ }] }, { type: i2.MatDateSelectionModel, decorators: [{
240
+ type: Inject,
241
+ args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
242
+ }] }] });
243
+
244
+ let DateRangePickerInputEndDirective = class DateRangePickerInputEndDirective extends DateRangePickerInputBase {
245
+ constructor(element, dateAdapter, dateFormats, selectionModel) {
246
+ super(element, dateAdapter, dateFormats);
247
+ this.element = element;
248
+ this.dateAdapter = dateAdapter;
249
+ this.dateFormats = dateFormats;
250
+ this.selectionModel = selectionModel;
251
+ this.handleBlur = () => {
252
+ let end = this.parseCurrentValue();
253
+ this.selectionModel.updateSelection(new DateRange(this.selectionModel.selection.start, end), this);
254
+ };
255
+ this.handleSelectionChange();
256
+ }
257
+ handleSelectionChange() {
258
+ this.selectionModel.selectionChanged.pipe(untilDestroyed(this)).subscribe(({ selection }) => {
259
+ const validDate = this.dateAdapter.getValidDateOrNull(selection.end);
260
+ this._changed?.(validDate);
261
+ this.updateInputValue(validDate);
262
+ this._validatorChanged?.();
263
+ });
264
+ }
265
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputEndDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter }, { token: MAT_DATE_FORMATS, optional: true }, { token: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL }], target: i0.ɵɵFactoryTarget.Directive }); }
266
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: DateRangePickerInputEndDirective, isStandalone: true, selector: "[wlcmDateRangePickerInputEnd]", host: { classAttribute: "wlcm-date-range-picker-input-field" }, providers: [
267
+ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
268
+ { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
269
+ ], usesInheritance: true, ngImport: i0 }); }
270
+ };
271
+ DateRangePickerInputEndDirective = __decorate([
272
+ UntilDestroy(),
273
+ __metadata("design:paramtypes", [ElementRef,
274
+ DateAdapter, Object, MatDateSelectionModel])
275
+ ], DateRangePickerInputEndDirective);
276
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: DateRangePickerInputEndDirective, decorators: [{
277
+ type: Directive,
278
+ args: [{
279
+ selector: '[wlcmDateRangePickerInputEnd]',
280
+ host: { class: 'wlcm-date-range-picker-input-field' },
281
+ standalone: true,
282
+ providers: [
283
+ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
284
+ { provide: NG_VALIDATORS, useExisting: forwardRef(() => DateRangePickerInputEndDirective), multi: true },
285
+ ],
286
+ }]
287
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: undefined, decorators: [{
288
+ type: Optional
289
+ }, {
290
+ type: Inject,
291
+ args: [MAT_DATE_FORMATS]
292
+ }] }, { type: i2.MatDateSelectionModel, decorators: [{
293
+ type: Inject,
294
+ args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
295
+ }] }] });
296
+
297
+ class DateRangePickerErrors {
298
+ static throwNoStartInputError() {
299
+ throw new Error('The input element with the wlcmDateRangePickerInputStart directive is missing');
300
+ }
301
+ static throwNoEndInputError() {
302
+ throw new Error('The input element with the wlcmDateRangePickerInputEnd directive is missing');
303
+ }
304
+ }
305
+
306
+ class WlcmDataRangeCalendar {
307
+ constructor(location, element, calendar, dateAdapter) {
308
+ this.element = element;
309
+ this.calendar = calendar;
310
+ this.dateAdapter = dateAdapter;
311
+ this.dateChange = output();
312
+ this.viewChange = output();
313
+ this.disabled = input(false);
314
+ this.location = location;
315
+ effect(() => {
316
+ if (this.disabled()) {
317
+ this.element.nativeElement.classList.add('wlcm-calendar-disabled');
318
+ }
319
+ else {
320
+ this.element.nativeElement.classList.remove('wlcm-calendar-disabled');
321
+ }
322
+ });
323
+ }
324
+ prevMonth() {
325
+ this.dateChange.emit(this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1));
326
+ }
327
+ nextMonth() {
328
+ this.dateChange.emit(this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1));
329
+ }
330
+ prevYear() {
331
+ this.dateChange.emit(this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage));
332
+ }
333
+ nextYear() {
334
+ this.dateChange.emit(this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? 1 : yearsPerPage));
335
+ }
336
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDataRangeCalendar, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive }); }
337
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "17.3.5", type: WlcmDataRangeCalendar, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", viewChange: "viewChange" }, ngImport: i0 }); }
338
+ }
339
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDataRangeCalendar, decorators: [{
340
+ type: Directive
341
+ }], ctorParameters: () => [{ type: undefined }, { type: i0.ElementRef }, { type: i2.MatCalendar }, { type: i1$1.DateAdapter }] });
342
+
343
+ class WlcmCalendarHeaderComponent {
344
+ constructor(dateAdapter, rangeCalendar, dateFormats, calendar) {
345
+ this.dateAdapter = dateAdapter;
346
+ this.rangeCalendar = rangeCalendar;
347
+ this.dateFormats = dateFormats;
348
+ this.calendar = calendar;
349
+ this.WlcmIconName = WlcmIconName;
350
+ }
351
+ prev() {
352
+ if (this.rangeCalendar) {
353
+ if (this.calendar.currentView !== 'month') {
354
+ return this.rangeCalendar.prevYear();
355
+ }
356
+ return this.rangeCalendar.prevMonth();
357
+ }
358
+ }
359
+ next() {
360
+ if (this.rangeCalendar) {
361
+ if (this.calendar.currentView !== 'month') {
362
+ return this.rangeCalendar.nextYear();
363
+ }
364
+ return this.rangeCalendar.nextMonth();
365
+ }
366
+ }
367
+ changeCalendarView() {
368
+ if (this.calendar.currentView === 'multi-year') {
369
+ this.calendar.currentView = 'month';
370
+ return;
371
+ }
372
+ this.calendar.currentView = 'multi-year';
373
+ }
374
+ get periodLabel() {
375
+ return this.dateAdapter.format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel);
376
+ }
377
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmCalendarHeaderComponent, deps: [{ token: i1$1.DateAdapter }, { token: WlcmDataRangeCalendar, optional: true }, { token: MAT_DATE_FORMATS, optional: true }, { token: forwardRef(() => MatCalendar) }], target: i0.ɵɵFactoryTarget.Component }); }
378
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: WlcmCalendarHeaderComponent, isStandalone: true, selector: "wlcm-calendar-header", ngImport: i0, template: "<div class=\"wlcm-calendar-header\">\n <div class=\"wlcm-calendar-header-button-container\">\n @if(((!rangeCalendar || rangeCalendar.location === 'left') ||\n calendar.currentView !== 'month') && !rangeCalendar.disabled()) {\n <button\n class=\"wlcm-calendar-header-button wlcm-calendar-header-button-left\"\n (click)=\"prev()\"\n >\n <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n </button>\n }\n </div>\n\n <button\n class=\"wlcm-calendar-header-change-view-button\"\n (click)=\"changeCalendarView()\"\n >\n <div class=\"wlcm-calendar-header-period-label\">\n {{ periodLabel }}\n </div>\n\n <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n </button>\n\n <div class=\"wlcm-calendar-header-button-container\">\n @if(((!rangeCalendar || rangeCalendar.location === 'right') ||\n calendar.currentView !== 'month') && !rangeCalendar.disabled()) {\n <button\n class=\"wlcm-calendar-header-button wlcm-calendar-header-button-right\"\n (click)=\"next()\"\n >\n <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n </button>\n }\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon"], outputs: ["wlcmIconClicked"] }] }); }
379
+ }
380
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmCalendarHeaderComponent, decorators: [{
381
+ type: Component,
382
+ args: [{ selector: 'wlcm-calendar-header', standalone: true, imports: [CommonModule, WlcmIconDirective], template: "<div class=\"wlcm-calendar-header\">\n <div class=\"wlcm-calendar-header-button-container\">\n @if(((!rangeCalendar || rangeCalendar.location === 'left') ||\n calendar.currentView !== 'month') && !rangeCalendar.disabled()) {\n <button\n class=\"wlcm-calendar-header-button wlcm-calendar-header-button-left\"\n (click)=\"prev()\"\n >\n <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n </button>\n }\n </div>\n\n <button\n class=\"wlcm-calendar-header-change-view-button\"\n (click)=\"changeCalendarView()\"\n >\n <div class=\"wlcm-calendar-header-period-label\">\n {{ periodLabel }}\n </div>\n\n <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n </button>\n\n <div class=\"wlcm-calendar-header-button-container\">\n @if(((!rangeCalendar || rangeCalendar.location === 'right') ||\n calendar.currentView !== 'month') && !rangeCalendar.disabled()) {\n <button\n class=\"wlcm-calendar-header-button wlcm-calendar-header-button-right\"\n (click)=\"next()\"\n >\n <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n </button>\n }\n </div>\n</div>\n" }]
383
+ }], ctorParameters: () => [{ type: i1$1.DateAdapter }, { type: WlcmDataRangeCalendar, decorators: [{
384
+ type: Optional
385
+ }] }, { type: undefined, decorators: [{
386
+ type: Optional
387
+ }, {
388
+ type: Inject,
389
+ args: [MAT_DATE_FORMATS]
390
+ }] }, { type: i2.MatCalendar, decorators: [{
391
+ type: Inject,
392
+ args: [forwardRef(() => MatCalendar)]
393
+ }] }] });
394
+
395
+ let WlcmLeftCalendarDirective = class WlcmLeftCalendarDirective extends WlcmDataRangeCalendar {
396
+ constructor(element, dateAdapter, calendar) {
397
+ super('left', element, calendar, dateAdapter);
398
+ this.element = element;
399
+ this.dateAdapter = dateAdapter;
400
+ this.calendar = calendar;
401
+ this.handleYearChange();
402
+ this.handleMonthChange();
403
+ }
404
+ handleYearChange() {
405
+ this.calendar.yearSelected
406
+ .pipe(untilDestroyed(this))
407
+ .subscribe((date) => this.dateChange.emit(date));
408
+ }
409
+ handleMonthChange() {
410
+ this.calendar.monthSelected
411
+ .pipe(untilDestroyed(this))
412
+ .subscribe((date) => this.dateChange.emit(date));
413
+ }
414
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmLeftCalendarDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter }, { token: forwardRef(() => MatCalendar) }], target: i0.ɵɵFactoryTarget.Directive }); }
415
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmLeftCalendarDirective, isStandalone: true, selector: "[wlcmLeftCalendar]", providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmLeftCalendarDirective) }], usesInheritance: true, ngImport: i0 }); }
416
+ };
417
+ WlcmLeftCalendarDirective = __decorate([
418
+ UntilDestroy(),
419
+ __metadata("design:paramtypes", [ElementRef,
420
+ DateAdapter,
421
+ MatCalendar])
422
+ ], WlcmLeftCalendarDirective);
423
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmLeftCalendarDirective, decorators: [{
424
+ type: Directive,
425
+ args: [{
426
+ selector: '[wlcmLeftCalendar]',
427
+ standalone: true,
428
+ providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmLeftCalendarDirective) }],
429
+ }]
430
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: i2.MatCalendar, decorators: [{
431
+ type: Inject,
432
+ args: [forwardRef(() => MatCalendar)]
433
+ }] }] });
434
+
435
+ const WLCM_DATE_RANGE_SELECTION_MODEL = new InjectionToken('WLCM_DATE_RANGE_SELECTION_MODEL');
436
+ const WLCM_DATE_RANGE_SELECTION_MODEL_PROVIDER = {
437
+ provide: WLCM_DATE_RANGE_SELECTION_MODEL,
438
+ useFactory: (adapter) => new MatRangeDateSelectionModel(adapter),
439
+ deps: [DateAdapter],
440
+ };
441
+
442
+ let WlcmRightCalendarDirective = class WlcmRightCalendarDirective extends WlcmDataRangeCalendar {
443
+ constructor(element, dateAdapter, calendar) {
444
+ super('right', element, calendar, dateAdapter);
445
+ this.element = element;
446
+ this.dateAdapter = dateAdapter;
447
+ this.calendar = calendar;
448
+ this.handleYearChange();
449
+ this.handleMonthChange();
450
+ }
451
+ handleYearChange() {
452
+ this.calendar.yearSelected
453
+ .pipe(untilDestroyed(this))
454
+ .subscribe((date) => this.dateChange.emit(this.dateAdapter.addCalendarMonths(date, -1)));
455
+ }
456
+ handleMonthChange() {
457
+ this.calendar.monthSelected
458
+ .pipe(untilDestroyed(this))
459
+ .subscribe((date) => this.dateChange.emit(this.dateAdapter.addCalendarMonths(date, -1)));
460
+ }
461
+ nextMonth() {
462
+ this.dateChange.emit(this.calendar.activeDate);
463
+ }
464
+ prevYear() {
465
+ this.dateChange.emit(this.dateAdapter.addCalendarMonths(this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage), -1));
466
+ }
467
+ nextYear() {
468
+ this.dateChange.emit(this.dateAdapter.addCalendarMonths(this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? 1 : yearsPerPage), -1));
469
+ }
470
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmRightCalendarDirective, deps: [{ token: i0.ElementRef }, { token: i1$1.DateAdapter }, { token: forwardRef(() => MatCalendar) }], target: i0.ɵɵFactoryTarget.Directive }); }
471
+ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmRightCalendarDirective, isStandalone: true, selector: "[wlcmRightCalendar]", providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmRightCalendarDirective) }], usesInheritance: true, ngImport: i0 }); }
472
+ };
473
+ WlcmRightCalendarDirective = __decorate([
474
+ UntilDestroy(),
475
+ __metadata("design:paramtypes", [ElementRef,
476
+ DateAdapter,
477
+ MatCalendar])
478
+ ], WlcmRightCalendarDirective);
479
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmRightCalendarDirective, decorators: [{
480
+ type: Directive,
481
+ args: [{
482
+ selector: '[wlcmRightCalendar]',
483
+ standalone: true,
484
+ providers: [{ provide: WlcmDataRangeCalendar, useExisting: forwardRef(() => WlcmRightCalendarDirective) }],
485
+ }]
486
+ }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.DateAdapter }, { type: i2.MatCalendar, decorators: [{
487
+ type: Inject,
488
+ args: [forwardRef(() => MatCalendar)]
489
+ }] }] });
490
+
491
+ class WlcmDateRangePickerBottomPanelComponent {
492
+ constructor(picker) {
493
+ this.picker = picker;
494
+ }
495
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerBottomPanelComponent, deps: [{ token: WlcmDateRangePickerComponent }], target: i0.ɵɵFactoryTarget.Component }); }
496
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDateRangePickerBottomPanelComponent, isStandalone: true, selector: "wlcm-date-range-picker-bottom-panel", ngImport: i0, template: "<div class=\"wlcm-date-range-picker-bottom-panel\">\n <wlcm-button type=\"paddingless\" (clicked)=\"picker.reset()\">Reset</wlcm-button>\n\n <wlcm-button (clicked)=\"picker.apply()\" [isDisabled]=\"!picker.isComplete()\">\n Apply\n </wlcm-button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: WlcmButtonModule }, { kind: "component", type: i2$1.WlcmButtonComponent, selector: "wlcm-button", inputs: ["type", "size", "isDisabled", "isLoading"], outputs: ["clicked"] }] }); }
497
+ }
498
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerBottomPanelComponent, decorators: [{
499
+ type: Component,
500
+ args: [{ selector: 'wlcm-date-range-picker-bottom-panel', standalone: true, imports: [CommonModule, WlcmButtonModule], template: "<div class=\"wlcm-date-range-picker-bottom-panel\">\n <wlcm-button type=\"paddingless\" (clicked)=\"picker.reset()\">Reset</wlcm-button>\n\n <wlcm-button (clicked)=\"picker.apply()\" [isDisabled]=\"!picker.isComplete()\">\n Apply\n </wlcm-button>\n</div>\n" }]
501
+ }], ctorParameters: () => [{ type: WlcmDateRangePickerComponent }] });
502
+
503
+ let WlcmDateRangePickerComponent = class WlcmDateRangePickerComponent {
504
+ constructor(rangeSelectionStrategy, localSelectionModel, triggerSelectionModel, dateAdapter, trigger) {
505
+ this.rangeSelectionStrategy = rangeSelectionStrategy;
506
+ this.localSelectionModel = localSelectionModel;
507
+ this.triggerSelectionModel = triggerSelectionModel;
508
+ this.dateAdapter = dateAdapter;
509
+ this.trigger = trigger;
510
+ this.WlcmCalendarHeaderComponent = WlcmCalendarHeaderComponent;
511
+ this._isViewInitialized = false;
512
+ this._isComplete = signal(false);
513
+ this.isComplete = computed(() => this._isComplete());
514
+ this.startDate = signal(moment());
515
+ this.leftCalendarYearViewActivated = signal(false);
516
+ this.rightCalendarYearViewActivated = signal(false);
517
+ this.handleSelectionChanged();
518
+ this.localSelectionModel.updateSelection(this.triggerSelectionModel.selection, this);
519
+ if (this.triggerSelectionModel.selection.start) {
520
+ this.startDate.set(this.triggerSelectionModel.selection.start);
521
+ }
522
+ effect(() => {
523
+ if (!this._isViewInitialized)
524
+ return;
525
+ this.leftCalendar.activeDate = this.startDate();
526
+ this.rightCalendar.activeDate = this.dateAdapter.addCalendarMonths(this.startDate(), 1);
527
+ });
528
+ }
529
+ ngAfterViewInit() {
530
+ this._isViewInitialized = true;
531
+ this.leftCalendar.viewChanged.pipe(untilDestroyed(this)).subscribe((view) => {
532
+ this.leftCalendarYearViewActivated.set(view !== 'month');
533
+ });
534
+ this.rightCalendar.viewChanged.pipe(untilDestroyed(this)).subscribe((view) => {
535
+ this.rightCalendarYearViewActivated.set(view !== 'month');
536
+ });
537
+ this.handleRightCalendarPreviewChange();
538
+ }
539
+ calendarSelection(event) {
540
+ const newSelection = this.rangeSelectionStrategy.selectionFinished(event.value, this.localSelectionModel.selection, event.event);
541
+ this.localSelectionModel.updateSelection(newSelection, this);
542
+ }
543
+ calendarDragDrop(event) {
544
+ this.localSelectionModel.updateSelection(event.value, this);
545
+ }
546
+ apply() {
547
+ this.triggerSelectionModel.updateSelection(this.localSelectionModel.selection, this);
548
+ this.trigger.close();
549
+ }
550
+ reset() {
551
+ this.trigger.close();
552
+ }
553
+ get selected() {
554
+ return this.localSelectionModel.selection;
555
+ }
556
+ get leftCalendarActiveCell() {
557
+ return this.leftCalendarElement.nativeElement.querySelector('.mat-calendar-body-active');
558
+ }
559
+ handleSelectionChanged() {
560
+ this.localSelectionModel.selectionChanged
561
+ .pipe(untilDestroyed(this))
562
+ .subscribe(() => this._isComplete.set(this.localSelectionModel.isComplete()));
563
+ }
564
+ handleRightCalendarPreviewChange() {
565
+ const viewChanged = new Subject();
566
+ this.rightCalendar.viewChanged
567
+ .pipe(untilDestroyed(this))
568
+ .pipe(tap(() => viewChanged.next()))
569
+ .pipe(startWith(this.rightCalendar.currentView))
570
+ .subscribe((view) => {
571
+ if (view !== 'month')
572
+ return;
573
+ this.rightCalendar.monthView._matCalendarBody.previewChange
574
+ .pipe(takeUntil(viewChanged), untilDestroyed(this))
575
+ .subscribe(() => {
576
+ if (this.leftCalendar.currentView !== 'month' || !this.leftCalendar.monthView._rangeStart)
577
+ return;
578
+ this.leftCalendar.monthView._previewStart = this.rightCalendar.monthView._previewStart;
579
+ this.leftCalendar.monthView._previewEnd = this.rightCalendar.monthView._previewEnd;
580
+ const activeCell = this.leftCalendarActiveCell;
581
+ if (activeCell && activeCell === document.activeElement)
582
+ activeCell.blur();
583
+ this.leftCalendar.monthView._changeDetectorRef.markForCheck();
584
+ });
585
+ });
586
+ }
587
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerComponent, deps: [{ token: MAT_DATE_RANGE_SELECTION_STRATEGY }, { token: WLCM_DATE_RANGE_SELECTION_MODEL }, { token: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL }, { token: i1$1.DateAdapter }, { token: WlcmDateRangePickerTrigger }], target: i0.ɵɵFactoryTarget.Component }); }
588
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDateRangePickerComponent, isStandalone: true, selector: "wlcm-date-range-picker", providers: [
589
+ {
590
+ provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
591
+ useClass: DefaultMatCalendarRangeStrategy,
592
+ },
593
+ WLCM_DATE_RANGE_SELECTION_MODEL_PROVIDER,
594
+ ], viewQueries: [{ propertyName: "leftCalendar", first: true, predicate: WlcmLeftCalendarDirective, descendants: true, read: MatCalendar }, { propertyName: "rightCalendar", first: true, predicate: WlcmRightCalendarDirective, descendants: true, read: MatCalendar }, { propertyName: "leftCalendarElement", first: true, predicate: WlcmLeftCalendarDirective, descendants: true, read: ElementRef }, { propertyName: "monthView", first: true, predicate: MatMonthView, descendants: true }], ngImport: i0, template: "<div class=\"wlcm-date-range-picker-panel\">\n <div class=\"wlcm-date-range-picker-body\">\n <mat-calendar\n wlcmLeftCalendar\n [selected]=\"selected\"\n [disabled]=\"rightCalendarYearViewActivated()\"\n [headerComponent]=\"WlcmCalendarHeaderComponent\"\n (_userSelection)=\"calendarSelection($event)\"\n (_userDragDrop)=\"calendarDragDrop($event)\"\n (dateChange)=\"startDate.set($event)\"\n ></mat-calendar>\n\n <mat-calendar\n wlcmRightCalendar\n [selected]=\"selected\"\n [disabled]=\"leftCalendarYearViewActivated()\"\n [headerComponent]=\"WlcmCalendarHeaderComponent\"\n (_userSelection)=\"calendarSelection($event)\"\n (_userDragDrop)=\"calendarDragDrop($event)\"\n (dateChange)=\"startDate.set($event)\"\n ></mat-calendar>\n </div>\n\n <wlcm-date-range-picker-bottom-panel></wlcm-date-range-picker-bottom-panel>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "directive", type: WlcmLeftCalendarDirective, selector: "[wlcmLeftCalendar]" }, { kind: "directive", type: WlcmRightCalendarDirective, selector: "[wlcmRightCalendar]" }, { kind: "component", type: WlcmDateRangePickerBottomPanelComponent, selector: "wlcm-date-range-picker-bottom-panel" }] }); }
595
+ };
596
+ WlcmDateRangePickerComponent = __decorate([
597
+ UntilDestroy(),
598
+ __metadata("design:paramtypes", [Object, MatDateSelectionModel,
599
+ MatDateSelectionModel,
600
+ DateAdapter,
601
+ WlcmDateRangePickerTrigger])
602
+ ], WlcmDateRangePickerComponent);
603
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerComponent, decorators: [{
604
+ type: Component,
605
+ args: [{ selector: 'wlcm-date-range-picker', standalone: true, imports: [
606
+ CommonModule,
607
+ MatDatepickerModule,
608
+ WlcmLeftCalendarDirective,
609
+ WlcmRightCalendarDirective,
610
+ WlcmDateRangePickerBottomPanelComponent,
611
+ ], providers: [
612
+ {
613
+ provide: MAT_DATE_RANGE_SELECTION_STRATEGY,
614
+ useClass: DefaultMatCalendarRangeStrategy,
615
+ },
616
+ WLCM_DATE_RANGE_SELECTION_MODEL_PROVIDER,
617
+ ], template: "<div class=\"wlcm-date-range-picker-panel\">\n <div class=\"wlcm-date-range-picker-body\">\n <mat-calendar\n wlcmLeftCalendar\n [selected]=\"selected\"\n [disabled]=\"rightCalendarYearViewActivated()\"\n [headerComponent]=\"WlcmCalendarHeaderComponent\"\n (_userSelection)=\"calendarSelection($event)\"\n (_userDragDrop)=\"calendarDragDrop($event)\"\n (dateChange)=\"startDate.set($event)\"\n ></mat-calendar>\n\n <mat-calendar\n wlcmRightCalendar\n [selected]=\"selected\"\n [disabled]=\"leftCalendarYearViewActivated()\"\n [headerComponent]=\"WlcmCalendarHeaderComponent\"\n (_userSelection)=\"calendarSelection($event)\"\n (_userDragDrop)=\"calendarDragDrop($event)\"\n (dateChange)=\"startDate.set($event)\"\n ></mat-calendar>\n </div>\n\n <wlcm-date-range-picker-bottom-panel></wlcm-date-range-picker-bottom-panel>\n</div>\n" }]
618
+ }], ctorParameters: () => [{ type: undefined, decorators: [{
619
+ type: Inject,
620
+ args: [MAT_DATE_RANGE_SELECTION_STRATEGY]
621
+ }] }, { type: i2.MatDateSelectionModel, decorators: [{
622
+ type: Inject,
623
+ args: [WLCM_DATE_RANGE_SELECTION_MODEL]
624
+ }] }, { type: i2.MatDateSelectionModel, decorators: [{
625
+ type: Inject,
626
+ args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
627
+ }] }, { type: i1$1.DateAdapter }, { type: WlcmDateRangePickerTrigger }], propDecorators: { leftCalendar: [{
628
+ type: ViewChild,
629
+ args: [WlcmLeftCalendarDirective, { read: MatCalendar }]
630
+ }], rightCalendar: [{
631
+ type: ViewChild,
632
+ args: [WlcmRightCalendarDirective, { read: MatCalendar }]
633
+ }], leftCalendarElement: [{
634
+ type: ViewChild,
635
+ args: [WlcmLeftCalendarDirective, { read: ElementRef }]
636
+ }], monthView: [{
637
+ type: ViewChild,
638
+ args: [MatMonthView]
639
+ }] } });
640
+
641
+ class WlcmDateRangePickerInputComponent extends WlcmDateRangePickerTrigger {
642
+ constructor(overlay, viewContainerRef, selectionModel, formField, controlContainer) {
643
+ super(overlay, viewContainerRef, selectionModel);
644
+ this.overlay = overlay;
645
+ this.viewContainerRef = viewContainerRef;
646
+ this.selectionModel = selectionModel;
647
+ this.formField = formField;
648
+ this.controlContainer = controlContainer;
649
+ this._focusStream$ = new BehaviorSubject(EMPTY);
650
+ this._blurStream$ = new BehaviorSubject(EMPTY);
651
+ this.focus$ = this._focusStream$.pipe(switchMap((stream) => stream));
652
+ this.blur$ = this._blurStream$.pipe(switchMap((stream) => stream));
653
+ this.componentType = WlcmDateRangePickerComponent;
654
+ }
655
+ ngAfterContentInit() {
656
+ this.checkInputs();
657
+ this.attachFocusBlurListeners();
658
+ }
659
+ ngAfterViewInit() {
660
+ this.connectedTo = this.formField.inputContainer;
661
+ }
662
+ isFocused() {
663
+ return (this.startInputElement === document.activeElement ||
664
+ this.endInputElement === document.activeElement ||
665
+ this.isOpen);
666
+ }
667
+ focus() {
668
+ if (!this.isFocused())
669
+ this.startInputElement.focus();
670
+ }
671
+ get control() {
672
+ return this.controlContainer?.control;
673
+ }
674
+ get startInputElement() {
675
+ return this.startInput.element.nativeElement;
676
+ }
677
+ get endInputElement() {
678
+ return this.endInput.element.nativeElement;
679
+ }
680
+ checkInputs() {
681
+ if (!this.startInput)
682
+ DateRangePickerErrors.throwNoStartInputError();
683
+ if (!this.endInput)
684
+ DateRangePickerErrors.throwNoEndInputError();
685
+ }
686
+ attachFocusBlurListeners() {
687
+ const voidFn = () => { };
688
+ const startInputFocus = fromEvent(this.startInputElement, 'focus');
689
+ const endInputFocus = fromEvent(this.endInputElement, 'focus');
690
+ const startInputBlur = fromEvent(this.startInputElement, 'blur');
691
+ const endInputBlur = fromEvent(this.endInputElement, 'blur');
692
+ const focusObservables = [startInputFocus, endInputFocus, this.opened];
693
+ const blurObservables = [startInputBlur, endInputBlur, this.closed];
694
+ this._focusStream$.next(merge(...focusObservables).pipe(map(voidFn)));
695
+ this._blurStream$.next(merge(...blurObservables).pipe(map(() => this.control?.markAsTouched())));
696
+ }
697
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerInputComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL }, { token: WLCM_FORM_FIELD, host: true }, { token: ControlContainer, host: true }], target: i0.ɵɵFactoryTarget.Component }); }
698
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDateRangePickerInputComponent, isStandalone: true, selector: "wlcm-date-range-picker-input", providers: [
699
+ WLCM_FORM_CONTROL_PROVIDER,
700
+ WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL_PROVIDER,
701
+ {
702
+ provide: WLCM_INPUT_BINDER,
703
+ useFactory: () => {
704
+ const input = inject(WlcmDateRangePickerInputComponent, { self: true });
705
+ return { bind: () => input };
706
+ },
707
+ },
708
+ { provide: WlcmDateRangePickerTrigger, useExisting: forwardRef(() => WlcmDateRangePickerInputComponent) },
709
+ ], queries: [{ propertyName: "startInput", first: true, predicate: DateRangePickerInputStartDirective, descendants: true }, { propertyName: "endInput", first: true, predicate: DateRangePickerInputEndDirective, descendants: true }], exportAs: ["wlcmDateRangePickerInput"], usesInheritance: true, ngImport: i0, template: "<div class=\"wlcm-date-range-picker-inputs-container\">\n <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n <ng-content select=\"[wlcmDateRangePickerInputStart]\"></ng-content>\n </div>\n\n <div class=\"wlcm-date-range-picker-input-dash\"></div>\n\n <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n <ng-content select=\"[wlcmDateRangePickerInputEnd]\"></ng-content>\n </div>\n</div>\n", styles: [".wlcm-date-range-picker-inputs-container{display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: WlcmFormsModule }] }); }
710
+ }
711
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerInputComponent, decorators: [{
712
+ type: Component,
713
+ args: [{ selector: 'wlcm-date-range-picker-input', exportAs: 'wlcmDateRangePickerInput', standalone: true, imports: [CommonModule, WlcmFormsModule, DateRangePickerInputStartDirective, DateRangePickerInputEndDirective], providers: [
714
+ WLCM_FORM_CONTROL_PROVIDER,
715
+ WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL_PROVIDER,
716
+ {
717
+ provide: WLCM_INPUT_BINDER,
718
+ useFactory: () => {
719
+ const input = inject(WlcmDateRangePickerInputComponent, { self: true });
720
+ return { bind: () => input };
721
+ },
722
+ },
723
+ { provide: WlcmDateRangePickerTrigger, useExisting: forwardRef(() => WlcmDateRangePickerInputComponent) },
724
+ ], template: "<div class=\"wlcm-date-range-picker-inputs-container\">\n <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n <ng-content select=\"[wlcmDateRangePickerInputStart]\"></ng-content>\n </div>\n\n <div class=\"wlcm-date-range-picker-input-dash\"></div>\n\n <div class=\"wlcm-date-range-picker-input-field-wrapper\">\n <ng-content select=\"[wlcmDateRangePickerInputEnd]\"></ng-content>\n </div>\n</div>\n", styles: [".wlcm-date-range-picker-inputs-container{display:flex;align-items:center}\n"] }]
725
+ }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i2.MatDateSelectionModel, decorators: [{
726
+ type: Inject,
727
+ args: [WLCM_DATE_RANGE_TRIGGER_SELECTION_MODEL]
728
+ }] }, { type: undefined, decorators: [{
729
+ type: Host
730
+ }, {
731
+ type: Inject,
732
+ args: [WLCM_FORM_FIELD]
733
+ }] }, { type: i3.ControlContainer, decorators: [{
734
+ type: Host
735
+ }, {
736
+ type: Inject,
737
+ args: [ControlContainer]
738
+ }] }], propDecorators: { startInput: [{
739
+ type: ContentChild,
740
+ args: [DateRangePickerInputStartDirective]
741
+ }], endInput: [{
742
+ type: ContentChild,
743
+ args: [DateRangePickerInputEndDirective]
744
+ }] } });
745
+
746
+ const DEFAULT_DATE_FORMATS = {
747
+ parse: {
748
+ dateInput: 'MMM/DD/YYYY',
749
+ },
750
+ display: {
751
+ dateInput: 'MMM/DD/YYYY',
752
+ monthYearLabel: 'MMMM YYYY',
753
+ dateA11yLabel: 'LL',
754
+ monthYearA11yLabel: 'MMMM YYYY',
755
+ },
756
+ };
757
+ const directives = [DateRangePickerInputStartDirective, DateRangePickerInputEndDirective];
758
+ class WlcmDateRangePickerModule {
759
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
760
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerModule, imports: [CommonModule, WlcmDateRangePickerInputComponent, DateRangePickerInputStartDirective, DateRangePickerInputEndDirective], exports: [WlcmDateRangePickerInputComponent, DateRangePickerInputStartDirective, DateRangePickerInputEndDirective] }); }
761
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerModule, providers: [
762
+ {
763
+ provide: DateAdapter,
764
+ useClass: MomentDateAdapter,
765
+ deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
766
+ },
767
+ {
768
+ provide: MAT_DATE_FORMATS,
769
+ useFactory: () => {
770
+ const externalFormats = inject(MAT_DATE_FORMATS, { skipSelf: true, optional: true });
771
+ if (externalFormats)
772
+ return externalFormats;
773
+ return DEFAULT_DATE_FORMATS;
774
+ },
775
+ },
776
+ ], imports: [CommonModule, WlcmDateRangePickerInputComponent] }); }
777
+ }
778
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangePickerModule, decorators: [{
779
+ type: NgModule,
780
+ args: [{
781
+ imports: [CommonModule, WlcmDateRangePickerInputComponent, ...directives],
782
+ exports: [WlcmDateRangePickerInputComponent, ...directives],
783
+ providers: [
784
+ {
785
+ provide: DateAdapter,
786
+ useClass: MomentDateAdapter,
787
+ deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
788
+ },
789
+ {
790
+ provide: MAT_DATE_FORMATS,
791
+ useFactory: () => {
792
+ const externalFormats = inject(MAT_DATE_FORMATS, { skipSelf: true, optional: true });
793
+ if (externalFormats)
794
+ return externalFormats;
795
+ return DEFAULT_DATE_FORMATS;
796
+ },
797
+ },
798
+ ],
799
+ }]
800
+ }] });
801
+
802
+ function WlcmDateRangeInputValidator() {
803
+ return (control) => {
804
+ const formGroup = control;
805
+ let errors = {};
806
+ for (const childControl of Object.values(formGroup.controls)) {
807
+ errors = { ...errors, ...childControl.errors };
808
+ }
809
+ errors = Object.keys(errors).length > 0 ? errors : null;
810
+ if (errors instanceof Object && errors[WlcmDateRangeValidation.format] && errors['required']) {
811
+ errors['required'] = false;
812
+ }
813
+ return errors;
814
+ };
815
+ }
816
+
817
+ /**
818
+ * Generated bundle index. Do not edit.
819
+ */
820
+
821
+ export { DateRangePickerInputEndDirective, DateRangePickerInputStartDirective, WlcmDateRangeInputValidator, WlcmDateRangePickerInputComponent, WlcmDateRangePickerModule, WlcmDateRangeValidation };
822
+ //# sourceMappingURL=wlcm-angular-date-range-picker.mjs.map