@hyalo/angular 0.1.0 → 0.3.1

package/fesm2022/hyalo-angular-hover-card.mjs

@@ -0,0 +1,233 @@
+import { DOCUMENT } from "@angular/common";
+import { createFlexibleConnectedPositionStrategy, createOverlayRef, createRepositionScrollStrategy } from "@angular/cdk/overlay";
+import { TemplatePortal } from "@angular/cdk/portal";
+import * as i0 from "@angular/core";
+import { DestroyRef, Directive, ElementRef, Injector, ViewContainerRef, inject, input, signal } from "@angular/core";
+import { HyFidelity, injectId } from "@hyalo/angular/core";
+import { HyHoverIntent, hyConnectedPositions } from "@hyalo/angular/overlay";
+import { take } from "rxjs";
+var HyHoverCard = class HyHoverCard {
+	content = input.required({
+		...ngDevMode ? { debugName: "content" } : /* istanbul ignore next */ {},
+		alias: "hyHoverCard"
+	});
+	hoverCardLabel = input.required(...ngDevMode ? [{ debugName: "hoverCardLabel" }] : /* istanbul ignore next */ []);
+	placement = input("top", ...ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []);
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	id = injectId("hover-card");
+	injector = inject(Injector);
+	host = inject(ElementRef);
+	container = inject(ViewContainerRef);
+	fidelity = inject(HyFidelity);
+	document = inject(DOCUMENT);
+	intent = new HyHoverIntent(this.document);
+	ref;
+	timer;
+	disposed = false;
+	suppressFocus = false;
+	focusTrigger() {
+		if (!this.suppressFocus) this.show();
+	}
+	constructor() {
+		inject(DestroyRef).onDestroy(() => {
+			this.disposed = true;
+			clearTimeout(this.timer);
+			this.intent.cancel();
+			this.ref?.dispose();
+		});
+	}
+	enter(event) {
+		this.intent.cancel();
+		if (event.pointerType === "touch") return;
+		clearTimeout(this.timer);
+		this.timer = setTimeout(() => this.show(), 250);
+	}
+	leave(event) {
+		clearTimeout(this.timer);
+		this.intent.leave(event, this.ref?.overlayElement, () => {
+			if (this.ref?.overlayElement.contains(this.document.activeElement) || this.host.nativeElement.contains(this.document.activeElement)) return;
+			this.hide();
+		});
+	}
+	focusOut(event) {
+		if (event.relatedTarget && this.ref?.overlayElement.contains(event.relatedTarget)) return;
+		this.leave();
+	}
+	escape(event) {
+		if (this.open()) {
+			event.preventDefault();
+			event.stopPropagation();
+			this.hide();
+			this.suppressFocus = true;
+			this.host.nativeElement.focus();
+			this.suppressFocus = false;
+		}
+	}
+	focusCard(event) {
+		event.preventDefault();
+		this.show();
+		const pane = this.ref?.overlayElement;
+		if (!pane) return;
+		const focusable = pane.querySelector("a[href],button:not([disabled]),input:not([disabled]),[tabindex=\"0\"]");
+		pane.tabIndex = -1;
+		(focusable ?? pane).focus();
+	}
+	show() {
+		clearTimeout(this.timer);
+		if (this.disposed || this.open()) return;
+		if (!this.ref) {
+			const position = createFlexibleConnectedPositionStrategy(this.injector, this.host).withPositions(hyConnectedPositions(this.placement(), 8)).withViewportMargin(12).withPush(true);
+			this.ref = createOverlayRef(this.injector, {
+				positionStrategy: position,
+				scrollStrategy: createRepositionScrollStrategy(this.injector),
+				panelClass: "hy-hover-card-pane"
+			});
+			const pane = this.ref.overlayElement;
+			pane.classList.add("hy-glass");
+			pane.style.cssText = "max-inline-size:min(22rem,calc(100vw - 2rem));max-block-size:70dvh;overflow:auto;padding:1.25rem;border-radius:var(--hy-radius-m);border:1px solid var(--hy-line-strong);color:var(--hy-ink)";
+			pane.id = this.id;
+			pane.setAttribute("role", "dialog");
+			pane.addEventListener("pointerenter", () => {
+				clearTimeout(this.timer);
+				this.intent.cancel();
+			});
+			pane.addEventListener("pointerleave", () => this.leave());
+			pane.addEventListener("focusout", (event) => {
+				const next = event.relatedTarget;
+				if (!next || !pane.contains(next) && !this.host.nativeElement.contains(next)) this.leave();
+			});
+			this.ref.keydownEvents().subscribe((event) => {
+				if (event.key === "Escape") this.escape(event);
+			});
+			this.ref.outsidePointerEvents().subscribe((event) => {
+				if (!this.host.nativeElement.contains(event.target)) this.hide();
+			});
+		}
+		const pane = this.ref.overlayElement;
+		pane.setAttribute("aria-label", this.hoverCardLabel());
+		pane.dataset["material"] = this.fidelity.tier() === "low" ? "solid" : "frosted";
+		pane.style.visibility = "hidden";
+		const strategy = this.ref.getConfig().positionStrategy;
+		strategy.withPositions(hyConnectedPositions(this.placement(), 8));
+		strategy.positionChanges.pipe(take(1)).subscribe(() => pane.style.removeProperty("visibility"));
+		this.open.set(true);
+		this.ref.attach(new TemplatePortal(this.content(), this.container));
+	}
+	hide() {
+		clearTimeout(this.timer);
+		this.intent.cancel();
+		this.open.set(false);
+		this.ref?.detach();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyHoverCard,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyHoverCard,
+		isStandalone: true,
+		selector: "[hyHoverCard]",
+		inputs: {
+			content: {
+				classPropertyName: "content",
+				publicName: "hyHoverCard",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			hoverCardLabel: {
+				classPropertyName: "hoverCardLabel",
+				publicName: "hoverCardLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			placement: {
+				classPropertyName: "placement",
+				publicName: "placement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "aria-haspopup": "dialog" },
+			listeners: {
+				"pointerenter": "enter($event)",
+				"pointerleave": "leave($event)",
+				"focusin": "focusTrigger()",
+				"focusout": "focusOut($event)",
+				"keydown.escape": "escape($event)",
+				"keydown.arrowdown": "focusCard($event)",
+				"click": "show()"
+			},
+			properties: {
+				"attr.aria-expanded": "open()",
+				"attr.aria-controls": "open()?id:null"
+			}
+		},
+		exportAs: ["hyHoverCard"],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyHoverCard,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[hyHoverCard]",
+			exportAs: "hyHoverCard",
+			host: {
+				"(pointerenter)": "enter($event)",
+				"(pointerleave)": "leave($event)",
+				"(focusin)": "focusTrigger()",
+				"(focusout)": "focusOut($event)",
+				"(keydown.escape)": "escape($event)",
+				"(keydown.arrowdown)": "focusCard($event)",
+				"(click)": "show()",
+				"aria-haspopup": "dialog",
+				"[attr.aria-expanded]": "open()",
+				"[attr.aria-controls]": "open()?id:null"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		content: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hyHoverCard",
+				required: true
+			}]
+		}],
+		hoverCardLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hoverCardLabel",
+				required: true
+			}]
+		}],
+		placement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placement",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyHoverCard };
+
+//# sourceMappingURL=hyalo-angular-hover-card.mjs.map

