@wlcm/angular 17.5.2 → 17.5.4

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

@@ -14,10 +14,8 @@ import { WlcmButtonModule } from '@wlcm/angular/button';
 import * as i1 from '@angular/material/core';
 import { MAT_DATE_FORMATS, DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
 import { WlcmIconName, WlcmIconDirective } from '@wlcm/angular/core';
-import * as i3 from '@wlcm/angular/calendar';
-import { WlcmCalendarModule, WlcmCalendarHeaderComponent } from '@wlcm/angular/calendar';
 import { ComponentPortal } from '@angular/cdk/portal';
-import * as i3$1 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NG_VALIDATORS, ControlContainer } from '@angular/forms';
 import { format, parse, isValid, isAfter } from 'date-fns';
 import { DateFnsAdapter } from '@angular/material-date-fns-adapter';
@@ -72,6 +70,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             type: Directive
         }], ctorParameters: () => [{ type: undefined }, { type: i0.ElementRef }, { type: i2$1.MatCalendar }, { type: i1.DateAdapter }] });
 
+class WlcmCalendarHeaderComponent {
+    constructor(dateAdapter, dateFormats, calendar) {
+        this.dateAdapter = dateAdapter;
+        this.dateFormats = dateFormats;
+        this.calendar = calendar;
+        this.WlcmIconName = WlcmIconName;
+        this.next = input();
+        this.previous = input();
+        this.displayLeftArrow = input(true);
+        this.displayRightArrow = input(true);
+    }
+    previousClicked() {
+        if (this.previous())
+            return this.previous()();
+        this.calendar.activeDate =
+            this.calendar.currentView == 'month'
+                ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1)
+                : this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage);
+    }
+    nextClicked() {
+        if (this.next())
+            return this.next()();
+        this.calendar.activeDate =
+            this.calendar.currentView == 'month'
+                ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1)
+                : this.dateAdapter.addCalendarYears(this.calendar.activeDate, this.calendar.currentView == 'year' ? -1 : -yearsPerPage);
+    }
+    changeCalendarView() {
+        if (this.calendar.currentView === 'multi-year') {
+            this.calendar.currentView = 'month';
+            return;
+        }
+        this.calendar.currentView = 'multi-year';
+    }
+    get periodLabel() {
+        return this.dateAdapter.format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmCalendarHeaderComponent, deps: [{ token: i1.DateAdapter }, { token: MAT_DATE_FORMATS, optional: true }, { token: forwardRef(() => MatCalendar) }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: WlcmCalendarHeaderComponent, isStandalone: true, selector: "wlcm-calendar-header", inputs: { next: { classPropertyName: "next", publicName: "next", isSignal: true, isRequired: false, transformFunction: null }, previous: { classPropertyName: "previous", publicName: "previous", isSignal: true, isRequired: false, transformFunction: null }, displayLeftArrow: { classPropertyName: "displayLeftArrow", publicName: "displayLeftArrow", isSignal: true, isRequired: false, transformFunction: null }, displayRightArrow: { classPropertyName: "displayRightArrow", publicName: "displayRightArrow", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wlcm-calendar-header" }, ngImport: i0, template: "<div class=\"wlcm-calendar-header-button-container\">\n  @if(displayLeftArrow()) {\n  <button\n    class=\"wlcm-calendar-header-button wlcm-calendar-header-button-left\"\n    (click)=\"previousClicked()\"\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(displayRightArrow()) {\n  <button\n    class=\"wlcm-calendar-header-button wlcm-calendar-header-button-right\"\n    (click)=\"nextClicked()\"\n  >\n    <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n  </button>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: WlcmIconDirective, selector: "[wlcmIcon]", inputs: ["wlcmIcon", "wlcmIconStopPropagation"], outputs: ["wlcmIconClicked"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmCalendarHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wlcm-calendar-header', host: { class: 'wlcm-calendar-header' }, standalone: true, imports: [CommonModule, WlcmIconDirective], template: "<div class=\"wlcm-calendar-header-button-container\">\n  @if(displayLeftArrow()) {\n  <button\n    class=\"wlcm-calendar-header-button wlcm-calendar-header-button-left\"\n    (click)=\"previousClicked()\"\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(displayRightArrow()) {\n  <button\n    class=\"wlcm-calendar-header-button wlcm-calendar-header-button-right\"\n    (click)=\"nextClicked()\"\n  >\n    <ng-container [wlcmIcon]=\"WlcmIconName.CHEVRON_DOWN\"></ng-container>\n  </button>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.DateAdapter }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MAT_DATE_FORMATS]
+                }] }, { type: i2$1.MatCalendar, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => MatCalendar)]
+                }] }] });
+
 class WlcmDateRangeCalendarHeaderComponent {
     constructor(rangeCalendar, dateFormats, calendar) {
         this.rangeCalendar = rangeCalendar;
@@ -98,11 +149,11 @@ class WlcmDateRangeCalendarHeaderComponent {
         return !this.rangeCalendar || this.rangeCalendar.location === 'right' || this.calendar.currentView !== 'month';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangeCalendarHeaderComponent, deps: [{ token: WlcmDataRangeCalendar, optional: true }, { token: MAT_DATE_FORMATS, optional: true }, { token: forwardRef(() => MatCalendar) }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDateRangeCalendarHeaderComponent, isStandalone: true, selector: "wlcm-date-range-calendar-header", ngImport: i0, template: "<wlcm-calendar-header\n  [next]=\"next\"\n  [previous]=\"previous\"\n  [displayLeftArrow]=\"canDisplayLeftArrow && !rangeCalendar.disabled()\"\n  [displayRightArrow]=\"canDisplayRightArrow && !rangeCalendar.disabled()\"\n></wlcm-calendar-header>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: WlcmCalendarModule }, { kind: "component", type: i3.WlcmCalendarHeaderComponent, selector: "wlcm-calendar-header", inputs: ["next", "previous", "displayLeftArrow", "displayRightArrow"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDateRangeCalendarHeaderComponent, isStandalone: true, selector: "wlcm-date-range-calendar-header", ngImport: i0, template: "<wlcm-calendar-header\n  [next]=\"next\"\n  [previous]=\"previous\"\n  [displayLeftArrow]=\"canDisplayLeftArrow && !rangeCalendar.disabled()\"\n  [displayRightArrow]=\"canDisplayRightArrow && !rangeCalendar.disabled()\"\n></wlcm-calendar-header>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: WlcmCalendarHeaderComponent, selector: "wlcm-calendar-header", inputs: ["next", "previous", "displayLeftArrow", "displayRightArrow"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDateRangeCalendarHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-date-range-calendar-header', standalone: true, imports: [CommonModule, WlcmCalendarModule, WlcmIconDirective], template: "<wlcm-calendar-header\n  [next]=\"next\"\n  [previous]=\"previous\"\n  [displayLeftArrow]=\"canDisplayLeftArrow && !rangeCalendar.disabled()\"\n  [displayRightArrow]=\"canDisplayRightArrow && !rangeCalendar.disabled()\"\n></wlcm-calendar-header>\n" }]
+            args: [{ selector: 'wlcm-date-range-calendar-header', standalone: true, imports: [CommonModule, WlcmCalendarHeaderComponent, WlcmIconDirective], template: "<wlcm-calendar-header\n  [next]=\"next\"\n  [previous]=\"previous\"\n  [displayLeftArrow]=\"canDisplayLeftArrow && !rangeCalendar.disabled()\"\n  [displayRightArrow]=\"canDisplayRightArrow && !rangeCalendar.disabled()\"\n></wlcm-calendar-header>\n" }]
         }], ctorParameters: () => [{ type: WlcmDataRangeCalendar, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -285,6 +336,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             type: Directive
         }], ctorParameters: () => [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i2$1.MatDateSelectionModel }] });
 
