@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-calendar.mjs

@@ -0,0 +1,368 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, model, output, signal } from "@angular/core";
+import { SlicePipe } from "@angular/common";
+const DEFAULT_LABELS = {
+	today: "Heute",
+	day: "Tag",
+	week: "Woche",
+	month: "Monat",
+	previous: "Zurück",
+	next: "Weiter"
+};
+var CalendarComponent = class CalendarComponent {
+	view = model("month", ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+	events = input([], ...ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []);
+	firstDayOfWeek = input(1, ...ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []);
+	locale = input("de-DE", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	labels = input({}, ...ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []);
+	startHour = input(6, ...ngDevMode ? [{ debugName: "startHour" }] : /* istanbul ignore next */ []);
+	endHour = input(22, ...ngDevMode ? [{ debugName: "endHour" }] : /* istanbul ignore next */ []);
+	eventClick = output();
+	dateClick = output();
+	currentDate = signal(/* @__PURE__ */ new Date(), ...ngDevMode ? [{ debugName: "currentDate" }] : /* istanbul ignore next */ []);
+	text = computed(() => ({
+		...DEFAULT_LABELS,
+		...this.labels()
+	}), ...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	headerTitle = computed(() => {
+		const d = this.currentDate();
+		const loc = this.locale();
+		const v = this.view();
+		if (v === "month") return d.toLocaleDateString(loc, {
+			month: "long",
+			year: "numeric"
+		});
+		if (v === "week") {
+			const start = this.weekStart(d);
+			const end = new Date(start);
+			end.setDate(end.getDate() + 6);
+			return `${start.toLocaleDateString(loc, {
+				day: "numeric",
+				month: "short"
+			})} – ${end.toLocaleDateString(loc, {
+				day: "numeric",
+				month: "short",
+				year: "numeric"
+			})}`;
+		}
+		return d.toLocaleDateString(loc, {
+			weekday: "long",
+			day: "numeric",
+			month: "long",
+			year: "numeric"
+		});
+	}, ...ngDevMode ? [{ debugName: "headerTitle" }] : /* istanbul ignore next */ []);
+	weekDayNames = computed(() => {
+		const loc = this.locale();
+		const fdow = this.firstDayOfWeek();
+		return Array.from({ length: 7 }, (_, i) => {
+			return new Date(2024, 0, fdow + i).toLocaleDateString(loc, { weekday: "short" });
+		});
+	}, ...ngDevMode ? [{ debugName: "weekDayNames" }] : /* istanbul ignore next */ []);
+	monthGrid = computed(() => {
+		const d = this.currentDate();
+		const evts = this.normalizedEvents();
+		const fdow = this.firstDayOfWeek();
+		const year = d.getFullYear();
+		const month = d.getMonth();
+		const today = /* @__PURE__ */ new Date();
+		let startOffset = new Date(year, month, 1).getDay() - fdow;
+		if (startOffset < 0) startOffset += 7;
+		const startDate = new Date(year, month, 1 - startOffset);
+		const weeks = [];
+		for (let w = 0; w < 6; w++) {
+			const week = [];
+			for (let wd = 0; wd < 7; wd++) {
+				const cellDate = new Date(startDate);
+				cellDate.setDate(startDate.getDate() + w * 7 + wd);
+				week.push({
+					date: cellDate,
+					isToday: this.isSameDay(cellDate, today),
+					isCurrentMonth: cellDate.getMonth() === month,
+					events: evts.filter((e) => this.isEventOnDate(e, cellDate))
+				});
+			}
+			weeks.push(week);
+		}
+		return weeks;
+	}, ...ngDevMode ? [{ debugName: "monthGrid" }] : /* istanbul ignore next */ []);
+	hourSlots = computed(() => {
+		const start = this.startHour();
+		const end = this.endHour();
+		return Array.from({ length: end - start }, (_, i) => ({
+			hour: start + i,
+			label: `${String(start + i).padStart(2, "0")}:00`
+		}));
+	}, ...ngDevMode ? [{ debugName: "hourSlots" }] : /* istanbul ignore next */ []);
+	weekDays = computed(() => {
+		const d = this.currentDate();
+		const start = this.weekStart(d);
+		const loc = this.locale();
+		const today = /* @__PURE__ */ new Date();
+		const evts = this.normalizedEvents();
+		return Array.from({ length: 7 }, (_, i) => {
+			const day = new Date(start);
+			day.setDate(start.getDate() + i);
+			return {
+				date: day,
+				label: day.toLocaleDateString(loc, {
+					weekday: "short",
+					day: "numeric"
+				}),
+				isToday: this.isSameDay(day, today),
+				events: evts.filter((e) => this.isEventOnDate(e, day))
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "weekDays" }] : /* istanbul ignore next */ []);
+	dayEvents = computed(() => {
+		const d = this.currentDate();
+		return this.normalizedEvents().filter((e) => this.isEventOnDate(e, d));
+	}, ...ngDevMode ? [{ debugName: "dayEvents" }] : /* istanbul ignore next */ []);
+	normalizedEvents = computed(() => this.events().map((e) => ({
+		...e,
+		start: e.start instanceof Date ? e.start : new Date(e.start),
+		end: e.end instanceof Date ? e.end : new Date(e.end)
+	})), ...ngDevMode ? [{ debugName: "normalizedEvents" }] : /* istanbul ignore next */ []);
+	navigatePrev() {
+		this.navigate(-1);
+	}
+	navigateNext() {
+		this.navigate(1);
+	}
+	navigateToday() {
+		this.currentDate.set(/* @__PURE__ */ new Date());
+	}
+	setView(v) {
+		this.view.set(v);
+	}
+	onEventClick(event, e) {
+		e.stopPropagation();
+		this.eventClick.emit(event);
+	}
+	onDateClick(date, e) {
+		e?.stopPropagation();
+		this.dateClick.emit(date);
+	}
+	dateLabel(date) {
+		return date.toLocaleDateString(this.locale(), {
+			weekday: "long",
+			day: "numeric",
+			month: "long",
+			year: "numeric"
+		});
+	}
+	eventLabel(event) {
+		const start = event.start instanceof Date ? event.start : new Date(event.start);
+		const end = event.end instanceof Date ? event.end : new Date(event.end);
+		const loc = this.locale();
+		const opts = {
+			hour: "2-digit",
+			minute: "2-digit"
+		};
+		return event.allDay ? event.title : `${event.title}, ${start.toLocaleTimeString(loc, opts)} – ${end.toLocaleTimeString(loc, opts)}`;
+	}
+	eventTop(event) {
+		const start = event.start instanceof Date ? event.start : new Date(event.start);
+		const h = start.getHours() - this.startHour();
+		const m = start.getMinutes();
+		return h * 60 + m;
+	}
+	eventHeight(event) {
+		const start = event.start instanceof Date ? event.start : new Date(event.start);
+		const diff = ((event.end instanceof Date ? event.end : new Date(event.end)).getTime() - start.getTime()) / 6e4;
+		return Math.max(diff, 15);
+	}
+	navigate(direction) {
+		const d = new Date(this.currentDate());
+		const v = this.view();
+		if (v === "month") d.setMonth(d.getMonth() + direction);
+		else if (v === "week") d.setDate(d.getDate() + direction * 7);
+		else d.setDate(d.getDate() + direction);
+		this.currentDate.set(d);
+	}
+	weekStart(d) {
+		const start = new Date(d);
+		const fdow = this.firstDayOfWeek();
+		let diff = start.getDay() - fdow;
+		if (diff < 0) diff += 7;
+		start.setDate(start.getDate() - diff);
+		return start;
+	}
+	isSameDay(a, b) {
+		return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+	}
+	isEventOnDate(event, date) {
+		const startOfDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+		const endOfDay = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);
+		return event.start <= endOfDay && event.end >= startOfDay;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: CalendarComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: CalendarComponent,
+		isStandalone: true,
+		selector: "lc-calendar",
+		inputs: {
+			view: {
+				classPropertyName: "view",
+				publicName: "view",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			events: {
+				classPropertyName: "events",
+				publicName: "events",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			firstDayOfWeek: {
+				classPropertyName: "firstDayOfWeek",
+				publicName: "firstDayOfWeek",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			labels: {
+				classPropertyName: "labels",
+				publicName: "labels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			startHour: {
+				classPropertyName: "startHour",
+				publicName: "startHour",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			endHour: {
+				classPropertyName: "endHour",
+				publicName: "endHour",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			view: "viewChange",
+			eventClick: "eventClick",
+			dateClick: "dateClick"
+		},
+		ngImport: i0,
+		template: "<div class=\"lc-calendar\">\n  <!-- Header -->\n  <div class=\"lc-calendar__header\">\n    <div class=\"lc-calendar__nav\">\n      <button type=\"button\" class=\"lc-calendar__nav-btn\" (click)=\"navigatePrev()\" [attr.aria-label]=\"text().previous\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M10 12L6 8l4-4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" class=\"lc-calendar__today-btn\" (click)=\"navigateToday()\">{{ text().today }}</button>\n      <button type=\"button\" class=\"lc-calendar__nav-btn\" (click)=\"navigateNext()\" [attr.aria-label]=\"text().next\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <span class=\"lc-calendar__title\" aria-live=\"polite\">{{ headerTitle() }}</span>\n    </div>\n    <div class=\"lc-calendar__view-toggle\" role=\"group\">\n      <button type=\"button\" [class.active]=\"view() === 'day'\" [attr.aria-pressed]=\"view() === 'day'\" (click)=\"setView('day')\">{{ text().day }}</button>\n      <button type=\"button\" [class.active]=\"view() === 'week'\" [attr.aria-pressed]=\"view() === 'week'\" (click)=\"setView('week')\">{{ text().week }}</button>\n      <button type=\"button\" [class.active]=\"view() === 'month'\" [attr.aria-pressed]=\"view() === 'month'\" (click)=\"setView('month')\">{{ text().month }}</button>\n    </div>\n  </div>\n\n  <!-- Month View -->\n  @if (view() === 'month') {\n    <div class=\"lc-calendar__month\">\n      <div class=\"lc-calendar__weekdays\" aria-hidden=\"true\">\n        @for (name of weekDayNames(); track name) {\n          <div class=\"lc-calendar__weekday\">{{ name }}</div>\n        }\n      </div>\n      @for (week of monthGrid(); track $index) {\n        <div class=\"lc-calendar__week-row\">\n          @for (cell of week; track cell.date.getTime()) {\n            <!-- The cell stays a mouse target for the whole area; keyboard users reach the\n                 date through the day-number button and each event through its own button. -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- mouse target for the whole cell; keyboard users use the day-number button -->\n            <div\n              class=\"lc-calendar__day-cell\"\n              [class.lc-calendar__day-cell--today]=\"cell.isToday\"\n              [class.lc-calendar__day-cell--other]=\"!cell.isCurrentMonth\"\n              (click)=\"onDateClick(cell.date)\"\n            >\n              <button\n                type=\"button\"\n                class=\"lc-calendar__day-number\"\n                [attr.aria-label]=\"dateLabel(cell.date)\"\n                [attr.aria-current]=\"cell.isToday ? 'date' : null\"\n                (click)=\"onDateClick(cell.date, $event)\"\n              >\n                {{ cell.date.getDate() }}\n              </button>\n              @for (evt of cell.events | slice:0:3; track evt.id) {\n                <button\n                  type=\"button\"\n                  class=\"lc-calendar__event-dot\"\n                  [class]=\"'lc-calendar__event-dot lc-calendar__event-dot--' + (evt.color || 'primary')\"\n                  [attr.aria-label]=\"eventLabel(evt)\"\n                  [title]=\"evt.title\"\n                  (click)=\"onEventClick(evt, $event)\"\n                >\n                  {{ evt.title }}\n                </button>\n              }\n              @if (cell.events.length > 3) {\n                <div class=\"lc-calendar__more\">+{{ cell.events.length - 3 }}</div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Week View -->\n  @if (view() === 'week') {\n    <div class=\"lc-calendar__time-grid\">\n      <div class=\"lc-calendar__time-header\">\n        <div class=\"lc-calendar__time-gutter\"></div>\n        @for (day of weekDays(); track day.date.getTime()) {\n          <button\n            type=\"button\"\n            class=\"lc-calendar__time-col-header\"\n            [class.lc-calendar__time-col-header--today]=\"day.isToday\"\n            [attr.aria-label]=\"dateLabel(day.date)\"\n            [attr.aria-current]=\"day.isToday ? 'date' : null\"\n            (click)=\"onDateClick(day.date)\"\n          >\n            {{ day.label }}\n          </button>\n        }\n      </div>\n      <div class=\"lc-calendar__time-body\">\n        <div class=\"lc-calendar__time-gutter\">\n          @for (slot of hourSlots(); track slot.hour) {\n            <div class=\"lc-calendar__time-label\">{{ slot.label }}</div>\n          }\n        </div>\n        @for (day of weekDays(); track day.date.getTime()) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- mouse target for the empty column; events and dates have their own buttons -->\n          <div class=\"lc-calendar__time-col\" (click)=\"onDateClick(day.date)\">\n            @for (slot of hourSlots(); track slot.hour) {\n              <div class=\"lc-calendar__time-slot\"></div>\n            }\n            @for (evt of day.events; track evt.id) {\n              <button\n                type=\"button\"\n                class=\"lc-calendar__time-event\"\n                [class]=\"'lc-calendar__time-event lc-calendar__time-event--' + (evt.color || 'primary')\"\n                [style.top.px]=\"eventTop(evt)\"\n                [style.height.px]=\"eventHeight(evt)\"\n                [attr.aria-label]=\"eventLabel(evt)\"\n                [title]=\"evt.title\"\n                (click)=\"onEventClick(evt, $event)\"\n              >\n                {{ evt.title }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Day View -->\n  @if (view() === 'day') {\n    <div class=\"lc-calendar__time-grid lc-calendar__time-grid--day\">\n      <div class=\"lc-calendar__time-body\">\n        <div class=\"lc-calendar__time-gutter\">\n          @for (slot of hourSlots(); track slot.hour) {\n            <div class=\"lc-calendar__time-label\">{{ slot.label }}</div>\n          }\n        </div>\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- mouse target for the empty column; events and dates have their own buttons -->\n        <div class=\"lc-calendar__time-col lc-calendar__time-col--single\" (click)=\"onDateClick(currentDate())\">\n          @for (slot of hourSlots(); track slot.hour) {\n            <div class=\"lc-calendar__time-slot\"></div>\n          }\n          @for (evt of dayEvents(); track evt.id) {\n            <button\n              type=\"button\"\n              class=\"lc-calendar__time-event\"\n              [class]=\"'lc-calendar__time-event lc-calendar__time-event--' + (evt.color || 'primary')\"\n              [style.top.px]=\"eventTop(evt)\"\n              [style.height.px]=\"eventHeight(evt)\"\n              [attr.aria-label]=\"eventLabel(evt)\"\n              [title]=\"evt.title\"\n              (click)=\"onEventClick(evt, $event)\"\n            >\n              {{ evt.title }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n",
+		styles: [".lc-calendar{font-family:var(--typography-font-family, sans-serif);border:1px solid var(--color-border);border-radius:.5rem;overflow:hidden;background:var(--color-surface)}.lc-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-calendar__nav{display:flex;align-items:center;gap:.5rem}.lc-calendar__time-event:focus-visible,.lc-calendar__time-col-header:focus-visible,.lc-calendar__event-dot:focus-visible,.lc-calendar__day-number:focus-visible,.lc-calendar__view-toggle button:focus-visible,.lc-calendar__today-btn:focus-visible,.lc-calendar__nav-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px;z-index:2}.lc-calendar__nav-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--color-border);border-radius:.375rem;background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;transition:background .15s,border-color .15s}.lc-calendar__nav-btn:hover{background:var(--color-surface-hover)}.lc-calendar__today-btn{padding:.25rem .75rem;border:1px solid var(--color-border);border-radius:.375rem;background:var(--color-surface);color:var(--color-text-secondary);font-size:.8125rem;font-weight:500;cursor:pointer;transition:background .15s}.lc-calendar__today-btn:hover{background:var(--color-surface-hover)}.lc-calendar__title{font-size:1rem;font-weight:600;color:var(--color-text-primary);margin-left:.25rem}.lc-calendar__view-toggle{display:flex;border:1px solid var(--color-border);border-radius:.375rem;overflow:hidden}.lc-calendar__view-toggle button{padding:.25rem .75rem;border:none;background:var(--color-surface);color:var(--color-text-secondary);font-size:.8125rem;font-weight:500;cursor:pointer;transition:background .15s,color .15s}.lc-calendar__view-toggle button:not(:last-child){border-right:1px solid var(--color-border)}.lc-calendar__view-toggle button:hover{background:var(--color-surface-2)}.lc-calendar__view-toggle button.active{background:var(--color-primary-500);color:var(--color-on-primary)}.lc-calendar__weekdays{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--color-border)}.lc-calendar__weekday{padding:.5rem;text-align:center;font-size:.75rem;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.025em}.lc-calendar__week-row{display:grid;grid-template-columns:repeat(7,1fr)}.lc-calendar__week-row:not(:last-child){border-bottom:1px solid var(--color-divider)}.lc-calendar__day-cell{min-height:5.5rem;padding:.25rem;border-right:1px solid var(--color-divider);cursor:pointer;transition:background .1s}.lc-calendar__day-cell:last-child{border-right:none}.lc-calendar__day-cell:hover{background:var(--color-surface-2)}.lc-calendar__day-cell--today{background:color-mix(in srgb,var(--color-primary-500) 6%,transparent)}.lc-calendar__day-cell--today:hover{background:color-mix(in srgb,var(--color-primary-500) 12%,transparent)}.lc-calendar__day-cell--other{opacity:.4}.lc-calendar__day-number{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;background:transparent;font:inherit;font-size:.75rem;font-weight:500;color:var(--color-text-secondary);border-radius:50%;cursor:pointer}.lc-calendar__day-number:hover{background:var(--color-surface-hover)}.lc-calendar__day-cell--today .lc-calendar__day-number{background:var(--color-primary-500);color:var(--color-on-primary);font-weight:700}.lc-calendar__event-dot{display:block;width:100%;border:none;font:inherit;text-align:left;font-size:.6875rem;padding:.0625rem .25rem;border-radius:.1875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.125rem;color:var(--color-on-primary);cursor:pointer}.lc-calendar__event-dot--primary{background:var(--color-primary-500)}.lc-calendar__event-dot--secondary{background:var(--color-secondary-500)}.lc-calendar__event-dot--success{background:var(--color-success-default)}.lc-calendar__event-dot--warning{background:var(--color-warning-default)}.lc-calendar__event-dot--error{background:var(--color-error-default)}.lc-calendar__event-dot--info{background:var(--color-info-default)}.lc-calendar__more{font-size:.625rem;color:var(--color-text-tertiary);padding:.0625rem .25rem;cursor:pointer}.lc-calendar__time-grid{overflow:auto;max-height:40rem}.lc-calendar__time-header{display:flex;position:sticky;top:0;z-index:2;background:var(--color-surface-2);border-bottom:1px solid var(--color-border)}.lc-calendar__time-col-header{flex:1;min-width:0;text-align:center;padding:.5rem .25rem;border:none;border-left:1px solid var(--color-border);background:transparent;font:inherit;font-size:.75rem;font-weight:600;color:var(--color-text-secondary);cursor:pointer}.lc-calendar__time-col-header:hover{background:var(--color-surface-hover)}.lc-calendar__time-col-header--today{color:var(--color-primary-500);background:color-mix(in srgb,var(--color-primary-500) 6%,transparent)}.lc-calendar__time-body{display:flex;position:relative}.lc-calendar__time-gutter{width:3.5rem;flex-shrink:0;border-right:1px solid var(--color-border);background:var(--color-surface-2)}.lc-calendar__time-label{height:3.75rem;padding:.125rem .375rem 0 0;text-align:right;font-size:.6875rem;color:var(--color-text-tertiary)}.lc-calendar__time-col{flex:1;position:relative;border-left:1px solid var(--color-border)}.lc-calendar__time-col--single{min-width:0}.lc-calendar__time-slot{height:3.75rem;border-bottom:1px solid var(--color-divider);cursor:pointer}.lc-calendar__time-slot:hover{background:var(--color-surface-2)}.lc-calendar__time-event{position:absolute;left:.125rem;right:.125rem;border:none;border-radius:.25rem;padding:.125rem .375rem;font:inherit;font-size:.6875rem;text-align:left;color:var(--color-on-primary);overflow:hidden;cursor:pointer;z-index:1}.lc-calendar__time-event--primary{background:var(--color-primary-500)}.lc-calendar__time-event--secondary{background:var(--color-secondary-500)}.lc-calendar__time-event--success{background:var(--color-success-default)}.lc-calendar__time-event--warning{background:var(--color-warning-default)}.lc-calendar__time-event--error{background:var(--color-error-default)}.lc-calendar__time-event--info{background:var(--color-info-default)}\n"],
+		dependencies: [{
+			kind: "pipe",
+			type: SlicePipe,
+			name: "slice"
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CalendarComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-calendar",
+			standalone: true,
+			imports: [SlicePipe],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"lc-calendar\">\n  <!-- Header -->\n  <div class=\"lc-calendar__header\">\n    <div class=\"lc-calendar__nav\">\n      <button type=\"button\" class=\"lc-calendar__nav-btn\" (click)=\"navigatePrev()\" [attr.aria-label]=\"text().previous\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M10 12L6 8l4-4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" class=\"lc-calendar__today-btn\" (click)=\"navigateToday()\">{{ text().today }}</button>\n      <button type=\"button\" class=\"lc-calendar__nav-btn\" (click)=\"navigateNext()\" [attr.aria-label]=\"text().next\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <span class=\"lc-calendar__title\" aria-live=\"polite\">{{ headerTitle() }}</span>\n    </div>\n    <div class=\"lc-calendar__view-toggle\" role=\"group\">\n      <button type=\"button\" [class.active]=\"view() === 'day'\" [attr.aria-pressed]=\"view() === 'day'\" (click)=\"setView('day')\">{{ text().day }}</button>\n      <button type=\"button\" [class.active]=\"view() === 'week'\" [attr.aria-pressed]=\"view() === 'week'\" (click)=\"setView('week')\">{{ text().week }}</button>\n      <button type=\"button\" [class.active]=\"view() === 'month'\" [attr.aria-pressed]=\"view() === 'month'\" (click)=\"setView('month')\">{{ text().month }}</button>\n    </div>\n  </div>\n\n  <!-- Month View -->\n  @if (view() === 'month') {\n    <div class=\"lc-calendar__month\">\n      <div class=\"lc-calendar__weekdays\" aria-hidden=\"true\">\n        @for (name of weekDayNames(); track name) {\n          <div class=\"lc-calendar__weekday\">{{ name }}</div>\n        }\n      </div>\n      @for (week of monthGrid(); track $index) {\n        <div class=\"lc-calendar__week-row\">\n          @for (cell of week; track cell.date.getTime()) {\n            <!-- The cell stays a mouse target for the whole area; keyboard users reach the\n                 date through the day-number button and each event through its own button. -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- mouse target for the whole cell; keyboard users use the day-number button -->\n            <div\n              class=\"lc-calendar__day-cell\"\n              [class.lc-calendar__day-cell--today]=\"cell.isToday\"\n              [class.lc-calendar__day-cell--other]=\"!cell.isCurrentMonth\"\n              (click)=\"onDateClick(cell.date)\"\n            >\n              <button\n                type=\"button\"\n                class=\"lc-calendar__day-number\"\n                [attr.aria-label]=\"dateLabel(cell.date)\"\n                [attr.aria-current]=\"cell.isToday ? 'date' : null\"\n                (click)=\"onDateClick(cell.date, $event)\"\n              >\n                {{ cell.date.getDate() }}\n              </button>\n              @for (evt of cell.events | slice:0:3; track evt.id) {\n                <button\n                  type=\"button\"\n                  class=\"lc-calendar__event-dot\"\n                  [class]=\"'lc-calendar__event-dot lc-calendar__event-dot--' + (evt.color || 'primary')\"\n                  [attr.aria-label]=\"eventLabel(evt)\"\n                  [title]=\"evt.title\"\n                  (click)=\"onEventClick(evt, $event)\"\n                >\n                  {{ evt.title }}\n                </button>\n              }\n              @if (cell.events.length > 3) {\n                <div class=\"lc-calendar__more\">+{{ cell.events.length - 3 }}</div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Week View -->\n  @if (view() === 'week') {\n    <div class=\"lc-calendar__time-grid\">\n      <div class=\"lc-calendar__time-header\">\n        <div class=\"lc-calendar__time-gutter\"></div>\n        @for (day of weekDays(); track day.date.getTime()) {\n          <button\n            type=\"button\"\n            class=\"lc-calendar__time-col-header\"\n            [class.lc-calendar__time-col-header--today]=\"day.isToday\"\n            [attr.aria-label]=\"dateLabel(day.date)\"\n            [attr.aria-current]=\"day.isToday ? 'date' : null\"\n            (click)=\"onDateClick(day.date)\"\n          >\n            {{ day.label }}\n          </button>\n        }\n      </div>\n      <div class=\"lc-calendar__time-body\">\n        <div class=\"lc-calendar__time-gutter\">\n          @for (slot of hourSlots(); track slot.hour) {\n            <div class=\"lc-calendar__time-label\">{{ slot.label }}</div>\n          }\n        </div>\n        @for (day of weekDays(); track day.date.getTime()) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- mouse target for the empty column; events and dates have their own buttons -->\n          <div class=\"lc-calendar__time-col\" (click)=\"onDateClick(day.date)\">\n            @for (slot of hourSlots(); track slot.hour) {\n              <div class=\"lc-calendar__time-slot\"></div>\n            }\n            @for (evt of day.events; track evt.id) {\n              <button\n                type=\"button\"\n                class=\"lc-calendar__time-event\"\n                [class]=\"'lc-calendar__time-event lc-calendar__time-event--' + (evt.color || 'primary')\"\n                [style.top.px]=\"eventTop(evt)\"\n                [style.height.px]=\"eventHeight(evt)\"\n                [attr.aria-label]=\"eventLabel(evt)\"\n                [title]=\"evt.title\"\n                (click)=\"onEventClick(evt, $event)\"\n              >\n                {{ evt.title }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Day View -->\n  @if (view() === 'day') {\n    <div class=\"lc-calendar__time-grid lc-calendar__time-grid--day\">\n      <div class=\"lc-calendar__time-body\">\n        <div class=\"lc-calendar__time-gutter\">\n          @for (slot of hourSlots(); track slot.hour) {\n            <div class=\"lc-calendar__time-label\">{{ slot.label }}</div>\n          }\n        </div>\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- mouse target for the empty column; events and dates have their own buttons -->\n        <div class=\"lc-calendar__time-col lc-calendar__time-col--single\" (click)=\"onDateClick(currentDate())\">\n          @for (slot of hourSlots(); track slot.hour) {\n            <div class=\"lc-calendar__time-slot\"></div>\n          }\n          @for (evt of dayEvents(); track evt.id) {\n            <button\n              type=\"button\"\n              class=\"lc-calendar__time-event\"\n              [class]=\"'lc-calendar__time-event lc-calendar__time-event--' + (evt.color || 'primary')\"\n              [style.top.px]=\"eventTop(evt)\"\n              [style.height.px]=\"eventHeight(evt)\"\n              [attr.aria-label]=\"eventLabel(evt)\"\n              [title]=\"evt.title\"\n              (click)=\"onEventClick(evt, $event)\"\n            >\n              {{ evt.title }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n",
+			styles: [".lc-calendar{font-family:var(--typography-font-family, sans-serif);border:1px solid var(--color-border);border-radius:.5rem;overflow:hidden;background:var(--color-surface)}.lc-calendar__header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}.lc-calendar__nav{display:flex;align-items:center;gap:.5rem}.lc-calendar__time-event:focus-visible,.lc-calendar__time-col-header:focus-visible,.lc-calendar__event-dot:focus-visible,.lc-calendar__day-number:focus-visible,.lc-calendar__view-toggle button:focus-visible,.lc-calendar__today-btn:focus-visible,.lc-calendar__nav-btn:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px;z-index:2}.lc-calendar__nav-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--color-border);border-radius:.375rem;background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;transition:background .15s,border-color .15s}.lc-calendar__nav-btn:hover{background:var(--color-surface-hover)}.lc-calendar__today-btn{padding:.25rem .75rem;border:1px solid var(--color-border);border-radius:.375rem;background:var(--color-surface);color:var(--color-text-secondary);font-size:.8125rem;font-weight:500;cursor:pointer;transition:background .15s}.lc-calendar__today-btn:hover{background:var(--color-surface-hover)}.lc-calendar__title{font-size:1rem;font-weight:600;color:var(--color-text-primary);margin-left:.25rem}.lc-calendar__view-toggle{display:flex;border:1px solid var(--color-border);border-radius:.375rem;overflow:hidden}.lc-calendar__view-toggle button{padding:.25rem .75rem;border:none;background:var(--color-surface);color:var(--color-text-secondary);font-size:.8125rem;font-weight:500;cursor:pointer;transition:background .15s,color .15s}.lc-calendar__view-toggle button:not(:last-child){border-right:1px solid var(--color-border)}.lc-calendar__view-toggle button:hover{background:var(--color-surface-2)}.lc-calendar__view-toggle button.active{background:var(--color-primary-500);color:var(--color-on-primary)}.lc-calendar__weekdays{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--color-border)}.lc-calendar__weekday{padding:.5rem;text-align:center;font-size:.75rem;font-weight:600;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.025em}.lc-calendar__week-row{display:grid;grid-template-columns:repeat(7,1fr)}.lc-calendar__week-row:not(:last-child){border-bottom:1px solid var(--color-divider)}.lc-calendar__day-cell{min-height:5.5rem;padding:.25rem;border-right:1px solid var(--color-divider);cursor:pointer;transition:background .1s}.lc-calendar__day-cell:last-child{border-right:none}.lc-calendar__day-cell:hover{background:var(--color-surface-2)}.lc-calendar__day-cell--today{background:color-mix(in srgb,var(--color-primary-500) 6%,transparent)}.lc-calendar__day-cell--today:hover{background:color-mix(in srgb,var(--color-primary-500) 12%,transparent)}.lc-calendar__day-cell--other{opacity:.4}.lc-calendar__day-number{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;border:none;background:transparent;font:inherit;font-size:.75rem;font-weight:500;color:var(--color-text-secondary);border-radius:50%;cursor:pointer}.lc-calendar__day-number:hover{background:var(--color-surface-hover)}.lc-calendar__day-cell--today .lc-calendar__day-number{background:var(--color-primary-500);color:var(--color-on-primary);font-weight:700}.lc-calendar__event-dot{display:block;width:100%;border:none;font:inherit;text-align:left;font-size:.6875rem;padding:.0625rem .25rem;border-radius:.1875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.125rem;color:var(--color-on-primary);cursor:pointer}.lc-calendar__event-dot--primary{background:var(--color-primary-500)}.lc-calendar__event-dot--secondary{background:var(--color-secondary-500)}.lc-calendar__event-dot--success{background:var(--color-success-default)}.lc-calendar__event-dot--warning{background:var(--color-warning-default)}.lc-calendar__event-dot--error{background:var(--color-error-default)}.lc-calendar__event-dot--info{background:var(--color-info-default)}.lc-calendar__more{font-size:.625rem;color:var(--color-text-tertiary);padding:.0625rem .25rem;cursor:pointer}.lc-calendar__time-grid{overflow:auto;max-height:40rem}.lc-calendar__time-header{display:flex;position:sticky;top:0;z-index:2;background:var(--color-surface-2);border-bottom:1px solid var(--color-border)}.lc-calendar__time-col-header{flex:1;min-width:0;text-align:center;padding:.5rem .25rem;border:none;border-left:1px solid var(--color-border);background:transparent;font:inherit;font-size:.75rem;font-weight:600;color:var(--color-text-secondary);cursor:pointer}.lc-calendar__time-col-header:hover{background:var(--color-surface-hover)}.lc-calendar__time-col-header--today{color:var(--color-primary-500);background:color-mix(in srgb,var(--color-primary-500) 6%,transparent)}.lc-calendar__time-body{display:flex;position:relative}.lc-calendar__time-gutter{width:3.5rem;flex-shrink:0;border-right:1px solid var(--color-border);background:var(--color-surface-2)}.lc-calendar__time-label{height:3.75rem;padding:.125rem .375rem 0 0;text-align:right;font-size:.6875rem;color:var(--color-text-tertiary)}.lc-calendar__time-col{flex:1;position:relative;border-left:1px solid var(--color-border)}.lc-calendar__time-col--single{min-width:0}.lc-calendar__time-slot{height:3.75rem;border-bottom:1px solid var(--color-divider);cursor:pointer}.lc-calendar__time-slot:hover{background:var(--color-surface-2)}.lc-calendar__time-event{position:absolute;left:.125rem;right:.125rem;border:none;border-radius:.25rem;padding:.125rem .375rem;font:inherit;font-size:.6875rem;text-align:left;color:var(--color-on-primary);overflow:hidden;cursor:pointer;z-index:1}.lc-calendar__time-event--primary{background:var(--color-primary-500)}.lc-calendar__time-event--secondary{background:var(--color-secondary-500)}.lc-calendar__time-event--success{background:var(--color-success-default)}.lc-calendar__time-event--warning{background:var(--color-warning-default)}.lc-calendar__time-event--error{background:var(--color-error-default)}.lc-calendar__time-event--info{background:var(--color-info-default)}\n"]
+		}]
+	}],
+	propDecorators: {
+		view: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "view",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["viewChange"]
+		}],
+		events: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "events",
+				required: false
+			}]
+		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		labels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labels",
+				required: false
+			}]
+		}],
+		startHour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "startHour",
+				required: false
+			}]
+		}],
+		endHour: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "endHour",
+				required: false
+			}]
+		}],
+		eventClick: [{
+			type: i0.Output,
+			args: ["eventClick"]
+		}],
+		dateClick: [{
+			type: i0.Output,
+			args: ["dateClick"]
+		}]
+	}
+});
+export { CalendarComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-calendar.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-calendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-calendar.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/calendar/calendar.component.ts","../../../../libs/angular-ui-kit/src/lib/calendar/calendar.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  model,\n  output,\n  computed,\n  signal,\n} from '@angular/core';\nimport { SlicePipe } from '@angular/common';\n\nexport type CalendarView = 'day' | 'week' | 'month';\n\n/** UI strings of the calendar chrome; override individual keys via the `labels` input. */\nexport interface CalendarLabels {\n  today: string;\n  day: string;\n  week: string;\n  month: string;\n  previous: string;\n  next: string;\n}\n\nconst DEFAULT_LABELS: CalendarLabels = {\n  today: 'Heute',\n  day: 'Tag',\n  week: 'Woche',\n  month: 'Monat',\n  previous: 'Zurück',\n  next: 'Weiter',\n};\n\nexport interface CalendarEvent {\n  id: string;\n  title: string;\n  start: Date | string;\n  end: Date | string;\n  color?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';\n  allDay?: boolean;\n}\n\ninterface DayCell {\n  date: Date;\n  isToday: boolean;\n  isCurrentMonth: boolean;\n  events: CalendarEvent[];\n}\n\ninterface HourSlot {\n  hour: number;\n  label: string;\n}\n\n@Component({\n  selector: 'lc-calendar',\n  standalone: true,\n  imports: [SlicePipe],\n  templateUrl: './calendar.component.html',\n  styleUrls: ['./calendar.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Calendar component for date-based event display and navigation.\n *\n * Features:\n * - Day, week, and month view modes\n * - Event display with six color variants\n * - Navigation controls for previous/next/today\n * - Configurable first day of week and locale\n * - Time grid for day and week views with hourly slots\n * - Click handlers for events and date cells\n *\n * @example\n * ```html\n * <lc-calendar [events]=\"events\" view=\"month\" [firstDayOfWeek]=\"1\" />\n * ```\n */\nexport class CalendarComponent {\n  /** Current view mode. Two-way bindable; the view toggle writes it and emits `viewChange`. */\n  view = model<CalendarView>('month');\n\n  /** Events to display. */\n  events = input<CalendarEvent[]>([]);\n\n  /** First day of week (0=Sunday, 1=Monday). */\n  firstDayOfWeek = input<number>(1);\n\n  /** Locale for date formatting. */\n  locale = input<string>('de-DE');\n\n  /** Overrides for the built-in UI strings (defaults are German, matching the default locale). */\n  labels = input<Partial<CalendarLabels>>({});\n\n  /** Start hour for day/week view. */\n  startHour = input<number>(6);\n\n  /** End hour for day/week view. */\n  endHour = input<number>(22);\n\n  /** Emits when an event is clicked. */\n  eventClick = output<CalendarEvent>();\n\n  /** Emits when a date cell is clicked. */\n  dateClick = output<Date>();\n\n  protected readonly currentDate = signal(new Date());\n\n  protected readonly text = computed<CalendarLabels>(() => ({ ...DEFAULT_LABELS, ...this.labels() }));\n\n  protected readonly headerTitle = computed(() => {\n    const d = this.currentDate();\n    const loc = this.locale();\n    const v = this.view();\n    if (v === 'month') {\n      return d.toLocaleDateString(loc, { month: 'long', year: 'numeric' });\n    }\n    if (v === 'week') {\n      const start = this.weekStart(d);\n      const end = new Date(start);\n      end.setDate(end.getDate() + 6);\n      return `${start.toLocaleDateString(loc, { day: 'numeric', month: 'short' })} – ${end.toLocaleDateString(loc, { day: 'numeric', month: 'short', year: 'numeric' })}`;\n    }\n    return d.toLocaleDateString(loc, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });\n  });\n\n  protected readonly weekDayNames = computed(() => {\n    const loc = this.locale();\n    const fdow = this.firstDayOfWeek();\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(2024, 0, fdow + i); // Jan 2024 starts on Monday\n      return d.toLocaleDateString(loc, { weekday: 'short' });\n    });\n  });\n\n  protected readonly monthGrid = computed(() => {\n    const d = this.currentDate();\n    const evts = this.normalizedEvents();\n    const fdow = this.firstDayOfWeek();\n    const year = d.getFullYear();\n    const month = d.getMonth();\n    const today = new Date();\n\n    const firstOfMonth = new Date(year, month, 1);\n    let startOffset = firstOfMonth.getDay() - fdow;\n    if (startOffset < 0) startOffset += 7;\n\n    const startDate = new Date(year, month, 1 - startOffset);\n    const weeks: DayCell[][] = [];\n\n    for (let w = 0; w < 6; w++) {\n      const week: DayCell[] = [];\n      for (let wd = 0; wd < 7; wd++) {\n        const cellDate = new Date(startDate);\n        cellDate.setDate(startDate.getDate() + w * 7 + wd);\n        week.push({\n          date: cellDate,\n          isToday: this.isSameDay(cellDate, today),\n          isCurrentMonth: cellDate.getMonth() === month,\n          events: evts.filter(e => this.isEventOnDate(e, cellDate)),\n        });\n      }\n      weeks.push(week);\n    }\n    return weeks;\n  });\n\n  protected readonly hourSlots = computed((): HourSlot[] => {\n    const start = this.startHour();\n    const end = this.endHour();\n    return Array.from({ length: end - start }, (_, i) => ({\n      hour: start + i,\n      label: `${String(start + i).padStart(2, '0')}:00`,\n    }));\n  });\n\n  protected readonly weekDays = computed(() => {\n    const d = this.currentDate();\n    const start = this.weekStart(d);\n    const loc = this.locale();\n    const today = new Date();\n    const evts = this.normalizedEvents();\n\n    return Array.from({ length: 7 }, (_, i) => {\n      const day = new Date(start);\n      day.setDate(start.getDate() + i);\n      return {\n        date: day,\n        label: day.toLocaleDateString(loc, { weekday: 'short', day: 'numeric' }),\n        isToday: this.isSameDay(day, today),\n        events: evts.filter(e => this.isEventOnDate(e, day)),\n      };\n    });\n  });\n\n  protected readonly dayEvents = computed(() => {\n    const d = this.currentDate();\n    const evts = this.normalizedEvents();\n    return evts.filter(e => this.isEventOnDate(e, d));\n  });\n\n  private readonly normalizedEvents = computed(() =>\n    this.events().map(e => ({\n      ...e,\n      start: e.start instanceof Date ? e.start : new Date(e.start),\n      end: e.end instanceof Date ? e.end : new Date(e.end),\n    }))\n  );\n\n  protected navigatePrev(): void {\n    this.navigate(-1);\n  }\n\n  protected navigateNext(): void {\n    this.navigate(1);\n  }\n\n  protected navigateToday(): void {\n    this.currentDate.set(new Date());\n  }\n\n  protected setView(v: CalendarView): void {\n    this.view.set(v);\n  }\n\n  protected onEventClick(event: CalendarEvent, e: Event): void {\n    // The event button sits inside a clickable cell/column; don't let it count as a date click too.\n    e.stopPropagation();\n    this.eventClick.emit(event);\n  }\n\n  protected onDateClick(date: Date, e?: Event): void {\n    e?.stopPropagation();\n    this.dateClick.emit(date);\n  }\n\n  /** Full, localized accessible name for a day button (e.g. \"Montag, 15. Januar 2024\"). */\n  protected dateLabel(date: Date): string {\n    return date.toLocaleDateString(this.locale(), {\n      weekday: 'long',\n      day: 'numeric',\n      month: 'long',\n      year: 'numeric',\n    });\n  }\n\n  /** Accessible name for an event button: title plus its time range (or \"all day\"). */\n  protected eventLabel(event: CalendarEvent): string {\n    const start = event.start instanceof Date ? event.start : new Date(event.start);\n    const end = event.end instanceof Date ? event.end : new Date(event.end);\n    const loc = this.locale();\n    const opts: Intl.DateTimeFormatOptions = { hour: '2-digit', minute: '2-digit' };\n    return event.allDay\n      ? event.title\n      : `${event.title}, ${start.toLocaleTimeString(loc, opts)} – ${end.toLocaleTimeString(loc, opts)}`;\n  }\n\n  protected eventTop(event: CalendarEvent): number {\n    const start = event.start instanceof Date ? event.start : new Date(event.start);\n    const h = start.getHours() - this.startHour();\n    const m = start.getMinutes();\n    return (h * 60 + m);\n  }\n\n  protected eventHeight(event: CalendarEvent): number {\n    const start = event.start instanceof Date ? event.start : new Date(event.start);\n    const end = event.end instanceof Date ? event.end : new Date(event.end);\n    const diff = (end.getTime() - start.getTime()) / 60000;\n    return Math.max(diff, 15);\n  }\n\n  private navigate(direction: number): void {\n    const d = new Date(this.currentDate());\n    const v = this.view();\n    if (v === 'month') {\n      d.setMonth(d.getMonth() + direction);\n    } else if (v === 'week') {\n      d.setDate(d.getDate() + direction * 7);\n    } else {\n      d.setDate(d.getDate() + direction);\n    }\n    this.currentDate.set(d);\n  }\n\n  private weekStart(d: Date): Date {\n    const start = new Date(d);\n    const fdow = this.firstDayOfWeek();\n    let diff = start.getDay() - fdow;\n    if (diff < 0) diff += 7;\n    start.setDate(start.getDate() - diff);\n    return start;\n  }\n\n  private isSameDay(a: Date, b: Date): boolean {\n    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();\n  }\n\n  private isEventOnDate(event: { start: Date; end: Date }, date: Date): boolean {\n    const startOfDay = new Date(date.getFullYear(), date.getMonth(), date.getDate());\n    const endOfDay = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);\n    return event.start <= endOfDay && event.end >= startOfDay;\n  }\n}\n","<div class=\"lc-calendar\">\n  <!-- Header -->\n  <div class=\"lc-calendar__header\">\n    <div class=\"lc-calendar__nav\">\n      <button type=\"button\" class=\"lc-calendar__nav-btn\" (click)=\"navigatePrev()\" [attr.aria-label]=\"text().previous\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M10 12L6 8l4-4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <button type=\"button\" class=\"lc-calendar__today-btn\" (click)=\"navigateToday()\">{{ text().today }}</button>\n      <button type=\"button\" class=\"lc-calendar__nav-btn\" (click)=\"navigateNext()\" [attr.aria-label]=\"text().next\">\n        <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n      </button>\n      <span class=\"lc-calendar__title\" aria-live=\"polite\">{{ headerTitle() }}</span>\n    </div>\n    <div class=\"lc-calendar__view-toggle\" role=\"group\">\n      <button type=\"button\" [class.active]=\"view() === 'day'\" [attr.aria-pressed]=\"view() === 'day'\" (click)=\"setView('day')\">{{ text().day }}</button>\n      <button type=\"button\" [class.active]=\"view() === 'week'\" [attr.aria-pressed]=\"view() === 'week'\" (click)=\"setView('week')\">{{ text().week }}</button>\n      <button type=\"button\" [class.active]=\"view() === 'month'\" [attr.aria-pressed]=\"view() === 'month'\" (click)=\"setView('month')\">{{ text().month }}</button>\n    </div>\n  </div>\n\n  <!-- Month View -->\n  @if (view() === 'month') {\n    <div class=\"lc-calendar__month\">\n      <div class=\"lc-calendar__weekdays\" aria-hidden=\"true\">\n        @for (name of weekDayNames(); track name) {\n          <div class=\"lc-calendar__weekday\">{{ name }}</div>\n        }\n      </div>\n      @for (week of monthGrid(); track $index) {\n        <div class=\"lc-calendar__week-row\">\n          @for (cell of week; track cell.date.getTime()) {\n            <!-- The cell stays a mouse target for the whole area; keyboard users reach the\n                 date through the day-number button and each event through its own button. -->\n            <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- mouse target for the whole cell; keyboard users use the day-number button -->\n            <div\n              class=\"lc-calendar__day-cell\"\n              [class.lc-calendar__day-cell--today]=\"cell.isToday\"\n              [class.lc-calendar__day-cell--other]=\"!cell.isCurrentMonth\"\n              (click)=\"onDateClick(cell.date)\"\n            >\n              <button\n                type=\"button\"\n                class=\"lc-calendar__day-number\"\n                [attr.aria-label]=\"dateLabel(cell.date)\"\n                [attr.aria-current]=\"cell.isToday ? 'date' : null\"\n                (click)=\"onDateClick(cell.date, $event)\"\n              >\n                {{ cell.date.getDate() }}\n              </button>\n              @for (evt of cell.events | slice:0:3; track evt.id) {\n                <button\n                  type=\"button\"\n                  class=\"lc-calendar__event-dot\"\n                  [class]=\"'lc-calendar__event-dot lc-calendar__event-dot--' + (evt.color || 'primary')\"\n                  [attr.aria-label]=\"eventLabel(evt)\"\n                  [title]=\"evt.title\"\n                  (click)=\"onEventClick(evt, $event)\"\n                >\n                  {{ evt.title }}\n                </button>\n              }\n              @if (cell.events.length > 3) {\n                <div class=\"lc-calendar__more\">+{{ cell.events.length - 3 }}</div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Week View -->\n  @if (view() === 'week') {\n    <div class=\"lc-calendar__time-grid\">\n      <div class=\"lc-calendar__time-header\">\n        <div class=\"lc-calendar__time-gutter\"></div>\n        @for (day of weekDays(); track day.date.getTime()) {\n          <button\n            type=\"button\"\n            class=\"lc-calendar__time-col-header\"\n            [class.lc-calendar__time-col-header--today]=\"day.isToday\"\n            [attr.aria-label]=\"dateLabel(day.date)\"\n            [attr.aria-current]=\"day.isToday ? 'date' : null\"\n            (click)=\"onDateClick(day.date)\"\n          >\n            {{ day.label }}\n          </button>\n        }\n      </div>\n      <div class=\"lc-calendar__time-body\">\n        <div class=\"lc-calendar__time-gutter\">\n          @for (slot of hourSlots(); track slot.hour) {\n            <div class=\"lc-calendar__time-label\">{{ slot.label }}</div>\n          }\n        </div>\n        @for (day of weekDays(); track day.date.getTime()) {\n          <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- mouse target for the empty column; events and dates have their own buttons -->\n          <div class=\"lc-calendar__time-col\" (click)=\"onDateClick(day.date)\">\n            @for (slot of hourSlots(); track slot.hour) {\n              <div class=\"lc-calendar__time-slot\"></div>\n            }\n            @for (evt of day.events; track evt.id) {\n              <button\n                type=\"button\"\n                class=\"lc-calendar__time-event\"\n                [class]=\"'lc-calendar__time-event lc-calendar__time-event--' + (evt.color || 'primary')\"\n                [style.top.px]=\"eventTop(evt)\"\n                [style.height.px]=\"eventHeight(evt)\"\n                [attr.aria-label]=\"eventLabel(evt)\"\n                [title]=\"evt.title\"\n                (click)=\"onEventClick(evt, $event)\"\n              >\n                {{ evt.title }}\n              </button>\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Day View -->\n  @if (view() === 'day') {\n    <div class=\"lc-calendar__time-grid lc-calendar__time-grid--day\">\n      <div class=\"lc-calendar__time-body\">\n        <div class=\"lc-calendar__time-gutter\">\n          @for (slot of hourSlots(); track slot.hour) {\n            <div class=\"lc-calendar__time-label\">{{ slot.label }}</div>\n          }\n        </div>\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- mouse target for the empty column; events and dates have their own buttons -->\n        <div class=\"lc-calendar__time-col lc-calendar__time-col--single\" (click)=\"onDateClick(currentDate())\">\n          @for (slot of hourSlots(); track slot.hour) {\n            <div class=\"lc-calendar__time-slot\"></div>\n          }\n          @for (evt of dayEvents(); track evt.id) {\n            <button\n              type=\"button\"\n              class=\"lc-calendar__time-event\"\n              [class]=\"'lc-calendar__time-event lc-calendar__time-event--' + (evt.color || 'primary')\"\n              [style.top.px]=\"eventTop(evt)\"\n              [style.height.px]=\"eventHeight(evt)\"\n              [attr.aria-label]=\"eventLabel(evt)\"\n              [title]=\"evt.title\"\n              (click)=\"onEventClick(evt, $event)\"\n            >\n              {{ evt.title }}\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n"],"mappings":"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"}