package/fesm2022/hyalo-angular-hover-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-hover-card.mjs","names":[],"sources":["../../../projects/hyalo/hover-card/hover-card.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\r\nimport {\r\n  createFlexibleConnectedPositionStrategy,\r\n  createOverlayRef,\r\n  createRepositionScrollStrategy,\r\n  type OverlayRef,\r\n} from '@angular/cdk/overlay';\r\nimport { TemplatePortal } from '@angular/cdk/portal';\r\nimport {\r\n  DestroyRef,\r\n  Directive,\r\n  ElementRef,\r\n  Injector,\r\n  TemplateRef,\r\n  ViewContainerRef,\r\n  inject,\r\n  input,\r\n  signal,\r\n} from '@angular/core';\r\nimport { HyFidelity, injectId } from '@hyalo/angular/core';\r\nimport { HyHoverIntent, hyConnectedPositions, type HyPlacement } from '@hyalo/angular/overlay';\r\nimport { take } from 'rxjs';\r\n@Directive({\r\n  selector: '[hyHoverCard]',\r\n  exportAs: 'hyHoverCard',\r\n  host: {\r\n    '(pointerenter)': 'enter($event)',\r\n    '(pointerleave)': 'leave($event)',\r\n    '(focusin)': 'focusTrigger()',\r\n    '(focusout)': 'focusOut($event)',\r\n    '(keydown.escape)': 'escape($event)',\r\n    '(keydown.arrowdown)': 'focusCard($event)',\r\n    '(click)': 'show()',\r\n    'aria-haspopup': 'dialog',\r\n    '[attr.aria-expanded]': 'open()',\r\n    '[attr.aria-controls]': 'open()?id:null',\r\n  },\r\n})\r\nexport class HyHoverCard {\r\n  readonly content = input.required<TemplateRef<unknown>>({ alias: 'hyHoverCard' });\r\n  readonly hoverCardLabel = input.required<string>();\r\n  readonly placement = input<HyPlacement>('top');\r\n  readonly open = signal(false);\r\n  protected readonly id = injectId('hover-card');\r\n  private readonly injector = inject(Injector);\r\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\r\n  private readonly container = inject(ViewContainerRef);\r\n  private readonly fidelity = inject(HyFidelity);\r\n  private readonly document = inject(DOCUMENT);\r\n  private readonly intent = new HyHoverIntent(this.document);\r\n  private ref: OverlayRef | undefined;\r\n  private timer: ReturnType<typeof setTimeout> | undefined;\r\n  private disposed = false;\r\n  private suppressFocus = false;\r\n  protected focusTrigger(): void {\r\n    if (!this.suppressFocus) this.show();\r\n  }\r\n  constructor() {\r\n    inject(DestroyRef).onDestroy(() => {\r\n      this.disposed = true;\r\n      clearTimeout(this.timer);\r\n      this.intent.cancel();\r\n      this.ref?.dispose();\r\n    });\r\n  }\r\n  protected enter(event: PointerEvent): void {\r\n    this.intent.cancel();\r\n    if (event.pointerType === 'touch') return;\r\n    clearTimeout(this.timer);\r\n    this.timer = setTimeout(() => this.show(), 250);\r\n  }\r\n  protected leave(event?: PointerEvent): void {\r\n    clearTimeout(this.timer);\r\n    this.intent.leave(event, this.ref?.overlayElement, () => {\r\n      if (\r\n        this.ref?.overlayElement.contains(this.document.activeElement) ||\r\n        this.host.nativeElement.contains(this.document.activeElement)\r\n      )\r\n        return;\r\n      this.hide();\r\n    });\r\n  }\r\n  protected focusOut(event: FocusEvent): void {\r\n    if (event.relatedTarget && this.ref?.overlayElement.contains(event.relatedTarget as Node))\r\n      return;\r\n    this.leave();\r\n  }\r\n  protected escape(event: Event): void {\r\n    if (this.open()) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.hide();\r\n      this.suppressFocus = true;\r\n      this.host.nativeElement.focus();\r\n      this.suppressFocus = false;\r\n    }\r\n  }\r\n  protected focusCard(event: Event): void {\r\n    event.preventDefault();\r\n    this.show();\r\n    const pane = this.ref?.overlayElement;\r\n    if (!pane) return;\r\n    const focusable = pane.querySelector<HTMLElement>(\r\n      'a[href],button:not([disabled]),input:not([disabled]),[tabindex=\"0\"]',\r\n    );\r\n    pane.tabIndex = -1;\r\n    (focusable ?? pane).focus();\r\n  }\r\n  show(): void {\r\n    clearTimeout(this.timer);\r\n    if (this.disposed || this.open()) return;\r\n    if (!this.ref) {\r\n      const position = createFlexibleConnectedPositionStrategy(this.injector, this.host)\r\n        .withPositions(hyConnectedPositions(this.placement(), 8))\r\n        .withViewportMargin(12)\r\n        .withPush(true);\r\n      this.ref = createOverlayRef(this.injector, {\r\n        positionStrategy: position,\r\n        scrollStrategy: createRepositionScrollStrategy(this.injector),\r\n        panelClass: 'hy-hover-card-pane',\r\n      });\r\n      const pane = this.ref.overlayElement;\r\n      pane.classList.add('hy-glass');\r\n      pane.style.cssText =\r\n        'max-inline-size:min(22rem,calc(100vw - 2rem));max-block-size:70dvh;overflow:auto;padding:1.25rem;border-radius:var(--hy-radius-m);border:1px solid var(--hy-line-strong);color:var(--hy-ink)';\r\n      pane.id = this.id;\r\n      pane.setAttribute('role', 'dialog');\r\n      pane.addEventListener('pointerenter', () => {\r\n        clearTimeout(this.timer);\r\n        this.intent.cancel();\r\n      });\r\n      pane.addEventListener('pointerleave', () => this.leave());\r\n      pane.addEventListener('focusout', (event) => {\r\n        const next = event.relatedTarget as Node | null;\r\n        if (!next || (!pane.contains(next) && !this.host.nativeElement.contains(next)))\r\n          this.leave();\r\n      });\r\n      this.ref.keydownEvents().subscribe((event) => {\r\n        if (event.key === 'Escape') this.escape(event);\r\n      });\r\n      this.ref.outsidePointerEvents().subscribe((event) => {\r\n        if (!this.host.nativeElement.contains(event.target as Node)) this.hide();\r\n      });\r\n    }\r\n    const pane = this.ref.overlayElement;\r\n    pane.setAttribute('aria-label', this.hoverCardLabel());\r\n    pane.dataset['material'] = this.fidelity.tier() === 'low' ? 'solid' : 'frosted';\r\n    pane.style.visibility = 'hidden';\r\n    const strategy = this.ref.getConfig().positionStrategy as ReturnType<\r\n      typeof createFlexibleConnectedPositionStrategy\r\n    >;\r\n    strategy.withPositions(hyConnectedPositions(this.placement(), 8));\r\n    strategy.positionChanges.pipe(take(1)).subscribe(() => pane.style.removeProperty('visibility'));\r\n    this.open.set(true);\r\n    this.ref.attach(new TemplatePortal(this.content(), this.container));\r\n  }\r\n  hide(): void {\r\n    clearTimeout(this.timer);\r\n    this.intent.cancel();\r\n    this.open.set(false);\r\n    this.ref?.detach();\r\n  }\r\n}\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-icon.mjs

