@hyalo/angular 0.0.0-stage → 0.3.1

package/fesm2022/hyalo-angular-sidebar.mjs

@@ -0,0 +1,241 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, input, model } from "@angular/core";
+import { HyIcon } from "@hyalo/angular/icon";
+var HySidebar = class HySidebar {
+	collapsed = model(false, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	toggle = (value) => !value;
+	label = input("Main navigation", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	collapseLabel = input("Collapse navigation", ...ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []);
+	expandLabel = input("Expand navigation", ...ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySidebar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HySidebar,
+		isStandalone: true,
+		selector: "hy-sidebar",
+		inputs: {
+			collapsed: {
+				classPropertyName: "collapsed",
+				publicName: "collapsed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapseLabel: {
+				classPropertyName: "collapseLabel",
+				publicName: "collapseLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expandLabel: {
+				classPropertyName: "expandLabel",
+				publicName: "expandLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { collapsed: "collapsedChange" },
+		host: { properties: {
+			"attr.data-collapsed": "collapsed()",
+			"style.--hy-sidebar-label-display": "collapsed()?\"none\":null",
+			"style.--hy-sidebar-item-justify": "collapsed()?\"center\":null"
+		} },
+		ngImport: i0,
+		template: "<header>\n  <div class=\"brand\"><ng-content select=\"[hySidebarBrand]\" /></div>\n  <button\n    type=\"button\"\n    [attr.aria-label]=\"collapsed() ? expandLabel() : collapseLabel()\"\n    [attr.aria-expanded]=\"!collapsed()\"\n    (click)=\"collapsed.update(toggle)\"\n  >\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"20\"\n      height=\"20\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.75\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\" />\n      <path d=\"M9 4v16\" />\n    </svg>\n  </button>\n</header>\n<nav [attr.aria-label]=\"label()\"><ng-content /></nav>\n<footer><ng-content select=\"[hySidebarFooter]\" /></footer>\n",
+		styles: [":host{display:flex;flex-direction:column;flex:none;gap:1.5rem;inline-size:var(--hy-sidebar-width, 16rem);max-inline-size:100%;min-inline-size:0;padding:.75rem;border:1px solid var(--hy-line);border-radius:var(--hy-radius-m);background:var(--hy-surface-2);box-sizing:border-box}:host([data-collapsed=\"true\"]){inline-size:4.5rem}header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-block-size:44px}.brand{display:var(--hy-sidebar-label-display, block);min-inline-size:0;padding-inline-start:.375rem}button{display:grid;place-items:center;flex:none;inline-size:44px;block-size:44px;padding:0;background:transparent;color:var(--hy-ink-2);border:1px solid transparent;border-radius:var(--hy-radius-s);cursor:pointer;transition:background-color .12s ease,color .12s ease}button svg{transition:transform var(--hy-dur-quick) var(--hy-ease-out)}:host([data-collapsed=\"true\"]) button svg{transform:rotateY(180deg)}:host-context([dir=\"rtl\"]) button svg{scale:-1 1}@media(hover:hover)and (pointer:fine){button:hover{background:var(--hy-surface-3);color:var(--hy-ink)}}button:active{background:var(--hy-surface-4)}nav{display:grid;align-content:start;gap:.375rem}footer{margin-block-start:auto;display:var(--hy-sidebar-label-display, block);padding-block-start:1rem;border-block-start:1px solid var(--hy-line)}footer:empty{display:none}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){button svg{transition:none}}:host-context([data-hy-motion=\"reduced\"]) button svg{transition:none}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HySidebar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-sidebar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[attr.data-collapsed]": "collapsed()",
+				"[style.--hy-sidebar-label-display]": "collapsed()?\"none\":null",
+				"[style.--hy-sidebar-item-justify]": "collapsed()?\"center\":null"
+			},
+			template: "<header>\n  <div class=\"brand\"><ng-content select=\"[hySidebarBrand]\" /></div>\n  <button\n    type=\"button\"\n    [attr.aria-label]=\"collapsed() ? expandLabel() : collapseLabel()\"\n    [attr.aria-expanded]=\"!collapsed()\"\n    (click)=\"collapsed.update(toggle)\"\n  >\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"20\"\n      height=\"20\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.75\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\" />\n      <path d=\"M9 4v16\" />\n    </svg>\n  </button>\n</header>\n<nav [attr.aria-label]=\"label()\"><ng-content /></nav>\n<footer><ng-content select=\"[hySidebarFooter]\" /></footer>\n",
+			styles: [":host{display:flex;flex-direction:column;flex:none;gap:1.5rem;inline-size:var(--hy-sidebar-width, 16rem);max-inline-size:100%;min-inline-size:0;padding:.75rem;border:1px solid var(--hy-line);border-radius:var(--hy-radius-m);background:var(--hy-surface-2);box-sizing:border-box}:host([data-collapsed=\"true\"]){inline-size:4.5rem}header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-block-size:44px}.brand{display:var(--hy-sidebar-label-display, block);min-inline-size:0;padding-inline-start:.375rem}button{display:grid;place-items:center;flex:none;inline-size:44px;block-size:44px;padding:0;background:transparent;color:var(--hy-ink-2);border:1px solid transparent;border-radius:var(--hy-radius-s);cursor:pointer;transition:background-color .12s ease,color .12s ease}button svg{transition:transform var(--hy-dur-quick) var(--hy-ease-out)}:host([data-collapsed=\"true\"]) button svg{transform:rotateY(180deg)}:host-context([dir=\"rtl\"]) button svg{scale:-1 1}@media(hover:hover)and (pointer:fine){button:hover{background:var(--hy-surface-3);color:var(--hy-ink)}}button:active{background:var(--hy-surface-4)}nav{display:grid;align-content:start;gap:.375rem}footer{margin-block-start:auto;display:var(--hy-sidebar-label-display, block);padding-block-start:1rem;border-block-start:1px solid var(--hy-line)}footer:empty{display:none}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){button svg{transition:none}}:host-context([data-hy-motion=\"reduced\"]) button svg{transition:none}\n"]
+		}]
+	}],
+	propDecorators: {
+		collapsed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsed",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["collapsedChange"]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		collapseLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseLabel",
+				required: false
+			}]
+		}],
+		expandLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expandLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var HySidebarItem = class HySidebarItem {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	icon = input.required(...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	active = input(false, {
+		...ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySidebarItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HySidebarItem,
+		isStandalone: true,
+		selector: "a[hySidebarItem]",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			active: {
+				classPropertyName: "active",
+				publicName: "active",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"attr.aria-label": "label()",
+			"attr.title": "label()",
+			"attr.aria-current": "active()?\"page\":null"
+		} },
+		ngImport: i0,
+		template: "<hy-icon [name]=\"icon()\" /><span class=\"label\">{{label()}}</span><ng-content />",
+		isInline: true,
+		styles: [":host{display:flex;align-items:center;justify-content:var(--hy-sidebar-item-justify, start);gap:.75rem;min-block-size:44px;min-inline-size:0;padding:.625rem .75rem;border:1px solid transparent;border-radius:var(--hy-radius-s);color:var(--hy-ink-2);text-decoration:none;font-size:.875rem;font-weight:500;line-height:1.4;box-sizing:border-box;transition:background-color .12s ease,color .12s ease}.label{display:var(--hy-sidebar-label-display, inline);min-inline-size:0;overflow-wrap:anywhere}@media(hover:hover)and (pointer:fine){:host(:hover){background:var(--hy-surface-3);color:var(--hy-ink)}}:host(:active){background:var(--hy-surface-4)}:host([aria-current=\"page\"]){background:var(--hy-primary-wash);color:var(--hy-primary);font-weight:600}:host(:focus-visible){outline:2px solid var(--hy-primary);outline-offset:2px}hy-icon{flex:none;inline-size:1.125rem;block-size:1.125rem}\n"],
+		dependencies: [{
+			kind: "component",
+			type: HyIcon,
+			selector: "hy-icon",
+			inputs: [
+				"name",
+				"icon",
+				"label",
+				"size",
+				"strokeWidth"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HySidebarItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "a[hySidebarItem]",
+			imports: [HyIcon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<hy-icon [name]=\"icon()\" /><span class=\"label\">{{label()}}</span><ng-content />",
+			host: {
+				"[attr.aria-label]": "label()",
+				"[attr.title]": "label()",
+				"[attr.aria-current]": "active()?\"page\":null"
+			},
+			styles: [":host{display:flex;align-items:center;justify-content:var(--hy-sidebar-item-justify, start);gap:.75rem;min-block-size:44px;min-inline-size:0;padding:.625rem .75rem;border:1px solid transparent;border-radius:var(--hy-radius-s);color:var(--hy-ink-2);text-decoration:none;font-size:.875rem;font-weight:500;line-height:1.4;box-sizing:border-box;transition:background-color .12s ease,color .12s ease}.label{display:var(--hy-sidebar-label-display, inline);min-inline-size:0;overflow-wrap:anywhere}@media(hover:hover)and (pointer:fine){:host(:hover){background:var(--hy-surface-3);color:var(--hy-ink)}}:host(:active){background:var(--hy-surface-4)}:host([aria-current=\"page\"]){background:var(--hy-primary-wash);color:var(--hy-primary);font-weight:600}:host(:focus-visible){outline:2px solid var(--hy-primary);outline-offset:2px}hy-icon{flex:none;inline-size:1.125rem;block-size:1.125rem}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: true
+			}]
+		}],
+		active: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "active",
+				required: false
+			}]
+		}]
+	}
+});
+const HY_SIDEBAR = [HySidebar, HySidebarItem];
+export { HY_SIDEBAR, HySidebar, HySidebarItem };
+
+//# sourceMappingURL=hyalo-angular-sidebar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-sidebar.mjs","names":[],"sources":["../../../projects/hyalo/sidebar/sidebar.ts","../../../projects/hyalo/sidebar/sidebar.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, input, model } from '@angular/core';\nimport { HyIcon } from '@hyalo/angular/icon';\n@Component({\n  selector: 'hy-sidebar',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './sidebar.html',\n  styleUrl: './sidebar.css',\n  host: {\n    '[attr.data-collapsed]': 'collapsed()',\n    '[style.--hy-sidebar-label-display]': 'collapsed()?\"none\":null',\n    '[style.--hy-sidebar-item-justify]': 'collapsed()?\"center\":null',\n  },\n})\nexport class HySidebar {\n  readonly collapsed = model(false);\n  protected readonly toggle = (value: boolean): boolean => !value;\n  readonly label = input('Main navigation');\n  readonly collapseLabel = input('Collapse navigation');\n  readonly expandLabel = input('Expand navigation');\n}\n@Component({\n  // Native elements preserve link, list, key, and button semantics.\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'a[hySidebarItem]',\n  imports: [HyIcon],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: '<hy-icon [name]=\"icon()\" /><span class=\"label\">{{label()}}</span><ng-content />',\n  host: {\n    '[attr.aria-label]': 'label()',\n    '[attr.title]': 'label()',\n    '[attr.aria-current]': 'active()?\"page\":null',\n  },\n  styleUrl: './sidebar-item.css',\n})\nexport class HySidebarItem {\n  readonly label = input.required<string>();\n  readonly icon = input.required<string>();\n  readonly active = input(false, { transform: booleanAttribute });\n}\nexport const HY_SIDEBAR = [HySidebar, HySidebarItem] as const;\n","<header>\n  <div class=\"brand\"><ng-content select=\"[hySidebarBrand]\" /></div>\n  <button\n    type=\"button\"\n    [attr.aria-label]=\"collapsed() ? expandLabel() : collapseLabel()\"\n    [attr.aria-expanded]=\"!collapsed()\"\n    (click)=\"collapsed.update(toggle)\"\n  >\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"20\"\n      height=\"20\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.75\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\" />\n      <path d=\"M9 4v16\" />\n    </svg>\n  </button>\n</header>\n<nav [attr.aria-label]=\"label()\"><ng-content /></nav>\n<footer><ng-content select=\"[hySidebarFooter]\" /></footer>\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-skeleton.mjs