+class WlcmCalendarDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmCalendarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.5", type: WlcmCalendarDirective, isStandalone: true, selector: "[wlcmCalendar]", host: { classAttribute: "wlcm-calendar" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmCalendarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[wlcmCalendar]',
+                    host: { class: 'wlcm-calendar' },
+                    standalone: true,
+                }]
+        }] });
+
 let WlcmDateRangePickerComponent = class WlcmDateRangePickerComponent {
     constructor(config, rangeSelectionStrategy, localSelectionModel, triggerSelectionModel, trigger, dateAdapter) {
         this.config = config;
@@ -380,7 +444,7 @@ let WlcmDateRangePickerComponent = class WlcmDateRangePickerComponent {
                 useClass: DefaultMatCalendarRangeStrategy,
             },
             WLCM_DATE_RANGE_SELECTION_MODEL_PROVIDER,
-        ], 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      wlcmCalendar\n      wlcmLeftCalendar\n      [selected]=\"selected\"\n      [disabled]=\"rightCalendarYearViewActivated()\"\n      [headerComponent]=\"headerComponent\"\n      (_userSelection)=\"calendarSelection($event)\"\n      (_userDragDrop)=\"calendarDragDrop($event)\"\n      (dateChange)=\"startDate.set($event)\"\n    ></mat-calendar>\n\n    <mat-calendar\n      wlcmCalendar\n      wlcmRightCalendar\n      [selected]=\"selected\"\n      [disabled]=\"leftCalendarYearViewActivated()\"\n      [headerComponent]=\"headerComponent\"\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: WlcmCalendarModule }, { kind: "directive", type: i3.WlcmCalendarDirective, selector: "[wlcmCalendar]" }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.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" }] }); }
+        ], 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      wlcmCalendar\n      wlcmLeftCalendar\n      [selected]=\"selected\"\n      [disabled]=\"rightCalendarYearViewActivated()\"\n      [headerComponent]=\"headerComponent\"\n      (_userSelection)=\"calendarSelection($event)\"\n      (_userDragDrop)=\"calendarDragDrop($event)\"\n      (dateChange)=\"startDate.set($event)\"\n    ></mat-calendar>\n\n    <mat-calendar\n      wlcmCalendar\n      wlcmRightCalendar\n      [selected]=\"selected\"\n      [disabled]=\"leftCalendarYearViewActivated()\"\n      [headerComponent]=\"headerComponent\"\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$1.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: WlcmCalendarDirective, selector: "[wlcmCalendar]" }, { kind: "directive", type: WlcmLeftCalendarDirective, selector: "[wlcmLeftCalendar]" }, { kind: "directive", type: WlcmRightCalendarDirective, selector: "[wlcmRightCalendar]" }, { kind: "component", type: WlcmDateRangePickerBottomPanelComponent, selector: "wlcm-date-range-picker-bottom-panel" }] }); }
 };
 WlcmDateRangePickerComponent = __decorate([
     UntilDestroy(),
@@ -393,8 +457,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
             type: Component,
             args: [{ selector: 'wlcm-date-range-picker', standalone: true, imports: [
                         CommonModule,
-                        WlcmCalendarModule,
                         MatDatepickerModule,
+                        WlcmCalendarDirective,
                         WlcmLeftCalendarDirective,
                         WlcmRightCalendarDirective,
                         WlcmDateRangePickerBottomPanelComponent,
@@ -806,7 +870,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImpor
                 }, {
                     type: Inject,
                     args: [WLCM_FORM_FIELD]
-                }] }, { type: i3$1.ControlContainer, decorators: [{
+                }] }, { type: i3.ControlContainer, decorators: [{
                     type: Host
                 }, {
                     type: Inject,
@@ -884,11 +948,11 @@ class WlcmDatepickerPanelComponent {
         this.trigger.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerPanelComponent, deps: [{ token: i2$1.MatDateSelectionModel }, { token: WlcmDatepickerTrigger }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDatepickerPanelComponent, isStandalone: true, selector: "wlcm-datepicker-panel", host: { classAttribute: "wlcm-datepicker-panel" }, ngImport: i0, template: "<mat-calendar\n  wlcmCalendar\n  [startAt]=\"selectionModel.selection\"\n  [selected]=\"selectionModel.selection\"\n  [headerComponent]=\"headerComponent\"\n  (selectedChange)=\"select($event)\"\n></mat-calendar>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.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: "ngmodule", type: WlcmCalendarModule }, { kind: "directive", type: i3.WlcmCalendarDirective, selector: "[wlcmCalendar]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: WlcmDatepickerPanelComponent, isStandalone: true, selector: "wlcm-datepicker-panel", host: { classAttribute: "wlcm-datepicker-panel" }, ngImport: i0, template: "<mat-calendar\n  wlcmCalendar\n  [startAt]=\"selectionModel.selection\"\n  [selected]=\"selectionModel.selection\"\n  [headerComponent]=\"headerComponent\"\n  (selectedChange)=\"select($event)\"\n></mat-calendar>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.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: WlcmCalendarDirective, selector: "[wlcmCalendar]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: WlcmDatepickerPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wlcm-datepicker-panel', host: { class: 'wlcm-datepicker-panel' }, standalone: true, imports: [CommonModule, MatDatepickerModule, WlcmCalendarModule], template: "<mat-calendar\n  wlcmCalendar\n  [startAt]=\"selectionModel.selection\"\n  [selected]=\"selectionModel.selection\"\n  [headerComponent]=\"headerComponent\"\n  (selectedChange)=\"select($event)\"\n></mat-calendar>\n" }]
+            args: [{ selector: 'wlcm-datepicker-panel', host: { class: 'wlcm-datepicker-panel' }, standalone: true, imports: [CommonModule, MatDatepickerModule, WlcmCalendarDirective], template: "<mat-calendar\n  wlcmCalendar\n  [startAt]=\"selectionModel.selection\"\n  [selected]=\"selectionModel.selection\"\n  [headerComponent]=\"headerComponent\"\n  (selectedChange)=\"select($event)\"\n></mat-calendar>\n" }]
         }], ctorParameters: () => [{ type: i2$1.MatDateSelectionModel }, { type: WlcmDatepickerTrigger }] });
 
 class WlcmDatepickerInputContainerComponent extends WlcmDatepickerTrigger {