@@ -1,6 +1,48 @@
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, Directive, ElementRef, Injectable, InjectionToken, Renderer2, computed, effect, inject, input, isDevMode } from "@angular/core";
 const HY_BUILTIN_ICONS = {
+	home: { node: [["path", { d: "m3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1Z" }]] },
+	grid: { node: [
+		["rect", {
+			x: 3,
+			y: 3,
+			width: 7,
+			height: 7,
+			rx: 1
+		}],
+		["rect", {
+			x: 14,
+			y: 3,
+			width: 7,
+			height: 7,
+			rx: 1
+		}],
+		["rect", {
+			x: 3,
+			y: 14,
+			width: 7,
+			height: 7,
+			rx: 1
+		}],
+		["rect", {
+			x: 14,
+			y: 14,
+			width: 7,
+			height: 7,
+			rx: 1
+		}]
+	] },
+	user: { node: [["circle", {
+		cx: 12,
+		cy: 8,
+		r: 4
+	}], ["path", { d: "M4 21v-2a7 7 0 0 1 7-7h2a7 7 0 0 1 7 7v2" }]] },
+	search: { node: [["circle", {
+		cx: 11,
+		cy: 11,
+		r: 8
+	}], ["path", { d: "m21 21-4.35-4.35" }]] },
+	settings: { node: [["path", { d: "M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z" }], ["path", { d: "M9 3h6l1 3 3 1 2 5-2 5-3 1-1 3H9l-1-3-3-1-2-5 2-5 3-1Z" }]] },
 	x: { node: [["path", { d: "M18 6 6 18" }], ["path", { d: "m6 6 12 12" }]] },
 	check: { node: [["path", { d: "M20 6 9 17l-5-5" }]] },
 	minus: { node: [["path", { d: "M5 12h14" }]] },

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

@@ -1 +1 @@
-{"version":3,"file":"hyalo-angular-icon.mjs","names":[],"sources":["../../../projects/hyalo/icon/icons.ts","../../../projects/hyalo/icon/registry.ts","../../../projects/hyalo/icon/icon.ts","../../../projects/hyalo/icon/icon.html"],"sourcesContent":["/**\r\n * Icon data in the same shape Lucide uses (`IconNode`), so any Lucide icon\r\n * can be registered as is:\r\n *\r\n * ```ts\r\n * import { ArrowRight } from 'lucide';\r\n * provideHyaloIcons({ 'arrow-right': ArrowRight })\r\n * ```\r\n *\r\n * Icons are data, not SVG strings, so nothing is ever parsed as HTML.\r\n */\r\nexport type HyIconNode = readonly (readonly [string, Readonly<Record<string, string | number>>])[];\r\n\r\n/** An icon plus how it behaves in right-to-left layouts. */\r\nexport interface HyIconDef {\r\n  readonly node: HyIconNode;\r\n  /** Mirror the icon in RTL. Set it for icons that point somewhere, like arrows. */\r\n  readonly mirrorRtl?: boolean;\r\n}\r\n\r\n/*\r\n * The few icons the kit uses itself. Paths are from Lucide (ISC license,\r\n * Copyright (c) Lucide Icons and Contributors), https://lucide.dev.\r\n */\r\nexport const HY_BUILTIN_ICONS: Readonly<Record<string, HyIconDef>> = {\r\n  x: {\r\n    node: [\r\n      ['path', { d: 'M18 6 6 18' }],\r\n      ['path', { d: 'm6 6 12 12' }],\r\n    ],\r\n  },\r\n  check: { node: [['path', { d: 'M20 6 9 17l-5-5' }]] },\r\n  minus: { node: [['path', { d: 'M5 12h14' }]] },\r\n  'chevron-down': { node: [['path', { d: 'm6 9 6 6 6-6' }]] },\r\n  'chevron-end': { node: [['path', { d: 'm9 18 6-6-6-6' }]], mirrorRtl: true },\r\n  menu: {\r\n    node: [\r\n      ['path', { d: 'M4 5h16' }],\r\n      ['path', { d: 'M4 12h16' }],\r\n      ['path', { d: 'M4 19h16' }],\r\n    ],\r\n  },\r\n  info: {\r\n    node: [\r\n      ['circle', { cx: 12, cy: 12, r: 10 }],\r\n      ['path', { d: 'M12 16v-4' }],\r\n      ['path', { d: 'M12 8h.01' }],\r\n    ],\r\n  },\r\n  success: {\r\n    node: [\r\n      ['circle', { cx: 12, cy: 12, r: 10 }],\r\n      ['path', { d: 'm16 9-5.5 5.5L8 12' }],\r\n    ],\r\n  },\r\n  warning: {\r\n    node: [\r\n      ['path', { d: 'm21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' }],\r\n      ['path', { d: 'M12 9v4' }],\r\n      ['path', { d: 'M12 17h.01' }],\r\n    ],\r\n  },\r\n  danger: {\r\n    node: [\r\n      ['circle', { cx: 12, cy: 12, r: 10 }],\r\n      ['path', { d: 'M12 8v4' }],\r\n      ['path', { d: 'M12 16h.01' }],\r\n    ],\r\n  },\r\n  spinner: { node: [['path', { d: 'M21 12a9 9 0 1 1-6.219-8.56' }]] },\r\n};\r\n","import { Injectable, InjectionToken, Provider, inject } from '@angular/core';\r\nimport { HY_BUILTIN_ICONS, type HyIconDef, type HyIconNode } from './icons';\r\n\r\ntype HyIconSet = Readonly<Record<string, HyIconDef | HyIconNode>>;\r\n\r\n/** Icons added with {@link provideHyaloIcons}. Collected from every provider. */\r\nexport const HY_ICONS = new InjectionToken<readonly HyIconSet[]>('HY_ICONS');\r\n\r\n/**\r\n * Registers icons by name. Only the icons you import end up in the bundle.\r\n *\r\n * ```ts\r\n * provideHyaloIcons({ search: Search, 'arrow-end': { node: ArrowRight, mirrorRtl: true } })\r\n * ```\r\n *\r\n * Works in `app.config.ts` and in a route's or component's `providers`.\r\n * Icons from the nearest provider win over app-wide ones.\r\n */\r\nexport function provideHyaloIcons(\r\n  icons: Readonly<Record<string, HyIconDef | HyIconNode>>,\r\n): Provider {\r\n  return { provide: HY_ICONS, multi: true, useValue: icons };\r\n}\r\n\r\nfunction isDef(value: HyIconDef | HyIconNode): value is HyIconDef {\r\n  return !Array.isArray(value);\r\n}\r\n\r\n/** Looks up icons by name: built-ins first, then registered sets in order. */\r\n@Injectable({ providedIn: 'root' })\r\nexport class HyIconRegistry {\r\n  private readonly icons = new Map<string, HyIconDef>(Object.entries(HY_BUILTIN_ICONS));\r\n  private readonly sets = inject(HY_ICONS, { optional: true }) ?? [];\r\n\r\n  constructor() {\r\n    for (const set of this.sets) {\r\n      for (const [name, icon] of Object.entries(set)) this.register(name, icon);\r\n    }\r\n  }\r\n\r\n  /** Adds or replaces an icon at runtime. */\r\n  register(name: string, icon: HyIconDef | HyIconNode): void {\r\n    this.icons.set(name, isDef(icon) ? icon : { node: icon });\r\n  }\r\n\r\n  /** Returns the icon, or undefined when the name is unknown. */\r\n  get(name: string): HyIconDef | undefined {\r\n    return this.icons.get(name);\r\n  }\r\n\r\n  /**\r\n   * @internal Looks in sets from a route or component injector first. This\r\n   * registry lives in the root injector, so it never sees those itself.\r\n   */\r\n  lookup(name: string, sets: readonly HyIconSet[] | null): HyIconDef | undefined {\r\n    if (sets && sets !== this.sets) {\r\n      for (const set of [...sets].reverse()) {\r\n        const icon = Object.hasOwn(set, name) ? set[name] : undefined;\r\n        if (icon) return isDef(icon) ? icon : { node: icon };\r\n      }\r\n    }\r\n    return this.get(name);\r\n  }\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  Directive,\r\n  ElementRef,\r\n  Renderer2,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  isDevMode,\r\n} from '@angular/core';\r\nimport type { HyIconDef, HyIconNode } from './icons';\r\nimport { HY_ICONS, HyIconRegistry } from './registry';\r\n\r\nconst SAFE_ATTRS = new Set([\r\n  'd',\r\n  'cx',\r\n  'cy',\r\n  'r',\r\n  'rx',\r\n  'ry',\r\n  'x',\r\n  'y',\r\n  'x1',\r\n  'x2',\r\n  'y1',\r\n  'y2',\r\n  'width',\r\n  'height',\r\n  'points',\r\n  'fill',\r\n  'stroke',\r\n  'stroke-width',\r\n  'opacity',\r\n  'transform',\r\n]);\r\n\r\n/** Copies whitelisted geometry attributes onto an SVG child element. */\r\n@Directive({ selector: '[hyIconAttrs]' })\r\nexport class HyIconAttrs {\r\n  private readonly el = inject(ElementRef).nativeElement as SVGElement;\r\n  private readonly renderer = inject(Renderer2);\r\n  readonly hyIconAttrs = input.required<Readonly<Record<string, string | number>>>();\r\n\r\n  constructor() {\r\n    let applied = new Set<string>();\r\n    effect(() => {\r\n      const next = new Set<string>();\r\n      for (const [name, value] of Object.entries(this.hyIconAttrs())) {\r\n        if (!SAFE_ATTRS.has(name)) continue;\r\n        this.renderer.setAttribute(this.el, name, String(value));\r\n        next.add(name);\r\n      }\r\n      // A swapped icon may not use every attribute the previous one did.\r\n      for (const name of applied) {\r\n        if (!next.has(name)) this.renderer.removeAttribute(this.el, name);\r\n      }\r\n      applied = next;\r\n    });\r\n  }\r\n}\r\n\r\n/**\r\n * An SVG icon from the registry, or passed in directly.\r\n *\r\n * ```html\r\n * <hy-icon name=\"check\" />\r\n * <hy-icon [icon]=\"ArrowRight\" label=\"Next\" />\r\n * ```\r\n *\r\n * Icons are decorative (`aria-hidden`) unless `label` is set, in which case\r\n * they get `role=\"img\"` and that label. The size follows the font size.\r\n */\r\n@Component({\r\n  selector: 'hy-icon',\r\n  imports: [HyIconAttrs],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-icon',\r\n    '[attr.role]': 'label() ? \"img\" : null',\r\n    '[attr.aria-label]': 'label() || null',\r\n    '[attr.aria-hidden]': 'label() ? null : \"true\"',\r\n    '[attr.data-mirror-rtl]': 'def()?.mirrorRtl || null',\r\n    '[style.--hy-icon-size]': 'size()',\r\n  },\r\n  templateUrl: './icon.html',\r\n  styleUrl: './icon.css',\r\n})\r\nexport class HyIcon {\r\n  private readonly registry = inject(HyIconRegistry);\r\n  private readonly sets = inject(HY_ICONS, { optional: true });\r\n\r\n  /** Registered icon name. */\r\n  readonly name = input<string>();\r\n  /** Icon data, used instead of `name`. */\r\n  readonly icon = input<HyIconDef | HyIconNode>();\r\n  /** Accessible name. Leave empty for decorative icons. */\r\n  readonly label = input<string>();\r\n  /** Any CSS length. Defaults to 1.25em. */\r\n  readonly size = input<string>();\r\n  /** Stroke width in viewBox units. */\r\n  readonly strokeWidth = input(1.75);\r\n\r\n  protected readonly def = computed<HyIconDef | undefined>(() => {\r\n    const icon = this.icon();\r\n    if (icon) return Array.isArray(icon) ? { node: icon as HyIconNode } : (icon as HyIconDef);\r\n    const name = this.name();\r\n    const found = name ? this.registry.lookup(name, this.sets) : undefined;\r\n    if (name && !found && isDevMode()) {\r\n      console.warn(`[hyalo] Unknown icon \"${name}\". Register it with provideHyaloIcons().`); // eslint-disable-line no-console\r\n    }\r\n    return found;\r\n  });\r\n}\r\n","<svg\r\n  viewBox=\"0 0 24 24\"\r\n  fill=\"none\"\r\n  stroke=\"currentColor\"\r\n  [attr.stroke-width]=\"strokeWidth()\"\r\n  stroke-linecap=\"round\"\r\n  stroke-linejoin=\"round\"\r\n  focusable=\"false\"\r\n>\r\n  @for (child of def()?.node; track $index) {\r\n    @switch (child[0]) {\r\n      @case ('path') {\r\n        <svg:path [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n      @case ('circle') {\r\n        <svg:circle [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n      @case ('line') {\r\n        <svg:line [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n      @case ('rect') {\r\n        <svg:rect [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n      @case ('polyline') {\r\n        <svg:polyline [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n      @case ('polygon') {\r\n        <svg:polygon [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n      @case ('ellipse') {\r\n        <svg:ellipse [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n    }\r\n  }\r\n</svg>\r\n"],"mappings":"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"}
+{"version":3,"file":"hyalo-angular-icon.mjs","names":[],"sources":["../../../projects/hyalo/icon/icons.ts","../../../projects/hyalo/icon/registry.ts","../../../projects/hyalo/icon/icon.ts","../../../projects/hyalo/icon/icon.html"],"sourcesContent":["/**\r\n * Icon data in the same shape Lucide uses (`IconNode`), so any Lucide icon\r\n * can be registered as is:\r\n *\r\n * ```ts\r\n * import { ArrowRight } from 'lucide';\r\n * provideHyaloIcons({ 'arrow-right': ArrowRight })\r\n * ```\r\n *\r\n * Icons are data, not SVG strings, so nothing is ever parsed as HTML.\r\n */\r\nexport type HyIconNode = readonly (readonly [string, Readonly<Record<string, string | number>>])[];\r\n\r\n/** An icon plus how it behaves in right-to-left layouts. */\r\nexport interface HyIconDef {\r\n  readonly node: HyIconNode;\r\n  /** Mirror the icon in RTL. Set it for icons that point somewhere, like arrows. */\r\n  readonly mirrorRtl?: boolean;\r\n}\r\n\r\n/*\r\n * The few icons the kit uses itself. Paths are from Lucide (ISC license,\r\n * Copyright (c) Lucide Icons and Contributors), https://lucide.dev.\r\n */\r\nexport const HY_BUILTIN_ICONS: Readonly<Record<string, HyIconDef>> = {\r\n  home: { node: [['path', { d: 'm3 10 9-7 9 7v10a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1Z' }]] },\r\n  grid: {\r\n    node: [\r\n      ['rect', { x: 3, y: 3, width: 7, height: 7, rx: 1 }],\r\n      ['rect', { x: 14, y: 3, width: 7, height: 7, rx: 1 }],\r\n      ['rect', { x: 3, y: 14, width: 7, height: 7, rx: 1 }],\r\n      ['rect', { x: 14, y: 14, width: 7, height: 7, rx: 1 }],\r\n    ],\r\n  },\r\n  user: {\r\n    node: [\r\n      ['circle', { cx: 12, cy: 8, r: 4 }],\r\n      ['path', { d: 'M4 21v-2a7 7 0 0 1 7-7h2a7 7 0 0 1 7 7v2' }],\r\n    ],\r\n  },\r\n  search: {\r\n    node: [\r\n      ['circle', { cx: 11, cy: 11, r: 8 }],\r\n      ['path', { d: 'm21 21-4.35-4.35' }],\r\n    ],\r\n  },\r\n  settings: {\r\n    node: [\r\n      ['path', { d: 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z' }],\r\n      ['path', { d: 'M9 3h6l1 3 3 1 2 5-2 5-3 1-1 3H9l-1-3-3-1-2-5 2-5 3-1Z' }],\r\n    ],\r\n  },\r\n  x: {\r\n    node: [\r\n      ['path', { d: 'M18 6 6 18' }],\r\n      ['path', { d: 'm6 6 12 12' }],\r\n    ],\r\n  },\r\n  check: { node: [['path', { d: 'M20 6 9 17l-5-5' }]] },\r\n  minus: { node: [['path', { d: 'M5 12h14' }]] },\r\n  'chevron-down': { node: [['path', { d: 'm6 9 6 6 6-6' }]] },\r\n  'chevron-end': { node: [['path', { d: 'm9 18 6-6-6-6' }]], mirrorRtl: true },\r\n  menu: {\r\n    node: [\r\n      ['path', { d: 'M4 5h16' }],\r\n      ['path', { d: 'M4 12h16' }],\r\n      ['path', { d: 'M4 19h16' }],\r\n    ],\r\n  },\r\n  info: {\r\n    node: [\r\n      ['circle', { cx: 12, cy: 12, r: 10 }],\r\n      ['path', { d: 'M12 16v-4' }],\r\n      ['path', { d: 'M12 8h.01' }],\r\n    ],\r\n  },\r\n  success: {\r\n    node: [\r\n      ['circle', { cx: 12, cy: 12, r: 10 }],\r\n      ['path', { d: 'm16 9-5.5 5.5L8 12' }],\r\n    ],\r\n  },\r\n  warning: {\r\n    node: [\r\n      ['path', { d: 'm21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' }],\r\n      ['path', { d: 'M12 9v4' }],\r\n      ['path', { d: 'M12 17h.01' }],\r\n    ],\r\n  },\r\n  danger: {\r\n    node: [\r\n      ['circle', { cx: 12, cy: 12, r: 10 }],\r\n      ['path', { d: 'M12 8v4' }],\r\n      ['path', { d: 'M12 16h.01' }],\r\n    ],\r\n  },\r\n  spinner: { node: [['path', { d: 'M21 12a9 9 0 1 1-6.219-8.56' }]] },\r\n};\r\n","import { Injectable, InjectionToken, Provider, inject } from '@angular/core';\r\nimport { HY_BUILTIN_ICONS, type HyIconDef, type HyIconNode } from './icons';\r\n\r\ntype HyIconSet = Readonly<Record<string, HyIconDef | HyIconNode>>;\r\n\r\n/** Icons added with {@link provideHyaloIcons}. Collected from every provider. */\r\nexport const HY_ICONS = new InjectionToken<readonly HyIconSet[]>('HY_ICONS');\r\n\r\n/**\r\n * Registers icons by name. Only the icons you import end up in the bundle.\r\n *\r\n * ```ts\r\n * provideHyaloIcons({ search: Search, 'arrow-end': { node: ArrowRight, mirrorRtl: true } })\r\n * ```\r\n *\r\n * Works in `app.config.ts` and in a route's or component's `providers`.\r\n * Icons from the nearest provider win over app-wide ones.\r\n */\r\nexport function provideHyaloIcons(\r\n  icons: Readonly<Record<string, HyIconDef | HyIconNode>>,\r\n): Provider {\r\n  return { provide: HY_ICONS, multi: true, useValue: icons };\r\n}\r\n\r\nfunction isDef(value: HyIconDef | HyIconNode): value is HyIconDef {\r\n  return !Array.isArray(value);\r\n}\r\n\r\n/** Looks up icons by name: built-ins first, then registered sets in order. */\r\n@Injectable({ providedIn: 'root' })\r\nexport class HyIconRegistry {\r\n  private readonly icons = new Map<string, HyIconDef>(Object.entries(HY_BUILTIN_ICONS));\r\n  private readonly sets = inject(HY_ICONS, { optional: true }) ?? [];\r\n\r\n  constructor() {\r\n    for (const set of this.sets) {\r\n      for (const [name, icon] of Object.entries(set)) this.register(name, icon);\r\n    }\r\n  }\r\n\r\n  /** Adds or replaces an icon at runtime. */\r\n  register(name: string, icon: HyIconDef | HyIconNode): void {\r\n    this.icons.set(name, isDef(icon) ? icon : { node: icon });\r\n  }\r\n\r\n  /** Returns the icon, or undefined when the name is unknown. */\r\n  get(name: string): HyIconDef | undefined {\r\n    return this.icons.get(name);\r\n  }\r\n\r\n  /**\r\n   * @internal Looks in sets from a route or component injector first. This\r\n   * registry lives in the root injector, so it never sees those itself.\r\n   */\r\n  lookup(name: string, sets: readonly HyIconSet[] | null): HyIconDef | undefined {\r\n    if (sets && sets !== this.sets) {\r\n      for (const set of [...sets].reverse()) {\r\n        const icon = Object.hasOwn(set, name) ? set[name] : undefined;\r\n        if (icon) return isDef(icon) ? icon : { node: icon };\r\n      }\r\n    }\r\n    return this.get(name);\r\n  }\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  Directive,\r\n  ElementRef,\r\n  Renderer2,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  isDevMode,\r\n} from '@angular/core';\r\nimport type { HyIconDef, HyIconNode } from './icons';\r\nimport { HY_ICONS, HyIconRegistry } from './registry';\r\n\r\nconst SAFE_ATTRS = new Set([\r\n  'd',\r\n  'cx',\r\n  'cy',\r\n  'r',\r\n  'rx',\r\n  'ry',\r\n  'x',\r\n  'y',\r\n  'x1',\r\n  'x2',\r\n  'y1',\r\n  'y2',\r\n  'width',\r\n  'height',\r\n  'points',\r\n  'fill',\r\n  'stroke',\r\n  'stroke-width',\r\n  'opacity',\r\n  'transform',\r\n]);\r\n\r\n/** Copies whitelisted geometry attributes onto an SVG child element. */\r\n@Directive({ selector: '[hyIconAttrs]' })\r\nexport class HyIconAttrs {\r\n  private readonly el = inject(ElementRef).nativeElement as SVGElement;\r\n  private readonly renderer = inject(Renderer2);\r\n  readonly hyIconAttrs = input.required<Readonly<Record<string, string | number>>>();\r\n\r\n  constructor() {\r\n    let applied = new Set<string>();\r\n    effect(() => {\r\n      const next = new Set<string>();\r\n      for (const [name, value] of Object.entries(this.hyIconAttrs())) {\r\n        if (!SAFE_ATTRS.has(name)) continue;\r\n        this.renderer.setAttribute(this.el, name, String(value));\r\n        next.add(name);\r\n      }\r\n      // A swapped icon may not use every attribute the previous one did.\r\n      for (const name of applied) {\r\n        if (!next.has(name)) this.renderer.removeAttribute(this.el, name);\r\n      }\r\n      applied = next;\r\n    });\r\n  }\r\n}\r\n\r\n/**\r\n * An SVG icon from the registry, or passed in directly.\r\n *\r\n * ```html\r\n * <hy-icon name=\"check\" />\r\n * <hy-icon [icon]=\"ArrowRight\" label=\"Next\" />\r\n * ```\r\n *\r\n * Icons are decorative (`aria-hidden`) unless `label` is set, in which case\r\n * they get `role=\"img\"` and that label. The size follows the font size.\r\n */\r\n@Component({\r\n  selector: 'hy-icon',\r\n  imports: [HyIconAttrs],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-icon',\r\n    '[attr.role]': 'label() ? \"img\" : null',\r\n    '[attr.aria-label]': 'label() || null',\r\n    '[attr.aria-hidden]': 'label() ? null : \"true\"',\r\n    '[attr.data-mirror-rtl]': 'def()?.mirrorRtl || null',\r\n    '[style.--hy-icon-size]': 'size()',\r\n  },\r\n  templateUrl: './icon.html',\r\n  styleUrl: './icon.css',\r\n})\r\nexport class HyIcon {\r\n  private readonly registry = inject(HyIconRegistry);\r\n  private readonly sets = inject(HY_ICONS, { optional: true });\r\n\r\n  /** Registered icon name. */\r\n  readonly name = input<string>();\r\n  /** Icon data, used instead of `name`. */\r\n  readonly icon = input<HyIconDef | HyIconNode>();\r\n  /** Accessible name. Leave empty for decorative icons. */\r\n  readonly label = input<string>();\r\n  /** Any CSS length. Defaults to 1.25em. */\r\n  readonly size = input<string>();\r\n  /** Stroke width in viewBox units. */\r\n  readonly strokeWidth = input(1.75);\r\n\r\n  protected readonly def = computed<HyIconDef | undefined>(() => {\r\n    const icon = this.icon();\r\n    if (icon) return Array.isArray(icon) ? { node: icon as HyIconNode } : (icon as HyIconDef);\r\n    const name = this.name();\r\n    const found = name ? this.registry.lookup(name, this.sets) : undefined;\r\n    if (name && !found && isDevMode()) {\r\n      console.warn(`[hyalo] Unknown icon \"${name}\". Register it with provideHyaloIcons().`); // eslint-disable-line no-console\r\n    }\r\n    return found;\r\n  });\r\n}\r\n","<svg\r\n  viewBox=\"0 0 24 24\"\r\n  fill=\"none\"\r\n  stroke=\"currentColor\"\r\n  [attr.stroke-width]=\"strokeWidth()\"\r\n  stroke-linecap=\"round\"\r\n  stroke-linejoin=\"round\"\r\n  focusable=\"false\"\r\n>\r\n  @for (child of def()?.node; track $index) {\r\n    @switch (child[0]) {\r\n      @case ('path') {\r\n        <svg:path [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n      @case ('circle') {\r\n        <svg:circle [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n      @case ('line') {\r\n        <svg:line [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n      @case ('rect') {\r\n        <svg:rect [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n      @case ('polyline') {\r\n        <svg:polyline [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n      @case ('polygon') {\r\n        <svg:polygon [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n      @case ('ellipse') {\r\n        <svg:ellipse [hyIconAttrs]=\"child[1]\" />\r\n      }\r\n    }\r\n  }\r\n</svg>\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-image-compare.mjs

@@ -0,0 +1,168 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, model } from "@angular/core";
+import { injectId } from "@hyalo/angular/core";
+var HyImageCompare = class HyImageCompare {
+	before = input.required(...ngDevMode ? [{ debugName: "before" }] : /* istanbul ignore next */ []);
+	after = input.required(...ngDevMode ? [{ debugName: "after" }] : /* istanbul ignore next */ []);
+	beforeAlt = input.required(...ngDevMode ? [{ debugName: "beforeAlt" }] : /* istanbul ignore next */ []);
+	afterAlt = input.required(...ngDevMode ? [{ debugName: "afterAlt" }] : /* istanbul ignore next */ []);
+	label = input("Reveal before image", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	value = model(50, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	ratio = input("16 / 9", ...ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []);
+	id = injectId("hy-compare");
+	position = computed(() => Math.max(0, Math.min(100, Number(this.value()) || 0)), ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	clip = computed(() => "inset(0 " + (100 - this.position()) + "% 0 0)", ...ngDevMode ? [{ debugName: "clip" }] : /* istanbul ignore next */ []);
+	change(event) {
+		this.value.set(event.target.valueAsNumber);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyImageCompare,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyImageCompare,
+		isStandalone: true,
+		selector: "hy-image-compare",
+		inputs: {
+			before: {
+				classPropertyName: "before",
+				publicName: "before",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			after: {
+				classPropertyName: "after",
+				publicName: "after",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			beforeAlt: {
+				classPropertyName: "beforeAlt",
+				publicName: "beforeAlt",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			afterAlt: {
+				classPropertyName: "afterAlt",
+				publicName: "afterAlt",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ratio: {
+				classPropertyName: "ratio",
+				publicName: "ratio",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		ngImport: i0,
+		template: "<div class=\"frame\" [style.aspect-ratio]=\"ratio()\">\r\n  <img [src]=\"after()\" [alt]=\"afterAlt()\" draggable=\"false\" />\r\n  <img\r\n    class=\"before\"\r\n    [src]=\"before()\"\r\n    [alt]=\"beforeAlt()\"\r\n    [style.clip-path]=\"clip()\"\r\n    draggable=\"false\"\r\n  />\r\n  <span class=\"handle\" aria-hidden=\"true\" [style.left.%]=\"position()\">‖</span>\r\n</div>\r\n<label [for]=\"id\">{{ label() }}: {{ position() }}%</label>\r\n<input\r\n  [id]=\"id\"\r\n  type=\"range\"\r\n  min=\"0\"\r\n  max=\"100\"\r\n  step=\"1\"\r\n  [value]=\"position()\"\r\n  (input)=\"change($event)\"\r\n/>\r\n",
+		styles: [":host{display:block;color:var(--hy-ink)}.frame{position:relative;overflow:clip;border-radius:var(--hy-radius-l);background:var(--hy-surface-3);direction:ltr}img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}.handle{position:absolute;inset-block:0;inline-size:2px;background:var(--hy-primary-ink);display:grid;place-items:center;color:var(--hy-ink);text-shadow:0 0 3px var(--hy-bg)}label{display:block;margin-block-start:var(--hy-space-3)}input{inline-size:100%;min-block-size:2rem;accent-color:var(--hy-primary);direction:ltr}input:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyImageCompare,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-image-compare",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"frame\" [style.aspect-ratio]=\"ratio()\">\r\n  <img [src]=\"after()\" [alt]=\"afterAlt()\" draggable=\"false\" />\r\n  <img\r\n    class=\"before\"\r\n    [src]=\"before()\"\r\n    [alt]=\"beforeAlt()\"\r\n    [style.clip-path]=\"clip()\"\r\n    draggable=\"false\"\r\n  />\r\n  <span class=\"handle\" aria-hidden=\"true\" [style.left.%]=\"position()\">‖</span>\r\n</div>\r\n<label [for]=\"id\">{{ label() }}: {{ position() }}%</label>\r\n<input\r\n  [id]=\"id\"\r\n  type=\"range\"\r\n  min=\"0\"\r\n  max=\"100\"\r\n  step=\"1\"\r\n  [value]=\"position()\"\r\n  (input)=\"change($event)\"\r\n/>\r\n",
+			styles: [":host{display:block;color:var(--hy-ink)}.frame{position:relative;overflow:clip;border-radius:var(--hy-radius-l);background:var(--hy-surface-3);direction:ltr}img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}.handle{position:absolute;inset-block:0;inline-size:2px;background:var(--hy-primary-ink);display:grid;place-items:center;color:var(--hy-ink);text-shadow:0 0 3px var(--hy-bg)}label{display:block;margin-block-start:var(--hy-space-3)}input{inline-size:100%;min-block-size:2rem;accent-color:var(--hy-primary);direction:ltr}input:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}\n"]
+		}]
+	}],
+	propDecorators: {
+		before: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "before",
+				required: true
+			}]
+		}],
+		after: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "after",
+				required: true
+			}]
+		}],
+		beforeAlt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "beforeAlt",
+				required: true
+			}]
+		}],
+		afterAlt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "afterAlt",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		ratio: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ratio",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyImageCompare };
+
+//# sourceMappingURL=hyalo-angular-image-compare.mjs.map