@@ -0,0 +1,131 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input } from "@angular/core";
+import { HyMotion } from "@hyalo/angular/motion";
+var HySkeleton = class HySkeleton {
+	motion = inject(HyMotion);
+	animate = computed(() => this.motion.enabled() && this.animation() !== "none", ...ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []);
+	animation = input("shimmer", ...ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []);
+	shape = input("text", ...ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []);
+	width = input("100%", ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	height = input("1em", ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySkeleton,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HySkeleton,
+		isStandalone: true,
+		selector: "hy-skeleton",
+		inputs: {
+			animation: {
+				classPropertyName: "animation",
+				publicName: "animation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			shape: {
+				classPropertyName: "shape",
+				publicName: "shape",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "aria-hidden": "true" },
+			properties: {
+				"attr.data-shape": "shape()",
+				"attr.data-animate": "animate()",
+				"attr.data-animation": "animation()",
+				"style.inline-size": "width()",
+				"style.block-size": "height()"
+			}
+		},
+		ngImport: i0,
+		template: "",
+		isInline: true,
+		styles: [":host{display:block;position:relative;overflow:clip;border-radius:var(--hy-radius-s);background:var(--hy-surface-3)}:host([data-shape=\"circle\"]){border-radius:50%}:host([data-animate=\"true\"][data-animation=\"shimmer\"]):after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--hy-surface-1),transparent);animation:hy-shimmer 1.8s linear infinite}:host([data-animate=\"true\"][data-animation=\"pulse\"]){animation:hy-pulse 1.8s var(--hy-ease-inout) infinite}@keyframes hy-pulse{50%{opacity:.45}}@keyframes hy-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){:host,:host:after{animation:none!important}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HySkeleton,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-skeleton",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"aria-hidden": "true",
+				"[attr.data-shape]": "shape()",
+				"[attr.data-animate]": "animate()",
+				"[attr.data-animation]": "animation()",
+				"[style.inline-size]": "width()",
+				"[style.block-size]": "height()"
+			},
+			template: "",
+			styles: [":host{display:block;position:relative;overflow:clip;border-radius:var(--hy-radius-s);background:var(--hy-surface-3)}:host([data-shape=\"circle\"]){border-radius:50%}:host([data-animate=\"true\"][data-animation=\"shimmer\"]):after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--hy-surface-1),transparent);animation:hy-shimmer 1.8s linear infinite}:host([data-animate=\"true\"][data-animation=\"pulse\"]){animation:hy-pulse 1.8s var(--hy-ease-inout) infinite}@keyframes hy-pulse{50%{opacity:.45}}@keyframes hy-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){:host,:host:after{animation:none!important}}\n"]
+		}]
+	}],
+	propDecorators: {
+		animation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "animation",
+				required: false
+			}]
+		}],
+		shape: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "shape",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}]
+	}
+});
+export { HySkeleton };
+
+//# sourceMappingURL=hyalo-angular-skeleton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-skeleton.mjs","names":[],"sources":["../../../projects/hyalo/skeleton/skeleton.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\r\nimport { HyMotion } from '@hyalo/angular/motion';\r\nexport type HySkeletonAnimation = 'shimmer' | 'pulse' | 'none';\r\n/** Decorative placeholder. Put aria-busy on the region being loaded. */\r\n@Component({\r\n  selector: 'hy-skeleton',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    'aria-hidden': 'true',\r\n    '[attr.data-shape]': 'shape()',\r\n    '[attr.data-animate]': 'animate()',\r\n    '[attr.data-animation]': 'animation()',\r\n    '[style.inline-size]': 'width()',\r\n    '[style.block-size]': 'height()',\r\n  },\r\n  template: '',\r\n  styleUrl: './skeleton.css',\r\n})\r\nexport class HySkeleton {\r\n  private readonly motion = inject(HyMotion);\r\n  protected readonly animate = computed(() => this.motion.enabled() && this.animation() !== 'none');\r\n  readonly animation = input<HySkeletonAnimation>('shimmer');\r\n  readonly shape = input<'text' | 'circle' | 'rect'>('text');\r\n  readonly width = input('100%');\r\n  readonly height = input('1em');\r\n}\r\n"],"mappings":";;;AAkBA,IAAa,aAAb,MAAa,WAAU;CACJ,SAAS,OAAO,QAAQ;CACtB,UAAU,eAAe,KAAK,OAAO,QAAO,KAAM,KAAK,UAAS,MAAO,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CACxF,YAAY,MAA2B,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACjD,QAAQ,MAAkC,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACjD,QAAQ,MAAM,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACrB,SAAS,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CANnB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAU,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAV,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAU,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,WAAA;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,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,eAAA,OAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,qBAAA;IAAA,uBAAA;IAAA,qBAAA;IAAA,oBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UAHX;EAAE,UAAA;EAAA,QAAA,CAAA,isBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAGD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EAdtB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,iBACN,wBAAwB;GAAM,MACzC;IACJ,eAAe;IACf,qBAAqB;IACrB,uBAAuB;IACvB,yBAAyB;IACzB,uBAAuB;IACvB,sBAAsB;GACvB;GAAA,UACS;GAAE,QAAA,CAAA,isBAAA;EAAA,CAAA"}

