@lilydesignsystem/angular-time-zone-picker 0.0.0-stage → 0.1.0

package/fesm2022/lilydesignsystem-angular-time-zone-picker.mjs

@@ -0,0 +1,923 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, TemplateRef, computed, contentChild, effect, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { IconButton, Listbox } from "@lilydesignsystem/angular-headless";
+const DEFAULT_ZONES = [
+	"Pacific/Pago_Pago",
+	"Pacific/Honolulu",
+	"Pacific/Marquesas",
+	"America/Anchorage",
+	"America/Los_Angeles",
+	"America/Phoenix",
+	"America/Denver",
+	"America/Chicago",
+	"America/Mexico_City",
+	"America/New_York",
+	"America/Bogota",
+	"America/Halifax",
+	"America/Caracas",
+	"America/St_Johns",
+	"America/Sao_Paulo",
+	"America/Argentina/Buenos_Aires",
+	"Atlantic/South_Georgia",
+	"Atlantic/Azores",
+	"UTC",
+	"Europe/London",
+	"Europe/Lisbon",
+	"Africa/Lagos",
+	"Europe/Paris",
+	"Europe/Athens",
+	"Africa/Cairo",
+	"Africa/Johannesburg",
+	"Europe/Moscow",
+	"Africa/Nairobi",
+	"Asia/Riyadh",
+	"Asia/Tehran",
+	"Asia/Dubai",
+	"Asia/Kabul",
+	"Asia/Karachi",
+	"Asia/Kolkata",
+	"Asia/Kathmandu",
+	"Asia/Dhaka",
+	"Asia/Yangon",
+	"Asia/Bangkok",
+	"Asia/Shanghai",
+	"Asia/Singapore",
+	"Australia/Perth",
+	"Australia/Eucla",
+	"Asia/Tokyo",
+	"Asia/Seoul",
+	"Australia/Darwin",
+	"Australia/Adelaide",
+	"Australia/Brisbane",
+	"Australia/Sydney",
+	"Australia/Lord_Howe",
+	"Pacific/Guadalcanal",
+	"Pacific/Auckland",
+	"Pacific/Fiji",
+	"Pacific/Chatham",
+	"Pacific/Tongatapu",
+	"Pacific/Kiritimati"
+];
+const offsetFormatters = /* @__PURE__ */ new Map();
+function offsetMinutes(zone, date) {
+	try {
+		let f = offsetFormatters.get(zone);
+		if (!f) {
+			f = new Intl.DateTimeFormat("en-US", {
+				timeZone: zone,
+				hourCycle: "h23",
+				year: "numeric",
+				month: "numeric",
+				day: "numeric",
+				hour: "numeric",
+				minute: "numeric",
+				second: "numeric"
+			});
+			offsetFormatters.set(zone, f);
+		}
+		const p = {};
+		for (const part of f.formatToParts(date)) p[part.type] = part.value;
+		const wall = Date.UTC(Number(p["year"]), Number(p["month"]) - 1, Number(p["day"]), Number(p["hour"]), Number(p["minute"]), Number(p["second"]));
+		const instant = Math.floor(date.getTime() / 1e3) * 1e3;
+		return Math.round((wall - instant) / 6e4);
+	} catch {
+		return;
+	}
+}
+function isDaylightTime(zone, date) {
+	const now = offsetMinutes(zone, date);
+	if (now === void 0) return false;
+	const year = date.getUTCFullYear();
+	const jan = offsetMinutes(zone, new Date(Date.UTC(year, 0, 1, 12)));
+	const jul = offsetMinutes(zone, new Date(Date.UTC(year, 6, 1, 12)));
+	if (jan === void 0 || jul === void 0) return false;
+	return now > Math.min(jan, jul);
+}
+function formatOffset(minutes) {
+	const sign = minutes < 0 ? "-" : "+";
+	const abs = Math.abs(minutes);
+	return `UTC${sign}${String(Math.floor(abs / 60)).padStart(2, "0")}:${String(abs % 60).padStart(2, "0")}`;
+}
+function zoneName(zone, locale, date, names) {
+	const given = names?.[zone];
+	if (typeof given === "string") return given;
+	if (given) return isDaylightTime(zone, date) ? given[1] : given[0];
+	try {
+		return new Intl.DateTimeFormat(locale, {
+			timeZone: zone,
+			timeZoneName: "long"
+		}).formatToParts(date).find((p) => p.type === "timeZoneName")?.value;
+	} catch {
+		return;
+	}
+}
+const defaultLabel = (zone) => `${zone.offset} – ${zone.name}`;
+function zoneInfo(zone, locale, date, labelFor = defaultLabel, names) {
+	const minutes = offsetMinutes(zone, date);
+	if (minutes === void 0) return void 0;
+	const name = zoneName(zone, locale, date, names) ?? zone;
+	const info = {
+		id: zone,
+		offsetMinutes: minutes,
+		offset: formatOffset(minutes),
+		name,
+		label: ""
+	};
+	info.label = labelFor(info);
+	return info;
+}
+function orderedZones(zones, locale, date, labelFor, names) {
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	for (const id of zones) {
+		if (seen.has(id)) continue;
+		seen.add(id);
+		const info = zoneInfo(id, locale, date, labelFor, names);
+		if (info) out.push(info);
+	}
+	const collator = new Intl.Collator(locale);
+	return out.sort((a, b) => a.offsetMinutes - b.offsetMinutes || collator.compare(a.name, b.name) || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+}
+function systemZone() {
+	try {
+		return new Intl.DateTimeFormat().resolvedOptions().timeZone || void 0;
+	} catch {
+		return;
+	}
+}
+function matchZone(system, zones, locale, date, names) {
+	if (!system) return void 0;
+	if (zones.some((z) => z.id === system)) return system;
+	const info = zoneInfo(system, locale, date, void 0, names);
+	if (!info) return void 0;
+	return zones.find((z) => z.offsetMinutes === info.offsetMinutes && z.name === info.name)?.id;
+}
+let uid = 0;
+function nextTimeZonePickerId() {
+	uid += 1;
+	return `time-zone-picker-${uid}`;
+}
+var TimeZonePickerIcon = class TimeZonePickerIcon {
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: TimeZonePickerIcon,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: TimeZonePickerIcon,
+			isStandalone: true,
+			selector: "ng-template[lilyTimeZonePickerIcon]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: TimeZonePickerIcon,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "ng-template[lilyTimeZonePickerIcon]",
+			standalone: true
+		}]
+	}]
+});
+var TimeZonePicker = class TimeZonePicker {
+	onTooltipButtonEnter() {
+		this.hoverButton.set(true);
+		this.dismissed.set(false);
+	}
+	onTooltipButtonFocusIn() {
+		try {
+			this.focusButton.set(this.buttonRef().element?.matches(":focus-visible") ?? false);
+		} catch {
+			this.focusButton.set(true);
+		}
+	}
+	onTooltipButtonFocusOut() {
+		this.focusButton.set(false);
+		this.dismissed.set(false);
+	}
+	onTooltipKeydown(event) {
+		if (event.key === "Escape" && this.tooltipVisible()) this.dismissed.set(true);
+	}
+	infoFor(zone) {
+		return zoneInfo(zone, this.locale(), this.when(), this.labelFor(), this.names());
+	}
+	constructor() {
+		this.label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.locale = input.required(...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+		this.zones = input(DEFAULT_ZONES, ...ngDevMode ? [{ debugName: "zones" }] : /* istanbul ignore next */ []);
+		this.date = input(void 0, ...ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []);
+		this.labelFor = input(void 0, ...ngDevMode ? [{ debugName: "labelFor" }] : /* istanbul ignore next */ []);
+		this.names = input(void 0, ...ngDevMode ? [{ debugName: "names" }] : /* istanbul ignore next */ []);
+		this.value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.defaultValue = input("", ...ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []);
+		this.storageKey = input("", ...ngDevMode ? [{ debugName: "storageKey" }] : /* istanbul ignore next */ []);
+		this.name = input("time-zone", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+		this.target = input(null, ...ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []);
+		this.className = input("", ...ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []);
+		this.zoneChange = output();
+		this.iconTemplate = contentChild(TemplateRef, ...ngDevMode ? [{ debugName: "iconTemplate" }] : /* istanbul ignore next */ []);
+		this.rootRef = viewChild.required("rootEl", ...ngDevMode ? [{ debugName: "rootRef" }] : /* istanbul ignore next */ []);
+		this.buttonRef = viewChild.required("buttonEl", ...ngDevMode ? [{ debugName: "buttonRef" }] : /* istanbul ignore next */ []);
+		this.listRef = viewChild.required("listEl", ...ngDevMode ? [{ debugName: "listRef" }] : /* istanbul ignore next */ []);
+		this.baseId = nextTimeZonePickerId();
+		this.listId = `${this.baseId}-list`;
+		this.open = model(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this.closeWhenDisabled = effect(() => {
+			if (this.disabled() && this.open()) this.open.set(false);
+		}, ...ngDevMode ? [{ debugName: "closeWhenDisabled" }] : /* istanbul ignore next */ []);
+		this.tooltipId = `${this.baseId}-tooltip`;
+		this.hoverButton = signal(false, ...ngDevMode ? [{ debugName: "hoverButton" }] : /* istanbul ignore next */ []);
+		this.hoverTooltip = signal(false, ...ngDevMode ? [{ debugName: "hoverTooltip" }] : /* istanbul ignore next */ []);
+		this.focusButton = signal(false, ...ngDevMode ? [{ debugName: "focusButton" }] : /* istanbul ignore next */ []);
+		this.dismissed = signal(false, ...ngDevMode ? [{ debugName: "dismissed" }] : /* istanbul ignore next */ []);
+		this.tooltipVisible = computed(() => !this.open() && !this.dismissed() && (this.hoverButton() || this.hoverTooltip() || this.focusButton()), ...ngDevMode ? [{ debugName: "tooltipVisible" }] : /* istanbul ignore next */ []);
+		this.tooltipEscapeListener = effect((onCleanup) => {
+			if (!this.tooltipVisible() || typeof document === "undefined") return;
+			const onKey = (event) => {
+				if (event.key === "Escape") this.dismissed.set(true);
+			};
+			document.addEventListener("keydown", onKey);
+			onCleanup(() => document.removeEventListener("keydown", onKey));
+		}, ...ngDevMode ? [{ debugName: "tooltipEscapeListener" }] : /* istanbul ignore next */ []);
+		this.activeIndex = signal(-1, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+		this.whenInitial = /* @__PURE__ */ new Date();
+		this.when = computed(() => this.date() ?? this.whenInitial, ...ngDevMode ? [{ debugName: "when" }] : /* istanbul ignore next */ []);
+		this.infos = computed(() => orderedZones(this.zones(), this.locale(), this.when(), this.labelFor(), this.names()), ...ngDevMode ? [{ debugName: "infos" }] : /* istanbul ignore next */ []);
+		this.ids = computed(() => this.infos().map((z) => z.id), ...ngDevMode ? [{ debugName: "ids" }] : /* istanbul ignore next */ []);
+		this.childContext = computed(() => {
+			const args = {
+				value: this.value(),
+				open: this.open(),
+				infoFor: (zone) => this.infoFor(zone)
+			};
+			return {
+				$implicit: args,
+				...args
+			};
+		}, ...ngDevMode ? [{ debugName: "childContext" }] : /* istanbul ignore next */ []);
+		this.initialised = false;
+		this.cdr = inject(ChangeDetectorRef);
+		this.scrollOnActiveIndexChange = effect(() => {
+			this.activeIndex();
+			this.scrollActiveIntoView();
+		}, ...ngDevMode ? [{ debugName: "scrollOnActiveIndexChange" }] : /* istanbul ignore next */ []);
+		effect(() => {
+			const current = this.value();
+			if (!this.initialised) {
+				this.initialised = true;
+				let initial = current;
+				const sk = this.storageKey();
+				if (!initial && sk) try {
+					const stored = (typeof localStorage !== "undefined" ? localStorage.getItem(sk) : null) ?? "";
+					if (this.ids().includes(stored)) initial = stored;
+				} catch {}
+				if (!initial) {
+					const ids = this.ids();
+					initial = this.defaultValue() || matchZone(systemZone(), this.infos(), this.locale(), this.when(), this.names()) || (ids.includes("UTC") ? "UTC" : ids[0]) || "";
+				}
+				if (initial && initial !== current) {
+					this.value.set(initial);
+					return;
+				}
+			}
+			if (current) this.applyZone(current);
+		});
+	}
+	optionId(index) {
+		return `${this.baseId}-option-${index}`;
+	}
+	toggle() {
+		if (this.open()) this.closeList();
+		else this.openList();
+	}
+	openList(startIndex) {
+		const selected = this.ids().indexOf(this.value());
+		this.activeIndex.set(this.ids().length === 0 ? -1 : startIndex ?? (selected >= 0 ? selected : 0));
+		this.open.set(true);
+		this.cdr.detectChanges();
+		queueMicrotask(() => {
+			this.listRef().focus({ preventScroll: true });
+			this.scrollActiveIntoView();
+		});
+	}
+	closeList(refocus = true) {
+		if (!this.open()) return;
+		this.open.set(false);
+		this.activeIndex.set(-1);
+		if (refocus) queueMicrotask(() => this.buttonRef().focus({ preventScroll: true }));
+	}
+	choose(index) {
+		const slug = this.ids()[index];
+		if (slug) this.value.set(slug);
+		this.closeList();
+	}
+	scrollActiveIntoView() {
+		const i = this.activeIndex();
+		if (i < 0) return;
+		document.getElementById(this.optionId(i))?.scrollIntoView?.({ block: "nearest" });
+	}
+	onButtonKeydown(event) {
+		switch (event.key) {
+			case "ArrowDown":
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				this.openList();
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				this.openList(this.ids().length - 1);
+		}
+	}
+	onListTabOut() {
+		this.buttonRef().focus({ preventScroll: true });
+		this.closeList(false);
+	}
+	onRootFocusOut(event) {
+		const next = event.relatedTarget;
+		if (next && this.rootRef().nativeElement.contains(next)) return;
+		this.closeList(false);
+	}
+	onDocumentClick(event) {
+		if (!this.open()) return;
+		const t = event.target;
+		if (t && !this.rootRef().nativeElement.contains(t)) this.closeList(false);
+	}
+	applyZone(slug) {
+		if (typeof document === "undefined" || !slug) return;
+		(this.target() ?? document.documentElement).setAttribute("data-time-zone", slug);
+		const sk = this.storageKey();
+		if (sk) try {
+			localStorage.setItem(sk, slug);
+		} catch {}
+		this.zoneChange.emit(slug);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: TimeZonePicker,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.3",
+			type: TimeZonePicker,
+			isStandalone: true,
+			selector: "lily-time-zone-picker",
+			inputs: {
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				locale: {
+					classPropertyName: "locale",
+					publicName: "locale",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				zones: {
+					classPropertyName: "zones",
+					publicName: "zones",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				date: {
+					classPropertyName: "date",
+					publicName: "date",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				labelFor: {
+					classPropertyName: "labelFor",
+					publicName: "labelFor",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				names: {
+					classPropertyName: "names",
+					publicName: "names",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				value: {
+					classPropertyName: "value",
+					publicName: "value",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				defaultValue: {
+					classPropertyName: "defaultValue",
+					publicName: "defaultValue",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				storageKey: {
+					classPropertyName: "storageKey",
+					publicName: "storageKey",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				name: {
+					classPropertyName: "name",
+					publicName: "name",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				target: {
+					classPropertyName: "target",
+					publicName: "target",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				className: {
+					classPropertyName: "className",
+					publicName: "className",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				open: {
+					classPropertyName: "open",
+					publicName: "open",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				value: "valueChange",
+				zoneChange: "zoneChange",
+				open: "openChange"
+			},
+			host: { listeners: { "document:click": "onDocumentClick($event)" } },
+			queries: [{
+				propertyName: "iconTemplate",
+				first: true,
+				predicate: TemplateRef,
+				descendants: true,
+				isSignal: true
+			}],
+			viewQueries: [
+				{
+					propertyName: "rootRef",
+					first: true,
+					predicate: ["rootEl"],
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "buttonRef",
+					first: true,
+					predicate: ["buttonEl"],
+					descendants: true,
+					isSignal: true
+				},
+				{
+					propertyName: "listRef",
+					first: true,
+					predicate: ["listEl"],
+					descendants: true,
+					isSignal: true
+				}
+			],
+			ngImport: i0,
+			template: `
+    <div
+      #rootEl
+      class="time-zone-picker {{ className() }}"
+      (focusout)="onRootFocusOut($event)"
+    >
+      <input type="hidden" [name]="name()" [value]="value()" />
+
+      <lily-icon-button
+        [disabled]="disabled()"
+        #buttonEl
+        [label]="label()"
+        baseClass="time-zone-picker-button"
+        ariaHaspopup="listbox"
+        [ariaExpanded]="open()"
+        [ariaControls]="listId"
+        (click)="toggle(); hoverButton.set(false)"
+        (mouseenter)="onTooltipButtonEnter()"
+        (mouseleave)="hoverButton.set(false)"
+        (focusin)="onTooltipButtonFocusIn()"
+        (focusout)="onTooltipButtonFocusOut()"
+        (keydown)="onButtonKeydown($event); onTooltipKeydown($event)"
+      >
+        @if (iconTemplate(); as tpl) {
+          <ng-container
+            [ngTemplateOutlet]="tpl"
+            [ngTemplateOutletContext]="childContext()"
+          />
+        } @else {
+          <svg
+            class="time-zone-picker-icon"
+            viewBox="0 0 16 16"
+            width="1.05rem"
+            height="1.05rem"
+            aria-hidden="true"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M8 2.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11zM8 5v3l2 1.5" />
+          </svg>
+        }
+      </lily-icon-button>
+
+      <!-- Purely visual: the same text is already the button's aria-label,
+           so it is not wired with aria-describedby (that would announce
+           the name twice). -->
+      <div
+        class="time-zone-picker-tooltip"
+        role="tooltip"
+        [id]="tooltipId"
+        [attr.hidden]="tooltipVisible() ? null : ''"
+        (mouseenter)="hoverTooltip.set(true)"
+        (mouseleave)="hoverTooltip.set(false)"
+      >{{ label() }}</div>
+
+      <lily-listbox
+        #listEl
+        [label]="label()"
+        baseClass="time-zone-picker-list"
+        [elementId]="listId"
+        navigation="active-descendant"
+        [clamp]="true"
+        [typeahead]="true"
+        [pageSize]="10"
+        [(activeIndex)]="activeIndex"
+        [hidden]="!open()"
+        (activate)="choose($event)"
+        (escape)="closeList()"
+        (tabOut)="onListTabOut()"
+      >
+        @for (zone of infos(); track zone.id; let i = $index) {
+          <li
+            class="time-zone-picker-option"
+            [id]="optionId(i)"
+            role="option"
+            [attr.aria-selected]="zone.id === value()"
+            [attr.data-active]="i === activeIndex() ? '' : null"
+            [attr.data-offset]="zone.offset"
+            (click)="choose(i)"
+          >
+            {{ zone.label }}
+          </li>
+        }
+      </lily-listbox>
+    </div>
+  `,
+			isInline: true,
+			dependencies: [
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: IconButton,
+					selector: "lily-icon-button",
+					inputs: [
+						"label",
+						"className",
+						"baseClass",
+						"ariaHaspopup",
+						"ariaExpanded",
+						"ariaControls",
+						"tabIndex",
+						"disabled"
+					]
+				},
+				{
+					kind: "component",
+					type: Listbox,
+					selector: "lily-listbox",
+					inputs: [
+						"label",
+						"className",
+						"baseClass",
+						"elementId",
+						"hidden",
+						"navigation",
+						"clamp",
+						"typeahead",
+						"pageSize",
+						"activeIndex"
+					],
+					outputs: [
+						"activeIndexChange",
+						"activate",
+						"escape",
+						"tabOut"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: TimeZonePicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lily-time-zone-picker",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				IconButton,
+				Listbox
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "(document:click)": "onDocumentClick($event)" },
+			template: `
+    <div
+      #rootEl
+      class="time-zone-picker {{ className() }}"
+      (focusout)="onRootFocusOut($event)"
+    >
+      <input type="hidden" [name]="name()" [value]="value()" />
+
+      <lily-icon-button
+        [disabled]="disabled()"
+        #buttonEl
+        [label]="label()"
+        baseClass="time-zone-picker-button"
+        ariaHaspopup="listbox"
+        [ariaExpanded]="open()"
+        [ariaControls]="listId"
+        (click)="toggle(); hoverButton.set(false)"
+        (mouseenter)="onTooltipButtonEnter()"
+        (mouseleave)="hoverButton.set(false)"
+        (focusin)="onTooltipButtonFocusIn()"
+        (focusout)="onTooltipButtonFocusOut()"
+        (keydown)="onButtonKeydown($event); onTooltipKeydown($event)"
+      >
+        @if (iconTemplate(); as tpl) {
+          <ng-container
+            [ngTemplateOutlet]="tpl"
+            [ngTemplateOutletContext]="childContext()"
+          />
+        } @else {
+          <svg
+            class="time-zone-picker-icon"
+            viewBox="0 0 16 16"
+            width="1.05rem"
+            height="1.05rem"
+            aria-hidden="true"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M8 2.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11zM8 5v3l2 1.5" />
+          </svg>
+        }
+      </lily-icon-button>
+
+      <!-- Purely visual: the same text is already the button's aria-label,
+           so it is not wired with aria-describedby (that would announce
+           the name twice). -->
+      <div
+        class="time-zone-picker-tooltip"
+        role="tooltip"
+        [id]="tooltipId"
+        [attr.hidden]="tooltipVisible() ? null : ''"
+        (mouseenter)="hoverTooltip.set(true)"
+        (mouseleave)="hoverTooltip.set(false)"
+      >{{ label() }}</div>
+
+      <lily-listbox
+        #listEl
+        [label]="label()"
+        baseClass="time-zone-picker-list"
+        [elementId]="listId"
+        navigation="active-descendant"
+        [clamp]="true"
+        [typeahead]="true"
+        [pageSize]="10"
+        [(activeIndex)]="activeIndex"
+        [hidden]="!open()"
+        (activate)="choose($event)"
+        (escape)="closeList()"
+        (tabOut)="onListTabOut()"
+      >
+        @for (zone of infos(); track zone.id; let i = $index) {
+          <li
+            class="time-zone-picker-option"
+            [id]="optionId(i)"
+            role="option"
+            [attr.aria-selected]="zone.id === value()"
+            [attr.data-active]="i === activeIndex() ? '' : null"
+            [attr.data-offset]="zone.offset"
+            (click)="choose(i)"
+          >
+            {{ zone.label }}
+          </li>
+        }
+      </lily-listbox>
+    </div>
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: true
+			}]
+		}],
+		zones: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "zones",
+				required: false
+			}]
+		}],
+		date: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "date",
+				required: false
+			}]
+		}],
+		labelFor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "labelFor",
+				required: false
+			}]
+		}],
+		names: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "names",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		defaultValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "defaultValue",
+				required: false
+			}]
+		}],
+		storageKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "storageKey",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		target: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "target",
+				required: false
+			}]
+		}],
+		className: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "className",
+				required: false
+			}]
+		}],
+		zoneChange: [{
+			type: i0.Output,
+			args: ["zoneChange"]
+		}],
+		iconTemplate: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => TemplateRef), { isSignal: true }]
+		}],
+		rootRef: [{
+			type: i0.ViewChild,
+			args: ["rootEl", { isSignal: true }]
+		}],
+		buttonRef: [{
+			type: i0.ViewChild,
+			args: ["buttonEl", { isSignal: true }]
+		}],
+		listRef: [{
+			type: i0.ViewChild,
+			args: ["listEl", { isSignal: true }]
+		}],
+		open: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "open",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+export { DEFAULT_ZONES, TimeZonePicker, TimeZonePickerIcon, defaultLabel, formatOffset, matchZone, nextTimeZonePickerId, offsetMinutes, orderedZones, systemZone, zoneInfo, zoneName };
+
+//# sourceMappingURL=lilydesignsystem-angular-time-zone-picker.mjs.map