@masmarino/gabarit 1.4.0 → 2.1.0

package/fesm2022/masmarino-gabarit-date-picker.mjs

@@ -0,0 +1,1238 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, Injector, afterNextRender, booleanAttribute, computed, forwardRef, inject, input, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { Icon } from "@masmarino/gabarit/icon";
+import { floatingPanelAnchor } from "@masmarino/gabarit/floating-panel";
+function isSameDay(a, b) {
+	return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function addMonths(date, delta) {
+	const day = date.getDate();
+	const firstOfTarget = new Date(date.getFullYear(), date.getMonth() + delta, 1);
+	const daysInTarget = new Date(firstOfTarget.getFullYear(), firstOfTarget.getMonth() + 1, 0).getDate();
+	return new Date(firstOfTarget.getFullYear(), firstOfTarget.getMonth(), Math.min(day, daysInTarget));
+}
+function addYears(date, delta) {
+	return addMonths(date, delta * 12);
+}
+function shiftDays(date, delta) {
+	return new Date(date.getFullYear(), date.getMonth(), date.getDate() + delta);
+}
+function startOfWeek(date, weekStartsOn) {
+	const diff = (date.getDay() - weekStartsOn + 7) % 7;
+	const result = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+	result.setDate(result.getDate() - diff);
+	return result;
+}
+function endOfWeek(date, weekStartsOn) {
+	const start = startOfWeek(date, weekStartsOn);
+	start.setDate(start.getDate() + 6);
+	return start;
+}
+function buildCalendarGrid(year, month, weekStartsOn) {
+	const gridStart = startOfWeek(new Date(year, month, 1), weekStartsOn);
+	const today = /* @__PURE__ */ new Date();
+	const days = [];
+	for (let i = 0; i < 42; i++) {
+		const date = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i);
+		days.push({
+			date,
+			inCurrentMonth: date.getMonth() === month,
+			isToday: isSameDay(date, today)
+		});
+	}
+	return days;
+}
+function weekdayLabels(locale, weekStartsOn) {
+	const formatter = new Intl.DateTimeFormat(locale, { weekday: "short" });
+	const reference = new Date(2024, 0, 7 + weekStartsOn);
+	return Array.from({ length: 7 }, (_, i) => {
+		const date = new Date(reference.getFullYear(), reference.getMonth(), reference.getDate() + i);
+		return formatter.format(date);
+	});
+}
+var CalendarPanel = class {
+	deps;
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	anchorDate = signal(/* @__PURE__ */ new Date(), ...ngDevMode ? [{ debugName: "anchorDate" }] : /* istanbul ignore next */ []);
+	focusedDate = signal(/* @__PURE__ */ new Date(), ...ngDevMode ? [{ debugName: "focusedDate" }] : /* istanbul ignore next */ []);
+	panelStyle = signal(null, ...ngDevMode ? [{ debugName: "panelStyle" }] : /* istanbul ignore next */ []);
+	monthViews = computed(() => {
+		const anchor = this.anchorDate();
+		const count = this.deps.visibleMonths();
+		const formatter = new Intl.DateTimeFormat(this.deps.locale(), {
+			month: "long",
+			year: "numeric"
+		});
+		const views = Array.from({ length: count }, (_, i) => {
+			const monthDate = new Date(anchor.getFullYear(), anchor.getMonth() + i, 1);
+			const year = monthDate.getFullYear();
+			const month = monthDate.getMonth();
+			const days = buildCalendarGrid(year, month, this.deps.weekStartsOn());
+			const weeks = [];
+			for (let d = 0; d < days.length; d += 7) weeks.push(days.slice(d, d + 7));
+			return {
+				year,
+				month,
+				label: formatter.format(monthDate),
+				weeks
+			};
+		});
+		const neededWeeks = views.map((view) => {
+			let last = view.weeks.length;
+			while (last > 1 && view.weeks[last - 1].every((day) => !day.inCurrentMonth)) last--;
+			return last;
+		});
+		const sharedWeeks = Math.max(...neededWeeks);
+		return views.map((view) => ({
+			...view,
+			weeks: view.weeks.slice(0, sharedWeeks)
+		}));
+	}, ...ngDevMode ? [{ debugName: "monthViews" }] : /* istanbul ignore next */ []);
+	panelLabel = computed(() => {
+		const views = this.monthViews();
+		return views.length === 1 ? views[0].label : `${views[0].label} – ${views[views.length - 1].label}`;
+	}, ...ngDevMode ? [{ debugName: "panelLabel" }] : /* istanbul ignore next */ []);
+	weekdayLabels = computed(() => weekdayLabels(this.deps.locale(), this.deps.weekStartsOn()), ...ngDevMode ? [{ debugName: "weekdayLabels" }] : /* istanbul ignore next */ []);
+	monthOptions = computed(() => {
+		const formatter = new Intl.DateTimeFormat(this.deps.locale(), { month: "long" });
+		return Array.from({ length: 12 }, (_, i) => ({
+			value: i,
+			label: formatter.format(new Date(2024, i, 1))
+		}));
+	}, ...ngDevMode ? [{ debugName: "monthOptions" }] : /* istanbul ignore next */ []);
+	yearOptions = computed(() => {
+		const min = this.deps.minYear();
+		const max = this.deps.maxYear();
+		return Array.from({ length: max - min + 1 }, (_, i) => min + i);
+	}, ...ngDevMode ? [{ debugName: "yearOptions" }] : /* istanbul ignore next */ []);
+	constructor(deps) {
+		this.deps = deps;
+	}
+	cellId(date) {
+		return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+	}
+	isFocused(date) {
+		return isSameDay(this.focusedDate(), date);
+	}
+	toggle(onOpen) {
+		this.open.update((value) => !value);
+		if (this.open()) {
+			const target = onOpen();
+			this.focusedDate.set(target);
+			this.anchorDate.set(new Date(target.getFullYear(), target.getMonth(), 1));
+			this.updatePanelPosition();
+			this.focusCellAfterRender();
+		} else this.deps.onTouched();
+	}
+	close(returnFocus) {
+		if (!this.open()) return;
+		this.open.set(false);
+		this.deps.onTouched();
+		if (returnFocus) this.trigger()?.focus();
+	}
+	shiftMonth(delta) {
+		this.anchorDate.set(addMonths(this.anchorDate(), delta));
+		this.focusedDate.set(addMonths(this.focusedDate(), delta));
+		this.updatePanelPosition();
+		this.focusCellAfterRender();
+	}
+	onMonthSelect(value) {
+		this.setAnchorMonth(this.anchorDate().getFullYear(), Number(value));
+	}
+	onYearSelect(value) {
+		this.setAnchorMonth(Number(value), this.anchorDate().getMonth());
+	}
+	setAnchorMonth(year, month) {
+		const dayOfMonth = this.focusedDate().getDate();
+		const daysInTarget = new Date(year, month + 1, 0).getDate();
+		this.anchorDate.set(new Date(year, month, 1));
+		this.focusedDate.set(new Date(year, month, Math.min(dayOfMonth, daysInTarget)));
+		this.updatePanelPosition();
+		this.focusCellAfterRender();
+	}
+	handleNavigationKeydown(event) {
+		const current = this.focusedDate();
+		if (event.key === "PageDown" || event.key === "PageUp") {
+			event.preventDefault();
+			const delta = event.key === "PageDown" ? 1 : -1;
+			if (event.shiftKey) {
+				this.anchorDate.set(addYears(this.anchorDate(), delta));
+				this.focusedDate.set(addYears(current, delta));
+			} else {
+				this.anchorDate.set(addMonths(this.anchorDate(), delta));
+				this.focusedDate.set(addMonths(current, delta));
+			}
+			this.updatePanelPosition();
+			this.focusCellAfterRender();
+			return "month-changed";
+		}
+		const next = this.nextFocusedDate(current, event);
+		if (next === null) return "unhandled";
+		event.preventDefault();
+		this.ensureVisible(next);
+		this.focusedDate.set(next);
+		this.focusCellAfterRender();
+		return "day-changed";
+	}
+	nextFocusedDate(current, event) {
+		switch (event.key) {
+			case "ArrowRight": return shiftDays(current, 1);
+			case "ArrowLeft": return shiftDays(current, -1);
+			case "ArrowDown": return shiftDays(current, 7);
+			case "ArrowUp": return shiftDays(current, -7);
+			case "Home": return startOfWeek(current, this.deps.weekStartsOn());
+			case "End": return endOfWeek(current, this.deps.weekStartsOn());
+			default: return null;
+		}
+	}
+	ensureVisible(date) {
+		const anchor = this.anchorDate();
+		const visibleMonths = this.deps.visibleMonths();
+		const monthsDiff = (date.getFullYear() - anchor.getFullYear()) * 12 + (date.getMonth() - anchor.getMonth());
+		if (monthsDiff < 0) this.anchorDate.set(new Date(date.getFullYear(), date.getMonth(), 1));
+		else if (monthsDiff >= visibleMonths) this.anchorDate.set(addMonths(anchor, monthsDiff - visibleMonths + 1));
+	}
+	onEscape(event) {
+		if (event.key === "Escape" && this.open()) {
+			event.preventDefault();
+			event.stopPropagation();
+			this.close(true);
+		}
+	}
+	handleClickOutside(event) {
+		if (this.open() && !this.deps.elementRef.nativeElement.contains(event.target)) this.close(false);
+	}
+	updatePanelPosition() {
+		const anchor = floatingPanelAnchor(this.open(), this.trigger());
+		if (anchor) this.panelStyle.set({
+			top: `${anchor.bottom}px`,
+			left: `${anchor.left}px`
+		});
+	}
+	trigger() {
+		return this.deps.elementRef.nativeElement.querySelector(this.deps.triggerSelector);
+	}
+	focusCellAfterRender() {
+		afterNextRender(() => {
+			const id = this.cellId(this.focusedDate());
+			this.deps.elementRef.nativeElement.querySelector(`[data-date="${id}"]`)?.focus();
+		}, { injector: this.deps.injector });
+	}
+};
+let nextDatePickerId = 0;
+const CURRENT_YEAR$1 = (/* @__PURE__ */ new Date()).getFullYear();
+var DatePicker = class DatePicker {
+	elementRef = inject(ElementRef);
+	injector = inject(Injector);
+	id = input(`gbt-date-picker-${++nextDatePickerId}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	placeholder = input("Select a date…", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	locale = input("en-US", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	weekStartsOn = input(1, ...ngDevMode ? [{ debugName: "weekStartsOn" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	errorMessage = input(null, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	previousMonthLabel = input("Previous month", ...ngDevMode ? [{ debugName: "previousMonthLabel" }] : /* istanbul ignore next */ []);
+	nextMonthLabel = input("Next month", ...ngDevMode ? [{ debugName: "nextMonthLabel" }] : /* istanbul ignore next */ []);
+	clearable = input(false, {
+		...ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	clearLabel = input("Clear date", ...ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []);
+	visibleMonths = input(1, ...ngDevMode ? [{ debugName: "visibleMonths" }] : /* istanbul ignore next */ []);
+	monthSelectLabel = input("Month", ...ngDevMode ? [{ debugName: "monthSelectLabel" }] : /* istanbul ignore next */ []);
+	yearSelectLabel = input("Year", ...ngDevMode ? [{ debugName: "yearSelectLabel" }] : /* istanbul ignore next */ []);
+	minYear = input(CURRENT_YEAR$1 - 100, ...ngDevMode ? [{ debugName: "minYear" }] : /* istanbul ignore next */ []);
+	maxYear = input(CURRENT_YEAR$1 + 10, ...ngDevMode ? [{ debugName: "maxYear" }] : /* istanbul ignore next */ []);
+	panel = new CalendarPanel({
+		elementRef: this.elementRef,
+		injector: this.injector,
+		triggerSelector: ".gbt-date-picker__trigger",
+		locale: () => this.locale(),
+		weekStartsOn: () => this.weekStartsOn(),
+		visibleMonths: () => this.visibleMonths(),
+		minYear: () => this.minYear(),
+		maxYear: () => this.maxYear(),
+		onTouched: () => this.onTouched()
+	});
+	open = this.panel.open;
+	selected = signal(null, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	focusedDate = this.panel.focusedDate;
+	anchorDate = this.panel.anchorDate;
+	panelStyle = this.panel.panelStyle;
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	showClear = computed(() => this.clearable() && this.selected() !== null && !this.isDisabled(), ...ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []);
+	monthViews = this.panel.monthViews;
+	panelLabel = this.panel.panelLabel;
+	weekdayLabels = this.panel.weekdayLabels;
+	monthOptions = this.panel.monthOptions;
+	yearOptions = this.panel.yearOptions;
+	triggerLabel = computed(() => {
+		const value = this.selected();
+		return value ? new Intl.DateTimeFormat(this.locale(), { dateStyle: "medium" }).format(value) : "";
+	}, ...ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []);
+	writeValue(value) {
+		this.selected.set(value);
+		if (value) {
+			this.focusedDate.set(value);
+			this.anchorDate.set(new Date(value.getFullYear(), value.getMonth(), 1));
+		}
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	isSelected(date) {
+		const value = this.selected();
+		return value !== null && isSameDay(value, date);
+	}
+	isFocused(date) {
+		return this.panel.isFocused(date);
+	}
+	cellId(date) {
+		return this.panel.cellId(date);
+	}
+	toggleOpen() {
+		if (this.isDisabled()) return;
+		this.panel.toggle(() => this.selected() ?? /* @__PURE__ */ new Date());
+	}
+	close(returnFocus) {
+		this.panel.close(returnFocus);
+	}
+	clear(event) {
+		event.stopPropagation();
+		if (this.isDisabled()) return;
+		this.selected.set(null);
+		this.onChange(null);
+		this.onTouched();
+		this.panel.close(false);
+	}
+	selectDay(day) {
+		if (this.isDisabled()) return;
+		this.selected.set(day.date);
+		this.focusedDate.set(day.date);
+		this.panel.ensureVisible(day.date);
+		this.onChange(day.date);
+		this.panel.close(true);
+	}
+	shiftMonth(delta) {
+		this.panel.shiftMonth(delta);
+	}
+	onMonthSelect(value) {
+		this.panel.onMonthSelect(value);
+	}
+	onYearSelect(value) {
+		this.panel.onYearSelect(value);
+	}
+	onGridKeydown(event) {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			const current = this.focusedDate();
+			this.selectDay({
+				date: current,
+				inCurrentMonth: true,
+				isToday: isSameDay(current, /* @__PURE__ */ new Date())
+			});
+			return;
+		}
+		this.panel.handleNavigationKeydown(event);
+	}
+	onEscape(event) {
+		this.panel.onEscape(event);
+	}
+	handleClickOutside(event) {
+		this.panel.handleClickOutside(event);
+	}
+	updatePanelPosition() {
+		this.panel.updatePanelPosition();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: DatePicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: DatePicker,
+		isStandalone: true,
+		selector: "gbt-date-picker",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			weekStartsOn: {
+				classPropertyName: "weekStartsOn",
+				publicName: "weekStartsOn",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previousMonthLabel: {
+				classPropertyName: "previousMonthLabel",
+				publicName: "previousMonthLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextMonthLabel: {
+				classPropertyName: "nextMonthLabel",
+				publicName: "nextMonthLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearable: {
+				classPropertyName: "clearable",
+				publicName: "clearable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			visibleMonths: {
+				classPropertyName: "visibleMonths",
+				publicName: "visibleMonths",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			monthSelectLabel: {
+				classPropertyName: "monthSelectLabel",
+				publicName: "monthSelectLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			yearSelectLabel: {
+				classPropertyName: "yearSelectLabel",
+				publicName: "yearSelectLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minYear: {
+				classPropertyName: "minYear",
+				publicName: "minYear",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxYear: {
+				classPropertyName: "maxYear",
+				publicName: "maxYear",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { listeners: {
+			"document:click": "handleClickOutside($event)",
+			"keydown": "onEscape($event)",
+			"window:scroll": "updatePanelPosition()",
+			"window:resize": "updatePanelPosition()"
+		} },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => DatePicker),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"gbt-date-picker\">\n  @if (label()) {\n    <label [for]=\"id()\" class=\"gbt-date-picker__label\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n  <div class=\"gbt-date-picker__field\">\n    <button\n      type=\"button\"\n      [id]=\"id()\"\n      class=\"gbt-date-picker__trigger\"\n      [class.gbt-date-picker__trigger--open]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n      (click)=\"toggleOpen()\"\n    >\n      <span\n        class=\"gbt-date-picker__trigger-label\"\n        [class.gbt-date-picker__trigger-label--placeholder]=\"!triggerLabel()\"\n      >\n        {{ triggerLabel() || placeholder() }}\n      </span>\n    </button>\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"gbt-date-picker__clear\"\n        [attr.aria-label]=\"clearLabel()\"\n        (click)=\"clear($event)\"\n      >\n        <gbt-icon name=\"x\" aria-hidden=\"true\" />\n      </button>\n    } @else {\n      <gbt-icon name=\"calendar\" class=\"gbt-date-picker__icon\" aria-hidden=\"true\" />\n    }\n  </div>\n  @if (open() && panelStyle(); as pos) {\n    <div\n      class=\"gbt-date-picker__panel\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [attr.aria-label]=\"panelLabel()\"\n      [style.top]=\"pos.top\"\n      [style.left]=\"pos.left\"\n    >\n      <div class=\"gbt-date-picker__nav\">\n        <button\n          type=\"button\"\n          class=\"gbt-date-picker__nav-button\"\n          [attr.aria-label]=\"previousMonthLabel()\"\n          (click)=\"shiftMonth(-1)\"\n        >\n          <gbt-icon name=\"chevron-left\" aria-hidden=\"true\" />\n        </button>\n        <div class=\"gbt-date-picker__headings\">\n          @for (view of monthViews(); track view.year + '-' + view.month; let i = $index) {\n            <div class=\"gbt-date-picker__month-heading\">\n              @if (i === 0) {\n                <select\n                  #monthSelect\n                  class=\"gbt-date-picker__select\"\n                  [attr.aria-label]=\"monthSelectLabel()\"\n                  (change)=\"onMonthSelect(monthSelect.value)\"\n                >\n                  @for (opt of monthOptions(); track opt.value) {\n                    <option [value]=\"opt.value\" [selected]=\"opt.value === anchorDate().getMonth()\">\n                      {{ opt.label }}\n                    </option>\n                  }\n                </select>\n                <select\n                  #yearSelect\n                  class=\"gbt-date-picker__select\"\n                  [attr.aria-label]=\"yearSelectLabel()\"\n                  (change)=\"onYearSelect(yearSelect.value)\"\n                >\n                  @for (year of yearOptions(); track year) {\n                    <option [value]=\"year\" [selected]=\"year === anchorDate().getFullYear()\">\n                      {{ year }}\n                    </option>\n                  }\n                </select>\n              } @else {\n                <span class=\"gbt-date-picker__month-label\">{{ view.label }}</span>\n              }\n            </div>\n          }\n        </div>\n        <button\n          type=\"button\"\n          class=\"gbt-date-picker__nav-button\"\n          [attr.aria-label]=\"nextMonthLabel()\"\n          (click)=\"shiftMonth(1)\"\n        >\n          <gbt-icon name=\"chevron-right\" aria-hidden=\"true\" />\n        </button>\n      </div>\n      <div class=\"gbt-date-picker__months\">\n        @for (view of monthViews(); track view.year + '-' + view.month) {\n          <div class=\"gbt-date-picker__month\">\n            <div\n              class=\"gbt-date-picker__grid\"\n              role=\"grid\"\n              tabindex=\"-1\"\n              [attr.aria-label]=\"view.label\"\n              (keydown)=\"onGridKeydown($event)\"\n            >\n              <div class=\"gbt-date-picker__row gbt-date-picker__row--head\" role=\"row\">\n                @for (wd of weekdayLabels(); track $index) {\n                  <span role=\"columnheader\" class=\"gbt-date-picker__weekday\">{{ wd }}</span>\n                }\n              </div>\n              @for (week of view.weeks; track $index) {\n                <div class=\"gbt-date-picker__row\" role=\"row\">\n                  @for (day of week; track day.date.getTime()) {\n                    @if (day.inCurrentMonth) {\n                      <button\n                        type=\"button\"\n                        role=\"gridcell\"\n                        class=\"gbt-date-picker__day\"\n                        [class.gbt-date-picker__day--today]=\"day.isToday\"\n                        [class.gbt-date-picker__day--selected]=\"isSelected(day.date)\"\n                        [attr.data-date]=\"cellId(day.date)\"\n                        [attr.aria-selected]=\"isSelected(day.date)\"\n                        [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                        [tabIndex]=\"isFocused(day.date) ? 0 : -1\"\n                        (click)=\"selectDay(day)\"\n                      >\n                        {{ day.date.getDate() }}\n                      </button>\n                    } @else {\n                      <span\n                        role=\"gridcell\"\n                        class=\"gbt-date-picker__day gbt-date-picker__day--empty\"\n                      ></span>\n                    }\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-date-picker__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+		styles: [".gbt-date-picker{display:inline-flex;flex-direction:column;gap:.375rem}.gbt-date-picker__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-date-picker__error{margin:0;font-size:.75rem;color:var(--color-error-text)}.gbt-date-picker__field{position:relative;display:inline-flex}.gbt-date-picker__trigger{box-sizing:border-box;display:flex;align-items:center;width:220px;height:var(--gbt-control-height-md);padding:0 34px 0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1)}.gbt-date-picker__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-date-picker__trigger:disabled{cursor:not-allowed;opacity:.5}.gbt-date-picker__trigger:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-picker__trigger-label{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.gbt-date-picker__trigger-label--placeholder{color:var(--text-discret)}.gbt-date-picker__icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none}.gbt-date-picker__clear{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:none;border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer}.gbt-date-picker__clear:hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-date-picker__clear:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-picker__panel{box-sizing:border-box;position:fixed;z-index:1000;padding:.75rem;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-date-picker-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-date-picker__nav{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.gbt-date-picker__headings{display:flex;flex:1;justify-content:center;gap:1.25rem}.gbt-date-picker__nav-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;border-radius:var(--site-border-radius-sm);color:var(--text-secondary);cursor:pointer}.gbt-date-picker__nav-button:hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-date-picker__nav-button:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-picker__select{box-sizing:border-box;height:28px;padding:0 6px;background:none;border:none;border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:13px;font-weight:600;cursor:pointer}.gbt-date-picker__select:hover{background:var(--bg-hover)}.gbt-date-picker__select:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-picker__months{display:flex;justify-content:center;gap:1.25rem;margin-inline:.65rem;margin-bottom:.65rem}.gbt-date-picker__month-heading{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.375rem;width:184px;height:28px}.gbt-date-picker__month-label{font-size:14px;font-weight:600;color:var(--text-primary);text-align:center}.gbt-date-picker__row{display:grid;grid-template-columns:repeat(7,32px)}.gbt-date-picker__row--head{margin-bottom:.25rem;margin-top:.25rem}.gbt-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:24px;font-size:13px;font-weight:600;color:var(--text-secondary)}.gbt-date-picker__day{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:50%;color:var(--text-primary);font-size:13px;cursor:pointer}.gbt-date-picker__day:hover:not(:disabled):not(.gbt-date-picker__day--empty){background:var(--bg-hover)}.gbt-date-picker__day:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-date-picker__day--empty{cursor:default}.gbt-date-picker__day--today{font-weight:700;box-shadow:inset 0 0 0 1px var(--border-color)}.gbt-date-picker__day--selected{background:var(--primary);color:var(--text-on-primary);font-weight:600}@media(prefers-reduced-motion:reduce){.gbt-date-picker__panel{animation:none}.gbt-date-picker__trigger{transition:none}}@keyframes gbt-date-picker-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: DatePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-date-picker",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"(document:click)": "handleClickOutside($event)",
+				"(keydown)": "onEscape($event)",
+				"(window:scroll)": "updatePanelPosition()",
+				"(window:resize)": "updatePanelPosition()"
+			},
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => DatePicker),
+				multi: true
+			}],
+			template: "<div class=\"gbt-date-picker\">\n  @if (label()) {\n    <label [for]=\"id()\" class=\"gbt-date-picker__label\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n  <div class=\"gbt-date-picker__field\">\n    <button\n      type=\"button\"\n      [id]=\"id()\"\n      class=\"gbt-date-picker__trigger\"\n      [class.gbt-date-picker__trigger--open]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n      (click)=\"toggleOpen()\"\n    >\n      <span\n        class=\"gbt-date-picker__trigger-label\"\n        [class.gbt-date-picker__trigger-label--placeholder]=\"!triggerLabel()\"\n      >\n        {{ triggerLabel() || placeholder() }}\n      </span>\n    </button>\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"gbt-date-picker__clear\"\n        [attr.aria-label]=\"clearLabel()\"\n        (click)=\"clear($event)\"\n      >\n        <gbt-icon name=\"x\" aria-hidden=\"true\" />\n      </button>\n    } @else {\n      <gbt-icon name=\"calendar\" class=\"gbt-date-picker__icon\" aria-hidden=\"true\" />\n    }\n  </div>\n  @if (open() && panelStyle(); as pos) {\n    <div\n      class=\"gbt-date-picker__panel\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [attr.aria-label]=\"panelLabel()\"\n      [style.top]=\"pos.top\"\n      [style.left]=\"pos.left\"\n    >\n      <div class=\"gbt-date-picker__nav\">\n        <button\n          type=\"button\"\n          class=\"gbt-date-picker__nav-button\"\n          [attr.aria-label]=\"previousMonthLabel()\"\n          (click)=\"shiftMonth(-1)\"\n        >\n          <gbt-icon name=\"chevron-left\" aria-hidden=\"true\" />\n        </button>\n        <div class=\"gbt-date-picker__headings\">\n          @for (view of monthViews(); track view.year + '-' + view.month; let i = $index) {\n            <div class=\"gbt-date-picker__month-heading\">\n              @if (i === 0) {\n                <select\n                  #monthSelect\n                  class=\"gbt-date-picker__select\"\n                  [attr.aria-label]=\"monthSelectLabel()\"\n                  (change)=\"onMonthSelect(monthSelect.value)\"\n                >\n                  @for (opt of monthOptions(); track opt.value) {\n                    <option [value]=\"opt.value\" [selected]=\"opt.value === anchorDate().getMonth()\">\n                      {{ opt.label }}\n                    </option>\n                  }\n                </select>\n                <select\n                  #yearSelect\n                  class=\"gbt-date-picker__select\"\n                  [attr.aria-label]=\"yearSelectLabel()\"\n                  (change)=\"onYearSelect(yearSelect.value)\"\n                >\n                  @for (year of yearOptions(); track year) {\n                    <option [value]=\"year\" [selected]=\"year === anchorDate().getFullYear()\">\n                      {{ year }}\n                    </option>\n                  }\n                </select>\n              } @else {\n                <span class=\"gbt-date-picker__month-label\">{{ view.label }}</span>\n              }\n            </div>\n          }\n        </div>\n        <button\n          type=\"button\"\n          class=\"gbt-date-picker__nav-button\"\n          [attr.aria-label]=\"nextMonthLabel()\"\n          (click)=\"shiftMonth(1)\"\n        >\n          <gbt-icon name=\"chevron-right\" aria-hidden=\"true\" />\n        </button>\n      </div>\n      <div class=\"gbt-date-picker__months\">\n        @for (view of monthViews(); track view.year + '-' + view.month) {\n          <div class=\"gbt-date-picker__month\">\n            <div\n              class=\"gbt-date-picker__grid\"\n              role=\"grid\"\n              tabindex=\"-1\"\n              [attr.aria-label]=\"view.label\"\n              (keydown)=\"onGridKeydown($event)\"\n            >\n              <div class=\"gbt-date-picker__row gbt-date-picker__row--head\" role=\"row\">\n                @for (wd of weekdayLabels(); track $index) {\n                  <span role=\"columnheader\" class=\"gbt-date-picker__weekday\">{{ wd }}</span>\n                }\n              </div>\n              @for (week of view.weeks; track $index) {\n                <div class=\"gbt-date-picker__row\" role=\"row\">\n                  @for (day of week; track day.date.getTime()) {\n                    @if (day.inCurrentMonth) {\n                      <button\n                        type=\"button\"\n                        role=\"gridcell\"\n                        class=\"gbt-date-picker__day\"\n                        [class.gbt-date-picker__day--today]=\"day.isToday\"\n                        [class.gbt-date-picker__day--selected]=\"isSelected(day.date)\"\n                        [attr.data-date]=\"cellId(day.date)\"\n                        [attr.aria-selected]=\"isSelected(day.date)\"\n                        [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                        [tabIndex]=\"isFocused(day.date) ? 0 : -1\"\n                        (click)=\"selectDay(day)\"\n                      >\n                        {{ day.date.getDate() }}\n                      </button>\n                    } @else {\n                      <span\n                        role=\"gridcell\"\n                        class=\"gbt-date-picker__day gbt-date-picker__day--empty\"\n                      ></span>\n                    }\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-date-picker__error\" role=\"alert\">{{ errorMessage() }}</p>\n  }\n</div>\n",
+			styles: [".gbt-date-picker{display:inline-flex;flex-direction:column;gap:.375rem}.gbt-date-picker__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-date-picker__error{margin:0;font-size:.75rem;color:var(--color-error-text)}.gbt-date-picker__field{position:relative;display:inline-flex}.gbt-date-picker__trigger{box-sizing:border-box;display:flex;align-items:center;width:220px;height:var(--gbt-control-height-md);padding:0 34px 0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1)}.gbt-date-picker__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-date-picker__trigger:disabled{cursor:not-allowed;opacity:.5}.gbt-date-picker__trigger:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-picker__trigger-label{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.gbt-date-picker__trigger-label--placeholder{color:var(--text-discret)}.gbt-date-picker__icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none}.gbt-date-picker__clear{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:none;border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer}.gbt-date-picker__clear:hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-date-picker__clear:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-picker__panel{box-sizing:border-box;position:fixed;z-index:1000;padding:.75rem;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-date-picker-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-date-picker__nav{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.gbt-date-picker__headings{display:flex;flex:1;justify-content:center;gap:1.25rem}.gbt-date-picker__nav-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;border-radius:var(--site-border-radius-sm);color:var(--text-secondary);cursor:pointer}.gbt-date-picker__nav-button:hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-date-picker__nav-button:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-picker__select{box-sizing:border-box;height:28px;padding:0 6px;background:none;border:none;border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:13px;font-weight:600;cursor:pointer}.gbt-date-picker__select:hover{background:var(--bg-hover)}.gbt-date-picker__select:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-picker__months{display:flex;justify-content:center;gap:1.25rem;margin-inline:.65rem;margin-bottom:.65rem}.gbt-date-picker__month-heading{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.375rem;width:184px;height:28px}.gbt-date-picker__month-label{font-size:14px;font-weight:600;color:var(--text-primary);text-align:center}.gbt-date-picker__row{display:grid;grid-template-columns:repeat(7,32px)}.gbt-date-picker__row--head{margin-bottom:.25rem;margin-top:.25rem}.gbt-date-picker__weekday{display:flex;align-items:center;justify-content:center;height:24px;font-size:13px;font-weight:600;color:var(--text-secondary)}.gbt-date-picker__day{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:50%;color:var(--text-primary);font-size:13px;cursor:pointer}.gbt-date-picker__day:hover:not(:disabled):not(.gbt-date-picker__day--empty){background:var(--bg-hover)}.gbt-date-picker__day:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px}.gbt-date-picker__day--empty{cursor:default}.gbt-date-picker__day--today{font-weight:700;box-shadow:inset 0 0 0 1px var(--border-color)}.gbt-date-picker__day--selected{background:var(--primary);color:var(--text-on-primary);font-weight:600}@media(prefers-reduced-motion:reduce){.gbt-date-picker__panel{animation:none}.gbt-date-picker__trigger{transition:none}}@keyframes gbt-date-picker-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		weekStartsOn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "weekStartsOn",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				required: false
+			}]
+		}],
+		previousMonthLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousMonthLabel",
+				required: false
+			}]
+		}],
+		nextMonthLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextMonthLabel",
+				required: false
+			}]
+		}],
+		clearable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearable",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		visibleMonths: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visibleMonths",
+				required: false
+			}]
+		}],
+		monthSelectLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "monthSelectLabel",
+				required: false
+			}]
+		}],
+		yearSelectLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "yearSelectLabel",
+				required: false
+			}]
+		}],
+		minYear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minYear",
+				required: false
+			}]
+		}],
+		maxYear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxYear",
+				required: false
+			}]
+		}]
+	}
+});
+let nextId = 0;
+const CURRENT_YEAR = (/* @__PURE__ */ new Date()).getFullYear();
+var DateRangePicker = class DateRangePicker {
+	elementRef = inject(ElementRef);
+	injector = inject(Injector);
+	id = input(`gbt-date-range-picker-${++nextId}`, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	placeholder = input("Select a date range…", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	locale = input("en-US", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	weekStartsOn = input(1, ...ngDevMode ? [{ debugName: "weekStartsOn" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	errorMessage = input(null, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	previousMonthLabel = input("Previous month", ...ngDevMode ? [{ debugName: "previousMonthLabel" }] : /* istanbul ignore next */ []);
+	nextMonthLabel = input("Next month", ...ngDevMode ? [{ debugName: "nextMonthLabel" }] : /* istanbul ignore next */ []);
+	clearable = input(false, {
+		...ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	clearLabel = input("Clear date range", ...ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []);
+	visibleMonths = input(2, ...ngDevMode ? [{ debugName: "visibleMonths" }] : /* istanbul ignore next */ []);
+	monthSelectLabel = input("Month", ...ngDevMode ? [{ debugName: "monthSelectLabel" }] : /* istanbul ignore next */ []);
+	yearSelectLabel = input("Year", ...ngDevMode ? [{ debugName: "yearSelectLabel" }] : /* istanbul ignore next */ []);
+	minYear = input(CURRENT_YEAR - 100, ...ngDevMode ? [{ debugName: "minYear" }] : /* istanbul ignore next */ []);
+	maxYear = input(CURRENT_YEAR + 10, ...ngDevMode ? [{ debugName: "maxYear" }] : /* istanbul ignore next */ []);
+	rangeStatus = input((start, end) => {
+		if (!start) return "";
+		if (!end) return `${start} selected as the start date. Choose an end date.`;
+		return `Date range: ${start} to ${end}.`;
+	}, ...ngDevMode ? [{ debugName: "rangeStatus" }] : /* istanbul ignore next */ []);
+	panel = new CalendarPanel({
+		elementRef: this.elementRef,
+		injector: this.injector,
+		triggerSelector: ".gbt-date-range-picker__trigger",
+		locale: () => this.locale(),
+		weekStartsOn: () => this.weekStartsOn(),
+		visibleMonths: () => this.visibleMonths(),
+		minYear: () => this.minYear(),
+		maxYear: () => this.maxYear(),
+		onTouched: () => this.onTouched()
+	});
+	open = this.panel.open;
+	value = signal(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	draftStart = signal(null, ...ngDevMode ? [{ debugName: "draftStart" }] : /* istanbul ignore next */ []);
+	draftEnd = signal(null, ...ngDevMode ? [{ debugName: "draftEnd" }] : /* istanbul ignore next */ []);
+	hoveredDate = signal(null, ...ngDevMode ? [{ debugName: "hoveredDate" }] : /* istanbul ignore next */ []);
+	focusedDate = this.panel.focusedDate;
+	anchorDate = this.panel.anchorDate;
+	panelStyle = this.panel.panelStyle;
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	showClear = computed(() => this.clearable() && this.value() !== null && !this.isDisabled(), ...ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []);
+	monthViews = this.panel.monthViews;
+	panelLabel = this.panel.panelLabel;
+	weekdayLabels = this.panel.weekdayLabels;
+	monthOptions = this.panel.monthOptions;
+	yearOptions = this.panel.yearOptions;
+	dateFormatter = computed(() => new Intl.DateTimeFormat(this.locale(), { dateStyle: "medium" }), ...ngDevMode ? [{ debugName: "dateFormatter" }] : /* istanbul ignore next */ []);
+	triggerLabel = computed(() => {
+		const v = this.value();
+		if (!v) return "";
+		const formatter = this.dateFormatter();
+		if (!v.end) return formatter.format(v.start);
+		return `${formatter.format(v.start)} – ${formatter.format(v.end)}`;
+	}, ...ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []);
+	previewBounds = computed(() => {
+		const start = this.draftStart();
+		if (!start) return null;
+		const other = this.draftEnd() ?? this.hoveredDate();
+		if (!other) return null;
+		return start.getTime() <= other.getTime() ? {
+			lower: start,
+			upper: other
+		} : {
+			lower: other,
+			upper: start
+		};
+	}, ...ngDevMode ? [{ debugName: "previewBounds" }] : /* istanbul ignore next */ []);
+	isPreviewing = computed(() => this.draftStart() !== null && this.draftEnd() === null, ...ngDevMode ? [{ debugName: "isPreviewing" }] : /* istanbul ignore next */ []);
+	statusMessage = computed(() => {
+		const start = this.draftStart();
+		if (!start) return "";
+		const formatter = this.dateFormatter();
+		const end = this.draftEnd();
+		return this.rangeStatus()(formatter.format(start), end ? formatter.format(end) : null);
+	}, ...ngDevMode ? [{ debugName: "statusMessage" }] : /* istanbul ignore next */ []);
+	writeValue(value) {
+		this.value.set(value);
+		if (value) {
+			this.focusedDate.set(value.start);
+			this.anchorDate.set(new Date(value.start.getFullYear(), value.start.getMonth(), 1));
+		}
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	isRangeStartCap(date) {
+		const bounds = this.previewBounds();
+		return bounds !== null && isSameDay(date, bounds.lower);
+	}
+	isRangeEndCap(date) {
+		const bounds = this.previewBounds();
+		return bounds !== null && isSameDay(date, bounds.upper);
+	}
+	isInRange(date) {
+		const bounds = this.previewBounds();
+		return bounds !== null && date.getTime() > bounds.lower.getTime() && date.getTime() < bounds.upper.getTime();
+	}
+	isFocused(date) {
+		return this.panel.isFocused(date);
+	}
+	cellId(date) {
+		return this.panel.cellId(date);
+	}
+	toggleOpen() {
+		if (this.isDisabled()) return;
+		this.panel.toggle(() => {
+			const value = this.value();
+			this.draftStart.set(value?.start ?? null);
+			this.draftEnd.set(value?.end ?? null);
+			this.hoveredDate.set(null);
+			return value?.start ?? /* @__PURE__ */ new Date();
+		});
+	}
+	close(returnFocus) {
+		this.panel.close(returnFocus);
+	}
+	clear(event) {
+		event.stopPropagation();
+		if (this.isDisabled()) return;
+		this.value.set(null);
+		this.draftStart.set(null);
+		this.draftEnd.set(null);
+		this.onChange(null);
+		this.onTouched();
+		this.panel.close(false);
+	}
+	selectDay(date) {
+		if (this.isDisabled()) return;
+		const start = this.draftStart();
+		const complete = start !== null && this.draftEnd() !== null;
+		if (!start || complete) {
+			this.draftStart.set(date);
+			this.draftEnd.set(null);
+			this.focusedDate.set(date);
+			this.panel.ensureVisible(date);
+			this.panel.focusCellAfterRender();
+			return;
+		}
+		const [rangeStart, rangeEnd] = start.getTime() <= date.getTime() ? [start, date] : [date, start];
+		this.draftStart.set(rangeStart);
+		this.draftEnd.set(rangeEnd);
+		this.focusedDate.set(date);
+		this.panel.ensureVisible(date);
+		const next = {
+			start: rangeStart,
+			end: rangeEnd
+		};
+		this.value.set(next);
+		this.onChange(next);
+		this.onTouched();
+		this.panel.close(true);
+	}
+	onDayMouseEnter(date) {
+		this.hoveredDate.set(date);
+	}
+	onDayMouseLeave() {
+		this.hoveredDate.set(null);
+	}
+	shiftMonth(delta) {
+		this.panel.shiftMonth(delta);
+	}
+	onMonthSelect(value) {
+		this.panel.onMonthSelect(value);
+	}
+	onYearSelect(value) {
+		this.panel.onYearSelect(value);
+	}
+	onGridKeydown(event) {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			this.selectDay(this.focusedDate());
+			return;
+		}
+		this.panel.handleNavigationKeydown(event);
+	}
+	onEscape(event) {
+		this.panel.onEscape(event);
+	}
+	handleClickOutside(event) {
+		this.panel.handleClickOutside(event);
+	}
+	updatePanelPosition() {
+		this.panel.updatePanelPosition();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: DateRangePicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: DateRangePicker,
+		isStandalone: true,
+		selector: "gbt-date-range-picker",
+		inputs: {
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			weekStartsOn: {
+				classPropertyName: "weekStartsOn",
+				publicName: "weekStartsOn",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorMessage: {
+				classPropertyName: "errorMessage",
+				publicName: "errorMessage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previousMonthLabel: {
+				classPropertyName: "previousMonthLabel",
+				publicName: "previousMonthLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextMonthLabel: {
+				classPropertyName: "nextMonthLabel",
+				publicName: "nextMonthLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearable: {
+				classPropertyName: "clearable",
+				publicName: "clearable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearLabel: {
+				classPropertyName: "clearLabel",
+				publicName: "clearLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			visibleMonths: {
+				classPropertyName: "visibleMonths",
+				publicName: "visibleMonths",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			monthSelectLabel: {
+				classPropertyName: "monthSelectLabel",
+				publicName: "monthSelectLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			yearSelectLabel: {
+				classPropertyName: "yearSelectLabel",
+				publicName: "yearSelectLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minYear: {
+				classPropertyName: "minYear",
+				publicName: "minYear",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxYear: {
+				classPropertyName: "maxYear",
+				publicName: "maxYear",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rangeStatus: {
+				classPropertyName: "rangeStatus",
+				publicName: "rangeStatus",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { listeners: {
+			"document:click": "handleClickOutside($event)",
+			"keydown": "onEscape($event)",
+			"window:scroll": "updatePanelPosition()",
+			"window:resize": "updatePanelPosition()"
+		} },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => DateRangePicker),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"gbt-date-range-picker\">\n  @if (label()) {\n    <label [for]=\"id()\" class=\"gbt-date-range-picker__label\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n  <div class=\"gbt-date-range-picker__field\">\n    <button\n      type=\"button\"\n      [id]=\"id()\"\n      class=\"gbt-date-range-picker__trigger\"\n      [class.gbt-date-range-picker__trigger--open]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n      (click)=\"toggleOpen()\"\n    >\n      <span\n        class=\"gbt-date-range-picker__trigger-label\"\n        [class.gbt-date-range-picker__trigger-label--placeholder]=\"!triggerLabel()\"\n      >\n        {{ triggerLabel() || placeholder() }}\n      </span>\n    </button>\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"gbt-date-range-picker__clear\"\n        [attr.aria-label]=\"clearLabel()\"\n        (click)=\"clear($event)\"\n      >\n        <gbt-icon name=\"x\" aria-hidden=\"true\" />\n      </button>\n    } @else {\n      <gbt-icon name=\"calendar\" class=\"gbt-date-range-picker__icon\" aria-hidden=\"true\" />\n    }\n  </div>\n  @if (open() && panelStyle(); as pos) {\n    <div\n      class=\"gbt-date-range-picker__panel\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [attr.aria-label]=\"panelLabel()\"\n      [style.top]=\"pos.top\"\n      [style.left]=\"pos.left\"\n    >\n      <div class=\"gbt-date-range-picker__nav\">\n        <button\n          type=\"button\"\n          class=\"gbt-date-range-picker__nav-button\"\n          [attr.aria-label]=\"previousMonthLabel()\"\n          (click)=\"shiftMonth(-1)\"\n        >\n          <gbt-icon name=\"chevron-left\" aria-hidden=\"true\" />\n        </button>\n        <div class=\"gbt-date-range-picker__headings\">\n          @for (view of monthViews(); track view.year + '-' + view.month; let i = $index) {\n            <div class=\"gbt-date-range-picker__month-heading\">\n              @if (i === 0) {\n                <select\n                  #monthSelect\n                  class=\"gbt-date-range-picker__select\"\n                  [attr.aria-label]=\"monthSelectLabel()\"\n                  (change)=\"onMonthSelect(monthSelect.value)\"\n                >\n                  @for (opt of monthOptions(); track opt.value) {\n                    <option [value]=\"opt.value\" [selected]=\"opt.value === anchorDate().getMonth()\">\n                      {{ opt.label }}\n                    </option>\n                  }\n                </select>\n                <select\n                  #yearSelect\n                  class=\"gbt-date-range-picker__select\"\n                  [attr.aria-label]=\"yearSelectLabel()\"\n                  (change)=\"onYearSelect(yearSelect.value)\"\n                >\n                  @for (year of yearOptions(); track year) {\n                    <option [value]=\"year\" [selected]=\"year === anchorDate().getFullYear()\">\n                      {{ year }}\n                    </option>\n                  }\n                </select>\n              } @else {\n                <span class=\"gbt-date-range-picker__month-label\">{{ view.label }}</span>\n              }\n            </div>\n          }\n        </div>\n        <button\n          type=\"button\"\n          class=\"gbt-date-range-picker__nav-button\"\n          [attr.aria-label]=\"nextMonthLabel()\"\n          (click)=\"shiftMonth(1)\"\n        >\n          <gbt-icon name=\"chevron-right\" aria-hidden=\"true\" />\n        </button>\n      </div>\n      <div class=\"gbt-date-range-picker__months\">\n        @for (view of monthViews(); track view.year + '-' + view.month) {\n          <div class=\"gbt-date-range-picker__month\">\n            <div\n              class=\"gbt-date-range-picker__grid\"\n              role=\"grid\"\n              tabindex=\"-1\"\n              [attr.aria-label]=\"view.label\"\n              (keydown)=\"onGridKeydown($event)\"\n            >\n              <div class=\"gbt-date-range-picker__row gbt-date-range-picker__row--head\" role=\"row\">\n                @for (wd of weekdayLabels(); track $index) {\n                  <span role=\"columnheader\" class=\"gbt-date-range-picker__weekday\">{{ wd }}</span>\n                }\n              </div>\n              @for (week of view.weeks; track $index) {\n                <div class=\"gbt-date-range-picker__row\" role=\"row\">\n                  @for (day of week; track day.date.getTime()) {\n                    @if (day.inCurrentMonth) {\n                      <button\n                        type=\"button\"\n                        role=\"gridcell\"\n                        class=\"gbt-date-range-picker__day\"\n                        [class.gbt-date-range-picker__day--today]=\"day.isToday\"\n                        [class.gbt-date-range-picker__day--start-cap]=\"isRangeStartCap(day.date)\"\n                        [class.gbt-date-range-picker__day--end-cap]=\"isRangeEndCap(day.date)\"\n                        [class.gbt-date-range-picker__day--in-range]=\"isInRange(day.date)\"\n                        [class.gbt-date-range-picker__day--preview]=\"isPreviewing()\"\n                        [attr.data-date]=\"cellId(day.date)\"\n                        [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                        [tabIndex]=\"isFocused(day.date) ? 0 : -1\"\n                        (click)=\"selectDay(day.date)\"\n                        (mouseenter)=\"onDayMouseEnter(day.date)\"\n                        (mouseleave)=\"onDayMouseLeave()\"\n                      >\n                        {{ day.date.getDate() }}\n                      </button>\n                    } @else {\n                      <span\n                        role=\"gridcell\"\n                        class=\"gbt-date-range-picker__day gbt-date-range-picker__day--empty\"\n                      ></span>\n                    }\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"gbt-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ statusMessage() }}\n      </div>\n    </div>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-date-range-picker__error\" role=\"alert\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n",
+		styles: [".gbt-date-range-picker{display:inline-flex;flex-direction:column;gap:.375rem}.gbt-date-range-picker__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-date-range-picker__error{margin:0;font-size:.75rem;color:var(--color-error-text)}.gbt-date-range-picker__field{position:relative;display:inline-flex}.gbt-date-range-picker__trigger{box-sizing:border-box;display:flex;align-items:center;width:260px;height:var(--gbt-control-height-md);padding:0 34px 0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1)}.gbt-date-range-picker__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-date-range-picker__trigger:disabled{cursor:not-allowed;opacity:.5}.gbt-date-range-picker__trigger:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-range-picker__trigger-label{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.gbt-date-range-picker__trigger-label--placeholder{color:var(--text-discret)}.gbt-date-range-picker__icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none}.gbt-date-range-picker__clear{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:none;border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer}.gbt-date-range-picker__clear:hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-date-range-picker__clear:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-range-picker__panel{box-sizing:border-box;position:fixed;z-index:1000;padding:.75rem;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-date-range-picker-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-date-range-picker__nav{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.gbt-date-range-picker__headings{display:flex;flex:1;justify-content:center;gap:1.25rem}.gbt-date-range-picker__nav-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;border-radius:var(--site-border-radius-sm);color:var(--text-secondary);cursor:pointer}.gbt-date-range-picker__nav-button:hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-date-range-picker__nav-button:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-range-picker__select{box-sizing:border-box;height:28px;padding:0 6px;background:none;border:none;border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:13px;font-weight:600;cursor:pointer}.gbt-date-range-picker__select:hover{background:var(--bg-hover)}.gbt-date-range-picker__select:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-range-picker__months{display:flex;justify-content:center;gap:1.25rem;margin-inline:.65rem;margin-bottom:.65rem}.gbt-date-range-picker__month-heading{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.375rem;width:184px;height:28px}.gbt-date-range-picker__month-label{font-size:14px;font-weight:600;color:var(--text-primary);text-align:center}.gbt-date-range-picker__row{display:grid;grid-template-columns:repeat(7,32px)}.gbt-date-range-picker__row--head{margin-top:.25rem;margin-bottom:.25rem}.gbt-date-range-picker__weekday{display:flex;align-items:center;justify-content:center;height:24px;font-size:13px;font-weight:600;color:var(--text-secondary)}.gbt-date-range-picker__day{position:relative;z-index:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;color:var(--text-primary);font-size:13px;cursor:pointer}.gbt-date-range-picker__day:before{content:\"\";position:absolute;inset:0;z-index:-1}.gbt-date-range-picker__day:hover:not(:disabled):not(.gbt-date-range-picker__day--empty){border-radius:50%;background:var(--bg-hover)}.gbt-date-range-picker__day:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px;border-radius:50%}.gbt-date-range-picker__day--empty{cursor:default}.gbt-date-range-picker__day--today{font-weight:700;box-shadow:inset 0 0 0 1px var(--border-color);border-radius:50%}.gbt-date-range-picker__day--in-range:before{background:color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-date-range-picker__day--start-cap,.gbt-date-range-picker__day--end-cap{color:var(--text-on-primary);font-weight:600}.gbt-date-range-picker__day--start-cap:before{background:var(--primary);color:var(--text-on-primary);border-radius:50% 0 0 50%}.gbt-date-range-picker__day--end-cap:before{background:var(--primary);color:var(--text-on-primary);border-radius:0 50% 50% 0}.gbt-date-range-picker__day--start-cap.gbt-date-range-picker__day--end-cap:before{border-radius:50%}.gbt-date-range-picker__day--preview.gbt-date-range-picker__day--in-range:before,.gbt-date-range-picker__day--preview.gbt-date-range-picker__day--start-cap:before,.gbt-date-range-picker__day--preview.gbt-date-range-picker__day--end-cap:before{opacity:.6}.gbt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.gbt-date-range-picker__panel{animation:none}.gbt-date-range-picker__trigger{transition:none}}@keyframes gbt-date-range-picker-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: Icon,
+			selector: "gbt-icon",
+			inputs: ["name"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: DateRangePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "gbt-date-range-picker",
+			standalone: true,
+			imports: [Icon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"(document:click)": "handleClickOutside($event)",
+				"(keydown)": "onEscape($event)",
+				"(window:scroll)": "updatePanelPosition()",
+				"(window:resize)": "updatePanelPosition()"
+			},
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => DateRangePicker),
+				multi: true
+			}],
+			template: "<div class=\"gbt-date-range-picker\">\n  @if (label()) {\n    <label [for]=\"id()\" class=\"gbt-date-range-picker__label\"\n      >{{ label() }}{{ required() ? ' *' : '' }}</label\n    >\n  }\n  <div class=\"gbt-date-range-picker__field\">\n    <button\n      type=\"button\"\n      [id]=\"id()\"\n      class=\"gbt-date-range-picker__trigger\"\n      [class.gbt-date-range-picker__trigger--open]=\"open()\"\n      [disabled]=\"isDisabled()\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"open()\"\n      [attr.aria-invalid]=\"errorMessage() ? true : null\"\n      [attr.aria-describedby]=\"errorMessage() ? id() + '-error' : null\"\n      (click)=\"toggleOpen()\"\n    >\n      <span\n        class=\"gbt-date-range-picker__trigger-label\"\n        [class.gbt-date-range-picker__trigger-label--placeholder]=\"!triggerLabel()\"\n      >\n        {{ triggerLabel() || placeholder() }}\n      </span>\n    </button>\n    @if (showClear()) {\n      <button\n        type=\"button\"\n        class=\"gbt-date-range-picker__clear\"\n        [attr.aria-label]=\"clearLabel()\"\n        (click)=\"clear($event)\"\n      >\n        <gbt-icon name=\"x\" aria-hidden=\"true\" />\n      </button>\n    } @else {\n      <gbt-icon name=\"calendar\" class=\"gbt-date-range-picker__icon\" aria-hidden=\"true\" />\n    }\n  </div>\n  @if (open() && panelStyle(); as pos) {\n    <div\n      class=\"gbt-date-range-picker__panel\"\n      role=\"dialog\"\n      aria-modal=\"false\"\n      [attr.aria-label]=\"panelLabel()\"\n      [style.top]=\"pos.top\"\n      [style.left]=\"pos.left\"\n    >\n      <div class=\"gbt-date-range-picker__nav\">\n        <button\n          type=\"button\"\n          class=\"gbt-date-range-picker__nav-button\"\n          [attr.aria-label]=\"previousMonthLabel()\"\n          (click)=\"shiftMonth(-1)\"\n        >\n          <gbt-icon name=\"chevron-left\" aria-hidden=\"true\" />\n        </button>\n        <div class=\"gbt-date-range-picker__headings\">\n          @for (view of monthViews(); track view.year + '-' + view.month; let i = $index) {\n            <div class=\"gbt-date-range-picker__month-heading\">\n              @if (i === 0) {\n                <select\n                  #monthSelect\n                  class=\"gbt-date-range-picker__select\"\n                  [attr.aria-label]=\"monthSelectLabel()\"\n                  (change)=\"onMonthSelect(monthSelect.value)\"\n                >\n                  @for (opt of monthOptions(); track opt.value) {\n                    <option [value]=\"opt.value\" [selected]=\"opt.value === anchorDate().getMonth()\">\n                      {{ opt.label }}\n                    </option>\n                  }\n                </select>\n                <select\n                  #yearSelect\n                  class=\"gbt-date-range-picker__select\"\n                  [attr.aria-label]=\"yearSelectLabel()\"\n                  (change)=\"onYearSelect(yearSelect.value)\"\n                >\n                  @for (year of yearOptions(); track year) {\n                    <option [value]=\"year\" [selected]=\"year === anchorDate().getFullYear()\">\n                      {{ year }}\n                    </option>\n                  }\n                </select>\n              } @else {\n                <span class=\"gbt-date-range-picker__month-label\">{{ view.label }}</span>\n              }\n            </div>\n          }\n        </div>\n        <button\n          type=\"button\"\n          class=\"gbt-date-range-picker__nav-button\"\n          [attr.aria-label]=\"nextMonthLabel()\"\n          (click)=\"shiftMonth(1)\"\n        >\n          <gbt-icon name=\"chevron-right\" aria-hidden=\"true\" />\n        </button>\n      </div>\n      <div class=\"gbt-date-range-picker__months\">\n        @for (view of monthViews(); track view.year + '-' + view.month) {\n          <div class=\"gbt-date-range-picker__month\">\n            <div\n              class=\"gbt-date-range-picker__grid\"\n              role=\"grid\"\n              tabindex=\"-1\"\n              [attr.aria-label]=\"view.label\"\n              (keydown)=\"onGridKeydown($event)\"\n            >\n              <div class=\"gbt-date-range-picker__row gbt-date-range-picker__row--head\" role=\"row\">\n                @for (wd of weekdayLabels(); track $index) {\n                  <span role=\"columnheader\" class=\"gbt-date-range-picker__weekday\">{{ wd }}</span>\n                }\n              </div>\n              @for (week of view.weeks; track $index) {\n                <div class=\"gbt-date-range-picker__row\" role=\"row\">\n                  @for (day of week; track day.date.getTime()) {\n                    @if (day.inCurrentMonth) {\n                      <button\n                        type=\"button\"\n                        role=\"gridcell\"\n                        class=\"gbt-date-range-picker__day\"\n                        [class.gbt-date-range-picker__day--today]=\"day.isToday\"\n                        [class.gbt-date-range-picker__day--start-cap]=\"isRangeStartCap(day.date)\"\n                        [class.gbt-date-range-picker__day--end-cap]=\"isRangeEndCap(day.date)\"\n                        [class.gbt-date-range-picker__day--in-range]=\"isInRange(day.date)\"\n                        [class.gbt-date-range-picker__day--preview]=\"isPreviewing()\"\n                        [attr.data-date]=\"cellId(day.date)\"\n                        [attr.aria-current]=\"day.isToday ? 'date' : null\"\n                        [tabIndex]=\"isFocused(day.date) ? 0 : -1\"\n                        (click)=\"selectDay(day.date)\"\n                        (mouseenter)=\"onDayMouseEnter(day.date)\"\n                        (mouseleave)=\"onDayMouseLeave()\"\n                      >\n                        {{ day.date.getDate() }}\n                      </button>\n                    } @else {\n                      <span\n                        role=\"gridcell\"\n                        class=\"gbt-date-range-picker__day gbt-date-range-picker__day--empty\"\n                      ></span>\n                    }\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"gbt-sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        {{ statusMessage() }}\n      </div>\n    </div>\n  }\n  @if (errorMessage()) {\n    <p [id]=\"id() + '-error'\" class=\"gbt-date-range-picker__error\" role=\"alert\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n",
+			styles: [".gbt-date-range-picker{display:inline-flex;flex-direction:column;gap:.375rem}.gbt-date-range-picker__label{font-size:.8125rem;font-weight:600;color:var(--text-secondary)}.gbt-date-range-picker__error{margin:0;font-size:.75rem;color:var(--color-error-text)}.gbt-date-range-picker__field{position:relative;display:inline-flex}.gbt-date-range-picker__trigger{box-sizing:border-box;display:flex;align-items:center;width:260px;height:var(--gbt-control-height-md);padding:0 34px 0 10px;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:14px;cursor:pointer;transition:border-color .15s cubic-bezier(.4,0,.2,1)}.gbt-date-range-picker__trigger--open{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-date-range-picker__trigger:disabled{cursor:not-allowed;opacity:.5}.gbt-date-range-picker__trigger:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-range-picker__trigger-label{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.gbt-date-range-picker__trigger-label--placeholder{color:var(--text-discret)}.gbt-date-range-picker__icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);color:var(--text-secondary);pointer-events:none}.gbt-date-range-picker__clear{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:none;border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer}.gbt-date-range-picker__clear:hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-date-range-picker__clear:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-range-picker__panel{box-sizing:border-box;position:fixed;z-index:1000;padding:.75rem;background:var(--bg-principal);border:1px solid var(--border-color);border-radius:var(--site-border-radius-sm);box-shadow:var(--site-shadow-lg);animation:gbt-date-range-picker-scale-in .15s cubic-bezier(.34,1.56,.64,1) both}.gbt-date-range-picker__nav{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.gbt-date-range-picker__headings{display:flex;flex:1;justify-content:center;gap:1.25rem}.gbt-date-range-picker__nav-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:none;border:none;border-radius:var(--site-border-radius-sm);color:var(--text-secondary);cursor:pointer}.gbt-date-range-picker__nav-button:hover{background:var(--bg-hover);color:var(--text-primary)}.gbt-date-range-picker__nav-button:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-range-picker__select{box-sizing:border-box;height:28px;padding:0 6px;background:none;border:none;border-radius:var(--site-border-radius-sm);color:var(--text-primary);font-size:13px;font-weight:600;cursor:pointer}.gbt-date-range-picker__select:hover{background:var(--bg-hover)}.gbt-date-range-picker__select:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:2px}.gbt-date-range-picker__months{display:flex;justify-content:center;gap:1.25rem;margin-inline:.65rem;margin-bottom:.65rem}.gbt-date-range-picker__month-heading{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:.375rem;width:184px;height:28px}.gbt-date-range-picker__month-label{font-size:14px;font-weight:600;color:var(--text-primary);text-align:center}.gbt-date-range-picker__row{display:grid;grid-template-columns:repeat(7,32px)}.gbt-date-range-picker__row--head{margin-top:.25rem;margin-bottom:.25rem}.gbt-date-range-picker__weekday{display:flex;align-items:center;justify-content:center;height:24px;font-size:13px;font-weight:600;color:var(--text-secondary)}.gbt-date-range-picker__day{position:relative;z-index:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;color:var(--text-primary);font-size:13px;cursor:pointer}.gbt-date-range-picker__day:before{content:\"\";position:absolute;inset:0;z-index:-1}.gbt-date-range-picker__day:hover:not(:disabled):not(.gbt-date-range-picker__day--empty){border-radius:50%;background:var(--bg-hover)}.gbt-date-range-picker__day:focus-visible{outline:2px solid var(--gbt-focus-ring, var(--focus-ring));outline-offset:-2px;border-radius:50%}.gbt-date-range-picker__day--empty{cursor:default}.gbt-date-range-picker__day--today{font-weight:700;box-shadow:inset 0 0 0 1px var(--border-color);border-radius:50%}.gbt-date-range-picker__day--in-range:before{background:color-mix(in srgb,var(--primary) 12%,transparent)}.gbt-date-range-picker__day--start-cap,.gbt-date-range-picker__day--end-cap{color:var(--text-on-primary);font-weight:600}.gbt-date-range-picker__day--start-cap:before{background:var(--primary);color:var(--text-on-primary);border-radius:50% 0 0 50%}.gbt-date-range-picker__day--end-cap:before{background:var(--primary);color:var(--text-on-primary);border-radius:0 50% 50% 0}.gbt-date-range-picker__day--start-cap.gbt-date-range-picker__day--end-cap:before{border-radius:50%}.gbt-date-range-picker__day--preview.gbt-date-range-picker__day--in-range:before,.gbt-date-range-picker__day--preview.gbt-date-range-picker__day--start-cap:before,.gbt-date-range-picker__day--preview.gbt-date-range-picker__day--end-cap:before{opacity:.6}.gbt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){.gbt-date-range-picker__panel{animation:none}.gbt-date-range-picker__trigger{transition:none}}@keyframes gbt-date-range-picker-scale-in{0%{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		weekStartsOn: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "weekStartsOn",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		errorMessage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorMessage",
+				required: false
+			}]
+		}],
+		previousMonthLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousMonthLabel",
+				required: false
+			}]
+		}],
+		nextMonthLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextMonthLabel",
+				required: false
+			}]
+		}],
+		clearable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearable",
+				required: false
+			}]
+		}],
+		clearLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearLabel",
+				required: false
+			}]
+		}],
+		visibleMonths: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visibleMonths",
+				required: false
+			}]
+		}],
+		monthSelectLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "monthSelectLabel",
+				required: false
+			}]
+		}],
+		yearSelectLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "yearSelectLabel",
+				required: false
+			}]
+		}],
+		minYear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minYear",
+				required: false
+			}]
+		}],
+		maxYear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxYear",
+				required: false
+			}]
+		}],
+		rangeStatus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rangeStatus",
+				required: false
+			}]
+		}]
+	}
+});
+export { DatePicker, DateRangePicker };
+
+//# sourceMappingURL=masmarino-gabarit-date-picker.mjs.map