package/fesm2022/hyalo-angular-sparkline.mjs

@@ -0,0 +1,110 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+var HySparkline = class HySparkline {
+	data = input.required(...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	points = computed(() => {
+		const values = this.data().filter(Number.isFinite);
+		if (!values.length) return "";
+		const maximum = values[0] ?? 0;
+		let scale = Math.abs(maximum);
+		for (const value of values) scale = Math.max(scale, Math.abs(value));
+		const normalized = values.map((value) => scale ? value / scale : 0);
+		let min = Infinity, max = -Infinity;
+		for (const value of normalized) {
+			min = Math.min(min, value);
+			max = Math.max(max, value);
+		}
+		const selected = /* @__PURE__ */ new Set([0, values.length - 1]);
+		const bucket = Math.max(1, Math.ceil(values.length / 80));
+		for (let start = 0; start < values.length; start += bucket) {
+			let low = start, high = start;
+			for (let i = start; i < Math.min(values.length, start + bucket); i++) {
+				if ((normalized[i] ?? 0) < (normalized[low] ?? 0)) low = i;
+				if ((normalized[i] ?? 0) > (normalized[high] ?? 0)) high = i;
+			}
+			selected.add(low);
+			selected.add(high);
+		}
+		return [...selected].sort((a, b) => a - b).map((index) => (values.length === 1 ? 100 : index / (values.length - 1) * 196 + 2).toFixed(2) + "," + (max === min ? 24 : 44 - ((normalized[index] ?? 0) - min) / (max - min) * 40).toFixed(2)).join(" ");
+	}, ...ngDevMode ? [{ debugName: "points" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySparkline,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HySparkline,
+		isStandalone: true,
+		selector: "hy-sparkline",
+		inputs: {
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "img" },
+			properties: { "attr.aria-label": "label()" }
+		},
+		ngImport: i0,
+		template: "<svg viewBox=\"0 0 200 48\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n  <polyline\r\n    [attr.points]=\"points()\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-width=\"2\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-linecap=\"round\"\r\n    vector-effect=\"non-scaling-stroke\"\r\n  />\r\n</svg>\r\n",
+		styles: [":host{display:block;inline-size:100%;block-size:3rem;color:var(--hy-primary)}svg{display:block;inline-size:100%;block-size:100%}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HySparkline,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-sparkline",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "img",
+				"[attr.aria-label]": "label()"
+			},
+			template: "<svg viewBox=\"0 0 200 48\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n  <polyline\r\n    [attr.points]=\"points()\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-width=\"2\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-linecap=\"round\"\r\n    vector-effect=\"non-scaling-stroke\"\r\n  />\r\n</svg>\r\n",
+			styles: [":host{display:block;inline-size:100%;block-size:3rem;color:var(--hy-primary)}svg{display:block;inline-size:100%;block-size:100%}\n"]
+		}]
+	}],
+	propDecorators: {
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}]
+	}
+});
+export { HySparkline };
+
+//# sourceMappingURL=hyalo-angular-sparkline.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-sparkline.mjs","names":[],"sources":["../../../projects/hyalo/sparkline/sparkline.ts","../../../projects/hyalo/sparkline/sparkline.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\r\n@Component({\r\n  selector: 'hy-sparkline',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './sparkline.html',\r\n  styleUrl: './sparkline.css',\r\n  host: { role: 'img', '[attr.aria-label]': 'label()' },\r\n})\r\nexport class HySparkline {\r\n  readonly data = input.required<readonly number[]>();\r\n  readonly label = input.required<string>();\r\n  readonly points = computed(() => {\r\n    const values = this.data().filter(Number.isFinite);\r\n    if (!values.length) return '';\r\n    const maximum = values[0] ?? 0;\r\n    let scale = Math.abs(maximum);\r\n    for (const value of values) scale = Math.max(scale, Math.abs(value));\r\n    const normalized = values.map((value) => (scale ? value / scale : 0));\r\n    let min = Infinity,\r\n      max = -Infinity;\r\n    for (const value of normalized) {\r\n      min = Math.min(min, value);\r\n      max = Math.max(max, value);\r\n    }\r\n    const selected = new Set([0, values.length - 1]);\r\n    const bucket = Math.max(1, Math.ceil(values.length / 80));\r\n    for (let start = 0; start < values.length; start += bucket) {\r\n      let low = start,\r\n        high = start;\r\n      for (let i = start; i < Math.min(values.length, start + bucket); i++) {\r\n        if ((normalized[i] ?? 0) < (normalized[low] ?? 0)) low = i;\r\n        if ((normalized[i] ?? 0) > (normalized[high] ?? 0)) high = i;\r\n      }\r\n      selected.add(low);\r\n      selected.add(high);\r\n    }\r\n    return [...selected]\r\n      .sort((a, b) => a - b)\r\n      .map(\r\n        (index) =>\r\n          (values.length === 1 ? 100 : (index / (values.length - 1)) * 196 + 2).toFixed(2) +\r\n          ',' +\r\n          (max === min ? 24 : 44 - (((normalized[index] ?? 0) - min) / (max - min)) * 40).toFixed(\r\n            2,\r\n          ),\r\n      )\r\n      .join(' ');\r\n  });\r\n}\r\n","<svg viewBox=\"0 0 200 48\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\r\n  <polyline\r\n    [attr.points]=\"points()\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    stroke-width=\"2\"\r\n    stroke-linejoin=\"round\"\r\n    stroke-linecap=\"round\"\r\n    vector-effect=\"non-scaling-stroke\"\r\n  />\r\n</svg>\r\n"],"mappings":";;AAQA,IAAa,cAAb,MAAa,YAAW;CACb,OAAO,MAAM,SAA6B,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC1C,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,SAAS,eAAc;EAC9B,MAAM,SAAS,KAAK,KAAI,CAAE,CAAC,OAAO,OAAO,QAAQ;EACjD,IAAI,CAAC,OAAO,QAAQ,OAAO;EAC3B,MAAM,UAAU,OAAO,MAAM;EAC7B,IAAI,QAAQ,KAAK,IAAI,OAAO;EAC5B,KAAK,MAAM,SAAS,QAAQ,QAAQ,KAAK,IAAI,OAAO,KAAK,IAAI,KAAK,CAAC;EACnE,MAAM,aAAa,OAAO,KAAK,UAAW,QAAQ,QAAQ,QAAQ,CAAE;EACpE,IAAI,MAAM,UACR,MAAM;EACR,KAAK,MAAM,SAAS,YAAY;GAC9B,MAAM,KAAK,IAAI,KAAK,KAAK;GACzB,MAAM,KAAK,IAAI,KAAK,KAAK;EAC3B;EACA,MAAM,2BAAW,IAAI,IAAI,CAAC,GAAG,OAAO,SAAS,CAAC,CAAC;EAC/C,MAAM,SAAS,KAAK,IAAI,GAAG,KAAK,KAAK,OAAO,SAAS,EAAE,CAAC;EACxD,KAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,QAAQ,SAAS,QAAQ;GAC1D,IAAI,MAAM,OACR,OAAO;GACT,KAAK,IAAI,IAAI,OAAO,IAAI,KAAK,IAAI,OAAO,QAAQ,QAAQ,MAAM,GAAG,KAAK;IACpE,KAAK,WAAW,MAAM,MAAM,WAAW,QAAQ,IAAI,MAAM;IACzD,KAAK,WAAW,MAAM,MAAM,WAAW,SAAS,IAAI,OAAO;GAC7D;GACA,SAAS,IAAI,GAAG;GAChB,SAAS,IAAI,IAAI;EACnB;EACA,OAAO,CAAC,GAAG,QAAQ,CAAC,CACjB,MAAM,GAAG,MAAM,IAAI,CAAC,CAAC,CACrB,KACE,WACE,OAAO,WAAW,IAAI,MAAO,SAAS,OAAO,SAAS,KAAM,MAAM,EAAA,CAAG,QAAQ,CAAC,IAC/E,OACC,QAAQ,MAAM,KAAK,OAAQ,WAAW,UAAU,KAAK,QAAQ,MAAM,OAAQ,GAAA,CAAI,QAC9E,CAAC,CACF,CACJ,CACA,KAAK,GAAG;CACb,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAvCS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAW,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAX,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAW,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;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,MAAA;GAAA,YAAA,EAAA,QAAA,MAAA;GAAA,YAAA,EAAA,mBAAA,UAAA;EAAA;EAAA,UAAA;EAAA,UCRxB;EAWA,QAAA,CAAA,oIAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADHa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAW,YAAA,CAAA;EAPvB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAc,iBACP,wBAAwB;GAAM,MAGzC;IAAE,MAAM;IAAO,qBAAqB;GAAS;GAAE,UAAA;GAAA,QAAA,CAAA,oIAAA;EAAA,CAAA"}

