@anglr/datetime 9.0.0-beta.20241007061121 → 9.0.0-beta.20241007072706

package/es2022/src/modules/calendar/components/monthCalendar/monthCalendar.component.js

@@ -1,192 +1,142 @@
-import { Component, ChangeDetectionStrategy, Input, Inject, ViewChild, TemplateRef, ContentChild } from '@angular/core';
-import { KeyValuePipe } from '@angular/common';
-import { isString, nameof } from '@jscrpt/common';
+import { Component, ChangeDetectionStrategy, Inject, TemplateRef, input, viewChild, contentChild, computed, effect, inject } from '@angular/core';
+import { KeyValuePipe, NgTemplateOutlet } from '@angular/common';
+import { isString } from '@jscrpt/common';
 import { CalendarDayTemplateDirective } from '../../directives';
 import { MonthCalendarDayFormat, CalendarDayAspectRatio } from '../../misc';
 import { EventParser } from '../../services';
 import { DATE_API, FORMAT_PROVIDER } from '../../../../misc/tokens';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services";
+/**
+ * Transform function for `CalendarDayAspectRatio` allowing enter value as number or member name of `CalendarDayAspectRatio`
+ */
+function dayAspectRatioAttribute(value) {
+    if (isString(value)) {
+        return CalendarDayAspectRatio[value];
+    }
+    return value;
+}
 /**
  * Component used for displaying month calendar
  */
 export class MonthCalendarComponent {
-    /**
-     * Calendar day template to be used
-     */
-    get calendarDayTemplate() {
-        return this.customCalendarDayTemplate ?? this.defaultCalendarDayTemplate;
-    }
-    /**
-     * Aspect ratio for displayed calendar day cell
-     */
-    get dayAspectRatio() {
-        return this.dayAspectRatioValue;
-    }
-    set dayAspectRatio(value) {
-        if (isString(value)) {
-            this.dayAspectRatioValue = CalendarDayAspectRatio[value];
-            return;
-        }
-        this.dayAspectRatioValue = value;
-    }
     //######################### constructor #########################
     constructor(dateApi, formatProvider, eventParser) {
         this.dateApi = dateApi;
         this.formatProvider = formatProvider;
         this.eventParser = eventParser;
-        //######################### protected properties - template bindings #########################
+        //######################### protected properties - children #########################
         /**
-         * Aspect ratio for displayed calendar day cell
-         */
-        this.dayAspectRatioValue = CalendarDayAspectRatio.ThreeToTwo;
-        /**
-         * Data that represents calendar data
+         * Default calendar day template
          */
-        this.calendarData = {};
+        this.defaultCalendarDayTemplate = viewChild.required(CalendarDayTemplateDirective, { read: TemplateRef });
         /**
-         * Array of weekday names
+         * Custom calendar day template
          */
-        this.weekDayNames = [];
+        this.customCalendarDayTemplate = contentChild(CalendarDayTemplateDirective, { read: TemplateRef });
         //######################### public properties - inputs #########################
         /**
          * Indication that week number should be displayed
          */
-        this.showWeekNumber = false;
+        this.showWeekNumber = input(false);
+        /**
+         * Date that should be displayed in month calendar
+         */
+        this.display = input(inject(DATE_API).now().value);
         /**
          * Format for displaying week day names
          */
-        this.weekDayName = MonthCalendarDayFormat.Short;
+        this.weekDayName = input(MonthCalendarDayFormat.Short);
+        /**
+         * Aspect ratio for displayed calendar day cell
+         */
+        this.dayAspectRatio = input(CalendarDayAspectRatio.ThreeToTwo, { transform: dayAspectRatioAttribute });
         /**
          * Array of events that should be displayed
          */
-        this.events = [];
-    }
-    //######################### public methods - implementation of OnInit #########################
-    /**
-     * Initialize component
-     */
-    ngOnInit() {
-        this.initWeekdayNames();
-        this.initializeDisplayCalendar();
-    }
-    //######################### public methods - implementation of OnChanges #########################
-    /**
-     * Called when input value changes
-     */
-    ngOnChanges(changes) {
-        if (nameof('weekDayName') in changes) {
-            this.initWeekdayNames();
-        }
-        if (nameof('display') in changes) {
-            this.initializeDisplayCalendar();
-        }
-        if (nameof('events') in changes && !(nameof('display') in changes)) {
-            this.initAndAttachEventData();
-        }
-    }
-    //######################### protected methods #########################
-    /**
-     * Initialize weekday names
-     */
-    initWeekdayNames() {
-        this.weekDayNames = [];
-        switch (this.weekDayName) {
-            default:
-                // case MonthCalendarDayFormat.None:
-                {
-                    for (let x = 0; x < 7; x++) {
-                        this.weekDayNames.push('');
+        this.events = input([]);
+        this.calendarDayTemplate = computed(() => this.customCalendarDayTemplate() ?? this.defaultCalendarDayTemplate());
+        this.weekDayNames = computed(() => {
+            const weekDayNames = [];
+            switch (this.weekDayName()) {
+                default:
+                    // case MonthCalendarDayFormat.None:
+                    {
+                        for (let x = 0; x < 7; x++) {
+                            weekDayNames.push('');
+                        }
+                        break;
                     }
-                    break;
-                }
-            case MonthCalendarDayFormat.Short:
-                {
-                    const names = this.dateApi.weekdays(true);
-                    this.weekDayNames.push(...names);
-                    break;
+                case MonthCalendarDayFormat.Short:
+                    {
+                        const names = this.dateApi.weekdays(true);
+                        weekDayNames.push(...names);
+                        break;
+                    }
+                case MonthCalendarDayFormat.Full:
+                    {
+                        const names = this.dateApi.weekdays();
+                        weekDayNames.push(...names);
+                        break;
+                    }
+            }
+            return weekDayNames;
+        });
+        this.calendarData = computed(() => {
+            const display = this.display();
+            const workDate = this.dateApi.getValue(display);
+            workDate.startOfMonth()
+                .startOfWeek();
+            const calendarData = {};
+            do {
+                const weekData = calendarData[workDate.format(this.formatProvider.week)] = [];
+                for (let x = 0; x < 7; x++) {
+                    weekData.push({
+                        date: workDate.value,
+                        day: workDate.dayOfMonth(),
+                        events: [],
+                        isCurrentMonth: workDate.isSameMonth(display),
+                        isWeekend: workDate.isWeekend(),
+                        week: +workDate.format(this.formatProvider.week),
+                    });
+                    workDate.addDays(1);
                 }
-            case MonthCalendarDayFormat.Full:
-                {
-                    const names = this.dateApi.weekdays();
-                    this.weekDayNames.push(...names);
-                    break;
+                workDate.startOfWeek();
+            } while (workDate.isSameMonth(display));
+            return calendarData;
+        });
+        effect(() => {
+            const events = this.eventParser.getEventsPerDay(this.events());
+            const calendarData = this.calendarData();
+            for (const week in calendarData) {
+                const weekData = calendarData[week];
+                for (const day of weekData) {
+                    const found = events.find(itm => this.dateApi.getValue(itm[0]).isSame(day.date));
+                    day.events = found?.[1] ?? [];
                 }
-        }
-    }
-    /**
-     * Initialize date for calendar that should be displayed
-     */
-    initializeDisplayCalendar() {
-        this.display ??= this.dateApi.now().value;
-        const workDate = this.dateApi.getValue(this.display);
-        workDate.startOfMonth()
-            .startOfWeek();
-        this.calendarData = {};
-        do {
-            const weekData = this.calendarData[workDate.format(this.formatProvider.week)] = [];
-            for (let x = 0; x < 7; x++) {
-                weekData.push({
-                    date: workDate.value,
-                    day: workDate.dayOfMonth(),
-                    events: [],
-                    isCurrentMonth: workDate.isSameMonth(this.display),
-                    isWeekend: workDate.isWeekend(),
-                    week: +workDate.format(this.formatProvider.week),
-                });
-                workDate.addDays(1);
-            }
-            workDate.startOfWeek();
-        } while (workDate.isSameMonth(this.display));
-        this.initAndAttachEventData();
-    }
-    /**
-     * Initialize and attaches event data
-     */
-    initAndAttachEventData() {
-        const events = this.eventParser.getEventsPerDay(this.events);
-        for (const week in this.calendarData) {
-            const weekData = this.calendarData[week];
-            for (const day of weekData) {
-                const found = events.find(itm => this.dateApi.getValue(itm[0]).isSame(day.date));
-                day.events = found?.[1] ?? [];
             }
-        }
+            //TODO: test whether event are refreshed when changed
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MonthCalendarComponent, deps: [{ token: DATE_API }, { token: FORMAT_PROVIDER }, { token: i1.EventParser }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: MonthCalendarComponent, isStandalone: true, selector: "month-calendar", inputs: { showWeekNumber: "showWeekNumber", display: "display", weekDayName: "weekDayName", dayAspectRatio: "dayAspectRatio", events: "events" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: MonthCalendarComponent, isStandalone: true, selector: "month-calendar", inputs: { showWeekNumber: { classPropertyName: "showWeekNumber", publicName: "showWeekNumber", isSignal: true, isRequired: false, transformFunction: null }, display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, weekDayName: { classPropertyName: "weekDayName", publicName: "weekDayName", isSignal: true, isRequired: false, transformFunction: null }, dayAspectRatio: { classPropertyName: "dayAspectRatio", publicName: "dayAspectRatio", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             EventParser,
-        ], queries: [{ propertyName: "customCalendarDayTemplate", first: true, predicate: CalendarDayTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "defaultCalendarDayTemplate", first: true, predicate: CalendarDayTemplateDirective, descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div *calendarDayTemplate=\"let data\" class=\"default-calendar-day\" [class.is-weekend]=\"data.isWeekend\" [class.is-other-month]=\"!data.isCurrentMonth\">{{data.day}}</div>\n\n<div></div>\n\n@for(dayName of weekDayNames; track dayName)\n{\n    <div [class.week-day-name]=\"dayName\">{{dayName}}</div>\n}\n\n@for(weekData of calendarData | keyvalue; track weekData)\n{\n    <div class=\"week-number\">\n        @if(showWeekNumber)\n        {\n            {{weekData.key}}\n        }\n    </div>\n    \n    @for(dayData of weekData.value; track dayData)\n    {\n        <div [style.padding-bottom.%]=\"dayAspectRatioValue\" class=\"day-wrapper\">\n            <div class=\"day-content\"><ng-container *ngTemplateOutlet=\"calendarDayTemplate; context: {$implicit: dayData}\"/></div>\n        </div>\n    }\n}\n", dependencies: [{ kind: "directive", type: CalendarDayTemplateDirective, selector: "[calendarDayTemplate]" }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "customCalendarDayTemplate", first: true, predicate: CalendarDayTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "defaultCalendarDayTemplate", first: true, predicate: CalendarDayTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div *calendarDayTemplate=\"let data\" class=\"default-calendar-day\" [class.is-weekend]=\"data.isWeekend\" [class.is-other-month]=\"!data.isCurrentMonth\">{{data.day}}</div>\n\n<div></div>\n\n@for(dayName of weekDayNames(); track dayName)\n{\n    <div [class.week-day-name]=\"dayName\">{{dayName}}</div>\n}\n\n@for(weekData of calendarData() | keyvalue; track weekData)\n{\n    <div class=\"week-number\">\n        @if(showWeekNumber())\n        {\n            {{weekData.key}}\n        }\n    </div>\n    \n    @for(dayData of weekData.value; track dayData)\n    {\n        <div [style.padding-bottom.%]=\"dayAspectRatio()\" class=\"day-wrapper\">\n            <div class=\"day-content\"><ng-container *ngTemplateOutlet=\"calendarDayTemplate(); context: {$implicit: dayData}\"/></div>\n        </div>\n    }\n}\n", dependencies: [{ kind: "directive", type: CalendarDayTemplateDirective, selector: "[calendarDayTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: MonthCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'month-calendar', standalone: true, imports: [
                         CalendarDayTemplateDirective,
+                        NgTemplateOutlet,
                         KeyValuePipe,
                     ], providers: [
                         EventParser,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *calendarDayTemplate=\"let data\" class=\"default-calendar-day\" [class.is-weekend]=\"data.isWeekend\" [class.is-other-month]=\"!data.isCurrentMonth\">{{data.day}}</div>\n\n<div></div>\n\n@for(dayName of weekDayNames; track dayName)\n{\n    <div [class.week-day-name]=\"dayName\">{{dayName}}</div>\n}\n\n@for(weekData of calendarData | keyvalue; track weekData)\n{\n    <div class=\"week-number\">\n        @if(showWeekNumber)\n        {\n            {{weekData.key}}\n        }\n    </div>\n    \n    @for(dayData of weekData.value; track dayData)\n    {\n        <div [style.padding-bottom.%]=\"dayAspectRatioValue\" class=\"day-wrapper\">\n            <div class=\"day-content\"><ng-container *ngTemplateOutlet=\"calendarDayTemplate; context: {$implicit: dayData}\"/></div>\n        </div>\n    }\n}\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *calendarDayTemplate=\"let data\" class=\"default-calendar-day\" [class.is-weekend]=\"data.isWeekend\" [class.is-other-month]=\"!data.isCurrentMonth\">{{data.day}}</div>\n\n<div></div>\n\n@for(dayName of weekDayNames(); track dayName)\n{\n    <div [class.week-day-name]=\"dayName\">{{dayName}}</div>\n}\n\n@for(weekData of calendarData() | keyvalue; track weekData)\n{\n    <div class=\"week-number\">\n        @if(showWeekNumber())\n        {\n            {{weekData.key}}\n        }\n    </div>\n    \n    @for(dayData of weekData.value; track dayData)\n    {\n        <div [style.padding-bottom.%]=\"dayAspectRatio()\" class=\"day-wrapper\">\n            <div class=\"day-content\"><ng-container *ngTemplateOutlet=\"calendarDayTemplate(); context: {$implicit: dayData}\"/></div>\n        </div>\n    }\n}\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DATE_API]
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [FORMAT_PROVIDER]
-                }] }, { type: i1.EventParser }], propDecorators: { defaultCalendarDayTemplate: [{
-                type: ViewChild,
-                args: [CalendarDayTemplateDirective, { static: true, read: TemplateRef }]
-            }], customCalendarDayTemplate: [{
-                type: ContentChild,
-                args: [CalendarDayTemplateDirective, { static: true, read: TemplateRef }]
-            }], showWeekNumber: [{
-                type: Input
-            }], display: [{
-                type: Input
-            }], weekDayName: [{
-                type: Input
-            }], dayAspectRatio: [{
-                type: Input
-            }], events: [{
-                type: Input
-            }] } });
+                }] }, { type: i1.EventParser }] });
 //# sourceMappingURL=monthCalendar.component.js.map

package/es2022/src/modules/calendar/components/monthCalendar/monthCalendar.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"monthCalendar.component.js","sourceRoot":"","sources":["../../../../../../src/modules/calendar/components/monthCalendar/monthCalendar.component.ts","../../../../../../src/modules/calendar/components/monthCalendar/monthCalendar.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,uBAAuB,EAAE,KAAK,EAAE,MAAM,EAAU,SAAS,EAAE,WAAW,EAAE,YAAY,EAA2B,MAAM,eAAe,CAAC;AACxJ,OAAO,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAa,QAAQ,EAAE,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAG5D,OAAO,EAAC,4BAA4B,EAA6B,MAAM,kBAAkB,CAAC;AAC1F,OAAO,EAAC,sBAAsB,EAAE,sBAAsB,EAAC,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAE,eAAe,EAAC,MAAM,yBAAyB,CAAC;;;AAIlE;;GAEG;AAiBH,MAAM,OAAO,sBAAsB;IAc/B;;OAEG;IACH,IAAc,mBAAmB;QAE7B,OAAO,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,0BAA0B,CAAC;IAC7E,CAAC;IAyCD;;OAEG;IACH,IACW,cAAc;QAErB,OAAO,IAAI,CAAC,mBAAmB,CAAC;IACpC,CAAC;IACD,IAAW,cAAc,CAAC,KAAa;QAEnC,IAAG,QAAQ,CAAC,KAAK,CAAC,EAClB,CAAC;YACG,IAAI,CAAC,mBAAmB,GAAG,sBAAsB,CAAC,KAAK,CAAsB,CAAC;YAE9E,OAAO;QACX,CAAC;QAED,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;IACrC,CAAC;IAQD,iEAAiE;IACjE,YAAwC,OAAuB,EAChB,cAA8B,EACvD,WAAuC;QAFrB,YAAO,GAAP,OAAO,CAAgB;QAChB,mBAAc,GAAd,cAAc,CAAgB;QACvD,gBAAW,GAAX,WAAW,CAA4B;QAxF7D,8FAA8F;QAE9F;;WAEG;QACO,wBAAmB,GAAW,sBAAsB,CAAC,UAAU,CAAC;QAE1E;;WAEG;QACO,iBAAY,GAAiD,EAAE,CAAC;QAU1E;;WAEG;QACO,iBAAY,GAAa,EAAE,CAAC;QAgBtC,gFAAgF;QAEhF;;WAEG;QAEI,mBAAc,GAAY,KAAK,CAAC;QAQvC;;WAEG;QAEI,gBAAW,GAA2B,sBAAsB,CAAC,KAAK,CAAC;QAsB1E;;WAEG;QAEI,WAAM,GAA+B,EAAE,CAAC;IAO/C,CAAC;IAED,+FAA+F;IAE/F;;OAEG;IACI,QAAQ;QAEX,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,yBAAyB,EAAE,CAAC;IACrC,CAAC;IAED,kGAAkG;IAElG;;OAEG;IACI,WAAW,CAAC,OAAsB;QAErC,IAAG,MAAM,CAAyB,aAAa,CAAC,IAAI,OAAO,EAC3D,CAAC;YACG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC5B,CAAC;QAED,IAAG,MAAM,CAAyB,SAAS,CAAC,IAAI,OAAO,EACvD,CAAC;YACG,IAAI,CAAC,yBAAyB,EAAE,CAAC;QACrC,CAAC;QAED,IAAG,MAAM,CAAyB,QAAQ,CAAC,IAAI,OAAO,IAAI,CAAC,CAAC,MAAM,CAAyB,SAAS,CAAC,IAAI,OAAO,CAAC,EACjH,CAAC;YACG,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAClC,CAAC;IACL,CAAC;IAED,uEAAuE;IAEvE;;OAEG;IACO,gBAAgB;QAEtB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QAEvB,QAAO,IAAI,CAAC,WAAW,EACvB,CAAC;YACG;gBACA,oCAAoC;gBACpC,CAAC;oBACG,KAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EACzB,CAAC;wBACG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAC/B,CAAC;oBAED,MAAM;gBACV,CAAC;YACD,KAAK,sBAAsB,CAAC,KAAK;gBACjC,CAAC;oBACG,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;oBAC1C,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC;oBAEjC,MAAM;gBACV,CAAC;YACD,KAAK,sBAAsB,CAAC,IAAI;gBAChC,CAAC;oBACG,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;oBACtC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC;oBAEjC,MAAM;gBACV,CAAC;QACL,CAAC;IACL,CAAC;IAED;;OAEG;IACO,yBAAyB;QAE/B,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC;QAE1C,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAErD,QAAQ,CAAC,YAAY,EAAE;aAClB,WAAW,EAAE,CAAC;QAEnB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QAEvB,GACA,CAAC;YACG,MAAM,QAAQ,GAAqC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,CAAC;YAErH,KAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EACzB,CAAC;gBACG,QAAQ,CAAC,IAAI,CACb;oBACI,IAAI,EAAE,QAAQ,CAAC,KAAK;oBACpB,GAAG,EAAE,QAAQ,CAAC,UAAU,EAAE;oBAC1B,MAAM,EAAE,EAAE;oBACV,cAAc,EAAE,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC;oBAClD,SAAS,EAAE,QAAQ,CAAC,SAAS,EAAE;oBAC/B,IAAI,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;iBACnD,CAAC,CAAC;gBAEH,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YACxB,CAAC;YAED,QAAQ,CAAC,WAAW,EAAE,CAAC;QAC3B,CAAC,QACK,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;QAE1C,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAClC,CAAC;IAED;;OAEG;IACO,sBAAsB;QAE5B,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAE7D,KAAI,MAAM,IAAI,IAAI,IAAI,CAAC,YAAY,EACnC,CAAC;YACG,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAEzC,KAAI,MAAM,GAAG,IAAI,QAAQ,EACzB,CAAC;gBACG,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC;gBACjF,GAAG,CAAC,MAAM,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;YAClC,CAAC;QACL,CAAC;IACL,CAAC;8GA/NQ,sBAAsB,kBAwFX,QAAQ,aACR,eAAe;kGAzF1B,sBAAsB,+MAL/B;YACI,WAAW;SACd,iFAyCa,4BAA4B,2BAAuB,WAAW,uGANjE,4BAA4B,2BAAuB,WAAW,gEC/D7E,2yBAyBA,4CDHQ,4BAA4B,6DAC5B,YAAY;;2FAQP,sBAAsB;kBAhBlC,SAAS;+BAEI,gBAAgB,cAEd,IAAI,WAEhB;wBACI,4BAA4B;wBAC5B,YAAY;qBACf,aAED;wBACI,WAAW;qBACd,mBACgB,uBAAuB,CAAC,MAAM;;0BA0FlC,MAAM;2BAAC,QAAQ;;0BACf,MAAM;2BAAC,eAAe;mEAxDzB,0BAA0B;sBADnC,SAAS;uBAAC,4BAA4B,EAAE,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAC;gBAOhE,yBAAyB;sBADlC,YAAY;uBAAC,4BAA4B,EAAE,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAC;gBAStE,cAAc;sBADpB,KAAK;gBAOC,OAAO;sBADb,KAAK;gBAOC,WAAW;sBADjB,KAAK;gBAOK,cAAc;sBADxB,KAAK;gBAqBC,MAAM;sBADZ,KAAK","sourcesContent":["import {Component, ChangeDetectionStrategy, Input, Inject, OnInit, ViewChild, TemplateRef, ContentChild, OnChanges, SimpleChanges} from '@angular/core';\nimport {KeyValuePipe} from '@angular/common';\nimport {Dictionary, isString, nameof} from '@jscrpt/common';\n\nimport {CalendarDayData, EventData} from '../../interfaces';\nimport {CalendarDayTemplateDirective, CalendarDayTemplateContext} from '../../directives';\nimport {MonthCalendarDayFormat, CalendarDayAspectRatio} from '../../misc';\nimport {EventParser} from '../../services';\nimport {DATE_API, FORMAT_PROVIDER} from '../../../../misc/tokens';\nimport {DateApi} from '../../../../services';\nimport {FormatProvider} from '../../../../interfaces';\n\n/**\n * Component used for displaying month calendar\n */\n@Component(\n{\n    selector: 'month-calendar',\n    templateUrl: 'monthCalendar.component.html',\n    standalone: true,\n    imports:\n    [\n        CalendarDayTemplateDirective,\n        KeyValuePipe,\n    ],\n    providers:\n    [\n        EventParser,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MonthCalendarComponent<TDate = unknown, TEvent = unknown> implements OnInit, OnChanges\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Aspect ratio for displayed calendar day cell\n     */\n    protected dayAspectRatioValue: number = CalendarDayAspectRatio.ThreeToTwo;\n\n    /**\n     * Data that represents calendar data\n     */\n    protected calendarData: Dictionary<CalendarDayData<TDate, TEvent>[]> = {};\n\n    /**\n     * Calendar day template to be used\n     */\n    protected get calendarDayTemplate(): TemplateRef<CalendarDayTemplateContext>\n    {\n        return this.customCalendarDayTemplate ?? this.defaultCalendarDayTemplate;\n    }\n\n    /**\n     * Array of weekday names\n     */\n    protected weekDayNames: string[] = [];\n\n    //######################### protected properties - children #########################\n\n    /**\n     * Default calendar day template\n     */\n    @ViewChild(CalendarDayTemplateDirective, {static: true, read: TemplateRef})\n    protected defaultCalendarDayTemplate!: TemplateRef<CalendarDayTemplateContext>;\n\n    /**\n     * Custom calendar day template\n     */\n    @ContentChild(CalendarDayTemplateDirective, {static: true, read: TemplateRef})\n    protected customCalendarDayTemplate: TemplateRef<CalendarDayTemplateContext>|undefined|null;\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Indication that week number should be displayed\n     */\n    @Input()\n    public showWeekNumber: boolean = false;\n\n    /**\n     * Date that should be displayed in month calendar\n     */\n    @Input()\n    public display: TDate|undefined|null;\n\n    /**\n     * Format for displaying week day names\n     */\n    @Input()\n    public weekDayName: MonthCalendarDayFormat = MonthCalendarDayFormat.Short;\n\n    /**\n     * Aspect ratio for displayed calendar day cell\n     */\n    @Input()\n    public get dayAspectRatio(): number\n    {\n        return this.dayAspectRatioValue;\n    }\n    public set dayAspectRatio(value: number)\n    {\n        if(isString(value))\n        {\n            this.dayAspectRatioValue = CalendarDayAspectRatio[value] as unknown as number;\n\n            return;\n        }\n\n        this.dayAspectRatioValue = value;\n    }\n\n    /**\n     * Array of events that should be displayed\n     */\n    @Input()\n    public events: EventData<TDate, TEvent>[] = [];\n\n    //######################### constructor #########################\n    constructor(@Inject(DATE_API) protected dateApi: DateApi<TDate>,\n                @Inject(FORMAT_PROVIDER) protected formatProvider: FormatProvider,\n                protected eventParser: EventParser<TDate, TEvent>,)\n    {\n    }\n\n    //######################### public methods - implementation of OnInit #########################\n\n    /**\n     * Initialize component\n     */\n    public ngOnInit(): void\n    {\n        this.initWeekdayNames();\n        this.initializeDisplayCalendar();\n    }\n\n    //######################### public methods - implementation of OnChanges #########################\n\n    /**\n     * Called when input value changes\n     */\n    public ngOnChanges(changes: SimpleChanges): void\n    {\n        if(nameof<MonthCalendarComponent>('weekDayName') in changes)\n        {\n            this.initWeekdayNames();\n        }\n\n        if(nameof<MonthCalendarComponent>('display') in changes)\n        {\n            this.initializeDisplayCalendar();\n        }\n\n        if(nameof<MonthCalendarComponent>('events') in changes && !(nameof<MonthCalendarComponent>('display') in changes))\n        {\n            this.initAndAttachEventData();\n        }\n    }\n\n    //######################### protected methods #########################\n\n    /**\n     * Initialize weekday names\n     */\n    protected initWeekdayNames(): void\n    {\n        this.weekDayNames = [];\n\n        switch(this.weekDayName)\n        {\n            default:\n            // case MonthCalendarDayFormat.None:\n            {\n                for(let x = 0; x < 7; x++)\n                {\n                    this.weekDayNames.push('');\n                }\n\n                break;\n            }\n            case MonthCalendarDayFormat.Short:\n            {\n                const names = this.dateApi.weekdays(true);\n                this.weekDayNames.push(...names);\n\n                break;\n            }\n            case MonthCalendarDayFormat.Full:\n            {\n                const names = this.dateApi.weekdays();\n                this.weekDayNames.push(...names);\n\n                break;\n            }\n        }\n    }\n\n    /**\n     * Initialize date for calendar that should be displayed\n     */\n    protected initializeDisplayCalendar(): void\n    {\n        this.display ??= this.dateApi.now().value;\n\n        const workDate = this.dateApi.getValue(this.display);\n\n        workDate.startOfMonth()\n            .startOfWeek();\n\n        this.calendarData = {};\n\n        do\n        {\n            const weekData: CalendarDayData<TDate, TEvent>[] = this.calendarData[workDate.format(this.formatProvider.week)] = [];\n\n            for(let x = 0; x < 7; x++)\n            {\n                weekData.push(\n                {\n                    date: workDate.value,\n                    day: workDate.dayOfMonth(),\n                    events: [],\n                    isCurrentMonth: workDate.isSameMonth(this.display),\n                    isWeekend: workDate.isWeekend(),\n                    week: +workDate.format(this.formatProvider.week),\n                });\n\n                workDate.addDays(1);\n            }\n\n            workDate.startOfWeek();\n        }\n        while(workDate.isSameMonth(this.display));\n\n        this.initAndAttachEventData();\n    }\n\n    /**\n     * Initialize and attaches event data\n     */\n    protected initAndAttachEventData(): void\n    {\n        const events = this.eventParser.getEventsPerDay(this.events);\n\n        for(const week in this.calendarData)\n        {\n            const weekData = this.calendarData[week];\n\n            for(const day of weekData)\n            {\n                const found = events.find(itm => this.dateApi.getValue(itm[0]).isSame(day.date));\n                day.events = found?.[1] ?? [];\n            }\n        }\n    }\n\n    //######################### ng language server #########################\n\n    /**\n     * Custom input type for `weekDayName` input\n     */\n    public static ngAcceptInputType_weekDayName: keyof typeof MonthCalendarDayFormat;\n\n    /**\n     * Custom input type for `dayAspectRatio` input\n     */\n    public static ngAcceptInputType_dayAspectRatio: keyof typeof CalendarDayAspectRatio|number;\n}","<div *calendarDayTemplate=\"let data\" class=\"default-calendar-day\" [class.is-weekend]=\"data.isWeekend\" [class.is-other-month]=\"!data.isCurrentMonth\">{{data.day}}</div>\n\n<div></div>\n\n@for(dayName of weekDayNames; track dayName)\n{\n    <div [class.week-day-name]=\"dayName\">{{dayName}}</div>\n}\n\n@for(weekData of calendarData | keyvalue; track weekData)\n{\n    <div class=\"week-number\">\n        @if(showWeekNumber)\n        {\n            {{weekData.key}}\n        }\n    </div>\n    \n    @for(dayData of weekData.value; track dayData)\n    {\n        <div [style.padding-bottom.%]=\"dayAspectRatioValue\" class=\"day-wrapper\">\n            <div class=\"day-content\"><ng-container *ngTemplateOutlet=\"calendarDayTemplate; context: {$implicit: dayData}\"/></div>\n        </div>\n    }\n}\n"]}
+{"version":3,"file":"monthCalendar.component.js","sourceRoot":"","sources":["../../../../../../src/modules/calendar/components/monthCalendar/monthCalendar.component.ts","../../../../../../src/modules/calendar/components/monthCalendar/monthCalendar.component.html"],"names":[],"mappings":"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","sourcesContent":["import {Component, ChangeDetectionStrategy, Inject, TemplateRef, Signal, input, InputSignal, viewChild, contentChild, InputSignalWithTransform, computed, effect, inject} from '@angular/core';\nimport {KeyValuePipe, NgTemplateOutlet} from '@angular/common';\nimport {Dictionary, isString} from '@jscrpt/common';\n\nimport {CalendarDayData, EventData} from '../../interfaces';\nimport {CalendarDayTemplateDirective, CalendarDayTemplateContext} from '../../directives';\nimport {MonthCalendarDayFormat, CalendarDayAspectRatio} from '../../misc';\nimport {EventParser} from '../../services';\nimport {DATE_API, FORMAT_PROVIDER} from '../../../../misc/tokens';\nimport {DateApi} from '../../../../services';\nimport {FormatProvider} from '../../../../interfaces';\n\n/**\n * Transform function for `CalendarDayAspectRatio` allowing enter value as number or member name of `CalendarDayAspectRatio`\n */\nfunction dayAspectRatioAttribute(value: keyof typeof CalendarDayAspectRatio|number): CalendarDayAspectRatio\n{\n    if(isString(value))\n    {\n        return CalendarDayAspectRatio[value];\n    }\n\n    return value;\n}\n\n/**\n * Component used for displaying month calendar\n */\n@Component(\n{\n    selector: 'month-calendar',\n    templateUrl: 'monthCalendar.component.html',\n    standalone: true,\n    imports:\n    [\n        CalendarDayTemplateDirective,\n        NgTemplateOutlet,\n        KeyValuePipe,\n    ],\n    providers:\n    [\n        EventParser,\n    ],\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MonthCalendarComponent<TDate = unknown, TEvent = unknown>\n{\n    //######################### protected properties - template bindings #########################\n\n    /**\n     * Data that represents calendar data\n     */\n    protected calendarData: Signal<Dictionary<CalendarDayData<TDate, TEvent>[]>>;\n\n    /**\n     * Calendar day template to be used\n     */\n    protected calendarDayTemplate: Signal<TemplateRef<CalendarDayTemplateContext>>;\n\n    /**\n     * Array of weekday names\n     */\n    protected weekDayNames: Signal<string[]>;\n\n    //######################### protected properties - children #########################\n\n    /**\n     * Default calendar day template\n     */\n    protected defaultCalendarDayTemplate: Signal<TemplateRef<CalendarDayTemplateContext>> = viewChild.required(CalendarDayTemplateDirective, {read: TemplateRef});\n\n    /**\n     * Custom calendar day template\n     */\n    protected customCalendarDayTemplate: Signal<TemplateRef<CalendarDayTemplateContext>|undefined|null> = contentChild(CalendarDayTemplateDirective, {read: TemplateRef});\n\n    //######################### public properties - inputs #########################\n\n    /**\n     * Indication that week number should be displayed\n     */\n    public showWeekNumber: InputSignal<boolean> = input(false);\n\n    /**\n     * Date that should be displayed in month calendar\n     */\n    public display: InputSignal<TDate> = input(inject<DateApi<TDate>>(DATE_API).now().value);\n\n    /**\n     * Format for displaying week day names\n     */\n    public weekDayName: InputSignal<MonthCalendarDayFormat> = input<MonthCalendarDayFormat>(MonthCalendarDayFormat.Short);\n\n    /**\n     * Aspect ratio for displayed calendar day cell\n     */\n    public dayAspectRatio: InputSignalWithTransform<CalendarDayAspectRatio, keyof typeof CalendarDayAspectRatio|number> = input<CalendarDayAspectRatio, keyof typeof CalendarDayAspectRatio|number>(CalendarDayAspectRatio.ThreeToTwo, {transform: dayAspectRatioAttribute});\n\n    /**\n     * Array of events that should be displayed\n     */\n    public events: InputSignal<EventData<TDate, TEvent>[]> = input<EventData<TDate, TEvent>[]>([]);\n\n    //######################### constructor #########################\n    constructor(@Inject(DATE_API) protected dateApi: DateApi<TDate>,\n                @Inject(FORMAT_PROVIDER) protected formatProvider: FormatProvider,\n                protected eventParser: EventParser<TDate, TEvent>,)\n    {\n        this.calendarDayTemplate = computed(() => this.customCalendarDayTemplate() ?? this.defaultCalendarDayTemplate());\n\n        this.weekDayNames = computed(() =>\n        {\n            const weekDayNames = [];\n\n            switch(this.weekDayName())\n            {\n                default:\n                // case MonthCalendarDayFormat.None:\n                {\n                    for(let x = 0; x < 7; x++)\n                    {\n                        weekDayNames.push('');\n                    }\n    \n                    break;\n                }\n                case MonthCalendarDayFormat.Short:\n                {\n                    const names = this.dateApi.weekdays(true);\n                    weekDayNames.push(...names);\n    \n                    break;\n                }\n                case MonthCalendarDayFormat.Full:\n                {\n                    const names = this.dateApi.weekdays();\n                    weekDayNames.push(...names);\n    \n                    break;\n                }\n            }\n\n            return weekDayNames;\n        });\n\n        this.calendarData = computed(() =>\n        {\n            const display = this.display();\n            const workDate = this.dateApi.getValue(display);\n\n            workDate.startOfMonth()\n                .startOfWeek();\n    \n            const calendarData: Dictionary<CalendarDayData<TDate, TEvent>[]> = {};\n    \n            do\n            {\n                const weekData: CalendarDayData<TDate, TEvent>[] = calendarData[workDate.format(this.formatProvider.week)] = [];\n    \n                for(let x = 0; x < 7; x++)\n                {\n                    weekData.push(\n                    {\n                        date: workDate.value,\n                        day: workDate.dayOfMonth(),\n                        events: [],\n                        isCurrentMonth: workDate.isSameMonth(display),\n                        isWeekend: workDate.isWeekend(),\n                        week: +workDate.format(this.formatProvider.week),\n                    });\n    \n                    workDate.addDays(1);\n                }\n    \n                workDate.startOfWeek();\n            }\n            while(workDate.isSameMonth(display));\n    \n            return calendarData;\n        });\n\n        effect(() =>\n        {\n            const events = this.eventParser.getEventsPerDay(this.events());\n            const calendarData = this.calendarData();\n\n            for(const week in calendarData)\n            {\n                const weekData = calendarData[week];\n    \n                for(const day of weekData)\n                {\n                    const found = events.find(itm => this.dateApi.getValue(itm[0]).isSame(day.date));\n                    day.events = found?.[1] ?? [];\n                }\n            }\n            //TODO: test whether event are refreshed when changed\n        });\n    }\n\n    //######################### ng language server #########################\n\n    /**\n     * Custom input type for `weekDayName` input\n     */\n    public static ngAcceptInputType_weekDayName: keyof typeof MonthCalendarDayFormat;\n\n    /**\n     * Custom input type for `dayAspectRatio` input\n     */\n    public static ngAcceptInputType_dayAspectRatio: keyof typeof CalendarDayAspectRatio|number;\n}","<div *calendarDayTemplate=\"let data\" class=\"default-calendar-day\" [class.is-weekend]=\"data.isWeekend\" [class.is-other-month]=\"!data.isCurrentMonth\">{{data.day}}</div>\n\n<div></div>\n\n@for(dayName of weekDayNames(); track dayName)\n{\n    <div [class.week-day-name]=\"dayName\">{{dayName}}</div>\n}\n\n@for(weekData of calendarData() | keyvalue; track weekData)\n{\n    <div class=\"week-number\">\n        @if(showWeekNumber())\n        {\n            {{weekData.key}}\n        }\n    </div>\n    \n    @for(dayData of weekData.value; track dayData)\n    {\n        <div [style.padding-bottom.%]=\"dayAspectRatio()\" class=\"day-wrapper\">\n            <div class=\"day-content\"><ng-container *ngTemplateOutlet=\"calendarDayTemplate(); context: {$implicit: dayData}\"/></div>\n        </div>\n    }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@anglr/datetime",
-    "version": "9.0.0-beta.20241007061121",
+    "version": "9.0.0-beta.20241007072706",
     "description": "Angular library for datetime manipulation components",
     "type": "module",
     "sideEffects": false,

package/src/modules/calendar/components/monthCalendar/monthCalendar.component.d.ts

@@ -1,4 +1,4 @@
-import { OnInit, TemplateRef, OnChanges, SimpleChanges } from '@angular/core';
+import { TemplateRef, Signal, InputSignal, InputSignalWithTransform } from '@angular/core';
 import { Dictionary } from '@jscrpt/common';
 import { CalendarDayData, EventData } from '../../interfaces';
 import { CalendarDayTemplateContext } from '../../directives';
@@ -10,76 +10,51 @@ import * as i0 from "@angular/core";
 /**
  * Component used for displaying month calendar
  */
-export declare class MonthCalendarComponent<TDate = unknown, TEvent = unknown> implements OnInit, OnChanges {
+export declare class MonthCalendarComponent<TDate = unknown, TEvent = unknown> {
     protected dateApi: DateApi<TDate>;
     protected formatProvider: FormatProvider;
     protected eventParser: EventParser<TDate, TEvent>;
-    /**
-     * Aspect ratio for displayed calendar day cell
-     */
-    protected dayAspectRatioValue: number;
     /**
      * Data that represents calendar data
      */
-    protected calendarData: Dictionary<CalendarDayData<TDate, TEvent>[]>;
+    protected calendarData: Signal<Dictionary<CalendarDayData<TDate, TEvent>[]>>;
     /**
      * Calendar day template to be used
      */
-    protected get calendarDayTemplate(): TemplateRef<CalendarDayTemplateContext>;
+    protected calendarDayTemplate: Signal<TemplateRef<CalendarDayTemplateContext>>;
     /**
      * Array of weekday names
      */
-    protected weekDayNames: string[];
+    protected weekDayNames: Signal<string[]>;
     /**
      * Default calendar day template
      */
-    protected defaultCalendarDayTemplate: TemplateRef<CalendarDayTemplateContext>;
+    protected defaultCalendarDayTemplate: Signal<TemplateRef<CalendarDayTemplateContext>>;
     /**
      * Custom calendar day template
      */
-    protected customCalendarDayTemplate: TemplateRef<CalendarDayTemplateContext> | undefined | null;
+    protected customCalendarDayTemplate: Signal<TemplateRef<CalendarDayTemplateContext> | undefined | null>;
     /**
      * Indication that week number should be displayed
      */
-    showWeekNumber: boolean;
+    showWeekNumber: InputSignal<boolean>;
     /**
      * Date that should be displayed in month calendar
      */
-    display: TDate | undefined | null;
+    display: InputSignal<TDate>;
     /**
      * Format for displaying week day names
      */
-    weekDayName: MonthCalendarDayFormat;
+    weekDayName: InputSignal<MonthCalendarDayFormat>;
     /**
      * Aspect ratio for displayed calendar day cell
      */
-    get dayAspectRatio(): number;
-    set dayAspectRatio(value: number);
+    dayAspectRatio: InputSignalWithTransform<CalendarDayAspectRatio, keyof typeof CalendarDayAspectRatio | number>;
     /**
      * Array of events that should be displayed
      */
-    events: EventData<TDate, TEvent>[];
+    events: InputSignal<EventData<TDate, TEvent>[]>;
     constructor(dateApi: DateApi<TDate>, formatProvider: FormatProvider, eventParser: EventParser<TDate, TEvent>);
-    /**
-     * Initialize component
-     */
-    ngOnInit(): void;
-    /**
-     * Called when input value changes
-     */
-    ngOnChanges(changes: SimpleChanges): void;
-    /**
-     * Initialize weekday names
-     */
-    protected initWeekdayNames(): void;
-    /**
-     * Initialize date for calendar that should be displayed
-     */
-    protected initializeDisplayCalendar(): void;
-    /**
-     * Initialize and attaches event data
-     */
-    protected initAndAttachEventData(): void;
     /**
      * Custom input type for `weekDayName` input
      */
@@ -89,6 +64,6 @@ export declare class MonthCalendarComponent<TDate = unknown, TEvent = unknown> i
      */
     static ngAcceptInputType_dayAspectRatio: keyof typeof CalendarDayAspectRatio | number;
     static ɵfac: i0.ɵɵFactoryDeclaration<MonthCalendarComponent<any, any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MonthCalendarComponent<any, any>, "month-calendar", never, { "showWeekNumber": { "alias": "showWeekNumber"; "required": false; }; "display": { "alias": "display"; "required": false; }; "weekDayName": { "alias": "weekDayName"; "required": false; }; "dayAspectRatio": { "alias": "dayAspectRatio"; "required": false; }; "events": { "alias": "events"; "required": false; }; }, {}, ["customCalendarDayTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MonthCalendarComponent<any, any>, "month-calendar", never, { "showWeekNumber": { "alias": "showWeekNumber"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "weekDayName": { "alias": "weekDayName"; "required": false; "isSignal": true; }; "dayAspectRatio": { "alias": "dayAspectRatio"; "required": false; "isSignal": true; }; "events": { "alias": "events"; "required": false; "isSignal": true; }; }, {}, ["customCalendarDayTemplate"], never, true, never>;
 }
 //# sourceMappingURL=monthCalendar.component.d.ts.map

package/src/modules/calendar/components/monthCalendar/monthCalendar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"monthCalendar.component.d.ts","sourceRoot":"","sources":["monthCalendar.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoD,MAAM,EAAa,WAAW,EAAgB,SAAS,EAAE,aAAa,EAAC,MAAM,eAAe,CAAC;AAExJ,OAAO,EAAC,UAAU,EAAmB,MAAM,gBAAgB,CAAC;AAE5D,OAAO,EAAC,eAAe,EAAE,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAA+B,0BAA0B,EAAC,MAAM,kBAAkB,CAAC;AAC1F,OAAO,EAAC,sBAAsB,EAAE,sBAAsB,EAAC,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;;AAEtD;;GAEG;AACH,qBAgBa,sBAAsB,CAAC,KAAK,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO,CAAE,YAAW,MAAM,EAAE,SAAS;IAwFjE,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC;IAC1B,SAAS,CAAC,cAAc,EAAE,cAAc;IACjE,SAAS,CAAC,WAAW,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC;IAtF7D;;OAEG;IACH,SAAS,CAAC,mBAAmB,EAAE,MAAM,CAAqC;IAE1E;;OAEG;IACH,SAAS,CAAC,YAAY,EAAE,UAAU,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC,CAAM;IAE1E;;OAEG;IACH,SAAS,KAAK,mBAAmB,IAAI,WAAW,CAAC,0BAA0B,CAAC,CAG3E;IAED;;OAEG;IACH,SAAS,CAAC,YAAY,EAAE,MAAM,EAAE,CAAM;IAItC;;OAEG;IAEH,SAAS,CAAC,0BAA0B,EAAG,WAAW,CAAC,0BAA0B,CAAC,CAAC;IAE/E;;OAEG;IAEH,SAAS,CAAC,yBAAyB,EAAE,WAAW,CAAC,0BAA0B,CAAC,GAAC,SAAS,GAAC,IAAI,CAAC;IAI5F;;OAEG;IAEI,cAAc,EAAE,OAAO,CAAS;IAEvC;;OAEG;IAEI,OAAO,EAAE,KAAK,GAAC,SAAS,GAAC,IAAI,CAAC;IAErC;;OAEG;IAEI,WAAW,EAAE,sBAAsB,CAAgC;IAE1E;;OAEG;IACH,IACW,cAAc,IAAI,MAAM,CAGlC;IACD,IAAW,cAAc,CAAC,KAAK,EAAE,MAAM,EAUtC;IAED;;OAEG;IAEI,MAAM,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAM;gBAGP,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,EAChB,cAAc,EAAE,cAAc,EACvD,WAAW,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC;IAM7D;;OAEG;IACI,QAAQ,IAAI,IAAI;IAQvB;;OAEG;IACI,WAAW,CAAC,OAAO,EAAE,aAAa,GAAG,IAAI;IAoBhD;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAiClC;;OAEG;IACH,SAAS,CAAC,yBAAyB,IAAI,IAAI;IAqC3C;;OAEG;IACH,SAAS,CAAC,sBAAsB,IAAI,IAAI;IAkBxC;;OAEG;IACH,OAAc,6BAA6B,EAAE,MAAM,OAAO,sBAAsB,CAAC;IAEjF;;OAEG;IACH,OAAc,gCAAgC,EAAE,MAAM,OAAO,sBAAsB,GAAC,MAAM,CAAC;yCA3OlF,sBAAsB;2CAAtB,sBAAsB;CA4OlC"}
+{"version":3,"file":"monthCalendar.component.d.ts","sourceRoot":"","sources":["monthCalendar.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6C,WAAW,EAAE,MAAM,EAAS,WAAW,EAA2B,wBAAwB,EAA2B,MAAM,eAAe,CAAC;AAE/L,OAAO,EAAC,UAAU,EAAW,MAAM,gBAAgB,CAAC;AAEpD,OAAO,EAAC,eAAe,EAAE,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAA+B,0BAA0B,EAAC,MAAM,kBAAkB,CAAC;AAC1F,OAAO,EAAC,sBAAsB,EAAE,sBAAsB,EAAC,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAC,OAAO,EAAC,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;;AAetD;;GAEG;AACH,qBAiBa,sBAAsB,CAAC,KAAK,GAAG,OAAO,EAAE,MAAM,GAAG,OAAO;IA2DnC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC;IAC1B,SAAS,CAAC,cAAc,EAAE,cAAc;IACjE,SAAS,CAAC,WAAW,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC;IAzD7D;;OAEG;IACH,SAAS,CAAC,YAAY,EAAE,MAAM,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;IAE7E;;OAEG;IACH,SAAS,CAAC,mBAAmB,EAAE,MAAM,CAAC,WAAW,CAAC,0BAA0B,CAAC,CAAC,CAAC;IAE/E;;OAEG;IACH,SAAS,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;IAIzC;;OAEG;IACH,SAAS,CAAC,0BAA0B,EAAE,MAAM,CAAC,WAAW,CAAC,0BAA0B,CAAC,CAAC,CAAyE;IAE9J;;OAEG;IACH,SAAS,CAAC,yBAAyB,EAAE,MAAM,CAAC,WAAW,CAAC,0BAA0B,CAAC,GAAC,SAAS,GAAC,IAAI,CAAC,CAAmE;IAItK;;OAEG;IACI,cAAc,EAAE,WAAW,CAAC,OAAO,CAAC,CAAgB;IAE3D;;OAEG;IACI,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,CAAuD;IAEzF;;OAEG;IACI,WAAW,EAAE,WAAW,CAAC,sBAAsB,CAAC,CAA+D;IAEtH;;OAEG;IACI,cAAc,EAAE,wBAAwB,CAAC,sBAAsB,EAAE,MAAM,OAAO,sBAAsB,GAAC,MAAM,CAAC,CAAsJ;IAEzQ;;OAEG;IACI,MAAM,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC,CAAyC;gBAGvD,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,EAChB,cAAc,EAAE,cAAc,EACvD,WAAW,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC;IAgG7D;;OAEG;IACH,OAAc,6BAA6B,EAAE,MAAM,OAAO,sBAAsB,CAAC;IAEjF;;OAEG;IACH,OAAc,gCAAgC,EAAE,MAAM,OAAO,sBAAsB,GAAC,MAAM,CAAC;yCArKlF,sBAAsB;2CAAtB,sBAAsB;CAsKlC"}

package/src/modules/calendar/components/monthCalendar/monthCalendar.component.html

@@ -2,15 +2,15 @@
 
 <div></div>
 
-@for(dayName of weekDayNames; track dayName)
+@for(dayName of weekDayNames(); track dayName)
 {
     <div [class.week-day-name]="dayName">{{dayName}}</div>
 }
 
-@for(weekData of calendarData | keyvalue; track weekData)
+@for(weekData of calendarData() | keyvalue; track weekData)
 {
     <div class="week-number">
-        @if(showWeekNumber)
+        @if(showWeekNumber())
         {
             {{weekData.key}}
         }
@@ -18,8 +18,8 @@
     
     @for(dayData of weekData.value; track dayData)
     {
-        <div [style.padding-bottom.%]="dayAspectRatioValue" class="day-wrapper">
-            <div class="day-content"><ng-container *ngTemplateOutlet="calendarDayTemplate; context: {$implicit: dayData}"/></div>
+        <div [style.padding-bottom.%]="dayAspectRatio()" class="day-wrapper">
+            <div class="day-content"><ng-container *ngTemplateOutlet="calendarDayTemplate(); context: {$implicit: dayData}"/></div>
         </div>
     }
 }

package/version.bak

@@ -1 +1 @@
-9.0.0-beta.20241007061121 
+9.0.0-beta.20241007072706