@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-date-range-picker.mjs

@@ -0,0 +1,1011 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, Injector, LOCALE_ID, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { NgControl } from "@angular/forms";
+import { FormField, transformedValue } from "@angular/forms/signals";
+import { VD_FIELD, vdNgControlState, vdUniqueId } from "@vadem/ui/field";
+import { VdCalendar, vdClampDate, vdFormatShort, vdParseDate, vdParseIso, vdToday } from "@vadem/ui/calendar";
+import { VdPopover } from "@vadem/ui/popover";
+import { VdButton } from "@vadem/ui/button";
+import { VdIcon } from "@vadem/ui/icon";
+import { vdTexts } from "@vadem/ui/locale";
+function vdValidRange(value) {
+	if (!value || typeof value !== "object") return null;
+	const range = value;
+	return typeof range.start === "string" && typeof range.end === "string" && vdParseIso(range.start) && vdParseIso(range.end) && range.start <= range.end ? {
+		start: range.start,
+		end: range.end
+	} : null;
+}
+function vdRangeAllowed(range, min, max) {
+	return (!min || range.start >= min) && (!max || range.end <= max) && (!min || !max || min <= max);
+}
+function vdRangeBetween(a, b) {
+	return a <= b ? {
+		start: a,
+		end: b
+	} : {
+		start: b,
+		end: a
+	};
+}
+function vdParseRangeDate(text, locale) {
+	return vdParseDate(text.replace(/[٠-٩۰-۹]/g, (char) => String(char.charCodeAt(0) - (char >= "۰" ? 1776 : 1632))), locale);
+}
+var VdDateRangePicker = class VdDateRangePicker {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	minDate = input(null, ...ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []);
+	maxDate = input(null, ...ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []);
+	locale = input(inject(LOCALE_ID), ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	firstDayOfWeek = input(void 0, ...ngDevMode ? [{ debugName: "firstDayOfWeek" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* 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
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	groupLabel = input(...ngDevMode ? [void 0, { debugName: "groupLabel" }] : /* istanbul ignore next */ []);
+	startLabel = input(...ngDevMode ? [void 0, { debugName: "startLabel" }] : /* istanbul ignore next */ []);
+	endLabel = input(...ngDevMode ? [void 0, { debugName: "endLabel" }] : /* istanbul ignore next */ []);
+	openLabel = input(...ngDevMode ? [void 0, { debugName: "openLabel" }] : /* istanbul ignore next */ []);
+	pickerLabel = input(...ngDevMode ? [void 0, { debugName: "pickerLabel" }] : /* istanbul ignore next */ []);
+	previousLabel = input(...ngDevMode ? [void 0, { debugName: "previousLabel" }] : /* istanbul ignore next */ []);
+	nextLabel = input(...ngDevMode ? [void 0, { debugName: "nextLabel" }] : /* istanbul ignore next */ []);
+	startInstruction = input(...ngDevMode ? [void 0, { debugName: "startInstruction" }] : /* istanbul ignore next */ []);
+	endInstruction = input(...ngDevMode ? [void 0, { debugName: "endInstruction" }] : /* istanbul ignore next */ []);
+	errorLabel = input(...ngDevMode ? [void 0, { debugName: "errorLabel" }] : /* istanbul ignore next */ []);
+	t = vdTexts("dateRangePicker", {
+		groupLabel: this.groupLabel,
+		startLabel: this.startLabel,
+		endLabel: this.endLabel,
+		openLabel: this.openLabel,
+		pickerLabel: this.pickerLabel,
+		previousLabel: this.previousLabel,
+		nextLabel: this.nextLabel,
+		startInstruction: this.startInstruction,
+		endInstruction: this.endInstruction,
+		errorLabel: this.errorLabel
+	});
+	touch = output();
+	controlId = vdUniqueId("vd-date-range-picker");
+	endId = `${this.controlId}-end`;
+	errorId = `${this.controlId}-error`;
+	safeMin = computed(() => vdParseIso(this.minDate()) ? this.minDate() : null, ...ngDevMode ? [{ debugName: "safeMin" }] : /* istanbul ignore next */ []);
+	safeMax = computed(() => vdParseIso(this.maxDate()) ? this.maxDate() : null, ...ngDevMode ? [{ debugName: "safeMax" }] : /* istanbul ignore next */ []);
+	range = computed(() => vdValidRange(this.value()), ...ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []);
+	raw = transformedValue(this.value, {
+		format: (value) => {
+			const range = vdValidRange(value);
+			return {
+				start: this.format(range?.start ?? null),
+				end: this.format(range?.end ?? null),
+				commit: true
+			};
+		},
+		parse: (text) => {
+			const start = text.start.trim(), end = text.end.trim();
+			if (!start && !end) return { value: null };
+			const a = vdParseRangeDate(start, this.locale()), b = vdParseRangeDate(end, this.locale());
+			const range = a && b && a <= b ? {
+				start: a,
+				end: b
+			} : null;
+			if (!range || !vdRangeAllowed(range, this.safeMin(), this.safeMax())) return {
+				value: null,
+				error: {
+					kind: "dateRange",
+					message: this.t().errorLabel
+				}
+			};
+			return { value: text.commit ? range : null };
+		}
+	});
+	startText = computed(() => this.raw().start, ...ngDevMode ? [{ debugName: "startText" }] : /* istanbul ignore next */ []);
+	endText = computed(() => this.raw().end, ...ngDevMode ? [{ debugName: "endText" }] : /* istanbul ignore next */ []);
+	placeholder = computed(() => vdFormatShort("2026-12-31", this.locale()), ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	feedback = signal(false, ...ngDevMode ? [{ debugName: "feedback" }] : /* istanbul ignore next */ []);
+	parseError = computed(() => this.feedback() && this.raw.parseErrors().length > 0, ...ngDevMode ? [{ debugName: "parseError" }] : /* istanbul ignore next */ []);
+	draftStart = signal(null, ...ngDevMode ? [{ debugName: "draftStart" }] : /* istanbul ignore next */ []);
+	draftEnd = signal(null, ...ngDevMode ? [{ debugName: "draftEnd" }] : /* istanbul ignore next */ []);
+	selectingEnd = signal(false, ...ngDevMode ? [{ debugName: "selectingEnd" }] : /* istanbul ignore next */ []);
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	field = inject(VD_FIELD, { optional: true });
+	host = inject(ElementRef).nativeElement;
+	popup = viewChild.required(VdPopover, ...ngDevMode ? [{ debugName: "popup" }] : /* istanbul ignore next */ []);
+	trigger = viewChild.required("trigger", {
+		...ngDevMode ? { debugName: "trigger" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	startInput = viewChild.required("start", ...ngDevMode ? [{ debugName: "startInput" }] : /* istanbul ignore next */ []);
+	focus(options) {
+		this.startInput().nativeElement.focus(options);
+	}
+	calendar = viewChild.required(VdCalendar, ...ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []);
+	injector = inject(Injector);
+	destroyRef = inject(DestroyRef);
+	formBound = signal(false, ...ngDevMode ? [{ debugName: "formBound" }] : /* istanbul ignore next */ []);
+	ngSource = signal(null, ...ngDevMode ? [{ debugName: "ngSource" }] : /* istanbul ignore next */ []);
+	ngState = computed(() => this.ngSource()?.() ?? {
+		invalid: false,
+		touched: false,
+		disabled: false,
+		required: false
+	}, ...ngDevMode ? [{ debugName: "ngState" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.ngState().disabled, ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	locked = computed(() => this.isDisabled() || this.readonly(), ...ngDevMode ? [{ debugName: "locked" }] : /* istanbul ignore next */ []);
+	isRequired = computed(() => this.required() || this.ngState().required, ...ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []);
+	boundsError = computed(() => !!this.value() && (!this.range() || !vdRangeAllowed(this.range(), this.safeMin(), this.safeMax())), ...ngDevMode ? [{ debugName: "boundsError" }] : /* istanbul ignore next */ []);
+	showInvalid = computed(() => this.parseError() || this.boundsError() || this.invalid() && (!this.formBound() || this.touched()) || this.ngState().invalid && this.ngState().touched, ...ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => [this.field?.describedBy(), this.parseError() ? this.errorId : null].filter(Boolean).join(" ") || null, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	unavailable = () => this.locked() || !!this.safeMin() && !!this.safeMax() && this.safeMin() > this.safeMax();
+	wasOpen = null;
+	lastValue;
+	lastMin;
+	lastMax;
+	editedValue;
+	constructor() {
+		const control = {
+			id: signal(this.controlId),
+			invalid: this.showInvalid,
+			required: this.isRequired,
+			disabled: this.isDisabled
+		};
+		this.field?.register(control);
+		this.destroyRef.onDestroy(() => this.field?.unregister(control));
+		afterNextRender(() => {
+			const anchor = `--${this.popup().id}`;
+			this.trigger().nativeElement.style.setProperty("anchor-name", anchor);
+			this.popup().el.style.setProperty("position-anchor", anchor);
+		});
+		afterRenderEffect(() => {
+			const value = this.value(), min = this.safeMin(), max = this.safeMax();
+			if (this.lastValue !== void 0 && this.lastValue !== value) {
+				this.popup().hide();
+				if (value !== this.editedValue) this.feedback.set(false);
+			}
+			if (this.locked() || this.lastMin !== min || this.lastMax !== max) this.popup().hide();
+			this.lastValue = value;
+			this.lastMin = min;
+			this.lastMax = max;
+		});
+	}
+	ngOnInit() {
+		const ng = this.injector.get(NgControl, null, {
+			self: true,
+			optional: true
+		});
+		this.formBound.set(!!ng || !!this.injector.get(FormField, null, {
+			self: true,
+			optional: true
+		}));
+		this.ngSource.set(vdNgControlState(ng, this.destroyRef));
+	}
+	format(date) {
+		return date ? vdFormatShort(date, this.locale()) : "";
+	}
+	edit(event, part) {
+		if (this.locked()) return;
+		const text = event.target.value;
+		const start = part === "start" ? text : this.startText();
+		const end = part === "end" ? text : this.endText();
+		this.editedValue = null;
+		this.raw.set({
+			start,
+			end,
+			commit: false
+		});
+		this.feedback.set(false);
+	}
+	commitText(incomplete = false) {
+		if (this.locked()) return;
+		const start = this.startText().trim(), end = this.endText().trim();
+		if (!start && !end) {
+			this.feedback.set(false);
+			this.setRange(null);
+			return;
+		}
+		const a = start ? vdParseRangeDate(start, this.locale()) : null;
+		const b = end ? vdParseRangeDate(end, this.locale()) : null;
+		const allowed = (date) => (!this.safeMin() || date >= this.safeMin()) && (!this.safeMax() || date <= this.safeMax());
+		if (start && (!a || !allowed(a)) || end && (!b || !allowed(b)) || a && b && a > b) {
+			this.feedback.set(true);
+			return;
+		}
+		if (!a || !b) {
+			if (incomplete) this.feedback.set(true);
+			return;
+		}
+		const range = {
+			start: a,
+			end: b
+		};
+		if (!vdRangeAllowed(range, this.safeMin(), this.safeMax())) {
+			this.feedback.set(true);
+			return;
+		}
+		this.feedback.set(false);
+		this.setRange(range);
+	}
+	setRange(range) {
+		this.editedValue = range;
+		this.value.set(range);
+		this.raw.set({
+			start: this.format(range?.start ?? null),
+			end: this.format(range?.end ?? null),
+			commit: true
+		});
+		this.editedValue = this.value();
+	}
+	inputKey(event) {
+		if (event.isComposing || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		if (event.key === "Enter" && !event.altKey) {
+			event.preventDefault();
+			this.commitText(true);
+		}
+		if (event.altKey && event.key === "ArrowDown" && !this.popup().el.matches(":popover-open")) {
+			event.preventDefault();
+			this.wasOpen = false;
+			this.toggle();
+		}
+	}
+	rememberState() {
+		this.wasOpen = this.popup().el.matches(":popover-open");
+	}
+	toggle() {
+		const wasOpen = this.wasOpen ?? this.popup().el.matches(":popover-open");
+		this.wasOpen = null;
+		if (this.locked()) return;
+		if (wasOpen) {
+			this.popup().hide();
+			return;
+		}
+		const range = this.range();
+		this.draftStart.set(range?.start ?? null);
+		this.draftEnd.set(range?.end ?? null);
+		this.selectingEnd.set(false);
+		this.calendar().focused.set(vdClampDate(range?.start ?? vdToday(), this.safeMin(), this.safeMax()));
+		this.popup().el.showPopover({ source: this.trigger().nativeElement });
+	}
+	onToggle(event) {
+		const opened = event.newState === "open";
+		this.open.set(opened);
+		if (opened && !this.locked()) this.calendar().focus();
+	}
+	pick(date) {
+		if (this.locked() || this.calendar().isDisabled(date)) return;
+		if (!this.selectingEnd() || !this.draftStart()) {
+			this.draftStart.set(date);
+			this.draftEnd.set(null);
+			this.selectingEnd.set(true);
+			this.calendar().focus();
+			return;
+		}
+		const range = vdRangeBetween(this.draftStart(), date);
+		if (!vdRangeAllowed(range, this.safeMin(), this.safeMax())) return;
+		this.feedback.set(false);
+		this.setRange(range);
+		this.popup().hide();
+		this.trigger().nativeElement.focus();
+	}
+	leavePopup(event) {
+		if (event.relatedTarget && !this.popup().el.contains(event.relatedTarget)) this.popup().hide();
+	}
+	leaveControl(event) {
+		if (!event.relatedTarget || !this.host.contains(event.relatedTarget)) {
+			this.commitText(true);
+			this.touch.emit();
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdDateRangePicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdDateRangePicker,
+		isStandalone: true,
+		selector: "vd-date-range-picker",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				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
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			firstDayOfWeek: {
+				classPropertyName: "firstDayOfWeek",
+				publicName: "firstDayOfWeek",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				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
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			groupLabel: {
+				classPropertyName: "groupLabel",
+				publicName: "groupLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			startLabel: {
+				classPropertyName: "startLabel",
+				publicName: "startLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			endLabel: {
+				classPropertyName: "endLabel",
+				publicName: "endLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			openLabel: {
+				classPropertyName: "openLabel",
+				publicName: "openLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pickerLabel: {
+				classPropertyName: "pickerLabel",
+				publicName: "pickerLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previousLabel: {
+				classPropertyName: "previousLabel",
+				publicName: "previousLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			nextLabel: {
+				classPropertyName: "nextLabel",
+				publicName: "nextLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			startInstruction: {
+				classPropertyName: "startInstruction",
+				publicName: "startInstruction",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			endInstruction: {
+				classPropertyName: "endInstruction",
+				publicName: "endInstruction",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorLabel: {
+				classPropertyName: "errorLabel",
+				publicName: "errorLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			listeners: { "focusout": "leaveControl($event)" },
+			properties: {
+				"attr.data-size": "size()",
+				"attr.data-disabled": "isDisabled() ? \"\" : null",
+				"attr.data-readonly": "readonly() ? \"\" : null",
+				"attr.data-invalid": "showInvalid() ? \"\" : null",
+				"attr.data-open": "open() ? \"\" : null"
+			},
+			classAttribute: "vd-date-range-picker"
+		},
+		viewQueries: [
+			{
+				propertyName: "popup",
+				first: true,
+				predicate: VdPopover,
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "trigger",
+				first: true,
+				predicate: ["trigger"],
+				descendants: true,
+				read: ElementRef,
+				isSignal: true
+			},
+			{
+				propertyName: "startInput",
+				first: true,
+				predicate: ["start"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "calendar",
+				first: true,
+				predicate: VdCalendar,
+				descendants: true,
+				isSignal: true
+			}
+		],
+		ngImport: i0,
+		template: `
+    <div class="vd-date-range-picker__fields" role="group" [attr.aria-label]="t().groupLabel">
+      <div class="vd-date-range-picker__field">
+        <label [for]="controlId">{{ t().startLabel }}</label>
+        <input
+          #start
+          class="vd-input"
+          type="text"
+          inputmode="numeric"
+          autocomplete="off"
+          [id]="controlId"
+          [attr.data-size]="size()"
+          [value]="startText()"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          [required]="isRequired()"
+          [attr.aria-invalid]="showInvalid() || null"
+          [attr.data-invalid]="showInvalid() ? '' : null"
+          [attr.aria-describedby]="describedBy()"
+          (input)="edit($event, 'start')"
+          (blur)="commitText()"
+          (keydown)="inputKey($event)"
+        />
+      </div>
+      <div class="vd-date-range-picker__field">
+        <label [for]="endId">{{ t().endLabel }}</label>
+        <input
+          #end
+          class="vd-input"
+          type="text"
+          inputmode="numeric"
+          autocomplete="off"
+          [id]="endId"
+          [attr.data-size]="size()"
+          [value]="endText()"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          [required]="isRequired()"
+          [attr.aria-invalid]="showInvalid() || null"
+          [attr.data-invalid]="showInvalid() ? '' : null"
+          [attr.aria-describedby]="describedBy()"
+          (input)="edit($event, 'end')"
+          (blur)="commitText()"
+          (keydown)="inputKey($event)"
+        />
+      </div>
+      <button
+        #trigger
+        vdButton
+        type="button"
+        variant="secondary"
+        iconOnly
+        [size]="size()"
+        [disabled]="locked()"
+        class="vd-date-range-picker__trigger"
+        [attr.aria-label]="t().openLabel"
+        aria-haspopup="dialog"
+        [attr.aria-controls]="popup.id"
+        [attr.aria-expanded]="open()"
+        (pointerdown)="rememberState()"
+        (click)="toggle()"
+      >
+        <vd-icon name="calendar" />
+      </button>
+    </div>
+    @if (parseError()) {
+      <p class="vd-date-range-picker__error" [id]="errorId">
+        <vd-icon name="alert-circle" />{{ t().errorLabel }}
+      </p>
+    }
+    <div
+      vdPopover
+      #popup="vdPopover"
+      class="vd-date-range-picker__popup"
+      [attr.aria-label]="t().pickerLabel"
+      (toggle)="onToggle($event)"
+      (focusout)="leavePopup($event)"
+    >
+      <p class="vd-date-range-picker__instruction" role="status">
+        {{ selectingEnd() ? t().endInstruction : t().startInstruction }}
+      </p>
+      <vd-calendar
+        selectionMode="range"
+        [rangeStart]="draftStart()"
+        [rangeEnd]="draftEnd()"
+        [min]="safeMin()"
+        [max]="safeMax()"
+        [dateDisabled]="unavailable"
+        [locale]="locale()"
+        [firstDayOfWeek]="firstDayOfWeek()"
+        [previousLabel]="t().previousLabel"
+        [nextLabel]="t().nextLabel"
+        (dateSelected)="pick($event)"
+      />
+      @if (draftStart()) {
+        <p class="vd-date-range-picker__summary">
+          {{ t().startLabel }}: {{ format(draftStart()) }}<br />{{ t().endLabel }}:
+          {{ draftEnd() ? format(draftEnd()) : '—' }}
+        </p>
+      }
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "component",
+				type: VdCalendar,
+				selector: "vd-calendar",
+				inputs: [
+					"value",
+					"selectionMode",
+					"rangeStart",
+					"rangeEnd",
+					"min",
+					"max",
+					"dateDisabled",
+					"locale",
+					"firstDayOfWeek",
+					"previousLabel",
+					"nextLabel"
+				],
+				outputs: ["valueChange", "dateSelected"]
+			},
+			{
+				kind: "directive",
+				type: VdPopover,
+				selector: "[vdPopover]",
+				inputs: ["placement"],
+				exportAs: ["vdPopover"]
+			},
+			{
+				kind: "component",
+				type: VdButton,
+				selector: "button[vdButton], a[vdButton]",
+				inputs: [
+					"variant",
+					"size",
+					"disabled",
+					"loading",
+					"iconOnly",
+					"type"
+				]
+			},
+			{
+				kind: "component",
+				type: VdIcon,
+				selector: "vd-icon",
+				inputs: ["name", "label"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdDateRangePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-date-range-picker",
+			imports: [
+				VdCalendar,
+				VdPopover,
+				VdButton,
+				VdIcon
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: {
+				class: "vd-date-range-picker",
+				"[attr.data-size]": "size()",
+				"[attr.data-disabled]": "isDisabled() ? \"\" : null",
+				"[attr.data-readonly]": "readonly() ? \"\" : null",
+				"[attr.data-invalid]": "showInvalid() ? \"\" : null",
+				"[attr.data-open]": "open() ? \"\" : null",
+				"(focusout)": "leaveControl($event)"
+			},
+			template: `
+    <div class="vd-date-range-picker__fields" role="group" [attr.aria-label]="t().groupLabel">
+      <div class="vd-date-range-picker__field">
+        <label [for]="controlId">{{ t().startLabel }}</label>
+        <input
+          #start
+          class="vd-input"
+          type="text"
+          inputmode="numeric"
+          autocomplete="off"
+          [id]="controlId"
+          [attr.data-size]="size()"
+          [value]="startText()"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          [required]="isRequired()"
+          [attr.aria-invalid]="showInvalid() || null"
+          [attr.data-invalid]="showInvalid() ? '' : null"
+          [attr.aria-describedby]="describedBy()"
+          (input)="edit($event, 'start')"
+          (blur)="commitText()"
+          (keydown)="inputKey($event)"
+        />
+      </div>
+      <div class="vd-date-range-picker__field">
+        <label [for]="endId">{{ t().endLabel }}</label>
+        <input
+          #end
+          class="vd-input"
+          type="text"
+          inputmode="numeric"
+          autocomplete="off"
+          [id]="endId"
+          [attr.data-size]="size()"
+          [value]="endText()"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [readOnly]="readonly()"
+          [required]="isRequired()"
+          [attr.aria-invalid]="showInvalid() || null"
+          [attr.data-invalid]="showInvalid() ? '' : null"
+          [attr.aria-describedby]="describedBy()"
+          (input)="edit($event, 'end')"
+          (blur)="commitText()"
+          (keydown)="inputKey($event)"
+        />
+      </div>
+      <button
+        #trigger
+        vdButton
+        type="button"
+        variant="secondary"
+        iconOnly
+        [size]="size()"
+        [disabled]="locked()"
+        class="vd-date-range-picker__trigger"
+        [attr.aria-label]="t().openLabel"
+        aria-haspopup="dialog"
+        [attr.aria-controls]="popup.id"
+        [attr.aria-expanded]="open()"
+        (pointerdown)="rememberState()"
+        (click)="toggle()"
+      >
+        <vd-icon name="calendar" />
+      </button>
+    </div>
+    @if (parseError()) {
+      <p class="vd-date-range-picker__error" [id]="errorId">
+        <vd-icon name="alert-circle" />{{ t().errorLabel }}
+      </p>
+    }
+    <div
+      vdPopover
+      #popup="vdPopover"
+      class="vd-date-range-picker__popup"
+      [attr.aria-label]="t().pickerLabel"
+      (toggle)="onToggle($event)"
+      (focusout)="leavePopup($event)"
+    >
+      <p class="vd-date-range-picker__instruction" role="status">
+        {{ selectingEnd() ? t().endInstruction : t().startInstruction }}
+      </p>
+      <vd-calendar
+        selectionMode="range"
+        [rangeStart]="draftStart()"
+        [rangeEnd]="draftEnd()"
+        [min]="safeMin()"
+        [max]="safeMax()"
+        [dateDisabled]="unavailable"
+        [locale]="locale()"
+        [firstDayOfWeek]="firstDayOfWeek()"
+        [previousLabel]="t().previousLabel"
+        [nextLabel]="t().nextLabel"
+        (dateSelected)="pick($event)"
+      />
+      @if (draftStart()) {
+        <p class="vd-date-range-picker__summary">
+          {{ t().startLabel }}: {{ format(draftStart()) }}<br />{{ t().endLabel }}:
+          {{ draftEnd() ? format(draftEnd()) : '—' }}
+        </p>
+      }
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		minDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minDate",
+				required: false
+			}]
+		}],
+		maxDate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxDate",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		firstDayOfWeek: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "firstDayOfWeek",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		groupLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "groupLabel",
+				required: false
+			}]
+		}],
+		startLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "startLabel",
+				required: false
+			}]
+		}],
+		endLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "endLabel",
+				required: false
+			}]
+		}],
+		openLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "openLabel",
+				required: false
+			}]
+		}],
+		pickerLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pickerLabel",
+				required: false
+			}]
+		}],
+		previousLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previousLabel",
+				required: false
+			}]
+		}],
+		nextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "nextLabel",
+				required: false
+			}]
+		}],
+		startInstruction: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "startInstruction",
+				required: false
+			}]
+		}],
+		endInstruction: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "endInstruction",
+				required: false
+			}]
+		}],
+		errorLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorLabel",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}],
+		popup: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => VdPopover), { isSignal: true }]
+		}],
+		trigger: [{
+			type: i0.ViewChild,
+			args: ["trigger", {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}],
+		startInput: [{
+			type: i0.ViewChild,
+			args: ["start", { isSignal: true }]
+		}],
+		calendar: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => VdCalendar), { isSignal: true }]
+		}]
+	}
+});
+export { VdDateRangePicker };
+
+//# sourceMappingURL=vadem-ui-date-range-picker.mjs.map