@area8975/ui 0.2.2-dev.48 → 0.2.2-dev.50

package/fesm2022/area8975-ui-datepicker.mjs

@@ -0,0 +1,547 @@
+import * as i0 from "@angular/core";
+import { Component, ElementRef, Injector, afterNextRender, booleanAttribute, computed, inject, input, model, signal, viewChild } from "@angular/core";
+import { UiButtonComponent } from "@area8975/ui/button";
+import { UiCalendarComponent, parseIsoDateTime, parseTime, toIsoDate } from "@area8975/ui/calendar";
+import { UiCardComponent } from "@area8975/ui/card";
+import { UiDropdownComponent, UiDropdownDirective } from "@area8975/ui/dropdown";
+import { UiInputComponent } from "@area8975/ui/input";
+import { UiTimeSelectComponent } from "@area8975/ui/time-select";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroCalendar, heroXMark } from "@ng-icons/heroicons/outline";
+const OPEN_KEYS = [
+	"Enter",
+	" ",
+	"ArrowDown"
+];
+var UiDatepickerComponent = class UiDatepickerComponent {
+	host = inject(ElementRef);
+	injector = inject(Injector);
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	id = input("", ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	placeholder = input("Select date", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	clearable = input(true, {
+		...ngDevMode ? { debugName: "clearable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	validationState = input(null, ...ngDevMode ? [{ debugName: "validationState" }] : /* istanbul ignore next */ []);
+	describedBy = input("", ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	min = input(null, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+	max = input(null, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	isDateDisabled = input(() => false, ...ngDevMode ? [{ debugName: "isDateDisabled" }] : /* istanbul ignore next */ []);
+	weekStart = input(1, ...ngDevMode ? [{ debugName: "weekStart" }] : /* istanbul ignore next */ []);
+	locale = input("en-GB", ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	withTime = input(false, {
+		...ngDevMode ? { debugName: "withTime" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	minuteStep = input(5, ...ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []);
+	defaultTime = input("00:00", ...ngDevMode ? [{ debugName: "defaultTime" }] : /* istanbul ignore next */ []);
+	format = input(null, ...ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []);
+	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	calendar = viewChild(UiCalendarComponent, ...ngDevMode ? [{ debugName: "calendar" }] : /* istanbul ignore next */ []);
+	datePart = computed(() => this.value()?.slice(0, 10) ?? null, ...ngDevMode ? [{ debugName: "datePart" }] : /* istanbul ignore next */ []);
+	timePart = computed(() => {
+		const time = this.value()?.slice(11, 16);
+		return parseTime(time) ? time : this.defaultTime();
+	}, ...ngDevMode ? [{ debugName: "timePart" }] : /* istanbul ignore next */ []);
+	display = computed(() => {
+		const date = parseIsoDateTime(this.value());
+		const format = this.format() ?? (this.withTime() ? {
+			dateStyle: "medium",
+			timeStyle: "short"
+		} : { dateStyle: "medium" });
+		return date ? new Intl.DateTimeFormat(this.locale(), format).format(date) : "";
+	}, ...ngDevMode ? [{ debugName: "display" }] : /* istanbul ignore next */ []);
+	toggle() {
+		if (!this.disabled()) this.isOpen.update((open) => !open);
+	}
+	handleInputKeydown(event) {
+		if (this.disabled() || !OPEN_KEYS.includes(event.key)) return;
+		event.preventDefault();
+		this.isOpen.set(true);
+		afterNextRender(() => this.calendar()?.focusActiveDate(), { injector: this.injector });
+	}
+	handlePick(date) {
+		if (!date) return;
+		if (!this.withTime()) {
+			this.value.set(date);
+			this.close();
+			return;
+		}
+		this.value.set(`${date}T${this.timePart()}`);
+	}
+	handleTime(time) {
+		const date = this.datePart() ?? toIsoDate(/* @__PURE__ */ new Date());
+		this.value.set(`${date}T${time}`);
+	}
+	close() {
+		this.isOpen.set(false);
+		this.focusInput();
+	}
+	handlePanelKeydown(event) {
+		if (event.key === "Escape") this.focusInput();
+	}
+	clear(event) {
+		event.stopPropagation();
+		this.value.set(null);
+		this.focusInput();
+	}
+	focusInput() {
+		this.host.nativeElement.querySelector("input")?.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDatepickerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiDatepickerComponent,
+		isStandalone: true,
+		selector: "ui-datepicker",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clearable: {
+				classPropertyName: "clearable",
+				publicName: "clearable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			validationState: {
+				classPropertyName: "validationState",
+				publicName: "validationState",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			describedBy: {
+				classPropertyName: "describedBy",
+				publicName: "describedBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			min: {
+				classPropertyName: "min",
+				publicName: "min",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isDateDisabled: {
+				classPropertyName: "isDateDisabled",
+				publicName: "isDateDisabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			weekStart: {
+				classPropertyName: "weekStart",
+				publicName: "weekStart",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			withTime: {
+				classPropertyName: "withTime",
+				publicName: "withTime",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minuteStep: {
+				classPropertyName: "minuteStep",
+				publicName: "minuteStep",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			defaultTime: {
+				classPropertyName: "defaultTime",
+				publicName: "defaultTime",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			format: {
+				classPropertyName: "format",
+				publicName: "format",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			properties: { "attr.id": "null" },
+			classAttribute: "block"
+		},
+		providers: [provideIcons({
+			heroCalendar,
+			heroXMark
+		})],
+		viewQueries: [{
+			propertyName: "calendar",
+			first: true,
+			predicate: UiCalendarComponent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<ui-dropdown\n    [isOpen]=\"isOpen\"\n    placement=\"bottom-start\"\n    closeBehaviour=\"whenClickOutside\"\n    class=\"w-full\"\n>\n    <ui-input\n        [value]=\"display()\"\n        [id]=\"id()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [describedBy]=\"describedBy()\"\n        [ariaExpanded]=\"isOpen()\"\n        ariaHasPopup=\"dialog\"\n        [validationState]=\"validationState()\"\n        classes=\"cursor-pointer\"\n        autocomplete=\"off\"\n        readonly\n        (click)=\"toggle()\"\n        (keydown)=\"handleInputKeydown($event)\"\n    >\n        <ng-template #leading>\n            <ng-icon\n                name=\"heroCalendar\"\n                class=\"ms-3 text-muted-foreground-1 shrink-0\"\n            />\n        </ng-template>\n\n        <ng-template #trailing>\n            @if (clearable() && value() && !disabled()) {\n                <button\n                    type=\"button\"\n                    class=\"inline-flex justify-center items-center self-stretch w-8 text-muted-foreground-1 hover:text-foreground\"\n                    aria-label=\"Clear date\"\n                    (click)=\"clear($event)\"\n                >\n                    <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n                </button>\n            }\n        </ng-template>\n    </ui-input>\n\n    @if (isOpen()) {\n        <div uiDropdownContent class=\"py-2\">\n            <ui-card radius=\"xl\" class=\"p-3\">\n                <ui-calendar\n                    [value]=\"datePart()\"\n                    [min]=\"min()\"\n                    [max]=\"max()\"\n                    [isDateDisabled]=\"isDateDisabled()\"\n                    [weekStart]=\"weekStart()\"\n                    [locale]=\"locale()\"\n                    (valueChange)=\"handlePick($event)\"\n                    (keydown)=\"handlePanelKeydown($event)\"\n                />\n\n                @if (withTime()) {\n                    <div class=\"flex justify-between items-center gap-x-2 mt-3 pt-3 border-line-2 border-t\">\n                        <ui-time-select\n                            [value]=\"timePart()\"\n                            [minuteStep]=\"minuteStep()\"\n                            (valueChange)=\"handleTime($event)\"\n                            (keydown)=\"handlePanelKeydown($event)\"\n                        />\n\n                        <ui-button size=\"sm\" (click)=\"close()\">Done</ui-button>\n                    </div>\n                }\n            </ui-card>\n        </div>\n    }\n</ui-dropdown>\n",
+		styles: ["@layer components{:host{width:100%}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: UiInputComponent,
+				selector: "ui-input",
+				inputs: [
+					"value",
+					"classes",
+					"type",
+					"id",
+					"name",
+					"placeholder",
+					"autocomplete",
+					"inputmode",
+					"required",
+					"disabled",
+					"readonly",
+					"validationState",
+					"min",
+					"max",
+					"step",
+					"pattern",
+					"minlength",
+					"maxlength",
+					"autofocus",
+					"spellcheck",
+					"revealable",
+					"list",
+					"ariaLabel",
+					"describedBy",
+					"inputRole",
+					"ariaExpanded",
+					"ariaControls",
+					"ariaActiveDescendant",
+					"ariaAutocomplete",
+					"ariaHasPopup"
+				],
+				outputs: [
+					"valueChange",
+					"validationStateChange",
+					"focused",
+					"blurred"
+				]
+			},
+			{
+				kind: "component",
+				type: UiCalendarComponent,
+				selector: "ui-calendar",
+				inputs: [
+					"mode",
+					"value",
+					"range",
+					"min",
+					"max",
+					"isDateDisabled",
+					"weekStart",
+					"locale",
+					"dayClass",
+					"hideSelection"
+				],
+				outputs: [
+					"valueChange",
+					"rangeChange",
+					"dayClick",
+					"monthChange"
+				]
+			},
+			{
+				kind: "component",
+				type: UiDropdownComponent,
+				selector: "ui-dropdown",
+				inputs: [
+					"isOpen",
+					"placement",
+					"closeBehaviour",
+					"offset",
+					"viewportPadding",
+					"matchWidth"
+				],
+				exportAs: ["uiDropdown"]
+			},
+			{
+				kind: "directive",
+				type: UiDropdownDirective,
+				selector: "[uiDropdownContent]"
+			},
+			{
+				kind: "component",
+				type: UiButtonComponent,
+				selector: "ui-button",
+				inputs: [
+					"appearance",
+					"intent",
+					"size",
+					"classes",
+					"type",
+					"ariaLabel",
+					"disabled",
+					"loading"
+				]
+			},
+			{
+				kind: "component",
+				type: UiTimeSelectComponent,
+				selector: "ui-time-select",
+				inputs: [
+					"value",
+					"minuteStep",
+					"disabled"
+				],
+				outputs: ["valueChange"]
+			},
+			{
+				kind: "component",
+				type: NgIcon,
+				selector: "ng-icon",
+				inputs: [
+					"name",
+					"svg",
+					"size",
+					"strokeWidth",
+					"color"
+				]
+			},
+			{
+				kind: "component",
+				type: UiCardComponent,
+				selector: "ui-card",
+				inputs: ["radius"]
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiDatepickerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-datepicker",
+			imports: [
+				UiInputComponent,
+				UiCalendarComponent,
+				UiDropdownComponent,
+				UiDropdownDirective,
+				UiButtonComponent,
+				UiTimeSelectComponent,
+				NgIcon,
+				UiCardComponent
+			],
+			host: {
+				class: "block",
+				"[attr.id]": "null"
+			},
+			providers: [provideIcons({
+				heroCalendar,
+				heroXMark
+			})],
+			template: "<ui-dropdown\n    [isOpen]=\"isOpen\"\n    placement=\"bottom-start\"\n    closeBehaviour=\"whenClickOutside\"\n    class=\"w-full\"\n>\n    <ui-input\n        [value]=\"display()\"\n        [id]=\"id()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [describedBy]=\"describedBy()\"\n        [ariaExpanded]=\"isOpen()\"\n        ariaHasPopup=\"dialog\"\n        [validationState]=\"validationState()\"\n        classes=\"cursor-pointer\"\n        autocomplete=\"off\"\n        readonly\n        (click)=\"toggle()\"\n        (keydown)=\"handleInputKeydown($event)\"\n    >\n        <ng-template #leading>\n            <ng-icon\n                name=\"heroCalendar\"\n                class=\"ms-3 text-muted-foreground-1 shrink-0\"\n            />\n        </ng-template>\n\n        <ng-template #trailing>\n            @if (clearable() && value() && !disabled()) {\n                <button\n                    type=\"button\"\n                    class=\"inline-flex justify-center items-center self-stretch w-8 text-muted-foreground-1 hover:text-foreground\"\n                    aria-label=\"Clear date\"\n                    (click)=\"clear($event)\"\n                >\n                    <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n                </button>\n            }\n        </ng-template>\n    </ui-input>\n\n    @if (isOpen()) {\n        <div uiDropdownContent class=\"py-2\">\n            <ui-card radius=\"xl\" class=\"p-3\">\n                <ui-calendar\n                    [value]=\"datePart()\"\n                    [min]=\"min()\"\n                    [max]=\"max()\"\n                    [isDateDisabled]=\"isDateDisabled()\"\n                    [weekStart]=\"weekStart()\"\n                    [locale]=\"locale()\"\n                    (valueChange)=\"handlePick($event)\"\n                    (keydown)=\"handlePanelKeydown($event)\"\n                />\n\n                @if (withTime()) {\n                    <div class=\"flex justify-between items-center gap-x-2 mt-3 pt-3 border-line-2 border-t\">\n                        <ui-time-select\n                            [value]=\"timePart()\"\n                            [minuteStep]=\"minuteStep()\"\n                            (valueChange)=\"handleTime($event)\"\n                            (keydown)=\"handlePanelKeydown($event)\"\n                        />\n\n                        <ui-button size=\"sm\" (click)=\"close()\">Done</ui-button>\n                    </div>\n                }\n            </ui-card>\n        </div>\n    }\n</ui-dropdown>\n",
+			styles: ["@layer components{:host{width:100%}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		clearable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearable",
+				required: false
+			}]
+		}],
+		validationState: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "validationState",
+				required: false
+			}]
+		}],
+		describedBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "describedBy",
+				required: false
+			}]
+		}],
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		isDateDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isDateDisabled",
+				required: false
+			}]
+		}],
+		weekStart: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "weekStart",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		withTime: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "withTime",
+				required: false
+			}]
+		}],
+		minuteStep: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minuteStep",
+				required: false
+			}]
+		}],
+		defaultTime: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "defaultTime",
+				required: false
+			}]
+		}],
+		format: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "format",
+				required: false
+			}]
+		}],
+		calendar: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => UiCalendarComponent), { isSignal: true }]
+		}]
+	}
+});
+export { UiDatepickerComponent };
+
+//# sourceMappingURL=area8975-ui-datepicker.mjs.map