package/fesm2022/hyalo-angular-split-text.mjs

@@ -0,0 +1,126 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, afterNextRender, afterRenderEffect, computed, inject, input, signal, viewChild } from "@angular/core";
+import { HyMotion } from "@hyalo/angular/motion";
+var HySplitText = class HySplitText {
+	el = inject(ElementRef).nativeElement;
+	motion = inject(HyMotion);
+	destroyRef = inject(DestroyRef);
+	measure = viewChild.required("measure", ...ngDevMode ? [{ debugName: "measure" }] : /* istanbul ignore next */ []);
+	text = input.required(...ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []);
+	lines = signal([], ...ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []);
+	entered = signal(false, ...ngDevMode ? [{ debugName: "entered" }] : /* istanbul ignore next */ []);
+	ready = signal(false, ...ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []);
+	remeasure;
+	shown = computed(() => this.entered() || !this.motion.enabled(), ...ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []);
+	words = computed(() => this.text().split(/(\s+)/u), ...ngDevMode ? [{ debugName: "words" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterRenderEffect(() => {
+			this.text();
+			if (this.ready()) this.remeasure?.();
+		});
+		afterNextRender(() => {
+			let alive = true;
+			const split = () => {
+				const lines = [];
+				let top;
+				for (const child of Array.from(this.measure().nativeElement.children)) {
+					const y = child.getBoundingClientRect().top;
+					if (top === void 0 || Math.abs(y - top) > 2) {
+						lines.push(child.textContent ?? "");
+						top = y;
+					} else lines[lines.length - 1] += child.textContent ?? "";
+				}
+				this.lines.set(lines);
+			};
+			const resize = typeof ResizeObserver === "function" ? new ResizeObserver(split) : null;
+			this.remeasure = split;
+			resize?.observe(this.el);
+			this.el.ownerDocument.fonts?.ready.then(() => {
+				if (alive) split();
+			});
+			split();
+			this.ready.set(true);
+			const observer = typeof IntersectionObserver === "function" ? new IntersectionObserver(([entry]) => {
+				if (entry?.isIntersecting) {
+					this.entered.set(true);
+					observer?.disconnect();
+				}
+			}) : null;
+			if (observer) observer.observe(this.el);
+			else this.entered.set(true);
+			this.destroyRef.onDestroy(() => {
+				alive = false;
+				resize?.disconnect();
+				observer?.disconnect();
+			});
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySplitText,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HySplitText,
+		isStandalone: true,
+		selector: "hy-split-text",
+		inputs: { text: {
+			classPropertyName: "text",
+			publicName: "text",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		host: { properties: { "attr.data-shown": "shown()" } },
+		viewQueries: [{
+			propertyName: "measure",
+			first: true,
+			predicate: ["measure"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<span class=\"accessible\">{{ text() }}</span>\r\n<span #measure class=\"measure\" aria-hidden=\"true\">\r\n  @for (word of words(); track $index) {\r\n    <span>{{ word }}</span>\r\n  }\r\n</span>\r\n<span class=\"visual\" aria-hidden=\"true\">\r\n  @for (line of lines(); track $index; let i = $index) {\r\n    <span class=\"line\"\r\n      ><span [style.transition-delay.ms]=\"i * 60\">{{ line }}</span></span\r\n    >\r\n  } @empty {\r\n    {{ text() }}\r\n  }\r\n</span>\r\n",
+		styles: [":host{display:block;position:relative}.accessible{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.measure{position:absolute;inset:0;visibility:hidden;pointer-events:none;white-space:pre-wrap}.line{display:block;overflow:clip}.line>span{display:block;transition:transform var(--hy-dur-scene) var(--hy-ease-out),opacity var(--hy-dur-scene) var(--hy-ease-out)}:host([data-shown=\"false\"]) .line>span{transform:translateY(100%);opacity:0}@media(prefers-reduced-motion:reduce){.line>span{transform:none!important;opacity:1!important;transition:none}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HySplitText,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-split-text",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[attr.data-shown]": "shown()" },
+			template: "<span class=\"accessible\">{{ text() }}</span>\r\n<span #measure class=\"measure\" aria-hidden=\"true\">\r\n  @for (word of words(); track $index) {\r\n    <span>{{ word }}</span>\r\n  }\r\n</span>\r\n<span class=\"visual\" aria-hidden=\"true\">\r\n  @for (line of lines(); track $index; let i = $index) {\r\n    <span class=\"line\"\r\n      ><span [style.transition-delay.ms]=\"i * 60\">{{ line }}</span></span\r\n    >\r\n  } @empty {\r\n    {{ text() }}\r\n  }\r\n</span>\r\n",
+			styles: [":host{display:block;position:relative}.accessible{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.measure{position:absolute;inset:0;visibility:hidden;pointer-events:none;white-space:pre-wrap}.line{display:block;overflow:clip}.line>span{display:block;transition:transform var(--hy-dur-scene) var(--hy-ease-out),opacity var(--hy-dur-scene) var(--hy-ease-out)}:host([data-shown=\"false\"]) .line>span{transform:translateY(100%);opacity:0}@media(prefers-reduced-motion:reduce){.line>span{transform:none!important;opacity:1!important;transition:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		measure: [{
+			type: i0.ViewChild,
+			args: ["measure", { isSignal: true }]
+		}],
+		text: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "text",
+				required: true
+			}]
+		}]
+	}
+});
+export { HySplitText };
+
+//# sourceMappingURL=hyalo-angular-split-text.mjs.map

package/fesm2022/hyalo-angular-split-text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-split-text.mjs","names":[],"sources":["../../../projects/hyalo/split-text/split-text.ts","../../../projects/hyalo/split-text/split-text.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DestroyRef,\r\n  ElementRef,\r\n  afterNextRender,\r\n  afterRenderEffect,\r\n  computed,\r\n  inject,\r\n  input,\r\n  signal,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { HyMotion } from '@hyalo/angular/motion';\r\n/** Splits measured lines after hydration. The accessible text is read once. */\r\n@Component({\r\n  selector: 'hy-split-text',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: { '[attr.data-shown]': 'shown()' },\r\n  templateUrl: './split-text.html',\r\n  styleUrl: './split-text.css',\r\n})\r\nexport class HySplitText {\r\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n  private readonly motion = inject(HyMotion);\r\n  private readonly destroyRef = inject(DestroyRef);\r\n  private readonly measure = viewChild.required<ElementRef<HTMLElement>>('measure');\r\n  readonly text = input.required<string>();\r\n  protected readonly lines = signal<readonly string[]>([]);\r\n  private readonly entered = signal(false);\r\n  private readonly ready = signal(false);\r\n  private remeasure: (() => void) | undefined;\r\n  protected readonly shown = computed(() => this.entered() || !this.motion.enabled());\r\n  protected readonly words = computed(() => this.text().split(/(\\s+)/u));\r\n  constructor() {\r\n    afterRenderEffect(() => {\r\n      this.text();\r\n      if (this.ready()) this.remeasure?.();\r\n    });\r\n    afterNextRender(() => {\r\n      let alive = true;\r\n      const split = (): void => {\r\n        const lines: string[] = [];\r\n        let top: number | undefined;\r\n        for (const child of Array.from(this.measure().nativeElement.children)) {\r\n          const y = child.getBoundingClientRect().top;\r\n          if (top === undefined || Math.abs(y - top) > 2) {\r\n            lines.push(child.textContent ?? '');\r\n            top = y;\r\n          } else lines[lines.length - 1] += child.textContent ?? '';\r\n        }\r\n        this.lines.set(lines);\r\n      };\r\n      const resize = typeof ResizeObserver === 'function' ? new ResizeObserver(split) : null;\r\n      this.remeasure = split;\r\n      resize?.observe(this.el);\r\n      void this.el.ownerDocument.fonts?.ready.then(() => {\r\n        if (alive) split();\r\n      });\r\n      split();\r\n      this.ready.set(true);\r\n      const observer =\r\n        typeof IntersectionObserver === 'function'\r\n          ? new IntersectionObserver(([entry]) => {\r\n              if (entry?.isIntersecting) {\r\n                this.entered.set(true);\r\n                observer?.disconnect();\r\n              }\r\n            })\r\n          : null;\r\n      if (observer) observer.observe(this.el);\r\n      else this.entered.set(true);\r\n      this.destroyRef.onDestroy(() => {\r\n        alive = false;\r\n        resize?.disconnect();\r\n        observer?.disconnect();\r\n      });\r\n    });\r\n  }\r\n}\r\n","<span class=\"accessible\">{{ text() }}</span>\r\n<span #measure class=\"measure\" aria-hidden=\"true\">\r\n  @for (word of words(); track $index) {\r\n    <span>{{ word }}</span>\r\n  }\r\n</span>\r\n<span class=\"visual\" aria-hidden=\"true\">\r\n  @for (line of lines(); track $index; let i = $index) {\r\n    <span class=\"line\"\r\n      ><span [style.transition-delay.ms]=\"i * 60\">{{ line }}</span></span\r\n    >\r\n  } @empty {\r\n    {{ text() }}\r\n  }\r\n</span>\r\n"],"mappings":"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"}