@ngstarter-ui/components 21.0.9 → 21.0.10

package/ai/component-registry.json

@@ -3,7 +3,7 @@
   "generatedBy": "scripts/generate-ai-metadata.mjs",
   "package": "@ngstarter-ui/components",
   "description": "AI-readable registry for NgStarter UI Angular secondary entry points.",
-  "componentCount": 120,
+  "componentCount": 121,
   "conventions": {
     "importPattern": "@ngstarter-ui/components/<component>",
     "selectorPrefix": "ngs",
@@ -1063,6 +1063,117 @@
       ],
       "example": null
     },
+    {
+      "name": "calendar",
+      "title": "Calendar",
+      "overviewName": "Calendar",
+      "category": "components",
+      "package": "@ngstarter-ui/components",
+      "importPath": "@ngstarter-ui/components/calendar",
+      "publicApi": "projects/components/calendar/public-api.ts",
+      "sourceRoot": "projects/components/calendar/src",
+      "docsPath": "/components/calendar",
+      "docsOverviewSource": "projects/docs/src/app/components/calendar/overview/overview.html",
+      "purpose": "The NgStarter Angular Calendar component renders an inline month calendar for dashboards, scheduling widgets, event summaries, availability previews, and date-driven product surfaces.",
+      "useWhen": "Choose Calendar when the workflow matches examples such as Basic Calendar, Calendar With Events, Calendar With Min And Max Dates, Calendar min max.",
+      "exampleTopics": [
+        "Basic Calendar",
+        "Calendar With Events",
+        "Calendar With Min And Max Dates",
+        "Calendar min max"
+      ],
+      "minimalExample": "<div class=\"calendar-example\">\n  <ngs-calendar [selected]=\"selectedDate()\" (selectedChange)=\"selectedDate.set($event)\" />\n</div>",
+      "exampleFiles": [
+        {
+          "name": "basic-calendar-example",
+          "title": "Basic calendar",
+          "file": "projects/docs/src/app/components/calendar/_examples/basic-calendar-example/basic-calendar-example.html",
+          "source": "<div class=\"calendar-example\">\n  <ngs-calendar [selected]=\"selectedDate()\" (selectedChange)=\"selectedDate.set($event)\" />\n</div>"
+        },
+        {
+          "name": "calendar-min-max-example",
+          "title": "Calendar min max",
+          "file": "projects/docs/src/app/components/calendar/_examples/calendar-min-max-example/calendar-min-max-example.html",
+          "source": "<div class=\"calendar-example\">\n  <ngs-calendar\n    [selected]=\"selectedDate()\"\n    [minDate]=\"minDate\"\n    [maxDate]=\"maxDate\"\n    [firstDayOfWeek]=\"1\"\n    [showAdjacentDays]=\"false\"\n    (selectedChange)=\"selectedDate.set($event)\"\n  />\n</div>"
+        },
+        {
+          "name": "calendar-with-events-example",
+          "title": "Calendar with events",
+          "file": "projects/docs/src/app/components/calendar/_examples/calendar-with-events-example/calendar-with-events-example.html",
+          "source": "<div class=\"calendar-example\">\n  <ngs-calendar\n    [selected]=\"selectedDate()\"\n    [events]=\"events\"\n    [showEventTitles]=\"true\"\n    (selectedChange)=\"selectedDate.set($event)\"\n  />\n</div>"
+        }
+      ],
+      "previewAsset": null,
+      "selectors": [
+        "ngs-calendar"
+      ],
+      "exportedSymbols": [
+        "Calendar",
+        "CalendarDateInput",
+        "CalendarEvent",
+        "CalendarEventColor"
+      ],
+      "inputs": [
+        "events",
+        "firstDayOfWeek",
+        "locale",
+        "maxDate",
+        "minDate",
+        "selected",
+        "showAdjacentDays",
+        "showEventTitles",
+        "showTodayButton",
+        "startAt"
+      ],
+      "outputs": [
+        "eventSelected",
+        "monthChange",
+        "selectedChange"
+      ],
+      "cssTokens": [
+        "--ngs-button-bg",
+        "--ngs-button-border-radius",
+        "--ngs-button-height",
+        "--ngs-button-padding",
+        "--ngs-button-padding-x",
+        "--ngs-calendar-day-bg",
+        "--ngs-calendar-day-hover-bg",
+        "--ngs-calendar-day-min-height",
+        "--ngs-calendar-day-muted-color",
+        "--ngs-calendar-day-radius",
+        "--ngs-calendar-day-selected-bg",
+        "--ngs-calendar-day-selected-color",
+        "--ngs-calendar-day-today-outline",
+        "--ngs-calendar-event-blue",
+        "--ngs-calendar-event-danger",
+        "--ngs-calendar-event-green",
+        "--ngs-calendar-event-info",
+        "--ngs-calendar-event-neutral",
+        "--ngs-calendar-event-primary",
+        "--ngs-calendar-event-rose",
+        "--ngs-calendar-event-success",
+        "--ngs-calendar-event-warning",
+        "--ngs-calendar-gap",
+        "--ngs-calendar-header-gap",
+        "--ngs-calendar-header-margin-bottom",
+        "--ngs-calendar-weekday-color",
+        "--ngs-color-danger",
+        "--ngs-color-info",
+        "--ngs-color-on-primary",
+        "--ngs-color-on-surface",
+        "--ngs-color-on-surface-variant",
+        "--ngs-color-outline",
+        "--ngs-color-primary",
+        "--ngs-color-success",
+        "--ngs-color-surface-container",
+        "--ngs-color-warning",
+        "--ngs-font-size-lg",
+        "--ngs-font-size-xs",
+        "--ngs-radius-md",
+        "--ngs-radius-sm"
+      ],
+      "example": null
+    },
     {
       "name": "card",
       "title": "Card",

package/fesm2022/ngstarter-ui-components-calendar.mjs

@@ -0,0 +1,238 @@
+import * as i0 from '@angular/core';
+import { input, numberAttribute, booleanAttribute, output, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Button } from '@ngstarter-ui/components/button';
+import { Icon } from '@ngstarter-ui/components/icon';
+
+class Calendar {
+    startAt = input(null, ...(ngDevMode ? [{ debugName: "startAt" }] : /* istanbul ignore next */ []));
+    selected = input(null, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+    maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+    events = input([], ...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
+    locale = input(undefined, ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    firstDayOfWeek = input(0, { ...(ngDevMode ? { debugName: "firstDayOfWeek" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    showAdjacentDays = input(true, { ...(ngDevMode ? { debugName: "showAdjacentDays" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showTodayButton = input(true, { ...(ngDevMode ? { debugName: "showTodayButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    showEventTitles = input(false, { ...(ngDevMode ? { debugName: "showEventTitles" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    selectedChange = output();
+    monthChange = output();
+    eventSelected = output();
+    activeMonth = signal(this.getInitialActiveMonth(), ...(ngDevMode ? [{ debugName: "activeMonth" }] : /* istanbul ignore next */ []));
+    selectedDate = signal(this.normalizeDateInput(this.selected()), ...(ngDevMode ? [{ debugName: "selectedDate" }] : /* istanbul ignore next */ []));
+    normalizedMinDate = computed(() => this.normalizeDateInput(this.minDate()), ...(ngDevMode ? [{ debugName: "normalizedMinDate" }] : /* istanbul ignore next */ []));
+    normalizedMaxDate = computed(() => this.normalizeDateInput(this.maxDate()), ...(ngDevMode ? [{ debugName: "normalizedMaxDate" }] : /* istanbul ignore next */ []));
+    periodLabel = computed(() => new Intl.DateTimeFormat(this.locale(), {
+        month: 'long',
+        year: 'numeric',
+    }).format(this.activeMonth()), ...(ngDevMode ? [{ debugName: "periodLabel" }] : /* istanbul ignore next */ []));
+    weekdayLabels = computed(() => {
+        const formatter = new Intl.DateTimeFormat(this.locale(), { weekday: 'short' });
+        const labels = [];
+        const weekStart = this.normalizedFirstDayOfWeek();
+        for (let index = 0; index < 7; index++) {
+            const date = new Date(2024, 0, 7 + weekStart + index);
+            labels.push(formatter.format(date));
+        }
+        return labels;
+    }, ...(ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []));
+    calendarCells = computed(() => {
+        const activeMonth = this.activeMonth();
+        const selectedDate = this.selectedDate();
+        const minDate = this.normalizedMinDate();
+        const maxDate = this.normalizedMaxDate();
+        const showAdjacentDays = this.showAdjacentDays();
+        const monthStart = this.startOfMonth(activeMonth);
+        const weekStart = this.normalizedFirstDayOfWeek();
+        const firstDayOffset = (monthStart.getDay() - weekStart + 7) % 7;
+        const gridStart = this.addDays(monthStart, -firstDayOffset);
+        const today = this.startOfDay(new Date());
+        const eventMap = this.eventsByDate();
+        const cells = [];
+        for (let index = 0; index < 42; index++) {
+            const date = this.addDays(gridStart, index);
+            const inCurrentMonth = this.sameMonth(date, activeMonth);
+            const events = eventMap.get(this.dateKey(date)) ?? [];
+            const visible = inCurrentMonth || showAdjacentDays;
+            cells.push({
+                date,
+                key: this.dateKey(date),
+                label: visible ? String(date.getDate()) : '',
+                ariaLabel: this.formatFullDate(date),
+                inCurrentMonth,
+                visible,
+                today: this.sameDate(date, today),
+                selected: !!selectedDate && this.sameDate(date, selectedDate),
+                disabled: this.isDisabled(date, minDate, maxDate) || !visible,
+                events,
+                markers: this.uniqueEventColors(events),
+            });
+        }
+        return cells;
+    }, ...(ngDevMode ? [{ debugName: "calendarCells" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const selected = this.normalizeDateInput(this.selected());
+            this.selectedDate.set(selected);
+            if (selected) {
+                this.activeMonth.set(this.startOfMonth(selected));
+            }
+        });
+        effect(() => {
+            const startAt = this.normalizeDateInput(this.startAt());
+            if (startAt) {
+                this.activeMonth.set(this.startOfMonth(startAt));
+            }
+        });
+    }
+    previousMonth() {
+        this.setActiveMonth(this.addMonths(this.activeMonth(), -1));
+    }
+    nextMonth() {
+        this.setActiveMonth(this.addMonths(this.activeMonth(), 1));
+    }
+    selectToday() {
+        const today = this.startOfDay(new Date());
+        this.setActiveMonth(today);
+        if (!this.isDisabled(today, this.normalizedMinDate(), this.normalizedMaxDate())) {
+            this.selectDate(today);
+        }
+    }
+    selectCell(cell) {
+        if (cell.disabled) {
+            return;
+        }
+        if (!cell.inCurrentMonth) {
+            this.setActiveMonth(cell.date);
+        }
+        this.selectDate(cell.date);
+    }
+    selectEvent(event, domEvent) {
+        domEvent.stopPropagation();
+        this.eventSelected.emit(event);
+    }
+    markerClass(color) {
+        return `ngs-calendar-event-${color}`;
+    }
+    selectDate(date) {
+        const value = this.startOfDay(date);
+        this.selectedDate.set(value);
+        this.selectedChange.emit(this.cloneDate(value));
+    }
+    setActiveMonth(date) {
+        const month = this.startOfMonth(date);
+        this.activeMonth.set(month);
+        this.monthChange.emit(this.cloneDate(month));
+    }
+    getInitialActiveMonth() {
+        return this.startOfMonth(this.normalizeDateInput(this.selected()) ??
+            this.normalizeDateInput(this.startAt()) ??
+            new Date());
+    }
+    eventsByDate() {
+        const map = new Map();
+        for (const event of this.events()) {
+            const date = this.normalizeDateInput(event.date);
+            if (!date) {
+                continue;
+            }
+            const key = this.dateKey(date);
+            const events = map.get(key) ?? [];
+            events.push(event);
+            map.set(key, events);
+        }
+        return map;
+    }
+    uniqueEventColors(events) {
+        const colors = new Set();
+        for (const event of events) {
+            colors.add(event.color ?? 'primary');
+        }
+        return [...colors].slice(0, 3);
+    }
+    normalizedFirstDayOfWeek() {
+        const value = this.firstDayOfWeek();
+        if (!Number.isFinite(value)) {
+            return 0;
+        }
+        return ((Math.trunc(value) % 7) + 7) % 7;
+    }
+    normalizeDateInput(value) {
+        if (value === null || value === undefined || value === '') {
+            return null;
+        }
+        if (value instanceof Date) {
+            return Number.isNaN(value.getTime()) ? null : this.startOfDay(value);
+        }
+        if (typeof value === 'string') {
+            const dateOnly = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+            if (dateOnly) {
+                const year = Number(dateOnly[1]);
+                const month = Number(dateOnly[2]) - 1;
+                const day = Number(dateOnly[3]);
+                const date = new Date(year, month, day);
+                return Number.isNaN(date.getTime()) ? null : this.startOfDay(date);
+            }
+        }
+        const date = new Date(value);
+        return Number.isNaN(date.getTime()) ? null : this.startOfDay(date);
+    }
+    isDisabled(date, minDate, maxDate) {
+        return ((!!minDate && this.compareDate(date, minDate) < 0) ||
+            (!!maxDate && this.compareDate(date, maxDate) > 0));
+    }
+    formatFullDate(date) {
+        return new Intl.DateTimeFormat(this.locale(), {
+            weekday: 'long',
+            month: 'long',
+            day: 'numeric',
+            year: 'numeric',
+        }).format(date);
+    }
+    addMonths(date, months) {
+        return new Date(date.getFullYear(), date.getMonth() + months, 1);
+    }
+    addDays(date, days) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+    }
+    startOfMonth(date) {
+        return new Date(date.getFullYear(), date.getMonth(), 1);
+    }
+    startOfDay(date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }
+    cloneDate(date) {
+        return new Date(date.getTime());
+    }
+    sameMonth(first, second) {
+        return first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth();
+    }
+    sameDate(first, second) {
+        return this.compareDate(first, second) === 0;
+    }
+    compareDate(first, second) {
+        return (first.getFullYear() - second.getFullYear() ||
+            first.getMonth() - second.getMonth() ||
+            first.getDate() - second.getDate());
+    }
+    dateKey(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Calendar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: Calendar, isStandalone: true, selector: "ngs-calendar", inputs: { startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, showAdjacentDays: { classPropertyName: "showAdjacentDays", publicName: "showAdjacentDays", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showEventTitles: { classPropertyName: "showEventTitles", publicName: "showEventTitles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedChange: "selectedChange", monthChange: "monthChange", eventSelected: "eventSelected" }, host: { classAttribute: "ngs-calendar" }, exportAs: ["ngsCalendar"], ngImport: i0, template: "<div class=\"ngs-calendar-header\">\n  <button\n    ngsIconButton\n    type=\"button\"\n    class=\"ngs-calendar-previous-button\"\n    aria-label=\"Previous month\"\n    (click)=\"previousMonth()\"\n  >\n    <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n  </button>\n\n  <div class=\"ngs-calendar-period\" aria-live=\"polite\">{{ periodLabel() }}</div>\n\n  <div class=\"ngs-calendar-actions\">\n    @if (showTodayButton()) {\n      <button ngsButton type=\"button\" class=\"ngs-calendar-today-button\" (click)=\"selectToday()\">\n        Today\n      </button>\n    }\n\n    <button\n      ngsIconButton\n      type=\"button\"\n      class=\"ngs-calendar-next-button\"\n      aria-label=\"Next month\"\n      (click)=\"nextMonth()\"\n    >\n      <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n    </button>\n  </div>\n</div>\n\n<div class=\"ngs-calendar-weekdays\" role=\"row\">\n  @for (weekday of weekdayLabels(); track weekday) {\n    <div class=\"ngs-calendar-weekday\" role=\"columnheader\">{{ weekday }}</div>\n  }\n</div>\n\n<div class=\"ngs-calendar-grid\" role=\"grid\" [attr.aria-label]=\"periodLabel()\">\n  @for (cell of calendarCells(); track cell.key) {\n    <button\n      ngsButton\n      type=\"button\"\n      class=\"ngs-calendar-day\"\n      [class.ngs-calendar-day-hidden]=\"!cell.visible\"\n      [class.ngs-calendar-day-muted]=\"!cell.inCurrentMonth\"\n      [class.ngs-calendar-day-today]=\"cell.today\"\n      [class.ngs-calendar-day-selected]=\"cell.selected\"\n      [class.ngs-calendar-day-has-events]=\"cell.events.length > 0\"\n      [disabled]=\"cell.disabled\"\n      [attr.aria-label]=\"cell.ariaLabel\"\n      [attr.aria-selected]=\"cell.selected\"\n      [attr.data-date]=\"cell.key\"\n      role=\"gridcell\"\n      (click)=\"selectCell(cell)\"\n    >\n      <span class=\"ngs-calendar-day-number\">{{ cell.label }}</span>\n\n      @if (cell.markers.length > 0) {\n        <span class=\"ngs-calendar-event-markers\" aria-hidden=\"true\">\n          @for (marker of cell.markers; track marker) {\n            <span class=\"ngs-calendar-event-marker {{ markerClass(marker) }}\"></span>\n          }\n        </span>\n      }\n\n      @if (showEventTitles() && cell.events.length > 0) {\n        <span class=\"ngs-calendar-event-list\">\n          @for (event of cell.events.slice(0, 2); track event.id ?? event.title ?? $index) {\n            <span class=\"ngs-calendar-event-title\" (click)=\"selectEvent(event, $event)\">\n              {{ event.title }}\n            </span>\n          }\n        </span>\n      }\n    </button>\n  }\n</div>\n", styles: [":host{--ngs-calendar-gap: calc(var(--spacing, .25rem) * 1);--ngs-calendar-header-gap: calc(var(--spacing, .25rem) * 2);--ngs-calendar-day-min-height: calc(var(--spacing, .25rem) * 12);--ngs-calendar-day-radius: var(--ngs-radius-md);--ngs-calendar-day-bg: transparent;--ngs-calendar-day-hover-bg: var(--ngs-color-surface-container);--ngs-calendar-day-selected-bg: var(--ngs-color-primary);--ngs-calendar-day-selected-color: var(--ngs-color-on-primary);--ngs-calendar-day-today-outline: 1px solid var(--ngs-color-primary);--ngs-calendar-day-muted-color: var(--ngs-color-on-surface-variant);--ngs-calendar-weekday-color: var(--ngs-color-on-surface-variant);--ngs-calendar-event-primary: var(--ngs-color-primary);--ngs-calendar-event-success: var(--ngs-color-success);--ngs-calendar-event-warning: var(--ngs-color-warning);--ngs-calendar-event-danger: var(--ngs-color-danger);--ngs-calendar-event-info: var(--ngs-color-info);--ngs-calendar-event-neutral: var(--ngs-color-outline);--ngs-calendar-event-green: var(--ngs-color-success);--ngs-calendar-event-rose: var(--ngs-color-danger);--ngs-calendar-event-blue: var(--ngs-color-info);--ngs-calendar-header-margin-bottom: 0;display:flex;flex-direction:column;width:100%;min-width:0;gap:var(--ngs-calendar-gap);color:var(--ngs-color-on-surface)}:host .ngs-calendar-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--ngs-calendar-header-gap);min-width:0;margin-bottom:var(--ngs-calendar-header-margin-bottom)}:host .ngs-calendar-period{min-width:0;overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-lg);font-weight:600;text-align:center;text-overflow:ellipsis;white-space:nowrap}:host .ngs-calendar-actions{display:inline-flex;align-items:center;gap:var(--ngs-calendar-header-gap)}:host .ngs-calendar-today-button{--ngs-button-height: calc(var(--spacing, .25rem) * 9);--ngs-button-padding-x: calc(var(--spacing, .25rem) * 3)}:host .ngs-calendar-weekdays,:host .ngs-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--ngs-calendar-gap)}:host .ngs-calendar-weekday{display:flex;align-items:center;justify-content:center;min-width:0;min-height:calc(var(--spacing, .25rem) * 7);color:var(--ngs-calendar-weekday-color);font-size:var(--ngs-font-size-xs);font-weight:500;text-transform:uppercase}:host .ngs-calendar-grid{flex:1;min-height:0}:host button.ngs-calendar-day{--ngs-button-bg: var(--ngs-calendar-day-bg);--ngs-button-border-radius: var(--ngs-calendar-day-radius);--ngs-button-height: auto;--ngs-button-padding: calc(var(--spacing, .25rem) * 1);position:relative;display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;min-width:0;min-height:var(--ngs-calendar-day-min-height);color:var(--ngs-color-on-surface);font-weight:400;gap:calc(var(--spacing, .25rem) * 1)}:host button.ngs-calendar-day:not(.ngs-calendar-day-has-events){justify-content:center}:host button.ngs-calendar-day:not(.ngs-calendar-day-selected):not(.ngs-button-disabled):hover{--ngs-button-bg: var(--ngs-calendar-day-hover-bg)}:host button.ngs-calendar-day.ngs-calendar-day-muted{color:var(--ngs-calendar-day-muted-color)}:host button.ngs-calendar-day.ngs-calendar-day-hidden{visibility:hidden;pointer-events:none}:host button.ngs-calendar-day.ngs-calendar-day-selected{--ngs-button-bg: var(--ngs-calendar-day-selected-bg);color:var(--ngs-calendar-day-selected-color)}:host button.ngs-calendar-day.ngs-calendar-day-today:not(.ngs-calendar-day-selected){outline:var(--ngs-calendar-day-today-outline);outline-offset:-1px}:host button.ngs-calendar-day ::ng-deep>.content{display:flex;width:100%;max-width:100%;min-width:0;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:inherit;gap:inherit;line-height:normal}:host .ngs-calendar-day-number{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);line-height:1}:host .ngs-calendar-event-markers{display:inline-flex;max-width:100%;min-height:calc(var(--spacing, .25rem) * 1.5);align-items:center;justify-content:center;gap:2px}:host .ngs-calendar-event-marker{width:calc(var(--spacing, .25rem) * 1.5);height:calc(var(--spacing, .25rem) * 1.5);flex:none;border-radius:999px;background:var(--ngs-calendar-event-primary)}:host .ngs-calendar-event-marker.ngs-calendar-event-success{background:var(--ngs-calendar-event-success)}:host .ngs-calendar-event-marker.ngs-calendar-event-warning{background:var(--ngs-calendar-event-warning)}:host .ngs-calendar-event-marker.ngs-calendar-event-danger{background:var(--ngs-calendar-event-danger)}:host .ngs-calendar-event-marker.ngs-calendar-event-info{background:var(--ngs-calendar-event-info)}:host .ngs-calendar-event-marker.ngs-calendar-event-neutral{background:var(--ngs-calendar-event-neutral)}:host .ngs-calendar-event-marker.ngs-calendar-event-green{background:var(--ngs-calendar-event-green)}:host .ngs-calendar-event-marker.ngs-calendar-event-rose{background:var(--ngs-calendar-event-rose)}:host .ngs-calendar-event-marker.ngs-calendar-event-blue{background:var(--ngs-calendar-event-blue)}:host .ngs-calendar-event-list{display:flex;width:100%;min-width:0;flex-direction:column;gap:2px}:host .ngs-calendar-event-title{display:block;box-sizing:border-box;overflow:hidden;width:100%;max-width:100%;min-width:0;padding-inline:calc(var(--spacing, .25rem) * 1);border-radius:var(--ngs-radius-sm);background:var(--ngs-calendar-event-primary);color:currentColor;font-size:var(--ngs-font-size-xs);font-weight:400;line-height:1.35;text-align:left;text-overflow:ellipsis;white-space:nowrap}@supports (color: color-mix(in lab,red,red)){:host .ngs-calendar-event-title{background:color-mix(in srgb,var(--ngs-calendar-event-primary),transparent 88%)}}:host .ngs-calendar-day-selected .ngs-calendar-event-marker{background:currentColor}:host .ngs-calendar-day-selected .ngs-calendar-event-title{background:currentColor}@supports (color: color-mix(in lab,red,red)){:host .ngs-calendar-day-selected .ngs-calendar-event-title{background:color-mix(in srgb,currentColor,transparent 84%)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Button, selector: "    button[ngsButton], button[ngsIconButton],    a[ngsButton], a[ngsIconButton]  ", inputs: ["ngsButton", "ngsIconButton", "loading", "disabled", "disabledInteractive", "disableRipple", "reverse", "fullWidth", "hideTextOnMobile"], exportAs: ["ngsButton"] }, { kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: Calendar, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-calendar', exportAs: 'ngsCalendar', standalone: true, imports: [Button, Icon], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ngs-calendar',
+                    }, template: "<div class=\"ngs-calendar-header\">\n  <button\n    ngsIconButton\n    type=\"button\"\n    class=\"ngs-calendar-previous-button\"\n    aria-label=\"Previous month\"\n    (click)=\"previousMonth()\"\n  >\n    <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n  </button>\n\n  <div class=\"ngs-calendar-period\" aria-live=\"polite\">{{ periodLabel() }}</div>\n\n  <div class=\"ngs-calendar-actions\">\n    @if (showTodayButton()) {\n      <button ngsButton type=\"button\" class=\"ngs-calendar-today-button\" (click)=\"selectToday()\">\n        Today\n      </button>\n    }\n\n    <button\n      ngsIconButton\n      type=\"button\"\n      class=\"ngs-calendar-next-button\"\n      aria-label=\"Next month\"\n      (click)=\"nextMonth()\"\n    >\n      <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n    </button>\n  </div>\n</div>\n\n<div class=\"ngs-calendar-weekdays\" role=\"row\">\n  @for (weekday of weekdayLabels(); track weekday) {\n    <div class=\"ngs-calendar-weekday\" role=\"columnheader\">{{ weekday }}</div>\n  }\n</div>\n\n<div class=\"ngs-calendar-grid\" role=\"grid\" [attr.aria-label]=\"periodLabel()\">\n  @for (cell of calendarCells(); track cell.key) {\n    <button\n      ngsButton\n      type=\"button\"\n      class=\"ngs-calendar-day\"\n      [class.ngs-calendar-day-hidden]=\"!cell.visible\"\n      [class.ngs-calendar-day-muted]=\"!cell.inCurrentMonth\"\n      [class.ngs-calendar-day-today]=\"cell.today\"\n      [class.ngs-calendar-day-selected]=\"cell.selected\"\n      [class.ngs-calendar-day-has-events]=\"cell.events.length > 0\"\n      [disabled]=\"cell.disabled\"\n      [attr.aria-label]=\"cell.ariaLabel\"\n      [attr.aria-selected]=\"cell.selected\"\n      [attr.data-date]=\"cell.key\"\n      role=\"gridcell\"\n      (click)=\"selectCell(cell)\"\n    >\n      <span class=\"ngs-calendar-day-number\">{{ cell.label }}</span>\n\n      @if (cell.markers.length > 0) {\n        <span class=\"ngs-calendar-event-markers\" aria-hidden=\"true\">\n          @for (marker of cell.markers; track marker) {\n            <span class=\"ngs-calendar-event-marker {{ markerClass(marker) }}\"></span>\n          }\n        </span>\n      }\n\n      @if (showEventTitles() && cell.events.length > 0) {\n        <span class=\"ngs-calendar-event-list\">\n          @for (event of cell.events.slice(0, 2); track event.id ?? event.title ?? $index) {\n            <span class=\"ngs-calendar-event-title\" (click)=\"selectEvent(event, $event)\">\n              {{ event.title }}\n            </span>\n          }\n        </span>\n      }\n    </button>\n  }\n</div>\n", styles: [":host{--ngs-calendar-gap: calc(var(--spacing, .25rem) * 1);--ngs-calendar-header-gap: calc(var(--spacing, .25rem) * 2);--ngs-calendar-day-min-height: calc(var(--spacing, .25rem) * 12);--ngs-calendar-day-radius: var(--ngs-radius-md);--ngs-calendar-day-bg: transparent;--ngs-calendar-day-hover-bg: var(--ngs-color-surface-container);--ngs-calendar-day-selected-bg: var(--ngs-color-primary);--ngs-calendar-day-selected-color: var(--ngs-color-on-primary);--ngs-calendar-day-today-outline: 1px solid var(--ngs-color-primary);--ngs-calendar-day-muted-color: var(--ngs-color-on-surface-variant);--ngs-calendar-weekday-color: var(--ngs-color-on-surface-variant);--ngs-calendar-event-primary: var(--ngs-color-primary);--ngs-calendar-event-success: var(--ngs-color-success);--ngs-calendar-event-warning: var(--ngs-color-warning);--ngs-calendar-event-danger: var(--ngs-color-danger);--ngs-calendar-event-info: var(--ngs-color-info);--ngs-calendar-event-neutral: var(--ngs-color-outline);--ngs-calendar-event-green: var(--ngs-color-success);--ngs-calendar-event-rose: var(--ngs-color-danger);--ngs-calendar-event-blue: var(--ngs-color-info);--ngs-calendar-header-margin-bottom: 0;display:flex;flex-direction:column;width:100%;min-width:0;gap:var(--ngs-calendar-gap);color:var(--ngs-color-on-surface)}:host .ngs-calendar-header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--ngs-calendar-header-gap);min-width:0;margin-bottom:var(--ngs-calendar-header-margin-bottom)}:host .ngs-calendar-period{min-width:0;overflow:hidden;color:var(--ngs-color-on-surface);font-size:var(--ngs-font-size-lg);font-weight:600;text-align:center;text-overflow:ellipsis;white-space:nowrap}:host .ngs-calendar-actions{display:inline-flex;align-items:center;gap:var(--ngs-calendar-header-gap)}:host .ngs-calendar-today-button{--ngs-button-height: calc(var(--spacing, .25rem) * 9);--ngs-button-padding-x: calc(var(--spacing, .25rem) * 3)}:host .ngs-calendar-weekdays,:host .ngs-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--ngs-calendar-gap)}:host .ngs-calendar-weekday{display:flex;align-items:center;justify-content:center;min-width:0;min-height:calc(var(--spacing, .25rem) * 7);color:var(--ngs-calendar-weekday-color);font-size:var(--ngs-font-size-xs);font-weight:500;text-transform:uppercase}:host .ngs-calendar-grid{flex:1;min-height:0}:host button.ngs-calendar-day{--ngs-button-bg: var(--ngs-calendar-day-bg);--ngs-button-border-radius: var(--ngs-calendar-day-radius);--ngs-button-height: auto;--ngs-button-padding: calc(var(--spacing, .25rem) * 1);position:relative;display:flex;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;min-width:0;min-height:var(--ngs-calendar-day-min-height);color:var(--ngs-color-on-surface);font-weight:400;gap:calc(var(--spacing, .25rem) * 1)}:host button.ngs-calendar-day:not(.ngs-calendar-day-has-events){justify-content:center}:host button.ngs-calendar-day:not(.ngs-calendar-day-selected):not(.ngs-button-disabled):hover{--ngs-button-bg: var(--ngs-calendar-day-hover-bg)}:host button.ngs-calendar-day.ngs-calendar-day-muted{color:var(--ngs-calendar-day-muted-color)}:host button.ngs-calendar-day.ngs-calendar-day-hidden{visibility:hidden;pointer-events:none}:host button.ngs-calendar-day.ngs-calendar-day-selected{--ngs-button-bg: var(--ngs-calendar-day-selected-bg);color:var(--ngs-calendar-day-selected-color)}:host button.ngs-calendar-day.ngs-calendar-day-today:not(.ngs-calendar-day-selected){outline:var(--ngs-calendar-day-today-outline);outline-offset:-1px}:host button.ngs-calendar-day ::ng-deep>.content{display:flex;width:100%;max-width:100%;min-width:0;flex:1 1 auto;flex-direction:column;align-items:center;justify-content:inherit;gap:inherit;line-height:normal}:host .ngs-calendar-day-number{display:inline-flex;align-items:center;justify-content:center;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);line-height:1}:host .ngs-calendar-event-markers{display:inline-flex;max-width:100%;min-height:calc(var(--spacing, .25rem) * 1.5);align-items:center;justify-content:center;gap:2px}:host .ngs-calendar-event-marker{width:calc(var(--spacing, .25rem) * 1.5);height:calc(var(--spacing, .25rem) * 1.5);flex:none;border-radius:999px;background:var(--ngs-calendar-event-primary)}:host .ngs-calendar-event-marker.ngs-calendar-event-success{background:var(--ngs-calendar-event-success)}:host .ngs-calendar-event-marker.ngs-calendar-event-warning{background:var(--ngs-calendar-event-warning)}:host .ngs-calendar-event-marker.ngs-calendar-event-danger{background:var(--ngs-calendar-event-danger)}:host .ngs-calendar-event-marker.ngs-calendar-event-info{background:var(--ngs-calendar-event-info)}:host .ngs-calendar-event-marker.ngs-calendar-event-neutral{background:var(--ngs-calendar-event-neutral)}:host .ngs-calendar-event-marker.ngs-calendar-event-green{background:var(--ngs-calendar-event-green)}:host .ngs-calendar-event-marker.ngs-calendar-event-rose{background:var(--ngs-calendar-event-rose)}:host .ngs-calendar-event-marker.ngs-calendar-event-blue{background:var(--ngs-calendar-event-blue)}:host .ngs-calendar-event-list{display:flex;width:100%;min-width:0;flex-direction:column;gap:2px}:host .ngs-calendar-event-title{display:block;box-sizing:border-box;overflow:hidden;width:100%;max-width:100%;min-width:0;padding-inline:calc(var(--spacing, .25rem) * 1);border-radius:var(--ngs-radius-sm);background:var(--ngs-calendar-event-primary);color:currentColor;font-size:var(--ngs-font-size-xs);font-weight:400;line-height:1.35;text-align:left;text-overflow:ellipsis;white-space:nowrap}@supports (color: color-mix(in lab,red,red)){:host .ngs-calendar-event-title{background:color-mix(in srgb,var(--ngs-calendar-event-primary),transparent 88%)}}:host .ngs-calendar-day-selected .ngs-calendar-event-marker{background:currentColor}:host .ngs-calendar-day-selected .ngs-calendar-event-title{background:currentColor}@supports (color: color-mix(in lab,red,red)){:host .ngs-calendar-day-selected .ngs-calendar-event-title{background:color-mix(in srgb,currentColor,transparent 84%)}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], showAdjacentDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAdjacentDays", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showEventTitles: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEventTitles", required: false }] }], selectedChange: [{ type: i0.Output, args: ["selectedChange"] }], monthChange: [{ type: i0.Output, args: ["monthChange"] }], eventSelected: [{ type: i0.Output, args: ["eventSelected"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Calendar };
+//# sourceMappingURL=ngstarter-ui-components-calendar.mjs.map

package/fesm2022/ngstarter-ui-components-calendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-calendar.mjs","sources":["../../../projects/components/calendar/src/calendar/calendar.ts","../../../projects/components/calendar/src/calendar/calendar.html","../../../projects/components/calendar/ngstarter-ui-components-calendar.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  input,\n  numberAttribute,\n  output,\n  signal,\n} from '@angular/core';\nimport { Button } from '@ngstarter-ui/components/button';\nimport { Icon } from '@ngstarter-ui/components/icon';\n\nexport type CalendarDateInput = Date | string | number;\n\nexport type CalendarEventColor =\n  | 'primary'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'info'\n  | 'neutral'\n  | 'green'\n  | 'rose'\n  | 'blue';\n\nexport interface CalendarEvent {\n  readonly id?: string | number;\n  readonly date: CalendarDateInput;\n  readonly title?: string;\n  readonly color?: CalendarEventColor;\n}\n\ninterface CalendarCell {\n  readonly date: Date;\n  readonly key: string;\n  readonly label: string;\n  readonly ariaLabel: string;\n  readonly inCurrentMonth: boolean;\n  readonly visible: boolean;\n  readonly today: boolean;\n  readonly selected: boolean;\n  readonly disabled: boolean;\n  readonly events: readonly CalendarEvent[];\n  readonly markers: readonly CalendarEventColor[];\n}\n\n@Component({\n  selector: 'ngs-calendar',\n  exportAs: 'ngsCalendar',\n  standalone: true,\n  imports: [Button, Icon],\n  templateUrl: './calendar.html',\n  styleUrl: './calendar.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'ngs-calendar',\n  },\n})\nexport class Calendar {\n  readonly startAt = input<CalendarDateInput | null>(null);\n  readonly selected = input<CalendarDateInput | null>(null);\n  readonly minDate = input<CalendarDateInput | null>(null);\n  readonly maxDate = input<CalendarDateInput | null>(null);\n  readonly events = input<readonly CalendarEvent[]>([]);\n  readonly locale = input<string | undefined>(undefined);\n  readonly firstDayOfWeek = input(0, { transform: numberAttribute });\n  readonly showAdjacentDays = input(true, { transform: booleanAttribute });\n  readonly showTodayButton = input(true, { transform: booleanAttribute });\n  readonly showEventTitles = input(false, { transform: booleanAttribute });\n\n  readonly selectedChange = output<Date>();\n  readonly monthChange = output<Date>();\n  readonly eventSelected = output<CalendarEvent>();\n\n  protected readonly activeMonth = signal(this.getInitialActiveMonth());\n  protected readonly selectedDate = signal<Date | null>(this.normalizeDateInput(this.selected()));\n\n  protected readonly normalizedMinDate = computed(() => this.normalizeDateInput(this.minDate()));\n  protected readonly normalizedMaxDate = computed(() => this.normalizeDateInput(this.maxDate()));\n\n  protected readonly periodLabel = computed(() =>\n    new Intl.DateTimeFormat(this.locale(), {\n      month: 'long',\n      year: 'numeric',\n    }).format(this.activeMonth()),\n  );\n\n  protected readonly weekdayLabels = computed(() => {\n    const formatter = new Intl.DateTimeFormat(this.locale(), { weekday: 'short' });\n    const labels: string[] = [];\n    const weekStart = this.normalizedFirstDayOfWeek();\n\n    for (let index = 0; index < 7; index++) {\n      const date = new Date(2024, 0, 7 + weekStart + index);\n      labels.push(formatter.format(date));\n    }\n\n    return labels;\n  });\n\n  protected readonly calendarCells = computed<readonly CalendarCell[]>(() => {\n    const activeMonth = this.activeMonth();\n    const selectedDate = this.selectedDate();\n    const minDate = this.normalizedMinDate();\n    const maxDate = this.normalizedMaxDate();\n    const showAdjacentDays = this.showAdjacentDays();\n    const monthStart = this.startOfMonth(activeMonth);\n    const weekStart = this.normalizedFirstDayOfWeek();\n    const firstDayOffset = (monthStart.getDay() - weekStart + 7) % 7;\n    const gridStart = this.addDays(monthStart, -firstDayOffset);\n    const today = this.startOfDay(new Date());\n    const eventMap = this.eventsByDate();\n    const cells: CalendarCell[] = [];\n\n    for (let index = 0; index < 42; index++) {\n      const date = this.addDays(gridStart, index);\n      const inCurrentMonth = this.sameMonth(date, activeMonth);\n      const events = eventMap.get(this.dateKey(date)) ?? [];\n      const visible = inCurrentMonth || showAdjacentDays;\n\n      cells.push({\n        date,\n        key: this.dateKey(date),\n        label: visible ? String(date.getDate()) : '',\n        ariaLabel: this.formatFullDate(date),\n        inCurrentMonth,\n        visible,\n        today: this.sameDate(date, today),\n        selected: !!selectedDate && this.sameDate(date, selectedDate),\n        disabled: this.isDisabled(date, minDate, maxDate) || !visible,\n        events,\n        markers: this.uniqueEventColors(events),\n      });\n    }\n\n    return cells;\n  });\n\n  constructor() {\n    effect(() => {\n      const selected = this.normalizeDateInput(this.selected());\n\n      this.selectedDate.set(selected);\n\n      if (selected) {\n        this.activeMonth.set(this.startOfMonth(selected));\n      }\n    });\n\n    effect(() => {\n      const startAt = this.normalizeDateInput(this.startAt());\n\n      if (startAt) {\n        this.activeMonth.set(this.startOfMonth(startAt));\n      }\n    });\n  }\n\n  protected previousMonth(): void {\n    this.setActiveMonth(this.addMonths(this.activeMonth(), -1));\n  }\n\n  protected nextMonth(): void {\n    this.setActiveMonth(this.addMonths(this.activeMonth(), 1));\n  }\n\n  protected selectToday(): void {\n    const today = this.startOfDay(new Date());\n\n    this.setActiveMonth(today);\n\n    if (!this.isDisabled(today, this.normalizedMinDate(), this.normalizedMaxDate())) {\n      this.selectDate(today);\n    }\n  }\n\n  protected selectCell(cell: CalendarCell): void {\n    if (cell.disabled) {\n      return;\n    }\n\n    if (!cell.inCurrentMonth) {\n      this.setActiveMonth(cell.date);\n    }\n\n    this.selectDate(cell.date);\n  }\n\n  protected selectEvent(event: CalendarEvent, domEvent: MouseEvent): void {\n    domEvent.stopPropagation();\n    this.eventSelected.emit(event);\n  }\n\n  protected markerClass(color: CalendarEventColor): string {\n    return `ngs-calendar-event-${color}`;\n  }\n\n  private selectDate(date: Date): void {\n    const value = this.startOfDay(date);\n\n    this.selectedDate.set(value);\n    this.selectedChange.emit(this.cloneDate(value));\n  }\n\n  private setActiveMonth(date: Date): void {\n    const month = this.startOfMonth(date);\n\n    this.activeMonth.set(month);\n    this.monthChange.emit(this.cloneDate(month));\n  }\n\n  private getInitialActiveMonth(): Date {\n    return this.startOfMonth(\n      this.normalizeDateInput(this.selected()) ??\n        this.normalizeDateInput(this.startAt()) ??\n        new Date(),\n    );\n  }\n\n  private eventsByDate(): Map<string, CalendarEvent[]> {\n    const map = new Map<string, CalendarEvent[]>();\n\n    for (const event of this.events()) {\n      const date = this.normalizeDateInput(event.date);\n\n      if (!date) {\n        continue;\n      }\n\n      const key = this.dateKey(date);\n      const events = map.get(key) ?? [];\n      events.push(event);\n      map.set(key, events);\n    }\n\n    return map;\n  }\n\n  private uniqueEventColors(events: readonly CalendarEvent[]): readonly CalendarEventColor[] {\n    const colors = new Set<CalendarEventColor>();\n\n    for (const event of events) {\n      colors.add(event.color ?? 'primary');\n    }\n\n    return [...colors].slice(0, 3);\n  }\n\n  private normalizedFirstDayOfWeek(): number {\n    const value = this.firstDayOfWeek();\n\n    if (!Number.isFinite(value)) {\n      return 0;\n    }\n\n    return ((Math.trunc(value) % 7) + 7) % 7;\n  }\n\n  private normalizeDateInput(value: CalendarDateInput | null | undefined): Date | null {\n    if (value === null || value === undefined || value === '') {\n      return null;\n    }\n\n    if (value instanceof Date) {\n      return Number.isNaN(value.getTime()) ? null : this.startOfDay(value);\n    }\n\n    if (typeof value === 'string') {\n      const dateOnly = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(value);\n\n      if (dateOnly) {\n        const year = Number(dateOnly[1]);\n        const month = Number(dateOnly[2]) - 1;\n        const day = Number(dateOnly[3]);\n        const date = new Date(year, month, day);\n\n        return Number.isNaN(date.getTime()) ? null : this.startOfDay(date);\n      }\n    }\n\n    const date = new Date(value);\n\n    return Number.isNaN(date.getTime()) ? null : this.startOfDay(date);\n  }\n\n  private isDisabled(date: Date, minDate: Date | null, maxDate: Date | null): boolean {\n    return (\n      (!!minDate && this.compareDate(date, minDate) < 0) ||\n      (!!maxDate && this.compareDate(date, maxDate) > 0)\n    );\n  }\n\n  private formatFullDate(date: Date): string {\n    return new Intl.DateTimeFormat(this.locale(), {\n      weekday: 'long',\n      month: 'long',\n      day: 'numeric',\n      year: 'numeric',\n    }).format(date);\n  }\n\n  private addMonths(date: Date, months: number): Date {\n    return new Date(date.getFullYear(), date.getMonth() + months, 1);\n  }\n\n  private addDays(date: Date, days: number): Date {\n    return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);\n  }\n\n  private startOfMonth(date: Date): Date {\n    return new Date(date.getFullYear(), date.getMonth(), 1);\n  }\n\n  private startOfDay(date: Date): Date {\n    return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n  }\n\n  private cloneDate(date: Date): Date {\n    return new Date(date.getTime());\n  }\n\n  private sameMonth(first: Date, second: Date): boolean {\n    return first.getFullYear() === second.getFullYear() && first.getMonth() === second.getMonth();\n  }\n\n  private sameDate(first: Date, second: Date): boolean {\n    return this.compareDate(first, second) === 0;\n  }\n\n  private compareDate(first: Date, second: Date): number {\n    return (\n      first.getFullYear() - second.getFullYear() ||\n      first.getMonth() - second.getMonth() ||\n      first.getDate() - second.getDate()\n    );\n  }\n\n  private dateKey(date: Date): string {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n\n    return `${year}-${month}-${day}`;\n  }\n}\n","<div class=\"ngs-calendar-header\">\n  <button\n    ngsIconButton\n    type=\"button\"\n    class=\"ngs-calendar-previous-button\"\n    aria-label=\"Previous month\"\n    (click)=\"previousMonth()\"\n  >\n    <ngs-icon name=\"fluent:chevron-left-24-regular\" />\n  </button>\n\n  <div class=\"ngs-calendar-period\" aria-live=\"polite\">{{ periodLabel() }}</div>\n\n  <div class=\"ngs-calendar-actions\">\n    @if (showTodayButton()) {\n      <button ngsButton type=\"button\" class=\"ngs-calendar-today-button\" (click)=\"selectToday()\">\n        Today\n      </button>\n    }\n\n    <button\n      ngsIconButton\n      type=\"button\"\n      class=\"ngs-calendar-next-button\"\n      aria-label=\"Next month\"\n      (click)=\"nextMonth()\"\n    >\n      <ngs-icon name=\"fluent:chevron-right-24-regular\" />\n    </button>\n  </div>\n</div>\n\n<div class=\"ngs-calendar-weekdays\" role=\"row\">\n  @for (weekday of weekdayLabels(); track weekday) {\n    <div class=\"ngs-calendar-weekday\" role=\"columnheader\">{{ weekday }}</div>\n  }\n</div>\n\n<div class=\"ngs-calendar-grid\" role=\"grid\" [attr.aria-label]=\"periodLabel()\">\n  @for (cell of calendarCells(); track cell.key) {\n    <button\n      ngsButton\n      type=\"button\"\n      class=\"ngs-calendar-day\"\n      [class.ngs-calendar-day-hidden]=\"!cell.visible\"\n      [class.ngs-calendar-day-muted]=\"!cell.inCurrentMonth\"\n      [class.ngs-calendar-day-today]=\"cell.today\"\n      [class.ngs-calendar-day-selected]=\"cell.selected\"\n      [class.ngs-calendar-day-has-events]=\"cell.events.length > 0\"\n      [disabled]=\"cell.disabled\"\n      [attr.aria-label]=\"cell.ariaLabel\"\n      [attr.aria-selected]=\"cell.selected\"\n      [attr.data-date]=\"cell.key\"\n      role=\"gridcell\"\n      (click)=\"selectCell(cell)\"\n    >\n      <span class=\"ngs-calendar-day-number\">{{ cell.label }}</span>\n\n      @if (cell.markers.length > 0) {\n        <span class=\"ngs-calendar-event-markers\" aria-hidden=\"true\">\n          @for (marker of cell.markers; track marker) {\n            <span class=\"ngs-calendar-event-marker {{ markerClass(marker) }}\"></span>\n          }\n        </span>\n      }\n\n      @if (showEventTitles() && cell.events.length > 0) {\n        <span class=\"ngs-calendar-event-list\">\n          @for (event of cell.events.slice(0, 2); track event.id ?? event.title ?? $index) {\n            <span class=\"ngs-calendar-event-title\" (click)=\"selectEvent(event, $event)\">\n              {{ event.title }}\n            </span>\n          }\n        </span>\n      }\n    </button>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ngstarter-ui/components",
   "description": "NgStarter - AI-friendly Enterprise Angular UI Components and Admin Panel",
-  "version": "21.0.9",
+  "version": "21.0.10",
   "repository": {
     "type": "git",
     "url": "https://github.com/elementarlabsdev/ngstarter.git"
@@ -110,6 +110,10 @@
       "types": "./types/ngstarter-ui-components-button-toggle.d.ts",
       "default": "./fesm2022/ngstarter-ui-components-button-toggle.mjs"
     },
+    "./calendar": {
+      "types": "./types/ngstarter-ui-components-calendar.d.ts",
+      "default": "./fesm2022/ngstarter-ui-components-calendar.mjs"
+    },
     "./card": {
       "types": "./types/ngstarter-ui-components-card.d.ts",
       "default": "./fesm2022/ngstarter-ui-components-card.mjs"

package/types/ngstarter-ui-components-calendar.d.ts

@@ -0,0 +1,75 @@
+import * as _angular_core from '@angular/core';
+
+type CalendarDateInput = Date | string | number;
+type CalendarEventColor = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'green' | 'rose' | 'blue';
+interface CalendarEvent {
+    readonly id?: string | number;
+    readonly date: CalendarDateInput;
+    readonly title?: string;
+    readonly color?: CalendarEventColor;
+}
+interface CalendarCell {
+    readonly date: Date;
+    readonly key: string;
+    readonly label: string;
+    readonly ariaLabel: string;
+    readonly inCurrentMonth: boolean;
+    readonly visible: boolean;
+    readonly today: boolean;
+    readonly selected: boolean;
+    readonly disabled: boolean;
+    readonly events: readonly CalendarEvent[];
+    readonly markers: readonly CalendarEventColor[];
+}
+declare class Calendar {
+    readonly startAt: _angular_core.InputSignal<CalendarDateInput | null>;
+    readonly selected: _angular_core.InputSignal<CalendarDateInput | null>;
+    readonly minDate: _angular_core.InputSignal<CalendarDateInput | null>;
+    readonly maxDate: _angular_core.InputSignal<CalendarDateInput | null>;
+    readonly events: _angular_core.InputSignal<readonly CalendarEvent[]>;
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    readonly firstDayOfWeek: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly showAdjacentDays: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly showTodayButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly showEventTitles: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly selectedChange: _angular_core.OutputEmitterRef<Date>;
+    readonly monthChange: _angular_core.OutputEmitterRef<Date>;
+    readonly eventSelected: _angular_core.OutputEmitterRef<CalendarEvent>;
+    protected readonly activeMonth: _angular_core.WritableSignal<Date>;
+    protected readonly selectedDate: _angular_core.WritableSignal<Date | null>;
+    protected readonly normalizedMinDate: _angular_core.Signal<Date | null>;
+    protected readonly normalizedMaxDate: _angular_core.Signal<Date | null>;
+    protected readonly periodLabel: _angular_core.Signal<string>;
+    protected readonly weekdayLabels: _angular_core.Signal<string[]>;
+    protected readonly calendarCells: _angular_core.Signal<readonly CalendarCell[]>;
+    constructor();
+    protected previousMonth(): void;
+    protected nextMonth(): void;
+    protected selectToday(): void;
+    protected selectCell(cell: CalendarCell): void;
+    protected selectEvent(event: CalendarEvent, domEvent: MouseEvent): void;
+    protected markerClass(color: CalendarEventColor): string;
+    private selectDate;
+    private setActiveMonth;
+    private getInitialActiveMonth;
+    private eventsByDate;
+    private uniqueEventColors;
+    private normalizedFirstDayOfWeek;
+    private normalizeDateInput;
+    private isDisabled;
+    private formatFullDate;
+    private addMonths;
+    private addDays;
+    private startOfMonth;
+    private startOfDay;
+    private cloneDate;
+    private sameMonth;
+    private sameDate;
+    private compareDate;
+    private dateKey;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Calendar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Calendar, "ngs-calendar", ["ngsCalendar"], { "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; "events": { "alias": "events"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "showAdjacentDays": { "alias": "showAdjacentDays"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showEventTitles": { "alias": "showEventTitles"; "required": false; "isSignal": true; }; }, { "selectedChange": "selectedChange"; "monthChange": "monthChange"; "eventSelected": "eventSelected"; }, never, never, true, never>;
+}
+
+export { Calendar };
+export type { CalendarDateInput, CalendarEvent, CalendarEventColor };