@star-ng/ui 0.0.0-stage → 0.1.0

package/fesm2022/star-ng-ui-date-picker.mjs

@@ -0,0 +1,2786 @@
+import { _IdGenerator } from "@angular/cdk/a11y";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, ElementRef, Injector, afterNextRender, booleanAttribute, computed, inject, input, linkedSignal, model, output, signal, viewChild } from "@angular/core";
+import { STAR_UI_TEXT, StarDirectionService, starInlineKey } from "@star-ng/ui/core";
+import { CdkConnectedOverlay, CdkOverlayOrigin } from "@angular/cdk/overlay";
+function startOfDay(date) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function addDays(date, days) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+}
+function addMonths(date, months) {
+	const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
+	const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+	return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), lastDay));
+}
+function sameDay(a, b) {
+	return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function sameMonth(a, b) {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+function compareDays(a, b) {
+	return startOfDay(a).getTime() - startOfDay(b).getTime();
+}
+function isoDay(date) {
+	const pad = (n) => String(n).padStart(2, "0");
+	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function localeFirstDay(locale) {
+	try {
+		const intlLocale = new Intl.Locale(locale ?? (typeof navigator === "undefined" ? "en-US" : navigator.language));
+		const info = intlLocale.getWeekInfo?.() ?? intlLocale.weekInfo;
+		return info ? info.firstDay % 7 : 1;
+	} catch {
+		return 1;
+	}
+}
+function monthGrid(month, firstDay) {
+	const first = new Date(month.getFullYear(), month.getMonth(), 1);
+	const start = addDays(first, -((first.getDay() - firstDay + 7) % 7));
+	return Array.from({ length: 6 }, (_, week) => Array.from({ length: 7 }, (_, day) => addDays(start, week * 7 + day)));
+}
+const DEFAULT_DATE_FORMAT = {
+	year: "numeric",
+	month: "2-digit",
+	day: "2-digit"
+};
+function formatDate(date, locale, options) {
+	return date ? new Intl.DateTimeFormat(locale, options).format(date) : "";
+}
+function formatHint(locale) {
+	return new Intl.DateTimeFormat(locale, DEFAULT_DATE_FORMAT).formatToParts(new Date(2026, 10, 22)).map((part) => part.type === "day" ? "dd" : part.type === "month" ? "mm" : part.type === "year" ? "yyyy" : part.value).join("");
+}
+function parseDate(text, locale) {
+	const value = text.trim();
+	if (!value) return null;
+	const iso = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(value);
+	const numbers = iso ? [
+		iso[1],
+		iso[2],
+		iso[3]
+	].map(Number) : value.split(/\D+/).filter(Boolean).map(Number);
+	if (numbers.length !== 3) return null;
+	let year;
+	let month;
+	let day;
+	if (iso) [year, month, day] = numbers;
+	else {
+		const order = new Intl.DateTimeFormat(locale, DEFAULT_DATE_FORMAT).formatToParts(new Date(2026, 10, 22)).map((part) => part.type).filter((type) => type === "day" || type === "month" || type === "year");
+		const read = (type) => numbers[order.indexOf(type)];
+		year = read("year");
+		month = read("month");
+		day = read("day");
+		if (year < 100) year += 2e3;
+	}
+	const date = new Date(year, month - 1, day);
+	return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day ? date : null;
+}
+function isoWeek(date) {
+	const day = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+	day.setUTCDate(day.getUTCDate() + 4 - (day.getUTCDay() || 7));
+	const yearStart = Date.UTC(day.getUTCFullYear(), 0, 1);
+	return Math.ceil(((day.getTime() - yearStart) / 864e5 + 1) / 7);
+}
+var StarCalendar = class StarCalendar {
+	text = inject(STAR_UI_TEXT);
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	titleId = inject(_IdGenerator).getId("star-calendar-title-");
+	sameDay = sameDay;
+	mode = input("single", ...ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []);
+	selected = input(null, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	selectedDates = input([], ...ngDevMode ? [{ debugName: "selectedDates" }] : /* istanbul ignore next */ []);
+	granularity = input("day", ...ngDevMode ? [{ debugName: "granularity" }] : /* istanbul ignore next */ []);
+	numberOfMonths = input(1, ...ngDevMode ? [{ debugName: "numberOfMonths" }] : /* istanbul ignore next */ []);
+	showWeek = input(false, {
+		...ngDevMode ? { debugName: "showWeek" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	range = input(null, ...ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []);
+	minDate = input(null, ...ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []);
+	maxDate = input(null, ...ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []);
+	disabledDates = input([], ...ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []);
+	disabledDays = input([], ...ngDevMode ? [{ debugName: "disabledDays" }] : /* istanbul ignore next */ []);
+	dateDisabled = input(null, ...ngDevMode ? [{ debugName: "dateDisabled" }] : /* istanbul ignore next */ []);
+	firstDayOfWeek = input(null, ...ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []);
+	locale = input(void 0, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	dateSelect = output();
+	view = linkedSignal(() => this.granularity(), ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+	hover = signal(null, ...ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []);
+	today = startOfDay(/* @__PURE__ */ new Date());
+	anchor = computed(() => {
+		const range = this.range();
+		return this.selected() ?? range?.end ?? range?.start ?? this.selectedDates().at(-1) ?? this.today;
+	}, ...ngDevMode ? [{ debugName: "anchor" }] : /* istanbul ignore next */ []);
+	focused = linkedSignal(() => startOfDay(this.anchor()), ...ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []);
+	firstDay = computed(() => this.firstDayOfWeek() ?? localeFirstDay(this.locale()), ...ngDevMode ? [{ debugName: "firstDay" }] : /* istanbul ignore next */ []);
+	monthName = computed(() => new Intl.DateTimeFormat(this.locale(), { month: "long" }).format(this.focused()), ...ngDevMode ? [{ debugName: "monthName" }] : /* istanbul ignore next */ []);
+	monthLabel = computed(() => new Intl.DateTimeFormat(this.locale(), {
+		month: "long",
+		year: "numeric"
+	}).format(this.focused()), ...ngDevMode ? [{ debugName: "monthLabel" }] : /* istanbul ignore next */ []);
+	weekdays = computed(() => {
+		const short = new Intl.DateTimeFormat(this.locale(), { weekday: "short" });
+		const long = new Intl.DateTimeFormat(this.locale(), { weekday: "long" });
+		return Array.from({ length: 7 }, (_, i) => {
+			const date = new Date(2026, 10, 1 + (this.firstDay() + i) % 7);
+			return {
+				short: short.format(date),
+				long: long.format(date)
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "weekdays" }] : /* istanbul ignore next */ []);
+	monthCount = computed(() => Math.max(1, Math.floor(this.numberOfMonths())), ...ngDevMode ? [{ debugName: "monthCount" }] : /* istanbul ignore next */ []);
+	viewStart = linkedSignal({
+		...ngDevMode ? { debugName: "viewStart" } : /* istanbul ignore next */ {},
+		source: () => ({
+			focused: this.focused(),
+			count: this.monthCount()
+		}),
+		computation: ({ focused, count }, previous) => {
+			const month = new Date(focused.getFullYear(), focused.getMonth(), 1);
+			if (!previous) return month;
+			const start = previous.value;
+			const offset = (month.getFullYear() - start.getFullYear()) * 12 + month.getMonth() - start.getMonth();
+			if (offset >= 0 && offset < count) return start;
+			return offset < 0 ? month : addMonths(month, -(count - 1));
+		}
+	});
+	grids = computed(() => {
+		const fullLabel = new Intl.DateTimeFormat(this.locale(), { dateStyle: "full" });
+		const monthLabel = new Intl.DateTimeFormat(this.locale(), {
+			month: "long",
+			year: "numeric"
+		});
+		const many = this.monthCount() > 1;
+		return Array.from({ length: this.monthCount() }, (_, index) => {
+			const month = addMonths(this.viewStart(), index);
+			return {
+				key: isoDay(month),
+				label: monthLabel.format(month),
+				weeks: monthGrid(month, this.firstDay()).map((week) => ({
+					number: isoWeek(week.find((day) => day.getDay() === 4) ?? week[0]),
+					days: week.map((date) => {
+						const outside = !sameMonth(date, month);
+						return {
+							date,
+							key: isoDay(date),
+							label: fullLabel.format(date),
+							outside,
+							blank: many && outside,
+							today: sameDay(date, this.today),
+							disabled: this.isDisabled(date)
+						};
+					})
+				})).filter((week) => !many || week.days.some((day) => !day.blank))
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "grids" }] : /* istanbul ignore next */ []);
+	months = computed(() => {
+		const format = new Intl.DateTimeFormat(this.locale(), { month: "short" });
+		return Array.from({ length: 12 }, (_, i) => format.format(new Date(2026, i, 1)));
+	}, ...ngDevMode ? [{ debugName: "months" }] : /* istanbul ignore next */ []);
+	years = computed(() => {
+		const year = this.focused().getFullYear();
+		const start = year - (year % 12 + 12) % 12;
+		return Array.from({ length: 12 }, (_, i) => start + i);
+	}, ...ngDevMode ? [{ debugName: "years" }] : /* istanbul ignore next */ []);
+	isDisabled(date) {
+		const min = this.minDate();
+		const max = this.maxDate();
+		if (min && compareDays(date, min) < 0) return true;
+		if (max && compareDays(date, max) > 0) return true;
+		if (this.disabledDays().includes(date.getDay())) return true;
+		if (this.disabledDates().some((disabled) => sameDay(disabled, date))) return true;
+		return this.dateDisabled()?.(date) ?? false;
+	}
+	isSelected(date) {
+		if (this.mode() === "single") return sameDay(date, this.selected());
+		if (this.mode() === "multiple") return this.selectedDates().some((day) => sameDay(day, date));
+		const range = this.range();
+		return sameDay(date, range?.start) || sameDay(date, range?.end);
+	}
+	inRange(date) {
+		if (this.mode() !== "range") return false;
+		const range = this.range();
+		const start = range?.start;
+		const end = range?.end ?? (start ? this.hover() : null);
+		if (!start || !end) return false;
+		const [from, to] = compareDays(start, end) <= 0 ? [start, end] : [end, start];
+		return compareDays(date, from) >= 0 && compareDays(date, to) <= 0;
+	}
+	isRangeEdge(date, edge) {
+		if (!this.inRange(date)) return false;
+		const range = this.range();
+		const a = range?.start;
+		const b = range?.end ?? this.hover();
+		if (!a || !b) return false;
+		const [from, to] = compareDays(a, b) <= 0 ? [a, b] : [b, a];
+		return sameDay(date, edge === "start" ? from : to);
+	}
+	choose(date) {
+		if (this.isDisabled(date)) return;
+		this.focused.set(date);
+		this.dateSelect.emit(date);
+	}
+	focusActive() {
+		afterNextRender(() => {
+			const root = this.host.nativeElement;
+			(this.view() === "day" ? root.querySelector(`[data-date="${isoDay(this.focused())}"]`) : root.querySelector(".star-calendar__pick[tabindex=\"0\"]"))?.focus();
+		}, { injector: this.injector });
+	}
+	page(step) {
+		const current = this.focused();
+		if (this.view() === "day") this.focused.set(addMonths(current, step));
+		else if (this.view() === "month") this.focused.set(addMonths(current, step * 12));
+		else this.focused.set(addMonths(current, step * 144));
+	}
+	onDayKeydown(event) {
+		const current = this.focused();
+		const weekStart = (current.getDay() - this.firstDay() + 7) % 7;
+		const key = starInlineKey(event);
+		const moves = {
+			ArrowLeft: () => addDays(current, -1),
+			ArrowRight: () => addDays(current, 1),
+			ArrowUp: () => addDays(current, -7),
+			ArrowDown: () => addDays(current, 7),
+			Home: () => addDays(current, -weekStart),
+			End: () => addDays(current, 6 - weekStart),
+			PageUp: () => addMonths(current, event.shiftKey ? -12 : -1),
+			PageDown: () => addMonths(current, event.shiftKey ? 12 : 1)
+		};
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			this.choose(current);
+			return;
+		}
+		const move = moves[key];
+		if (!move) return;
+		event.preventDefault();
+		this.focused.set(move());
+		this.focusActive();
+	}
+	onPickerKeydown(event, kind) {
+		const step = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -3,
+			ArrowDown: 3
+		}[starInlineKey(event)];
+		if (step === void 0) return;
+		event.preventDefault();
+		this.focused.set(addMonths(this.focused(), kind === "month" ? step : step * 12));
+		this.focusActive();
+	}
+	pickMonth(month) {
+		const current = this.focused();
+		this.focused.set(addMonths(current, month - current.getMonth()));
+		if (this.granularity() === "month") {
+			this.dateSelect.emit(new Date(current.getFullYear(), month, 1));
+			return;
+		}
+		this.view.set("day");
+		this.focusActive();
+	}
+	pickYear(year) {
+		const current = this.focused();
+		this.focused.set(addMonths(current, (year - current.getFullYear()) * 12));
+		if (this.granularity() === "year") {
+			this.dateSelect.emit(new Date(year, 0, 1));
+			return;
+		}
+		this.view.set("month");
+		this.focusActive();
+	}
+	monthDisabled(month) {
+		const year = this.focused().getFullYear();
+		const first = new Date(year, month, 1);
+		const last = new Date(year, month + 1, 0);
+		const min = this.minDate();
+		const max = this.maxDate();
+		return !!min && compareDays(last, min) < 0 || !!max && compareDays(first, max) > 0;
+	}
+	yearDisabled(year) {
+		const min = this.minDate();
+		const max = this.maxDate();
+		return !!min && year < min.getFullYear() || !!max && year > max.getFullYear();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarCalendar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarCalendar,
+		isStandalone: true,
+		selector: "star-calendar",
+		inputs: {
+			mode: {
+				classPropertyName: "mode",
+				publicName: "mode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selected: {
+				classPropertyName: "selected",
+				publicName: "selected",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectedDates: {
+				classPropertyName: "selectedDates",
+				publicName: "selectedDates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			granularity: {
+				classPropertyName: "granularity",
+				publicName: "granularity",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			numberOfMonths: {
+				classPropertyName: "numberOfMonths",
+				publicName: "numberOfMonths",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showWeek: {
+				classPropertyName: "showWeek",
+				publicName: "showWeek",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			range: {
+				classPropertyName: "range",
+				publicName: "range",
+				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
+			},
+			disabledDates: {
+				classPropertyName: "disabledDates",
+				publicName: "disabledDates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledDays: {
+				classPropertyName: "disabledDays",
+				publicName: "disabledDays",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dateDisabled: {
+				classPropertyName: "dateDisabled",
+				publicName: "dateDisabled",
+				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
+			}
+		},
+		outputs: { dateSelect: "dateSelect" },
+		host: { classAttribute: "star-calendar" },
+		ngImport: i0,
+		template: `
+    <div class="star-calendar__header">
+      <button
+        type="button"
+        class="star-calendar__nav"
+        [attr.aria-label]="view() === 'year' ? text.previousYears : text.previousMonth"
+        (click)="page(-1)"
+      >
+        <i class="ph-bold ph-caret-left star-icon-mirror" aria-hidden="true"></i>
+      </button>
+      <h2 class="star-calendar__title" [id]="titleId" aria-live="polite">
+        @if (view() === 'day') {
+          <button
+            type="button"
+            class="star-calendar__title-btn"
+            [attr.aria-label]="text.chooseMonth + ', ' + monthLabel()"
+            (click)="view.set('month')"
+          >
+            {{ monthName() }}
+          </button>
+        }
+        @if (view() !== 'year' && granularity() !== 'year') {
+          <button
+            type="button"
+            class="star-calendar__title-btn"
+            [attr.aria-label]="text.chooseYear + ', ' + focused().getFullYear()"
+            (click)="view.set('year')"
+          >
+            {{ focused().getFullYear() }}
+          </button>
+        } @else {
+          <span class="star-calendar__title-text">{{ years()[0] }} – {{ years()[11] }}</span>
+        }
+      </h2>
+      <button
+        type="button"
+        class="star-calendar__nav"
+        [attr.aria-label]="view() === 'year' ? text.nextYears : text.nextMonth"
+        (click)="page(1)"
+      >
+        <i class="ph-bold ph-caret-right star-icon-mirror" aria-hidden="true"></i>
+      </button>
+    </div>
+
+    @switch (view()) {
+      @case ('day') {
+        <div class="star-calendar__months" [class.star-calendar__months--many]="monthCount() > 1">
+          @for (grid of grids(); track $index) {
+            <!-- Grid keyboard is delegated from the focused day buttons (roving tabindex). -->
+            <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
+            <table
+              class="star-calendar__grid"
+              role="grid"
+              [attr.aria-labelledby]="monthCount() > 1 ? null : titleId"
+              [attr.aria-label]="monthCount() > 1 ? grid.label : null"
+              (keydown)="onDayKeydown($event)"
+            >
+              @if (monthCount() > 1) {
+                <caption class="star-calendar__caption">
+                  {{
+                    grid.label
+                  }}
+                </caption>
+              }
+              <thead>
+                <tr>
+                  @if (showWeek()) {
+                    <th scope="col" class="star-calendar__week" [attr.abbr]="text.weekNumber">
+                      {{ text.weekShort }}
+                    </th>
+                  }
+                  @for (day of weekdays(); track day.short) {
+                    <th scope="col" [attr.abbr]="day.long">{{ day.short }}</th>
+                  }
+                </tr>
+              </thead>
+              <tbody>
+                @for (week of grid.weeks; track $index) {
+                  <tr>
+                    @if (showWeek()) {
+                      <th scope="row" class="star-calendar__week">{{ week.number }}</th>
+                    }
+                    @for (cell of week.days; track cell.key) {
+                      @if (cell.blank) {
+                        <td role="gridcell"></td>
+                      } @else {
+                        <td
+                          role="gridcell"
+                          [attr.aria-selected]="isSelected(cell.date)"
+                          [class.star-calendar__cell--range]="inRange(cell.date)"
+                          [class.star-calendar__cell--range-start]="isRangeEdge(cell.date, 'start')"
+                          [class.star-calendar__cell--range-end]="isRangeEdge(cell.date, 'end')"
+                        >
+                          <button
+                            type="button"
+                            class="star-calendar__day"
+                            [attr.data-date]="cell.key"
+                            [class.star-calendar__day--outside]="cell.outside"
+                            [class.star-calendar__day--today]="cell.today"
+                            [class.star-calendar__day--selected]="isSelected(cell.date)"
+                            [attr.tabindex]="sameDay(cell.date, focused()) ? 0 : -1"
+                            [attr.aria-label]="cell.label"
+                            [attr.aria-current]="cell.today ? 'date' : null"
+                            [attr.aria-disabled]="cell.disabled || null"
+                            (click)="choose(cell.date)"
+                            (mouseenter)="hover.set(cell.date)"
+                            (focus)="focused.set(cell.date)"
+                          >
+                            {{ cell.date.getDate() }}
+                          </button>
+                        </td>
+                      }
+                    }
+                  </tr>
+                }
+              </tbody>
+            </table>
+          }
+        </div>
+      }
+      @case ('month') {
+        <div
+          class="star-calendar__picker"
+          role="group"
+          [attr.aria-label]="text.chooseMonth"
+          (keydown)="onPickerKeydown($event, 'month')"
+        >
+          @for (month of months(); track $index; let i = $index) {
+            <button
+              type="button"
+              class="star-calendar__pick"
+              [attr.data-pick]="i"
+              [class.star-calendar__pick--selected]="i === focused().getMonth()"
+              [attr.tabindex]="i === focused().getMonth() ? 0 : -1"
+              [attr.aria-pressed]="i === focused().getMonth()"
+              [disabled]="monthDisabled(i)"
+              (click)="pickMonth(i)"
+            >
+              {{ month }}
+            </button>
+          }
+        </div>
+      }
+      @case ('year') {
+        <div
+          class="star-calendar__picker"
+          role="group"
+          [attr.aria-label]="text.chooseYear"
+          (keydown)="onPickerKeydown($event, 'year')"
+        >
+          @for (year of years(); track year) {
+            <button
+              type="button"
+              class="star-calendar__pick"
+              [attr.data-pick]="year"
+              [class.star-calendar__pick--selected]="year === focused().getFullYear()"
+              [attr.tabindex]="year === focused().getFullYear() ? 0 : -1"
+              [attr.aria-pressed]="year === focused().getFullYear()"
+              [disabled]="yearDisabled(year)"
+              (click)="pickYear(year)"
+            >
+              {{ year }}
+            </button>
+          }
+        </div>
+      }
+    }
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarCalendar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-calendar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-calendar" },
+			template: `
+    <div class="star-calendar__header">
+      <button
+        type="button"
+        class="star-calendar__nav"
+        [attr.aria-label]="view() === 'year' ? text.previousYears : text.previousMonth"
+        (click)="page(-1)"
+      >
+        <i class="ph-bold ph-caret-left star-icon-mirror" aria-hidden="true"></i>
+      </button>
+      <h2 class="star-calendar__title" [id]="titleId" aria-live="polite">
+        @if (view() === 'day') {
+          <button
+            type="button"
+            class="star-calendar__title-btn"
+            [attr.aria-label]="text.chooseMonth + ', ' + monthLabel()"
+            (click)="view.set('month')"
+          >
+            {{ monthName() }}
+          </button>
+        }
+        @if (view() !== 'year' && granularity() !== 'year') {
+          <button
+            type="button"
+            class="star-calendar__title-btn"
+            [attr.aria-label]="text.chooseYear + ', ' + focused().getFullYear()"
+            (click)="view.set('year')"
+          >
+            {{ focused().getFullYear() }}
+          </button>
+        } @else {
+          <span class="star-calendar__title-text">{{ years()[0] }} – {{ years()[11] }}</span>
+        }
+      </h2>
+      <button
+        type="button"
+        class="star-calendar__nav"
+        [attr.aria-label]="view() === 'year' ? text.nextYears : text.nextMonth"
+        (click)="page(1)"
+      >
+        <i class="ph-bold ph-caret-right star-icon-mirror" aria-hidden="true"></i>
+      </button>
+    </div>
+
+    @switch (view()) {
+      @case ('day') {
+        <div class="star-calendar__months" [class.star-calendar__months--many]="monthCount() > 1">
+          @for (grid of grids(); track $index) {
+            <!-- Grid keyboard is delegated from the focused day buttons (roving tabindex). -->
+            <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->
+            <table
+              class="star-calendar__grid"
+              role="grid"
+              [attr.aria-labelledby]="monthCount() > 1 ? null : titleId"
+              [attr.aria-label]="monthCount() > 1 ? grid.label : null"
+              (keydown)="onDayKeydown($event)"
+            >
+              @if (monthCount() > 1) {
+                <caption class="star-calendar__caption">
+                  {{
+                    grid.label
+                  }}
+                </caption>
+              }
+              <thead>
+                <tr>
+                  @if (showWeek()) {
+                    <th scope="col" class="star-calendar__week" [attr.abbr]="text.weekNumber">
+                      {{ text.weekShort }}
+                    </th>
+                  }
+                  @for (day of weekdays(); track day.short) {
+                    <th scope="col" [attr.abbr]="day.long">{{ day.short }}</th>
+                  }
+                </tr>
+              </thead>
+              <tbody>
+                @for (week of grid.weeks; track $index) {
+                  <tr>
+                    @if (showWeek()) {
+                      <th scope="row" class="star-calendar__week">{{ week.number }}</th>
+                    }
+                    @for (cell of week.days; track cell.key) {
+                      @if (cell.blank) {
+                        <td role="gridcell"></td>
+                      } @else {
+                        <td
+                          role="gridcell"
+                          [attr.aria-selected]="isSelected(cell.date)"
+                          [class.star-calendar__cell--range]="inRange(cell.date)"
+                          [class.star-calendar__cell--range-start]="isRangeEdge(cell.date, 'start')"
+                          [class.star-calendar__cell--range-end]="isRangeEdge(cell.date, 'end')"
+                        >
+                          <button
+                            type="button"
+                            class="star-calendar__day"
+                            [attr.data-date]="cell.key"
+                            [class.star-calendar__day--outside]="cell.outside"
+                            [class.star-calendar__day--today]="cell.today"
+                            [class.star-calendar__day--selected]="isSelected(cell.date)"
+                            [attr.tabindex]="sameDay(cell.date, focused()) ? 0 : -1"
+                            [attr.aria-label]="cell.label"
+                            [attr.aria-current]="cell.today ? 'date' : null"
+                            [attr.aria-disabled]="cell.disabled || null"
+                            (click)="choose(cell.date)"
+                            (mouseenter)="hover.set(cell.date)"
+                            (focus)="focused.set(cell.date)"
+                          >
+                            {{ cell.date.getDate() }}
+                          </button>
+                        </td>
+                      }
+                    }
+                  </tr>
+                }
+              </tbody>
+            </table>
+          }
+        </div>
+      }
+      @case ('month') {
+        <div
+          class="star-calendar__picker"
+          role="group"
+          [attr.aria-label]="text.chooseMonth"
+          (keydown)="onPickerKeydown($event, 'month')"
+        >
+          @for (month of months(); track $index; let i = $index) {
+            <button
+              type="button"
+              class="star-calendar__pick"
+              [attr.data-pick]="i"
+              [class.star-calendar__pick--selected]="i === focused().getMonth()"
+              [attr.tabindex]="i === focused().getMonth() ? 0 : -1"
+              [attr.aria-pressed]="i === focused().getMonth()"
+              [disabled]="monthDisabled(i)"
+              (click)="pickMonth(i)"
+            >
+              {{ month }}
+            </button>
+          }
+        </div>
+      }
+      @case ('year') {
+        <div
+          class="star-calendar__picker"
+          role="group"
+          [attr.aria-label]="text.chooseYear"
+          (keydown)="onPickerKeydown($event, 'year')"
+        >
+          @for (year of years(); track year) {
+            <button
+              type="button"
+              class="star-calendar__pick"
+              [attr.data-pick]="year"
+              [class.star-calendar__pick--selected]="year === focused().getFullYear()"
+              [attr.tabindex]="year === focused().getFullYear() ? 0 : -1"
+              [attr.aria-pressed]="year === focused().getFullYear()"
+              [disabled]="yearDisabled(year)"
+              (click)="pickYear(year)"
+            >
+              {{ year }}
+            </button>
+          }
+        </div>
+      }
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		mode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mode",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}],
+		selectedDates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectedDates",
+				required: false
+			}]
+		}],
+		granularity: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "granularity",
+				required: false
+			}]
+		}],
+		numberOfMonths: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "numberOfMonths",
+				required: false
+			}]
+		}],
+		showWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showWeek",
+				required: false
+			}]
+		}],
+		range: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "range",
+				required: false
+			}]
+		}],
+		minDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minDate",
+				required: false
+			}]
+		}],
+		maxDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxDate",
+				required: false
+			}]
+		}],
+		disabledDates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledDates",
+				required: false
+			}]
+		}],
+		disabledDays: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledDays",
+				required: false
+			}]
+		}],
+		dateDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dateDisabled",
+				required: false
+			}]
+		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		dateSelect: [{
+			type: i0.Output,
+			args: ["dateSelect"]
+		}]
+	}
+});
+const TIME_FORMAT = {
+	hour: "2-digit",
+	minute: "2-digit",
+	hourCycle: "h23"
+};
+function atTime(date, hours, minutes) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours, minutes);
+}
+const PANEL_POSITIONS = [
+	{
+		originX: "start",
+		originY: "bottom",
+		overlayX: "start",
+		overlayY: "top",
+		offsetY: 6
+	},
+	{
+		originX: "start",
+		originY: "top",
+		overlayX: "start",
+		overlayY: "bottom",
+		offsetY: -6
+	},
+	{
+		originX: "end",
+		originY: "bottom",
+		overlayX: "end",
+		overlayY: "top",
+		offsetY: 6
+	}
+];
+var StarDateInputBase = class StarDateInputBase {
+	directionSync = inject(StarDirectionService);
+	text = inject(STAR_UI_TEXT);
+	ids = inject(_IdGenerator);
+	placeholder = input(null, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	minDate = input(null, ...ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []);
+	maxDate = input(null, ...ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []);
+	disabledDates = input([], ...ngDevMode ? [{ debugName: "disabledDates" }] : /* istanbul ignore next */ []);
+	disabledDays = input([], ...ngDevMode ? [{ debugName: "disabledDays" }] : /* istanbul ignore next */ []);
+	dateDisabled = input(null, ...ngDevMode ? [{ debugName: "dateDisabled" }] : /* istanbul ignore next */ []);
+	firstDayOfWeek = input(null, ...ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []);
+	locale = input(void 0, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	dateFormat = input(DEFAULT_DATE_FORMAT, ...ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []);
+	numberOfMonths = input(1, ...ngDevMode ? [{ debugName: "numberOfMonths" }] : /* istanbul ignore next */ []);
+	showWeek = input(false, {
+		...ngDevMode ? { debugName: "showWeek" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	hourFormat = input("24", ...ngDevMode ? [{ debugName: "hourFormat" }] : /* istanbul ignore next */ []);
+	showButtonBar = input(false, {
+		...ngDevMode ? { debugName: "showButtonBar" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showClear = input(false, {
+		...ngDevMode ? { debugName: "showClear" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonlyInput = input(false, {
+		...ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	inputId = input(this.ids.getId("star-date-"), ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	touch = output();
+	opened = output();
+	closed = output();
+	positions = PANEL_POSITIONS;
+	panelId = this.ids.getId("star-date-panel-");
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	showInvalid = computed(() => this.invalid() && this.touched(), ...ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []);
+	interactive = computed(() => !this.disabled() && !this.readonly(), ...ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []);
+	hint = computed(() => this.placeholder() ?? formatHint(this.locale()), ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	timeEnabled = () => false;
+	timeStep = () => 60;
+	timeFields() {
+		return [];
+	}
+	calendarDates = () => [];
+	granularity = () => "day";
+	input = viewChild.required("input", ...ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []);
+	control = viewChild.required("control", ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
+	calendar = viewChild(StarCalendar, ...ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []);
+	typed = linkedSignal(() => this.displayText(), ...ngDevMode ? [{ debugName: "typed" }] : /* istanbul ignore next */ []);
+	format(date) {
+		return formatDate(date, this.locale(), this.dateFormat());
+	}
+	allowed(date) {
+		const min = this.minDate();
+		const max = this.maxDate();
+		return (!min || compareDays(date, min) >= 0) && (!max || compareDays(date, max) <= 0) && !this.disabledDays().includes(date.getDay()) && !this.disabledDates().some((d) => sameDay(d, date)) && !this.dateDisabled()?.(date);
+	}
+	openPanel() {
+		if (!this.interactive() || this.open()) return;
+		this.open.set(true);
+		this.opened.emit();
+	}
+	closePanel(focusInput = true) {
+		if (!this.open()) return;
+		this.open.set(false);
+		if (focusInput) this.input().nativeElement.focus();
+		this.closed.emit();
+	}
+	togglePanel() {
+		if (this.open()) this.closePanel();
+		else this.openPanel();
+	}
+	onAttached() {
+		this.calendar()?.focusActive();
+	}
+	onOutsideClick(event) {
+		if (this.control().nativeElement.contains(event.target)) return;
+		this.closePanel(false);
+		this.touch.emit();
+	}
+	commitTyped() {
+		const text = this.typed();
+		if (text === this.displayText()) return;
+		const parsed = text.trim() ? this.parseText(text) : this.emptyValue();
+		if (parsed === void 0) this.revertText();
+		else this.value.set(parsed);
+	}
+	revertText() {
+		const text = this.displayText();
+		this.typed.set(text);
+		this.input().nativeElement.value = text;
+	}
+	onInputBlur() {
+		this.commitTyped();
+		if (!this.open()) this.touch.emit();
+	}
+	onInputKeydown(event) {
+		if (event.key === "ArrowDown" && (event.altKey || !this.open())) {
+			event.preventDefault();
+			this.openPanel();
+		} else if (event.key === "Enter") this.commitTyped();
+		else if (event.key === "Escape" && this.open()) {
+			event.preventDefault();
+			this.closePanel();
+		}
+	}
+	onPanelKeydown(event) {
+		if (event.key === "Escape") {
+			event.preventDefault();
+			event.stopPropagation();
+			this.closePanel();
+		}
+	}
+	today() {
+		this.pickToday(startOfDay(/* @__PURE__ */ new Date()));
+	}
+	clear() {
+		this.value.set(this.emptyValue());
+		this.closePanel();
+	}
+	focus(options) {
+		this.input().nativeElement.focus(options);
+	}
+	parseOne(text) {
+		const date = parseDate(text, this.locale());
+		return date && this.allowed(date) ? date : void 0;
+	}
+	parseDateTime(text, hours, minutes) {
+		const match = /^(.*?)[,\s]+(\d{1,2})[:.](\d{2})\s*([ap])\.?\s?m?\.?$|^(.*?)[,\s]+(\d{1,2})[:.](\d{2})$/i.exec(text.trim());
+		const date = this.parseOne(match ? match[1] ?? match[5] : text);
+		if (!date) return void 0;
+		if (!match) return atTime(date, hours, minutes);
+		let h = Number(match[2] ?? match[6]);
+		const m = Number(match[3] ?? match[7]);
+		const meridiem = match[4]?.toLowerCase();
+		if (meridiem) {
+			if (h < 1 || h > 12) return void 0;
+			h = h % 12 + (meridiem === "p" ? 12 : 0);
+		}
+		return h > 23 || m > 59 ? void 0 : atTime(date, h, m);
+	}
+	clampTime(date) {
+		const min = this.minDate();
+		const max = this.maxDate();
+		if (min && date.getTime() < min.getTime()) return new Date(min);
+		if (max && date.getTime() > max.getTime()) return new Date(max);
+		return date;
+	}
+	timeHint() {
+		return this.hourFormat() === "12" ? " hh:mm am" : " hh:mm";
+	}
+	formatDateTime(date) {
+		return formatDate(date, this.locale(), {
+			...this.dateFormat(),
+			...TIME_FORMAT,
+			hourCycle: this.hourFormat() === "12" ? "h12" : "h23"
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarDateInputBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.2.0",
+		version: "22.2.6",
+		type: StarDateInputBase,
+		isStandalone: true,
+		inputs: {
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				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
+			},
+			disabledDates: {
+				classPropertyName: "disabledDates",
+				publicName: "disabledDates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledDays: {
+				classPropertyName: "disabledDays",
+				publicName: "disabledDays",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dateDisabled: {
+				classPropertyName: "dateDisabled",
+				publicName: "dateDisabled",
+				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
+			},
+			dateFormat: {
+				classPropertyName: "dateFormat",
+				publicName: "dateFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			numberOfMonths: {
+				classPropertyName: "numberOfMonths",
+				publicName: "numberOfMonths",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showWeek: {
+				classPropertyName: "showWeek",
+				publicName: "showWeek",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hourFormat: {
+				classPropertyName: "hourFormat",
+				publicName: "hourFormat",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showButtonBar: {
+				classPropertyName: "showButtonBar",
+				publicName: "showButtonBar",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showClear: {
+				classPropertyName: "showClear",
+				publicName: "showClear",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonlyInput: {
+				classPropertyName: "readonlyInput",
+				publicName: "readonlyInput",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			touch: "touch",
+			opened: "opened",
+			closed: "closed"
+		},
+		viewQueries: [
+			{
+				propertyName: "input",
+				first: true,
+				predicate: ["input"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "control",
+				first: true,
+				predicate: ["control"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "calendar",
+				first: true,
+				predicate: StarCalendar,
+				descendants: true,
+				isSignal: true
+			}
+		],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarDateInputBase,
+	decorators: [{ type: Directive }],
+	propDecorators: {
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		minDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minDate",
+				required: false
+			}]
+		}],
+		maxDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxDate",
+				required: false
+			}]
+		}],
+		disabledDates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledDates",
+				required: false
+			}]
+		}],
+		disabledDays: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledDays",
+				required: false
+			}]
+		}],
+		dateDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dateDisabled",
+				required: false
+			}]
+		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		dateFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dateFormat",
+				required: false
+			}]
+		}],
+		numberOfMonths: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "numberOfMonths",
+				required: false
+			}]
+		}],
+		showWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showWeek",
+				required: false
+			}]
+		}],
+		hourFormat: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hourFormat",
+				required: false
+			}]
+		}],
+		showButtonBar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showButtonBar",
+				required: false
+			}]
+		}],
+		showClear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showClear",
+				required: false
+			}]
+		}],
+		readonlyInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonlyInput",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		opened: [{
+			type: i0.Output,
+			args: ["opened"]
+		}],
+		closed: [{
+			type: i0.Output,
+			args: ["closed"]
+		}],
+		input: [{
+			type: i0.ViewChild,
+			args: ["input", { isSignal: true }]
+		}],
+		control: [{
+			type: i0.ViewChild,
+			args: ["control", { isSignal: true }]
+		}],
+		calendar: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => StarCalendar), { isSignal: true }]
+		}]
+	}
+});
+function timeOf(date) {
+	const pad = (part) => String(part).padStart(2, "0");
+	return date ? `${pad(date.getHours())}:${pad(date.getMinutes())}` : "";
+}
+function withTime(date, time) {
+	const match = /^(\d{2}):(\d{2})/.exec(time);
+	return date && match ? atTime(date, Number(match[1]), Number(match[2])) : null;
+}
+const TEMPLATE = `
+  <div #control class="star-date__control" cdkOverlayOrigin #origin="cdkOverlayOrigin">
+    <input
+      #input
+      type="text"
+      class="star-date__input"
+      autocomplete="off"
+      inputmode="numeric"
+      aria-haspopup="dialog"
+      [id]="inputId()"
+      [attr.name]="name() || null"
+      [value]="typed()"
+      [attr.placeholder]="hint()"
+      [disabled]="disabled()"
+      [readOnly]="readonly() || readonlyInput()"
+      [required]="required()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-controls]="open() ? panelId : null"
+      [attr.aria-invalid]="showInvalid() || null"
+      (input)="typed.set(input.value)"
+      (click)="readonlyInput() && togglePanel()"
+      (keydown)="onInputKeydown($event)"
+      (blur)="onInputBlur()"
+    />
+    @if (showClear() && hasValue() && interactive()) {
+      <button type="button" class="star-select__icon-btn" [attr.aria-label]="text.clear" (click)="clear()">
+        <i class="ph-bold ph-x" aria-hidden="true"></i>
+      </button>
+    }
+    <button
+      type="button"
+      class="star-date__toggle"
+      [disabled]="!interactive()"
+      aria-haspopup="dialog"
+      [attr.aria-label]="text.chooseDate"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="open() ? panelId : null"
+      (click)="togglePanel()"
+    >
+      <i class="ph-bold ph-calendar-blank" aria-hidden="true"></i>
+    </button>
+  </div>
+
+  <ng-template
+    cdkConnectedOverlay
+    cdkConnectedOverlayUsePopover="inline"
+    [cdkConnectedOverlayOrigin]="origin"
+    [cdkConnectedOverlayOpen]="open()"
+    [cdkConnectedOverlayPositions]="positions"
+    (attach)="onAttached()"
+    (detach)="closePanel(false)"
+    (overlayOutsideClick)="onOutsideClick($event)"
+  >
+    <div
+      class="star-panel star-date__panel"
+      role="dialog"
+      [id]="panelId"
+      [attr.aria-label]="text.chooseDate"
+      (keydown)="onPanelKeydown($event)"
+    >
+      <star-calendar
+        [mode]="mode"
+        [selected]="calendarSelected()"
+        [range]="calendarRange()"
+        [selectedDates]="calendarDates()"
+        [granularity]="granularity()"
+        [numberOfMonths]="numberOfMonths()"
+        [showWeek]="showWeek()"
+        [minDate]="minDate()"
+        [maxDate]="maxDate()"
+        [disabledDates]="disabledDates()"
+        [disabledDays]="disabledDays()"
+        [dateDisabled]="dateDisabled()"
+        [firstDayOfWeek]="firstDayOfWeek()"
+        [locale]="locale()"
+        (dateSelect)="onDateSelect($event)"
+      />
+      @if (timeEnabled()) {
+        <div class="star-date__time">
+          @for (field of timeFields(); track field.label) {
+            <label class="star-date__time-label">
+              {{ field.label }}
+              <input
+                type="time"
+                class="star-input star-input--sm"
+                [value]="field.value"
+                [step]="timeStep()"
+                [disabled]="!field.value"
+                (change)="field.set($any($event.target).value)"
+              />
+            </label>
+          }
+          <button type="button" class="star-btn star-btn--primary star-btn--sm" (click)="closePanel()">{{ text.done }}</button>
+        </div>
+      }
+      @if (showButtonBar()) {
+        <div class="star-date__bar">
+          <button type="button" class="star-btn star-btn--ghost star-btn--sm" (click)="today()">{{ text.today }}</button>
+          <button type="button" class="star-btn star-btn--ghost star-btn--sm" (click)="clear()">{{ text.clear }}</button>
+        </div>
+      }
+    </div>
+  </ng-template>
+`;
+const HOST = {
+	class: "star-date",
+	"[class.star-date--open]": "open()",
+	"[class.star-date--disabled]": "disabled()",
+	"[class.star-date--invalid]": "showInvalid()",
+	"[class.star-date--sm]": "size() === 'sm'"
+};
+var StarDatePicker = class StarDatePicker extends StarDateInputBase {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	showTime = input(false, {
+		...ngDevMode ? { debugName: "showTime" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	stepMinute = input(1, ...ngDevMode ? [{ debugName: "stepMinute" }] : /* istanbul ignore next */ []);
+	view = input("day", ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+	dateSelect = output();
+	mode = "single";
+	timeEnabled = () => this.showTime() && this.view() === "day";
+	timeStep = () => Math.max(1, this.stepMinute()) * 60;
+	granularity = this.view;
+	hint = computed(() => {
+		if (this.placeholder()) return this.placeholder();
+		if (this.view() === "month") return "mm/yyyy";
+		if (this.view() === "year") return "yyyy";
+		return formatHint(this.locale()) + (this.showTime() ? this.timeHint() : "");
+	}, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	displayText = () => {
+		const value = this.value();
+		if (!value) return "";
+		if (this.view() === "year") return String(value.getFullYear());
+		if (this.view() === "month") return `${String(value.getMonth() + 1).padStart(2, "0")}/${value.getFullYear()}`;
+		return this.timeEnabled() ? this.formatDateTime(value) : this.format(value);
+	};
+	hasValue = computed(() => this.value() !== null, ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
+	calendarSelected = this.value;
+	calendarRange = signal(null, ...ngDevMode ? [{ debugName: "calendarRange" }] : /* istanbul ignore next */ []);
+	parseText(text) {
+		if (this.view() !== "day") return this.parsePeriod(text.trim());
+		if (!this.timeEnabled()) return this.parseOne(text);
+		const current = this.value();
+		const date = this.parseDateTime(text, current?.getHours() ?? 0, current?.getMinutes() ?? 0);
+		return date && this.clampTime(date).getTime() === date.getTime() ? date : void 0;
+	}
+	parsePeriod(text) {
+		const year = /^(\d{4})$/.exec(text);
+		const month = /^(\d{1,2})[/.\- ](\d{4})$/.exec(text);
+		const iso = /^(\d{4})-(\d{1,2})$/.exec(text);
+		let date = null;
+		if (this.view() === "year" && year) date = new Date(Number(year[1]), 0, 1);
+		else if (this.view() === "month" && month) date = new Date(Number(month[2]), Number(month[1]) - 1, 1);
+		else if (this.view() === "month" && iso) date = new Date(Number(iso[1]), Number(iso[2]) - 1, 1);
+		if (!date || date.getMonth() > 11 || Number.isNaN(date.getTime())) return void 0;
+		if (month && (Number(month[1]) < 1 || Number(month[1]) > 12)) return void 0;
+		if (iso && (Number(iso[2]) < 1 || Number(iso[2]) > 12)) return void 0;
+		return this.periodAllowed(date) ? date : void 0;
+	}
+	periodAllowed(first) {
+		const last = this.view() === "year" ? new Date(first.getFullYear(), 11, 31) : new Date(first.getFullYear(), first.getMonth() + 1, 0);
+		const min = this.minDate();
+		const max = this.maxDate();
+		return (!min || compareDays(last, min) >= 0) && (!max || compareDays(first, max) <= 0);
+	}
+	emptyValue() {
+		return null;
+	}
+	pickToday(today) {
+		if (this.view() === "month") return this.onDateSelect(new Date(today.getFullYear(), today.getMonth(), 1));
+		if (this.view() === "year") return this.onDateSelect(new Date(today.getFullYear(), 0, 1));
+		if (!this.allowed(today)) return;
+		if (!this.timeEnabled()) return this.onDateSelect(today);
+		this.setValue(this.atCurrentTime(today));
+	}
+	onDateSelect(date) {
+		if (!this.timeEnabled()) {
+			this.setValue(date);
+			this.closePanel();
+			return;
+		}
+		const current = this.value();
+		this.setValue(current ? atTime(date, current.getHours(), current.getMinutes()) : this.atCurrentTime(date));
+	}
+	timeFields() {
+		return [{
+			label: this.text.time,
+			value: timeOf(this.value()),
+			set: (time) => {
+				const next = withTime(this.value(), time);
+				if (next) this.setValue(next);
+			}
+		}];
+	}
+	atCurrentTime(date) {
+		const now = /* @__PURE__ */ new Date();
+		const step = Math.max(1, this.stepMinute());
+		return atTime(date, now.getHours(), now.getMinutes() - now.getMinutes() % step);
+	}
+	setValue(date) {
+		const next = this.timeEnabled() ? this.clampTime(date) : date;
+		this.value.set(next);
+		this.dateSelect.emit(next);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarDatePicker,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarDatePicker,
+		isStandalone: true,
+		selector: "star-date-picker",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showTime: {
+				classPropertyName: "showTime",
+				publicName: "showTime",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepMinute: {
+				classPropertyName: "stepMinute",
+				publicName: "stepMinute",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			view: {
+				classPropertyName: "view",
+				publicName: "view",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			dateSelect: "dateSelect"
+		},
+		host: {
+			properties: {
+				"class.star-date--open": "open()",
+				"class.star-date--disabled": "disabled()",
+				"class.star-date--invalid": "showInvalid()",
+				"class.star-date--sm": "size() === 'sm'"
+			},
+			classAttribute: "star-date"
+		},
+		usesInheritance: true,
+		ngImport: i0,
+		template: "\n  <div #control class=\"star-date__control\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #input\n      type=\"text\"\n      class=\"star-date__input\"\n      autocomplete=\"off\"\n      inputmode=\"numeric\"\n      aria-haspopup=\"dialog\"\n      [id]=\"inputId()\"\n      [attr.name]=\"name() || null\"\n      [value]=\"typed()\"\n      [attr.placeholder]=\"hint()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly() || readonlyInput()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-controls]=\"open() ? panelId : null\"\n      [attr.aria-invalid]=\"showInvalid() || null\"\n      (input)=\"typed.set(input.value)\"\n      (click)=\"readonlyInput() && togglePanel()\"\n      (keydown)=\"onInputKeydown($event)\"\n      (blur)=\"onInputBlur()\"\n    />\n    @if (showClear() && hasValue() && interactive()) {\n      <button type=\"button\" class=\"star-select__icon-btn\" [attr.aria-label]=\"text.clear\" (click)=\"clear()\">\n        <i class=\"ph-bold ph-x\" aria-hidden=\"true\"></i>\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"star-date__toggle\"\n      [disabled]=\"!interactive()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-label]=\"text.chooseDate\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? panelId : null\"\n      (click)=\"togglePanel()\"\n    >\n      <i class=\"ph-bold ph-calendar-blank\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayUsePopover=\"inline\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    (attach)=\"onAttached()\"\n    (detach)=\"closePanel(false)\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n  >\n    <div\n      class=\"star-panel star-date__panel\"\n      role=\"dialog\"\n      [id]=\"panelId\"\n      [attr.aria-label]=\"text.chooseDate\"\n      (keydown)=\"onPanelKeydown($event)\"\n    >\n      <star-calendar\n        [mode]=\"mode\"\n        [selected]=\"calendarSelected()\"\n        [range]=\"calendarRange()\"\n        [selectedDates]=\"calendarDates()\"\n        [granularity]=\"granularity()\"\n        [numberOfMonths]=\"numberOfMonths()\"\n        [showWeek]=\"showWeek()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabledDates]=\"disabledDates()\"\n        [disabledDays]=\"disabledDays()\"\n        [dateDisabled]=\"dateDisabled()\"\n        [firstDayOfWeek]=\"firstDayOfWeek()\"\n        [locale]=\"locale()\"\n        (dateSelect)=\"onDateSelect($event)\"\n      />\n      @if (timeEnabled()) {\n        <div class=\"star-date__time\">\n          @for (field of timeFields(); track field.label) {\n            <label class=\"star-date__time-label\">\n              {{ field.label }}\n              <input\n                type=\"time\"\n                class=\"star-input star-input--sm\"\n                [value]=\"field.value\"\n                [step]=\"timeStep()\"\n                [disabled]=\"!field.value\"\n                (change)=\"field.set($any($event.target).value)\"\n              />\n            </label>\n          }\n          <button type=\"button\" class=\"star-btn star-btn--primary star-btn--sm\" (click)=\"closePanel()\">{{ text.done }}</button>\n        </div>\n      }\n      @if (showButtonBar()) {\n        <div class=\"star-date__bar\">\n          <button type=\"button\" class=\"star-btn star-btn--ghost star-btn--sm\" (click)=\"today()\">{{ text.today }}</button>\n          <button type=\"button\" class=\"star-btn star-btn--ghost star-btn--sm\" (click)=\"clear()\">{{ text.clear }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n",
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				kind: "component",
+				type: StarCalendar,
+				selector: "star-calendar",
+				inputs: [
+					"mode",
+					"selected",
+					"selectedDates",
+					"granularity",
+					"numberOfMonths",
+					"showWeek",
+					"range",
+					"minDate",
+					"maxDate",
+					"disabledDates",
+					"disabledDays",
+					"dateDisabled",
+					"firstDayOfWeek",
+					"locale"
+				],
+				outputs: ["dateSelect"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarDatePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-date-picker",
+			imports: [
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				StarCalendar
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: HOST,
+			template: TEMPLATE
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		showTime: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showTime",
+				required: false
+			}]
+		}],
+		stepMinute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepMinute",
+				required: false
+			}]
+		}],
+		view: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "view",
+				required: false
+			}]
+		}],
+		dateSelect: [{
+			type: i0.Output,
+			args: ["dateSelect"]
+		}]
+	}
+});
+var StarDateRangePicker = class StarDateRangePicker extends StarDateInputBase {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	showTime = input(false, {
+		...ngDevMode ? { debugName: "showTime" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	stepMinute = input(1, ...ngDevMode ? [{ debugName: "stepMinute" }] : /* istanbul ignore next */ []);
+	rangeSelect = output();
+	mode = "range";
+	timeEnabled = this.showTime;
+	timeStep = () => Math.max(1, this.stepMinute()) * 60;
+	hint = computed(() => this.placeholder() ?? formatHint(this.locale()) + (this.showTime() ? this.timeHint() : ""), ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	show = (date) => this.showTime() ? this.formatDateTime(date) : this.format(date);
+	timeFields() {
+		const range = this.value();
+		const update = (edge) => (time) => {
+			const current = this.value();
+			const next = withTime(current?.[edge], time);
+			if (!current?.start || !next) return;
+			const changed = {
+				...current,
+				[edge]: this.clampTime(next)
+			};
+			if (changed.end && changed.start && changed.end.getTime() < changed.start.getTime()) return;
+			this.value.set(changed);
+			if (changed.end) this.rangeSelect.emit(changed);
+		};
+		return [{
+			label: this.text.startTime,
+			value: timeOf(range?.start),
+			set: update("start")
+		}, {
+			label: this.text.endTime,
+			value: timeOf(range?.end),
+			set: update("end")
+		}];
+	}
+	hasValue = computed(() => !!this.value()?.start, ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
+	calendarSelected = signal(null, ...ngDevMode ? [{ debugName: "calendarSelected" }] : /* istanbul ignore next */ []);
+	calendarRange = this.value;
+	displayText = () => {
+		const range = this.value();
+		if (!range?.start) return "";
+		return range.end ? `${this.show(range.start)} – ${this.show(range.end)}` : `${this.show(range.start)} – `;
+	};
+	parseText(text) {
+		const parts = text.split(/\s+[–—-]\s*|\s+to\s+/i).filter((part) => part.trim());
+		if (parts.length !== 2) return void 0;
+		if (this.showTime()) {
+			const from = this.parseDateTime(parts[0], 0, 0);
+			const to = this.parseDateTime(parts[1], 23, 59);
+			if (!from || !to) return void 0;
+			return from.getTime() <= to.getTime() ? {
+				start: from,
+				end: to
+			} : {
+				start: to,
+				end: from
+			};
+		}
+		const start = this.parseOne(parts[0]);
+		const end = this.parseOne(parts[1]);
+		if (!start || !end) return void 0;
+		return compareDays(start, end) <= 0 ? {
+			start,
+			end
+		} : {
+			start: end,
+			end: start
+		};
+	}
+	emptyValue() {
+		return null;
+	}
+	pickToday(today) {
+		if (!this.allowed(today)) return;
+		if (this.showTime()) {
+			this.value.set({
+				start: this.clampTime(atTime(today, 0, 0)),
+				end: this.clampTime(atTime(today, 23, 59))
+			});
+			return;
+		}
+		this.value.set({
+			start: today,
+			end: today
+		});
+		this.closePanel();
+	}
+	onDateSelect(date) {
+		const range = this.value();
+		if (!range?.start || range.end) {
+			this.value.set({
+				start: this.showTime() ? this.clampTime(atTime(date, 0, 0)) : date,
+				end: null
+			});
+			return;
+		}
+		const [first, last] = compareDays(date, range.start) < 0 ? [date, range.start] : [range.start, date];
+		const next = this.showTime() ? {
+			start: this.clampTime(atTime(first, 0, 0)),
+			end: this.clampTime(atTime(last, 23, 59))
+		} : {
+			start: first,
+			end: last
+		};
+		this.value.set(next);
+		this.rangeSelect.emit(next);
+		if (!this.showTime()) this.closePanel();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarDateRangePicker,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarDateRangePicker,
+		isStandalone: true,
+		selector: "star-date-range-picker",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showTime: {
+				classPropertyName: "showTime",
+				publicName: "showTime",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepMinute: {
+				classPropertyName: "stepMinute",
+				publicName: "stepMinute",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			rangeSelect: "rangeSelect"
+		},
+		host: {
+			properties: {
+				"class.star-date--open": "open()",
+				"class.star-date--disabled": "disabled()",
+				"class.star-date--invalid": "showInvalid()",
+				"class.star-date--sm": "size() === 'sm'"
+			},
+			classAttribute: "star-date star-date--range"
+		},
+		usesInheritance: true,
+		ngImport: i0,
+		template: "\n  <div #control class=\"star-date__control\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #input\n      type=\"text\"\n      class=\"star-date__input\"\n      autocomplete=\"off\"\n      inputmode=\"numeric\"\n      aria-haspopup=\"dialog\"\n      [id]=\"inputId()\"\n      [attr.name]=\"name() || null\"\n      [value]=\"typed()\"\n      [attr.placeholder]=\"hint()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly() || readonlyInput()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-controls]=\"open() ? panelId : null\"\n      [attr.aria-invalid]=\"showInvalid() || null\"\n      (input)=\"typed.set(input.value)\"\n      (click)=\"readonlyInput() && togglePanel()\"\n      (keydown)=\"onInputKeydown($event)\"\n      (blur)=\"onInputBlur()\"\n    />\n    @if (showClear() && hasValue() && interactive()) {\n      <button type=\"button\" class=\"star-select__icon-btn\" [attr.aria-label]=\"text.clear\" (click)=\"clear()\">\n        <i class=\"ph-bold ph-x\" aria-hidden=\"true\"></i>\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"star-date__toggle\"\n      [disabled]=\"!interactive()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-label]=\"text.chooseDate\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? panelId : null\"\n      (click)=\"togglePanel()\"\n    >\n      <i class=\"ph-bold ph-calendar-blank\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayUsePopover=\"inline\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    (attach)=\"onAttached()\"\n    (detach)=\"closePanel(false)\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n  >\n    <div\n      class=\"star-panel star-date__panel\"\n      role=\"dialog\"\n      [id]=\"panelId\"\n      [attr.aria-label]=\"text.chooseDate\"\n      (keydown)=\"onPanelKeydown($event)\"\n    >\n      <star-calendar\n        [mode]=\"mode\"\n        [selected]=\"calendarSelected()\"\n        [range]=\"calendarRange()\"\n        [selectedDates]=\"calendarDates()\"\n        [granularity]=\"granularity()\"\n        [numberOfMonths]=\"numberOfMonths()\"\n        [showWeek]=\"showWeek()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabledDates]=\"disabledDates()\"\n        [disabledDays]=\"disabledDays()\"\n        [dateDisabled]=\"dateDisabled()\"\n        [firstDayOfWeek]=\"firstDayOfWeek()\"\n        [locale]=\"locale()\"\n        (dateSelect)=\"onDateSelect($event)\"\n      />\n      @if (timeEnabled()) {\n        <div class=\"star-date__time\">\n          @for (field of timeFields(); track field.label) {\n            <label class=\"star-date__time-label\">\n              {{ field.label }}\n              <input\n                type=\"time\"\n                class=\"star-input star-input--sm\"\n                [value]=\"field.value\"\n                [step]=\"timeStep()\"\n                [disabled]=\"!field.value\"\n                (change)=\"field.set($any($event.target).value)\"\n              />\n            </label>\n          }\n          <button type=\"button\" class=\"star-btn star-btn--primary star-btn--sm\" (click)=\"closePanel()\">{{ text.done }}</button>\n        </div>\n      }\n      @if (showButtonBar()) {\n        <div class=\"star-date__bar\">\n          <button type=\"button\" class=\"star-btn star-btn--ghost star-btn--sm\" (click)=\"today()\">{{ text.today }}</button>\n          <button type=\"button\" class=\"star-btn star-btn--ghost star-btn--sm\" (click)=\"clear()\">{{ text.clear }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n",
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				kind: "component",
+				type: StarCalendar,
+				selector: "star-calendar",
+				inputs: [
+					"mode",
+					"selected",
+					"selectedDates",
+					"granularity",
+					"numberOfMonths",
+					"showWeek",
+					"range",
+					"minDate",
+					"maxDate",
+					"disabledDates",
+					"disabledDays",
+					"dateDisabled",
+					"firstDayOfWeek",
+					"locale"
+				],
+				outputs: ["dateSelect"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarDateRangePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-date-range-picker",
+			imports: [
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				StarCalendar
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				...HOST,
+				class: "star-date star-date--range"
+			},
+			template: TEMPLATE
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		showTime: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showTime",
+				required: false
+			}]
+		}],
+		stepMinute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepMinute",
+				required: false
+			}]
+		}],
+		rangeSelect: [{
+			type: i0.Output,
+			args: ["rangeSelect"]
+		}]
+	}
+});
+var StarMultiDatePicker = class StarMultiDatePicker extends StarDateInputBase {
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	maxDates = input(0, ...ngDevMode ? [{ debugName: "maxDates" }] : /* istanbul ignore next */ []);
+	mode = "multiple";
+	hasValue = computed(() => this.value().length > 0, ...ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []);
+	calendarSelected = signal(null, ...ngDevMode ? [{ debugName: "calendarSelected" }] : /* istanbul ignore next */ []);
+	calendarRange = signal(null, ...ngDevMode ? [{ debugName: "calendarRange" }] : /* istanbul ignore next */ []);
+	calendarDates = this.value;
+	displayText = () => this.value().map((date) => this.format(date)).join(", ");
+	parseText(text) {
+		const dates = [];
+		for (const part of text.split(/\s*[,;]\s*/).filter((item) => item.trim())) {
+			const date = this.parseOne(part);
+			if (!date) return void 0;
+			if (!dates.some((day) => sameDay(day, date))) dates.push(date);
+		}
+		if (this.maxDates() > 0 && dates.length > this.maxDates()) return void 0;
+		return dates.sort((a, b) => a.getTime() - b.getTime());
+	}
+	emptyValue() {
+		return [];
+	}
+	pickToday(today) {
+		if (this.allowed(today) && !this.value().some((day) => sameDay(day, today))) this.onDateSelect(today);
+	}
+	onDateSelect(date) {
+		const days = this.value();
+		if (days.some((day) => sameDay(day, date))) this.value.set(days.filter((day) => !sameDay(day, date)));
+		else if (this.maxDates() <= 0 || days.length < this.maxDates()) this.value.set([...days, date].sort((a, b) => a.getTime() - b.getTime()));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarMultiDatePicker,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.6",
+		type: StarMultiDatePicker,
+		isStandalone: true,
+		selector: "star-multi-date-picker",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxDates: {
+				classPropertyName: "maxDates",
+				publicName: "maxDates",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			properties: {
+				"class.star-date--open": "open()",
+				"class.star-date--disabled": "disabled()",
+				"class.star-date--invalid": "showInvalid()",
+				"class.star-date--sm": "size() === 'sm'"
+			},
+			classAttribute: "star-date star-date--multiple"
+		},
+		usesInheritance: true,
+		ngImport: i0,
+		template: "\n  <div #control class=\"star-date__control\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n    <input\n      #input\n      type=\"text\"\n      class=\"star-date__input\"\n      autocomplete=\"off\"\n      inputmode=\"numeric\"\n      aria-haspopup=\"dialog\"\n      [id]=\"inputId()\"\n      [attr.name]=\"name() || null\"\n      [value]=\"typed()\"\n      [attr.placeholder]=\"hint()\"\n      [disabled]=\"disabled()\"\n      [readOnly]=\"readonly() || readonlyInput()\"\n      [required]=\"required()\"\n      [attr.aria-label]=\"ariaLabel()\"\n      [attr.aria-controls]=\"open() ? panelId : null\"\n      [attr.aria-invalid]=\"showInvalid() || null\"\n      (input)=\"typed.set(input.value)\"\n      (click)=\"readonlyInput() && togglePanel()\"\n      (keydown)=\"onInputKeydown($event)\"\n      (blur)=\"onInputBlur()\"\n    />\n    @if (showClear() && hasValue() && interactive()) {\n      <button type=\"button\" class=\"star-select__icon-btn\" [attr.aria-label]=\"text.clear\" (click)=\"clear()\">\n        <i class=\"ph-bold ph-x\" aria-hidden=\"true\"></i>\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"star-date__toggle\"\n      [disabled]=\"!interactive()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-label]=\"text.chooseDate\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-controls]=\"open() ? panelId : null\"\n      (click)=\"togglePanel()\"\n    >\n      <i class=\"ph-bold ph-calendar-blank\" aria-hidden=\"true\"></i>\n    </button>\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayUsePopover=\"inline\"\n    [cdkConnectedOverlayOrigin]=\"origin\"\n    [cdkConnectedOverlayOpen]=\"open()\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    (attach)=\"onAttached()\"\n    (detach)=\"closePanel(false)\"\n    (overlayOutsideClick)=\"onOutsideClick($event)\"\n  >\n    <div\n      class=\"star-panel star-date__panel\"\n      role=\"dialog\"\n      [id]=\"panelId\"\n      [attr.aria-label]=\"text.chooseDate\"\n      (keydown)=\"onPanelKeydown($event)\"\n    >\n      <star-calendar\n        [mode]=\"mode\"\n        [selected]=\"calendarSelected()\"\n        [range]=\"calendarRange()\"\n        [selectedDates]=\"calendarDates()\"\n        [granularity]=\"granularity()\"\n        [numberOfMonths]=\"numberOfMonths()\"\n        [showWeek]=\"showWeek()\"\n        [minDate]=\"minDate()\"\n        [maxDate]=\"maxDate()\"\n        [disabledDates]=\"disabledDates()\"\n        [disabledDays]=\"disabledDays()\"\n        [dateDisabled]=\"dateDisabled()\"\n        [firstDayOfWeek]=\"firstDayOfWeek()\"\n        [locale]=\"locale()\"\n        (dateSelect)=\"onDateSelect($event)\"\n      />\n      @if (timeEnabled()) {\n        <div class=\"star-date__time\">\n          @for (field of timeFields(); track field.label) {\n            <label class=\"star-date__time-label\">\n              {{ field.label }}\n              <input\n                type=\"time\"\n                class=\"star-input star-input--sm\"\n                [value]=\"field.value\"\n                [step]=\"timeStep()\"\n                [disabled]=\"!field.value\"\n                (change)=\"field.set($any($event.target).value)\"\n              />\n            </label>\n          }\n          <button type=\"button\" class=\"star-btn star-btn--primary star-btn--sm\" (click)=\"closePanel()\">{{ text.done }}</button>\n        </div>\n      }\n      @if (showButtonBar()) {\n        <div class=\"star-date__bar\">\n          <button type=\"button\" class=\"star-btn star-btn--ghost star-btn--sm\" (click)=\"today()\">{{ text.today }}</button>\n          <button type=\"button\" class=\"star-btn star-btn--ghost star-btn--sm\" (click)=\"clear()\">{{ text.clear }}</button>\n        </div>\n      }\n    </div>\n  </ng-template>\n",
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				kind: "component",
+				type: StarCalendar,
+				selector: "star-calendar",
+				inputs: [
+					"mode",
+					"selected",
+					"selectedDates",
+					"granularity",
+					"numberOfMonths",
+					"showWeek",
+					"range",
+					"minDate",
+					"maxDate",
+					"disabledDates",
+					"disabledDays",
+					"dateDisabled",
+					"firstDayOfWeek",
+					"locale"
+				],
+				outputs: ["dateSelect"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarMultiDatePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-multi-date-picker",
+			imports: [
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				StarCalendar
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				...HOST,
+				class: "star-date star-date--multiple"
+			},
+			template: TEMPLATE
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		maxDates: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxDates",
+				required: false
+			}]
+		}]
+	}
+});
+var StarTimePicker = class StarTimePicker {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	min = input(void 0, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+	max = input(void 0, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	stepMinute = input(1, ...ngDevMode ? [{ debugName: "stepMinute" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	inputId = input(inject(_IdGenerator).getId("star-time-"), ...ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	step = computed(() => Math.max(1, this.stepMinute()) * 60, ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
+	input = viewChild.required("input", ...ngDevMode ? [{ debugName: "input" }] : /* istanbul ignore next */ []);
+	onChange(text) {
+		const match = /^(\d{2}):(\d{2})/.exec(text);
+		this.value.set(match ? `${match[1]}:${match[2]}` : null);
+	}
+	focus(options) {
+		this.input().nativeElement.focus(options);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.6",
+		ngImport: i0,
+		type: StarTimePicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.6",
+		type: StarTimePicker,
+		isStandalone: true,
+		selector: "star-time-picker",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			min: {
+				classPropertyName: "min",
+				publicName: "min",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepMinute: {
+				classPropertyName: "stepMinute",
+				publicName: "stepMinute",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			inputId: {
+				classPropertyName: "inputId",
+				publicName: "inputId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: { classAttribute: "star-time" },
+		viewQueries: [{
+			propertyName: "input",
+			first: true,
+			predicate: ["input"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <input
+      #input
+      type="time"
+      class="star-input"
+      [class.star-input--sm]="size() === 'sm'"
+      [id]="inputId()"
+      [attr.name]="name() || null"
+      [value]="value() ?? ''"
+      [attr.min]="min() ?? null"
+      [attr.max]="max() ?? null"
+      [step]="step()"
+      [disabled]="disabled()"
+      [readOnly]="readonly()"
+      [required]="required()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-invalid]="(invalid() && touched()) || null"
+      (change)="onChange(input.value)"
+      (blur)="touch.emit()"
+    />
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.6",
+	ngImport: i0,
+	type: StarTimePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "star-time-picker",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "star-time" },
+			template: `
+    <input
+      #input
+      type="time"
+      class="star-input"
+      [class.star-input--sm]="size() === 'sm'"
+      [id]="inputId()"
+      [attr.name]="name() || null"
+      [value]="value() ?? ''"
+      [attr.min]="min() ?? null"
+      [attr.max]="max() ?? null"
+      [step]="step()"
+      [disabled]="disabled()"
+      [readOnly]="readonly()"
+      [required]="required()"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-invalid]="(invalid() && touched()) || null"
+      (change)="onChange(input.value)"
+      (blur)="touch.emit()"
+    />
+  `
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		stepMinute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepMinute",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		inputId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "inputId",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		input: [{
+			type: i0.ViewChild,
+			args: ["input", { isSignal: true }]
+		}]
+	}
+});
+export { DEFAULT_DATE_FORMAT, StarCalendar, StarDateInputBase, StarDatePicker, StarDateRangePicker, StarMultiDatePicker, StarTimePicker, addDays, addMonths, compareDays, formatDate, formatHint, isoDay, isoWeek, localeFirstDay, monthGrid, parseDate, sameDay, sameMonth, startOfDay };
+
+//# sourceMappingURL=star-ng-ui-date-picker.mjs.map