package/fesm2022/area8975-ui-datepicker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-datepicker.mjs","names":[],"sources":["../../../projects/ui/datepicker/datepicker.component.ts","../../../projects/ui/datepicker/datepicker.component.html"],"sourcesContent":["import {\n    afterNextRender,\n    booleanAttribute,\n    Component,\n    computed,\n    ElementRef,\n    inject,\n    Injector,\n    input,\n    model,\n    signal,\n    viewChild\n} from '@angular/core';\n\nimport { UiButtonComponent } from '@area8975/ui/button';\nimport type {\n    IsoDate,\n    IsoDateTime,\n    WeekStart\n} from '@area8975/ui/calendar';\nimport { UiCalendarComponent } from '@area8975/ui/calendar';\nimport {\n    parseIsoDateTime,\n    parseTime,\n    toIsoDate\n} from '@area8975/ui/calendar';\nimport { UiCardComponent } from '@area8975/ui/card';\nimport { UiDropdownComponent } from '@area8975/ui/dropdown';\nimport { UiDropdownDirective } from '@area8975/ui/dropdown';\nimport type { InputValidation } from '@area8975/ui/input';\nimport { UiInputComponent } from '@area8975/ui/input';\nimport { UiTimeSelectComponent } from '@area8975/ui/time-select';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroCalendar, heroXMark } from '@ng-icons/heroicons/outline';\n\n\nconst OPEN_KEYS = ['Enter', ' ', 'ArrowDown'];\n\n@Component({\n    selector: 'ui-datepicker',\n    templateUrl: './datepicker.component.html',\n    styleUrl: './datepicker.component.css',\n    imports: [\n        UiInputComponent,\n        UiCalendarComponent,\n        UiDropdownComponent,\n        UiDropdownDirective,\n        UiButtonComponent,\n        UiTimeSelectComponent,\n        NgIcon,\n        UiCardComponent\n    ],\n    host: { class: 'block', '[attr.id]': 'null' },\n    providers: [provideIcons({ heroCalendar, heroXMark })]\n})\nexport class UiDatepickerComponent {\n    private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n    private readonly injector = inject(Injector);\n\n    /** \"2026-09-29\", or \"2026-09-29T14:30\" when `withTime` is on. */\n    readonly value = model<IsoDate | IsoDateTime | null>(null);\n\n    readonly id = input<string>('');\n    readonly placeholder = input<string>('Select date');\n    readonly disabled = input(false, { transform: booleanAttribute });\n    readonly clearable = input(true, { transform: booleanAttribute });\n    readonly validationState = input<InputValidation>(null);\n    readonly describedBy = input<string>('');\n\n    readonly min = input<IsoDate | null>(null);\n    readonly max = input<IsoDate | null>(null);\n    readonly isDateDisabled = input<(date: IsoDate) => boolean>(() => false);\n    readonly weekStart = input<WeekStart>(1);\n    readonly locale = input<string>('en-GB');\n\n    readonly withTime = input(false, { transform: booleanAttribute });\n    readonly minuteStep = input<number>(5);\n\n    /** Time used when a date is picked before a time has been chosen. */\n    readonly defaultTime = input<string>('00:00');\n\n    /** Intl options for the value shown in the input. */\n    readonly format = input<Intl.DateTimeFormatOptions | null>(null);\n\n    protected readonly isOpen = signal(false);\n\n    private readonly calendar = viewChild(UiCalendarComponent);\n\n    protected readonly datePart = computed(() =>\n        this.value()?.slice(0, 10) ?? null\n    );\n\n    protected readonly timePart = computed(() => {\n        const time = this.value()?.slice(11, 16);\n\n        return parseTime(time) ? time! : this.defaultTime();\n    });\n\n    protected readonly display = computed(() => {\n        const date = parseIsoDateTime(this.value());\n        const format = this.format() ?? (this.withTime()\n            ? { dateStyle: 'medium', timeStyle: 'short' } as const\n            : { dateStyle: 'medium' } as const);\n\n        return date\n            ? new Intl.DateTimeFormat(this.locale(), format).format(date)\n            : '';\n    });\n\n    protected toggle(): void {\n        if (!this.disabled()) {\n            this.isOpen.update(open => !open);\n        }\n    }\n\n    protected handleInputKeydown(event: KeyboardEvent): void {\n        if (this.disabled() || !OPEN_KEYS.includes(event.key)) {\n            return;\n        }\n\n        event.preventDefault();\n        this.isOpen.set(true);\n\n        afterNextRender(() => this.calendar()?.focusActiveDate(), {\n            injector: this.injector\n        });\n    }\n\n    protected handlePick(date: IsoDate | null): void {\n        if (!date) {\n            return;\n        }\n\n        if (!this.withTime()) {\n            this.value.set(date);\n            this.close();\n            return;\n        }\n\n        // stays open so the time can be set too\n        this.value.set(`${date}T${this.timePart()}`);\n    }\n\n    protected handleTime(time: string): void {\n        // picking a time first puts it on today\n        const date = this.datePart() ?? toIsoDate(new Date());\n\n        this.value.set(`${date}T${time}`);\n    }\n\n    protected close(): void {\n        this.isOpen.set(false);\n        this.focusInput();\n    }\n\n    protected handlePanelKeydown(event: KeyboardEvent): void {\n        // the overlay closes itself on escape, we just put focus back\n        if (event.key === 'Escape') {\n            this.focusInput();\n        }\n    }\n\n    protected clear(event: Event): void {\n        // stop the input underneath from opening the calendar\n        event.stopPropagation();\n\n        this.value.set(null);\n        this.focusInput();\n    }\n\n    private focusInput(): void {\n        this.host.nativeElement.querySelector('input')?.focus();\n    }\n}\n","<ui-dropdown\n    [isOpen]=\"isOpen\"\n    placement=\"bottom-start\"\n    closeBehaviour=\"whenClickOutside\"\n    class=\"w-full\"\n>\n    <ui-input\n        [value]=\"display()\"\n        [id]=\"id()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [describedBy]=\"describedBy()\"\n        [ariaExpanded]=\"isOpen()\"\n        ariaHasPopup=\"dialog\"\n        [validationState]=\"validationState()\"\n        classes=\"cursor-pointer\"\n        autocomplete=\"off\"\n        readonly\n        (click)=\"toggle()\"\n        (keydown)=\"handleInputKeydown($event)\"\n    >\n        <ng-template #leading>\n            <ng-icon\n                name=\"heroCalendar\"\n                class=\"ms-3 text-muted-foreground-1 shrink-0\"\n            />\n        </ng-template>\n\n        <ng-template #trailing>\n            @if (clearable() && value() && !disabled()) {\n                <button\n                    type=\"button\"\n                    class=\"inline-flex justify-center items-center self-stretch w-8 text-muted-foreground-1 hover:text-foreground\"\n                    aria-label=\"Clear date\"\n                    (click)=\"clear($event)\"\n                >\n                    <ng-icon name=\"heroXMark\" class=\"shrink-0\" />\n                </button>\n            }\n        </ng-template>\n    </ui-input>\n\n    @if (isOpen()) {\n        <div uiDropdownContent class=\"py-2\">\n            <ui-card radius=\"xl\" class=\"p-3\">\n                <ui-calendar\n                    [value]=\"datePart()\"\n                    [min]=\"min()\"\n                    [max]=\"max()\"\n                    [isDateDisabled]=\"isDateDisabled()\"\n                    [weekStart]=\"weekStart()\"\n                    [locale]=\"locale()\"\n                    (valueChange)=\"handlePick($event)\"\n                    (keydown)=\"handlePanelKeydown($event)\"\n                />\n\n                @if (withTime()) {\n                    <div class=\"flex justify-between items-center gap-x-2 mt-3 pt-3 border-line-2 border-t\">\n                        <ui-time-select\n                            [value]=\"timePart()\"\n                            [minuteStep]=\"minuteStep()\"\n                            (valueChange)=\"handleTime($event)\"\n                            (keydown)=\"handlePanelKeydown($event)\"\n                        />\n\n                        <ui-button size=\"sm\" (click)=\"close()\">Done</ui-button>\n                    </div>\n                }\n            </ui-card>\n        </div>\n    }\n</ui-dropdown>\n"],"mappings":"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"}