package/fesm2022/hyalo-angular-image-compare.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-image-compare.mjs","names":[],"sources":["../../../projects/hyalo/image-compare/image-compare.ts","../../../projects/hyalo/image-compare/image-compare.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, model } from '@angular/core';\r\nimport { injectId } from '@hyalo/angular/core';\r\n/** Native range input provides pointer, touch, keyboard and screen reader controls. */\r\n@Component({\r\n  selector: 'hy-image-compare',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './image-compare.html',\r\n  styleUrl: './image-compare.css',\r\n})\r\nexport class HyImageCompare {\r\n  readonly before = input.required<string>();\r\n  readonly after = input.required<string>();\r\n  readonly beforeAlt = input.required<string>();\r\n  readonly afterAlt = input.required<string>();\r\n  readonly label = input('Reveal before image');\r\n  readonly value = model(50);\r\n  readonly ratio = input('16 / 9');\r\n  protected readonly id = injectId('hy-compare');\r\n  protected readonly position = computed(() =>\r\n    Math.max(0, Math.min(100, Number(this.value()) || 0)),\r\n  );\r\n  protected readonly clip = computed(() => 'inset(0 ' + (100 - this.position()) + '% 0 0)');\r\n  protected change(event: Event): void {\r\n    this.value.set((event.target as HTMLInputElement).valueAsNumber);\r\n  }\r\n}\r\n","<div class=\"frame\" [style.aspect-ratio]=\"ratio()\">\r\n  <img [src]=\"after()\" [alt]=\"afterAlt()\" draggable=\"false\" />\r\n  <img\r\n    class=\"before\"\r\n    [src]=\"before()\"\r\n    [alt]=\"beforeAlt()\"\r\n    [style.clip-path]=\"clip()\"\r\n    draggable=\"false\"\r\n  />\r\n  <span class=\"handle\" aria-hidden=\"true\" [style.left.%]=\"position()\">‖</span>\r\n</div>\r\n<label [for]=\"id\">{{ label() }}: {{ position() }}%</label>\r\n<input\r\n  [id]=\"id\"\r\n  type=\"range\"\r\n  min=\"0\"\r\n  max=\"100\"\r\n  step=\"1\"\r\n  [value]=\"position()\"\r\n  (input)=\"change($event)\"\r\n/>\r\n"],"mappings":";;;AASA,IAAa,iBAAb,MAAa,eAAc;CAChB,SAAS,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACjC,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,YAAY,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACpC,WAAW,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACnC,QAAQ,MAAM,uBAAsB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACpC,QAAQ,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACjB,QAAQ,MAAM,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACb,KAAK,SAAS,YAAY;CAC1B,WAAW,eAC5B,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,OAAO,KAAK,MAAK,CAAE,KAAK,CAAC,CAAC,GACrD,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACkB,OAAO,eAAe,cAAc,MAAM,KAAK,SAAQ,KAAM,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC/E,OAAO,OAAY;EAC3B,KAAK,MAAM,IAAK,MAAM,OAA4B,aAAa;CACjE;CAfW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAc,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAd,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAc,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,OAAA,cAAA;EAAA,UAAA;EAAA,UCT3B;EAqBA,QAAA,CAAA,2nBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADZa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAc,YAAA,CAAA;EAN1B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAkB,iBACX,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,2nBAAA;EAAA,CAAA"}