@hyalo/angular 0.0.0-stage → 0.3.1

package/fesm2022/hyalo-angular-navigation-menu.mjs

@@ -0,0 +1,222 @@
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, inject, input, signal } from "@angular/core";
+import { injectId } from "@hyalo/angular/core";
+import { HyIcon } from "@hyalo/angular/icon";
+import { CdkConnectedOverlay, CdkOverlayOrigin } from "@angular/cdk/overlay";
+var HyNavigationMenu = class HyNavigationMenu {
+	items = input.required(...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	label = input("Main navigation", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	open = signal(null, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	id = injectId("navigation");
+	host = inject(ElementRef);
+	document = inject(DOCUMENT);
+	trigger = null;
+	positions = [{
+		originX: "start",
+		originY: "bottom",
+		overlayX: "start",
+		overlayY: "top",
+		offsetY: 8
+	}, {
+		originX: "start",
+		originY: "top",
+		overlayX: "start",
+		overlayY: "bottom",
+		offsetY: -8
+	}];
+	outside(event) {
+		if (!this.host.nativeElement.contains(event.target)) this.open.set(null);
+	}
+	panel() {
+		return this.open() ? this.document.getElementById(this.id + "-" + this.open()) : null;
+	}
+	enterPanel(event) {
+		if (event.key !== "Tab" || event.shiftKey || !this.open()) return;
+		const first = this.panel()?.querySelector("a[href]");
+		if (first) {
+			event.preventDefault();
+			first.focus();
+		}
+	}
+	panelKeydown(event) {
+		if (event.key === "Escape") {
+			this.escape(event);
+			return;
+		}
+		if (event.key !== "Tab") return;
+		const links = [...this.panel()?.querySelectorAll("a[href]") ?? []];
+		if (event.shiftKey && event.target === links[0]) {
+			event.preventDefault();
+			this.trigger?.focus();
+		} else if (!event.shiftKey && event.target === links[links.length - 1]) {
+			const targets = [...this.document.querySelectorAll("a[href],button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex=\"0\"]")].filter((el) => !el.closest("[hidden],[inert]") && el.getClientRects().length > 0);
+			const next = this.trigger ? targets[targets.indexOf(this.trigger) + 1] : void 0;
+			if (next) {
+				event.preventDefault();
+				this.open.set(null);
+				next.focus();
+			}
+		}
+	}
+	toggle(id, event) {
+		this.trigger = event.currentTarget;
+		this.open.update((value) => value === id ? null : id);
+	}
+	escape(event) {
+		if (this.open()) {
+			event.preventDefault();
+			event.stopPropagation();
+			this.open.set(null);
+			this.trigger?.focus();
+		}
+	}
+	focusOut(event) {
+		if (event.relatedTarget && !this.host.nativeElement.contains(event.relatedTarget) && !this.panel()?.contains(event.relatedTarget)) this.open.set(null);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyNavigationMenu,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyNavigationMenu,
+		isStandalone: true,
+		selector: "hy-navigation-menu",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { listeners: {
+			"keydown.escape": "escape($event)",
+			"focusout": "focusOut($event)"
+		} },
+		ngImport: i0,
+		template: "<nav cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" [attr.aria-label]=\"label()\">\n  <ul>\n    @for (item of items(); track item.id) {\n      <li>\n        @if (item.sections?.length) {\n          <button\n            type=\"button\"\n            [id]=\"id + '-' + item.id + '-trigger'\"\n            [attr.aria-expanded]=\"open() === item.id\"\n            [attr.aria-controls]=\"id + '-' + item.id\"\n            (click)=\"toggle(item.id, $event)\"\n            (keydown)=\"enterPanel($event)\"\n          >\n            {{ item.label }}<hy-icon class=\"chevron\" name=\"chevron-down\" size=\"1rem\" />\n          </button>\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"origin\"\n            [cdkConnectedOverlayOpen]=\"open() === item.id\"\n            [cdkConnectedOverlayPositions]=\"positions\"\n            [cdkConnectedOverlayPush]=\"true\"\n            [cdkConnectedOverlayViewportMargin]=\"16\"\n            (overlayOutsideClick)=\"outside($event)\"\n          >\n            <div\n              class=\"panel\"\n              tabindex=\"-1\"\n              role=\"region\"\n              (keydown)=\"panelKeydown($event)\"\n              (focusout)=\"focusOut($event)\"\n              [id]=\"id + '-' + item.id\"\n              [attr.aria-labelledby]=\"id + '-' + item.id + '-trigger'\"\n            >\n              @for (section of item.sections; track $index) {\n                <section>\n                  <h3>{{ section.label }}</h3>\n                  <ul>\n                    @for (link of section.links; track $index) {\n                      <li>\n                        <a [href]=\"link.href\" (click)=\"open.set(null)\"\n                          ><strong>{{ link.label }}</strong>\n                          @if (link.description) {\n                            <span>{{ link.description }}</span>\n                          }\n                        </a>\n                      </li>\n                    }\n                  </ul>\n                </section>\n              }\n            </div>\n          </ng-template>\n        } @else {\n          <a [href]=\"item.href\">{{ item.label }}</a>\n        }\n      </li>\n    }\n  </ul>\n</nav>\n",
+		styles: [":host{display:block;position:relative;color:var(--hy-ink)}ul{list-style:none;margin:0;padding:0}nav>ul{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem}a,button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;min-block-size:44px;box-sizing:border-box;font:inherit;color:inherit;background:transparent;border:0;border-radius:var(--hy-radius-s);text-decoration:none;cursor:pointer}a:hover,button:hover,button[aria-expanded=true]{background:var(--hy-primary-wash)}.panel{inline-size:min(40rem,calc(100vw - 2rem));box-sizing:border-box;color:var(--hy-ink);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1rem;padding:1.25rem;border:1px solid var(--hy-line-strong);border-radius:var(--hy-radius-l);background:var(--hy-surface-1);box-shadow:var(--hy-glass-shadow);max-block-size:65dvh;overflow:auto}.panel h3{font-size:.75rem;color:var(--hy-ink-3);margin:0 0 .5rem;padding-inline:1rem}.panel a{display:block}.panel strong{font-size:.875rem}.panel span{display:block;color:var(--hy-ink-2);font-size:.8125rem;margin-block-start:.25rem}:is(button,a,input):focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}.chevron{color:var(--hy-ink-3);transition:rotate var(--hy-dur-quick) var(--hy-ease-out)}button[aria-expanded=true] .chevron{rotate:180deg}@media(prefers-reduced-motion:reduce){.chevron{transition:none}}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: HyIcon,
+				selector: "hy-icon",
+				inputs: [
+					"name",
+					"icon",
+					"label",
+					"size",
+					"strokeWidth"
+				]
+			},
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyNavigationMenu,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-navigation-menu",
+			imports: [
+				HyIcon,
+				CdkConnectedOverlay,
+				CdkOverlayOrigin
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"(keydown.escape)": "escape($event)",
+				"(focusout)": "focusOut($event)"
+			},
+			template: "<nav cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" [attr.aria-label]=\"label()\">\n  <ul>\n    @for (item of items(); track item.id) {\n      <li>\n        @if (item.sections?.length) {\n          <button\n            type=\"button\"\n            [id]=\"id + '-' + item.id + '-trigger'\"\n            [attr.aria-expanded]=\"open() === item.id\"\n            [attr.aria-controls]=\"id + '-' + item.id\"\n            (click)=\"toggle(item.id, $event)\"\n            (keydown)=\"enterPanel($event)\"\n          >\n            {{ item.label }}<hy-icon class=\"chevron\" name=\"chevron-down\" size=\"1rem\" />\n          </button>\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"origin\"\n            [cdkConnectedOverlayOpen]=\"open() === item.id\"\n            [cdkConnectedOverlayPositions]=\"positions\"\n            [cdkConnectedOverlayPush]=\"true\"\n            [cdkConnectedOverlayViewportMargin]=\"16\"\n            (overlayOutsideClick)=\"outside($event)\"\n          >\n            <div\n              class=\"panel\"\n              tabindex=\"-1\"\n              role=\"region\"\n              (keydown)=\"panelKeydown($event)\"\n              (focusout)=\"focusOut($event)\"\n              [id]=\"id + '-' + item.id\"\n              [attr.aria-labelledby]=\"id + '-' + item.id + '-trigger'\"\n            >\n              @for (section of item.sections; track $index) {\n                <section>\n                  <h3>{{ section.label }}</h3>\n                  <ul>\n                    @for (link of section.links; track $index) {\n                      <li>\n                        <a [href]=\"link.href\" (click)=\"open.set(null)\"\n                          ><strong>{{ link.label }}</strong>\n                          @if (link.description) {\n                            <span>{{ link.description }}</span>\n                          }\n                        </a>\n                      </li>\n                    }\n                  </ul>\n                </section>\n              }\n            </div>\n          </ng-template>\n        } @else {\n          <a [href]=\"item.href\">{{ item.label }}</a>\n        }\n      </li>\n    }\n  </ul>\n</nav>\n",
+			styles: [":host{display:block;position:relative;color:var(--hy-ink)}ul{list-style:none;margin:0;padding:0}nav>ul{display:flex;align-items:center;flex-wrap:wrap;gap:.25rem}a,button{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;min-block-size:44px;box-sizing:border-box;font:inherit;color:inherit;background:transparent;border:0;border-radius:var(--hy-radius-s);text-decoration:none;cursor:pointer}a:hover,button:hover,button[aria-expanded=true]{background:var(--hy-primary-wash)}.panel{inline-size:min(40rem,calc(100vw - 2rem));box-sizing:border-box;color:var(--hy-ink);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1rem;padding:1.25rem;border:1px solid var(--hy-line-strong);border-radius:var(--hy-radius-l);background:var(--hy-surface-1);box-shadow:var(--hy-glass-shadow);max-block-size:65dvh;overflow:auto}.panel h3{font-size:.75rem;color:var(--hy-ink-3);margin:0 0 .5rem;padding-inline:1rem}.panel a{display:block}.panel strong{font-size:.875rem}.panel span{display:block;color:var(--hy-ink-2);font-size:.8125rem;margin-block-start:.25rem}:is(button,a,input):focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}.chevron{color:var(--hy-ink-3);transition:rotate var(--hy-dur-quick) var(--hy-ease-out)}button[aria-expanded=true] .chevron{rotate:180deg}@media(prefers-reduced-motion:reduce){.chevron{transition:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyNavigationMenu };
+
+//# sourceMappingURL=hyalo-angular-navigation-menu.mjs.map

package/fesm2022/hyalo-angular-navigation-menu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-navigation-menu.mjs","names":[],"sources":["../../../projects/hyalo/navigation-menu/navigation-menu.ts","../../../projects/hyalo/navigation-menu/navigation-menu.html"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport { injectId } from '@hyalo/angular/core';\nimport { HyIcon } from '@hyalo/angular/icon';\nimport {\n  CdkConnectedOverlay,\n  CdkOverlayOrigin,\n  type ConnectedPosition,\n} from '@angular/cdk/overlay';\nexport interface HyNavigationLink {\n  readonly label: string;\n  readonly href: string;\n  readonly description?: string;\n}\nexport interface HyNavigationSection {\n  readonly label: string;\n  readonly links: readonly HyNavigationLink[];\n}\nexport interface HyNavigationItem {\n  readonly id: string;\n  readonly label: string;\n  readonly href?: string;\n  readonly sections?: readonly HyNavigationSection[];\n}\n@Component({\n  selector: 'hy-navigation-menu',\n  imports: [HyIcon, CdkConnectedOverlay, CdkOverlayOrigin],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './navigation-menu.html',\n  styleUrl: './navigation-menu.css',\n  host: { '(keydown.escape)': 'escape($event)', '(focusout)': 'focusOut($event)' },\n})\nexport class HyNavigationMenu {\n  readonly items = input.required<readonly HyNavigationItem[]>();\n  readonly label = input('Main navigation');\n  readonly open = signal<string | null>(null);\n  protected readonly id = injectId('navigation');\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly document = inject(DOCUMENT);\n  private trigger: HTMLElement | null = null;\n  protected readonly positions: ConnectedPosition[] = [\n    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 },\n    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -8 },\n  ];\n  protected outside(event: MouseEvent): void {\n    if (!this.host.nativeElement.contains(event.target as Node)) this.open.set(null);\n  }\n  private panel(): HTMLElement | null {\n    return this.open() ? this.document.getElementById(this.id + '-' + this.open()) : null;\n  }\n  protected enterPanel(event: KeyboardEvent): void {\n    if (event.key !== 'Tab' || event.shiftKey || !this.open()) return;\n    const first = this.panel()?.querySelector<HTMLAnchorElement>('a[href]');\n    if (first) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n  protected panelKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      this.escape(event);\n      return;\n    }\n    if (event.key !== 'Tab') return;\n    const links = [...(this.panel()?.querySelectorAll<HTMLAnchorElement>('a[href]') ?? [])];\n    if (event.shiftKey && event.target === links[0]) {\n      event.preventDefault();\n      this.trigger?.focus();\n    } else if (!event.shiftKey && event.target === links[links.length - 1]) {\n      const targets = [\n        ...this.document.querySelectorAll<HTMLElement>(\n          'a[href],button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),[tabindex=\"0\"]',\n        ),\n      ].filter((el) => !el.closest('[hidden],[inert]') && el.getClientRects().length > 0);\n      const next = this.trigger ? targets[targets.indexOf(this.trigger) + 1] : undefined;\n      if (next) {\n        event.preventDefault();\n        this.open.set(null);\n        next.focus();\n      }\n    }\n  }\n  toggle(id: string, event: Event): void {\n    this.trigger = event.currentTarget as HTMLElement;\n    this.open.update((value) => (value === id ? null : id));\n  }\n  escape(event: Event): void {\n    if (this.open()) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.open.set(null);\n      this.trigger?.focus();\n    }\n  }\n  focusOut(event: FocusEvent): void {\n    if (\n      event.relatedTarget &&\n      !this.host.nativeElement.contains(event.relatedTarget as Node) &&\n      !this.panel()?.contains(event.relatedTarget as Node)\n    )\n      this.open.set(null);\n  }\n}\n","<nav cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" [attr.aria-label]=\"label()\">\n  <ul>\n    @for (item of items(); track item.id) {\n      <li>\n        @if (item.sections?.length) {\n          <button\n            type=\"button\"\n            [id]=\"id + '-' + item.id + '-trigger'\"\n            [attr.aria-expanded]=\"open() === item.id\"\n            [attr.aria-controls]=\"id + '-' + item.id\"\n            (click)=\"toggle(item.id, $event)\"\n            (keydown)=\"enterPanel($event)\"\n          >\n            {{ item.label }}<hy-icon class=\"chevron\" name=\"chevron-down\" size=\"1rem\" />\n          </button>\n          <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"origin\"\n            [cdkConnectedOverlayOpen]=\"open() === item.id\"\n            [cdkConnectedOverlayPositions]=\"positions\"\n            [cdkConnectedOverlayPush]=\"true\"\n            [cdkConnectedOverlayViewportMargin]=\"16\"\n            (overlayOutsideClick)=\"outside($event)\"\n          >\n            <div\n              class=\"panel\"\n              tabindex=\"-1\"\n              role=\"region\"\n              (keydown)=\"panelKeydown($event)\"\n              (focusout)=\"focusOut($event)\"\n              [id]=\"id + '-' + item.id\"\n              [attr.aria-labelledby]=\"id + '-' + item.id + '-trigger'\"\n            >\n              @for (section of item.sections; track $index) {\n                <section>\n                  <h3>{{ section.label }}</h3>\n                  <ul>\n                    @for (link of section.links; track $index) {\n                      <li>\n                        <a [href]=\"link.href\" (click)=\"open.set(null)\"\n                          ><strong>{{ link.label }}</strong>\n                          @if (link.description) {\n                            <span>{{ link.description }}</span>\n                          }\n                        </a>\n                      </li>\n                    }\n                  </ul>\n                </section>\n              }\n            </div>\n          </ng-template>\n        } @else {\n          <a [href]=\"item.href\">{{ item.label }}</a>\n        }\n      </li>\n    }\n  </ul>\n</nav>\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-number-ticker.mjs

@@ -0,0 +1,174 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Injector, afterNextRender, booleanAttribute, computed, effect, inject, input, signal, untracked } from "@angular/core";
+import { HyLocale } from "@hyalo/angular/core";
+import { HyMotion, HySpring, injectHyVisibility } from "@hyalo/angular/motion";
+var HyNumberTicker = class HyNumberTicker {
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	locale = input(...ngDevMode ? [void 0, { debugName: "locale" }] : /* istanbul ignore next */ []);
+	globalLocale = inject(HyLocale);
+	effectiveLocale = computed(() => this.locale() ?? this.globalLocale.locale(), ...ngDevMode ? [{ debugName: "effectiveLocale" }] : /* istanbul ignore next */ []);
+	format = input({ maximumFractionDigits: 0 }, ...ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []);
+	animate = input(false, {
+		...ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	prefix = input("", ...ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []);
+	suffix = input("", ...ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []);
+	target = computed(() => Number.isFinite(this.value()) ? this.value() : 0, ...ngDevMode ? [{ debugName: "target" }] : /* istanbul ignore next */ []);
+	live = signal(null, ...ngDevMode ? [{ debugName: "live" }] : /* istanbul ignore next */ []);
+	formatter = computed(() => new Intl.NumberFormat(this.effectiveLocale(), this.format()), ...ngDevMode ? [{ debugName: "formatter" }] : /* istanbul ignore next */ []);
+	formatted = computed(() => this.prefix() + this.formatter().format(this.live() ?? this.target()) + this.suffix(), ...ngDevMode ? [{ debugName: "formatted" }] : /* istanbul ignore next */ []);
+	accessible = computed(() => this.prefix() + this.formatter().format(this.target()) + this.suffix(), ...ngDevMode ? [{ debugName: "accessible" }] : /* istanbul ignore next */ []);
+	motion = inject(HyMotion);
+	visible = injectHyVisibility();
+	constructor() {
+		const injector = inject(Injector), destroy = inject(DestroyRef);
+		let spring;
+		afterNextRender(() => {
+			const active = spring = new HySpring(this.target(), (value) => this.live.set(value));
+			effect(() => {
+				const target = this.target(), enabled = this.animate() && this.visible() && this.motion.enabled();
+				untracked(() => {
+					if (enabled) active.to(target);
+					else active.set(target);
+				});
+			}, { injector });
+		});
+		destroy.onDestroy(() => spring?.stop());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyNumberTicker,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyNumberTicker,
+		isStandalone: true,
+		selector: "hy-number-ticker",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			format: {
+				classPropertyName: "format",
+				publicName: "format",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			animate: {
+				classPropertyName: "animate",
+				publicName: "animate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			prefix: {
+				classPropertyName: "prefix",
+				publicName: "prefix",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			suffix: {
+				classPropertyName: "suffix",
+				publicName: "suffix",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: `<span aria-hidden="true">{{ formatted() }}</span
+    ><span class="sr">{{ accessible() }}</span>`,
+		isInline: true,
+		styles: [":host{font-variant-numeric:tabular-nums}.sr{position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyNumberTicker,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-number-ticker",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<span aria-hidden="true">{{ formatted() }}</span
+    ><span class="sr">{{ accessible() }}</span>`,
+			styles: [":host{font-variant-numeric:tabular-nums}.sr{position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		format: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "format",
+				required: false
+			}]
+		}],
+		animate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "animate",
+				required: false
+			}]
+		}],
+		prefix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "prefix",
+				required: false
+			}]
+		}],
+		suffix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "suffix",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyNumberTicker };
+
+//# sourceMappingURL=hyalo-angular-number-ticker.mjs.map

package/fesm2022/hyalo-angular-number-ticker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-number-ticker.mjs","names":[],"sources":["../../../projects/hyalo/number-ticker/number-ticker.ts"],"sourcesContent":["import { booleanAttribute } from '@angular/core';\nimport { HyLocale } from '@hyalo/angular/core';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  Injector,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  signal,\n  untracked,\n} from '@angular/core';\nimport { HyMotion, HySpring, injectHyVisibility } from '@hyalo/angular/motion';\n@Component({\n  selector: 'hy-number-ticker',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `<span aria-hidden=\"true\">{{ formatted() }}</span\n    ><span class=\"sr\">{{ accessible() }}</span>`,\n  styleUrl: './number-ticker.css',\n})\nexport class HyNumberTicker {\n  readonly value = input.required<number>();\n  readonly locale = input<string>();\n  private readonly globalLocale = inject(HyLocale);\n  private readonly effectiveLocale = computed(() => this.locale() ?? this.globalLocale.locale());\n  readonly format = input<Intl.NumberFormatOptions>({ maximumFractionDigits: 0 });\n  readonly animate = input(false, { transform: booleanAttribute });\n  readonly prefix = input('');\n  readonly suffix = input('');\n  private readonly target = computed(() => (Number.isFinite(this.value()) ? this.value() : 0));\n  private readonly live = signal<number | null>(null);\n  private readonly formatter = computed(\n    () => new Intl.NumberFormat(this.effectiveLocale(), this.format()),\n  );\n  readonly formatted = computed(\n    () => this.prefix() + this.formatter().format(this.live() ?? this.target()) + this.suffix(),\n  );\n  readonly accessible = computed(\n    () => this.prefix() + this.formatter().format(this.target()) + this.suffix(),\n  );\n  private readonly motion = inject(HyMotion);\n  private readonly visible = injectHyVisibility();\n  constructor() {\n    const injector = inject(Injector),\n      destroy = inject(DestroyRef);\n    let spring: HySpring | undefined;\n    afterNextRender(() => {\n      const active = (spring = new HySpring(this.target(), (value) => this.live.set(value)));\n      effect(\n        () => {\n          const target = this.target(),\n            enabled = this.animate() && this.visible() && this.motion.enabled();\n          untracked(() => {\n            if (enabled) active.to(target);\n            else active.set(target);\n          });\n        },\n        { injector },\n      );\n    });\n    destroy.onDestroy(() => spring?.stop());\n  }\n}\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-overlay.mjs

@@ -0,0 +1,163 @@
+import { MOTION } from "@hyalo/angular/motion";
+const OPPOSITE = {
+	top: "bottom",
+	bottom: "top",
+	start: "end",
+	end: "start"
+};
+function position(placement, offset) {
+	switch (placement) {
+		case "top": return {
+			originX: "center",
+			originY: "top",
+			overlayX: "center",
+			overlayY: "bottom",
+			offsetY: -offset
+		};
+		case "bottom": return {
+			originX: "center",
+			originY: "bottom",
+			overlayX: "center",
+			overlayY: "top",
+			offsetY: offset
+		};
+		case "start": return {
+			originX: "start",
+			originY: "center",
+			overlayX: "end",
+			overlayY: "center",
+			offsetX: -offset
+		};
+		case "end": return {
+			originX: "end",
+			originY: "center",
+			overlayX: "start",
+			overlayY: "center",
+			offsetX: offset
+		};
+	}
+}
+function hyConnectedPositions(placement, offset = 8) {
+	return [position(placement, offset), position(OPPOSITE[placement], offset)];
+}
+function hyDropdownPositions(offset = 6) {
+	return [{
+		originX: "start",
+		originY: "bottom",
+		overlayX: "start",
+		overlayY: "top",
+		offsetY: offset
+	}, {
+		originX: "start",
+		originY: "top",
+		overlayX: "start",
+		overlayY: "bottom",
+		offsetY: -offset
+	}];
+}
+var HyPresence = class {
+	cancel = null;
+	get leaving() {
+		return this.cancel !== null;
+	}
+	enter(el) {
+		if (this.cancel) this.cancel();
+		else {
+			el.dataset["state"] = "closed";
+			el.offsetWidth;
+		}
+		el.dataset["state"] = "open";
+	}
+	leave(el, done) {
+		if (this.cancel) return;
+		el.dataset["state"] = "closing";
+		const stop = () => {
+			el.removeEventListener("transitionend", onEnd);
+			clearTimeout(timer);
+			this.cancel = null;
+		};
+		const onEnd = (event) => {
+			if (event.target !== el || event.propertyName !== "opacity") return;
+			stop();
+			done();
+		};
+		const timer = setTimeout(() => {
+			stop();
+			done();
+		}, MOTION.quick.duration * 1e3 + 80);
+		el.addEventListener("transitionend", onEnd);
+		this.cancel = stop;
+	}
+};
+function triangle(p, a, b, c) {
+	const side = (u, v, w) => (u.x - w.x) * (v.y - w.y) - (v.x - w.x) * (u.y - w.y);
+	const d = [
+		side(p, a, b),
+		side(p, b, c),
+		side(p, c, a)
+	];
+	return !(d.some((v) => v < 0) && d.some((v) => v > 0));
+}
+var HyHoverIntent = class {
+	document;
+	timer;
+	abort;
+	constructor(document) {
+		this.document = document;
+	}
+	cancel() {
+		clearTimeout(this.timer);
+		this.abort?.abort();
+		this.abort = void 0;
+	}
+	leave(event, target, close) {
+		this.cancel();
+		const finish = () => {
+			this.cancel();
+			close();
+		};
+		this.timer = setTimeout(finish, 150);
+		if (!event || !target || event.pointerType === "touch") return;
+		const bounds = target.getBoundingClientRect(), start = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const dx = (bounds.left + bounds.right) / 2 - start.x, dy = (bounds.top + bounds.bottom) / 2 - start.y;
+		const horizontal = Math.abs(dx) / Math.max(1, bounds.width) > Math.abs(dy) / Math.max(1, bounds.height);
+		const edge = horizontal ? dx > 0 ? bounds.left : bounds.right : dy > 0 ? bounds.top : bounds.bottom;
+		const a = horizontal ? {
+			x: edge,
+			y: bounds.top - 8
+		} : {
+			x: bounds.left - 8,
+			y: edge
+		};
+		const b = horizontal ? {
+			x: edge,
+			y: bounds.bottom + 8
+		} : {
+			x: bounds.right + 8,
+			y: edge
+		};
+		const deadline = performance.now() + 500;
+		this.abort = new AbortController();
+		this.document.addEventListener("pointermove", (move) => {
+			if (performance.now() >= deadline) {
+				finish();
+				return;
+			}
+			if (!triangle({
+				x: move.clientX,
+				y: move.clientY
+			}, start, a, b)) return;
+			clearTimeout(this.timer);
+			this.timer = setTimeout(finish, Math.min(150, deadline - performance.now()));
+		}, {
+			passive: true,
+			signal: this.abort.signal
+		});
+	}
+};
+export { HyHoverIntent, hyConnectedPositions, hyDropdownPositions, HyPresence as ɵHyPresence };
+
+//# sourceMappingURL=hyalo-angular-overlay.mjs.map

package/fesm2022/hyalo-angular-overlay.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-overlay.mjs","names":[],"sources":["../../../projects/hyalo/overlay/positions.ts","../../../projects/hyalo/overlay/presence.ts","../../../projects/hyalo/overlay/hover-intent.ts"],"sourcesContent":["import type { ConnectedPosition } from '@angular/cdk/overlay';\r\n\r\n/**\r\n * Where a floating element sits relative to its trigger. `start` and `end`\r\n * follow the text direction, so `end` is on the right in LTR and on the left\r\n * in RTL.\r\n */\r\nexport type HyPlacement = 'top' | 'bottom' | 'start' | 'end';\r\n\r\nconst OPPOSITE: Record<HyPlacement, HyPlacement> = {\r\n  top: 'bottom',\r\n  bottom: 'top',\r\n  start: 'end',\r\n  end: 'start',\r\n};\r\n\r\nfunction position(placement: HyPlacement, offset: number): ConnectedPosition {\r\n  switch (placement) {\r\n    case 'top':\r\n      return {\r\n        originX: 'center',\r\n        originY: 'top',\r\n        overlayX: 'center',\r\n        overlayY: 'bottom',\r\n        offsetY: -offset,\r\n      };\r\n    case 'bottom':\r\n      return {\r\n        originX: 'center',\r\n        originY: 'bottom',\r\n        overlayX: 'center',\r\n        overlayY: 'top',\r\n        offsetY: offset,\r\n      };\r\n    case 'start':\r\n      return {\r\n        originX: 'start',\r\n        originY: 'center',\r\n        overlayX: 'end',\r\n        overlayY: 'center',\r\n        offsetX: -offset,\r\n      };\r\n    case 'end':\r\n      return {\r\n        originX: 'end',\r\n        originY: 'center',\r\n        overlayX: 'start',\r\n        overlayY: 'center',\r\n        offsetX: offset,\r\n      };\r\n  }\r\n}\r\n\r\n/**\r\n * CDK positions for a placement, with the opposite side as the first\r\n * fallback when there is no room.\r\n */\r\nexport function hyConnectedPositions(placement: HyPlacement, offset = 8): ConnectedPosition[] {\r\n  return [position(placement, offset), position(OPPOSITE[placement], offset)];\r\n}\r\n\r\n/** Positions for a dropdown that lines up with the trigger's start edge. */\r\nexport function hyDropdownPositions(offset = 6): ConnectedPosition[] {\r\n  return [\r\n    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: offset },\r\n    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -offset },\r\n  ];\r\n}\r\n","import { MOTION } from '@hyalo/angular/motion';\r\n\r\n/**\r\n * @internal Enter and exit for small overlays (tooltips, popovers, select\r\n * panels), driven by `data-state` and CSS transitions.\r\n *\r\n * Transitions start from the current value, so reopening a panel while it\r\n * is still fading out simply turns it around, with no jump.\r\n */\r\nexport class HyPresence {\r\n  private cancel: (() => void) | null = null;\r\n\r\n  /** True while an exit is playing. */\r\n  get leaving(): boolean {\r\n    return this.cancel !== null;\r\n  }\r\n\r\n  /** Shows a panel that was just attached, or turns a leaving one around. */\r\n  enter(el: HTMLElement): void {\r\n    if (this.cancel) {\r\n      this.cancel();\r\n    } else {\r\n      el.dataset['state'] = 'closed';\r\n      // Commit the closed pose so the change to open transitions.\r\n      void el.offsetWidth;\r\n    }\r\n    el.dataset['state'] = 'open';\r\n  }\r\n\r\n  /** Plays the exit, then calls `done`, unless `enter` turns it around first. */\r\n  leave(el: HTMLElement, done: () => void): void {\r\n    if (this.cancel) return;\r\n    el.dataset['state'] = 'closing';\r\n    const stop = (): void => {\r\n      el.removeEventListener('transitionend', onEnd);\r\n      clearTimeout(timer);\r\n      this.cancel = null;\r\n    };\r\n    const onEnd = (event: TransitionEvent): void => {\r\n      if (event.target !== el || event.propertyName !== 'opacity') return;\r\n      stop();\r\n      done();\r\n    };\r\n    // A safety net for when transitionend never comes, as with no transition.\r\n    const timer = setTimeout(\r\n      () => {\r\n        stop();\r\n        done();\r\n      },\r\n      MOTION.quick.duration * 1000 + 80,\r\n    );\r\n    el.addEventListener('transitionend', onEnd);\r\n    this.cancel = stop;\r\n  }\r\n}\r\n","interface Point {\r\n  x: number;\r\n  y: number;\r\n}\r\nfunction triangle(p: Point, a: Point, b: Point, c: Point): boolean {\r\n  const side = (u: Point, v: Point, w: Point): number =>\r\n    (u.x - w.x) * (v.y - w.y) - (v.x - w.x) * (u.y - w.y);\r\n  const d = [side(p, a, b), side(p, b, c), side(p, c, a)];\r\n  return !(d.some((v) => v < 0) && d.some((v) => v > 0));\r\n}\r\n/** Bounded pointer grace; keyboard dismissal never waits for the corridor. */\r\nexport class HyHoverIntent {\r\n  private timer?: ReturnType<typeof setTimeout>;\r\n  private abort?: AbortController;\r\n  constructor(private readonly document: Document) {}\r\n  cancel(): void {\r\n    clearTimeout(this.timer);\r\n    this.abort?.abort();\r\n    this.abort = undefined;\r\n  }\r\n  leave(event: PointerEvent | undefined, target: HTMLElement | undefined, close: () => void): void {\r\n    this.cancel();\r\n    const finish = (): void => {\r\n      this.cancel();\r\n      close();\r\n    };\r\n    this.timer = setTimeout(finish, 150);\r\n    if (!event || !target || event.pointerType === 'touch') return;\r\n    const bounds = target.getBoundingClientRect(),\r\n      start = { x: event.clientX, y: event.clientY };\r\n    const dx = (bounds.left + bounds.right) / 2 - start.x,\r\n      dy = (bounds.top + bounds.bottom) / 2 - start.y;\r\n    const horizontal =\r\n      Math.abs(dx) / Math.max(1, bounds.width) > Math.abs(dy) / Math.max(1, bounds.height);\r\n    const edge = horizontal\r\n      ? dx > 0\r\n        ? bounds.left\r\n        : bounds.right\r\n      : dy > 0\r\n        ? bounds.top\r\n        : bounds.bottom;\r\n    const a = horizontal ? { x: edge, y: bounds.top - 8 } : { x: bounds.left - 8, y: edge };\r\n    const b = horizontal ? { x: edge, y: bounds.bottom + 8 } : { x: bounds.right + 8, y: edge };\r\n    const deadline = performance.now() + 500;\r\n    this.abort = new AbortController();\r\n    this.document.addEventListener(\r\n      'pointermove',\r\n      (move) => {\r\n        if (performance.now() >= deadline) {\r\n          finish();\r\n          return;\r\n        }\r\n        if (!triangle({ x: move.clientX, y: move.clientY }, start, a, b)) return;\r\n        clearTimeout(this.timer);\r\n        this.timer = setTimeout(finish, Math.min(150, deadline - performance.now()));\r\n      },\r\n      { passive: true, signal: this.abort.signal },\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}