@hyalo/angular 0.0.0-stage → 0.3.1

package/fesm2022/hyalo-angular-refraction.mjs

@@ -0,0 +1,178 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DOCUMENT, DestroyRef, Injectable, afterNextRender, effect, inject, input, signal, viewChild } from "@angular/core";
+import * as i1 from "@hyalo/angular/core";
+import { HyFidelity, HyMaterialDirective } from "@hyalo/angular/core";
+var HyRefractionRenderer = class HyRefractionRenderer {
+	document = inject(DOCUMENT);
+	renderer;
+	constructor() {
+		inject(DestroyRef).onDestroy(() => {
+			this.renderer?.then((renderer) => renderer?.destroy());
+		});
+	}
+	async register(target) {
+		this.renderer ??= import("./hyalo-angular-refraction-renderer-5ZA-kfsA.mjs").then(({ RefractionRenderer }) => {
+			try {
+				return new RefractionRenderer(this.document);
+			} catch {
+				return null;
+			}
+		}).catch(() => null);
+		const renderer = await this.renderer;
+		if (!renderer) return () => {};
+		const remove = renderer.register(target);
+		const resize = typeof ResizeObserver === "function" ? new ResizeObserver(() => renderer.draw()) : null;
+		resize?.observe(target.canvas);
+		return () => {
+			resize?.disconnect();
+			remove();
+		};
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyRefractionRenderer,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyRefractionRenderer,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyRefractionRenderer,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+var HyRefraction = class HyRefraction {
+	fidelity = inject(HyFidelity);
+	renderer = inject(HyRefractionRenderer);
+	ready = signal(false, ...ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []);
+	canvas = viewChild.required("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
+	src = input("", ...ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []);
+	strength = input(.12, ...ngDevMode ? [{ debugName: "strength" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => this.ready.set(true));
+		effect((onCleanup) => {
+			const src = this.src();
+			this.strength();
+			if (!this.ready() || this.fidelity.tier() !== "high" || !src) return;
+			let cancelled = false;
+			let unregister;
+			this.renderer.register({
+				canvas: this.canvas().nativeElement,
+				src,
+				strength: () => this.strength()
+			}).then((remove) => {
+				if (cancelled) remove();
+				else unregister = remove;
+			});
+			onCleanup(() => {
+				cancelled = true;
+				unregister?.();
+			});
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyRefraction,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyRefraction,
+		isStandalone: true,
+		selector: "hy-refraction",
+		inputs: {
+			src: {
+				classPropertyName: "src",
+				publicName: "src",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			strength: {
+				classPropertyName: "strength",
+				publicName: "strength",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		viewQueries: [{
+			propertyName: "canvas",
+			first: true,
+			predicate: ["canvas"],
+			descendants: true,
+			isSignal: true
+		}],
+		hostDirectives: [{
+			directive: i1.HyMaterialDirective,
+			inputs: ["hyMaterial", "material"]
+		}],
+		ngImport: i0,
+		template: "@if (src()) {\r\n  <img class=\"fallback\" [src]=\"src()\" alt=\"\" aria-hidden=\"true\" />\r\n}\r\n<canvas #canvas aria-hidden=\"true\"></canvas>\r\n<div class=\"content\"><ng-content /></div>\r\n",
+		styles: [":host{display:block;position:relative;isolation:isolate;overflow:clip;border-radius:var(--hy-radius-l)}canvas,.fallback{position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none;z-index:-1}.fallback{object-fit:cover;opacity:var(--hy-refraction-opacity, .16)}canvas{opacity:var(--hy-refraction-opacity, .16)}:host(:has(canvas[data-rendered])) .fallback{opacity:0}.content{padding:var(--hy-refraction-padding, var(--hy-space-9))}@media(prefers-reduced-transparency:reduce),(forced-colors:active){canvas,.fallback{display:none}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyRefraction,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-refraction",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			hostDirectives: [{
+				directive: HyMaterialDirective,
+				inputs: ["hyMaterial: material"]
+			}],
+			template: "@if (src()) {\r\n  <img class=\"fallback\" [src]=\"src()\" alt=\"\" aria-hidden=\"true\" />\r\n}\r\n<canvas #canvas aria-hidden=\"true\"></canvas>\r\n<div class=\"content\"><ng-content /></div>\r\n",
+			styles: [":host{display:block;position:relative;isolation:isolate;overflow:clip;border-radius:var(--hy-radius-l)}canvas,.fallback{position:absolute;inset:0;inline-size:100%;block-size:100%;pointer-events:none;z-index:-1}.fallback{object-fit:cover;opacity:var(--hy-refraction-opacity, .16)}canvas{opacity:var(--hy-refraction-opacity, .16)}:host(:has(canvas[data-rendered])) .fallback{opacity:0}.content{padding:var(--hy-refraction-padding, var(--hy-space-9))}@media(prefers-reduced-transparency:reduce),(forced-colors:active){canvas,.fallback{display:none}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		canvas: [{
+			type: i0.ViewChild,
+			args: ["canvas", { isSignal: true }]
+		}],
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		strength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strength",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyRefraction, HyRefractionRenderer };
+
+//# sourceMappingURL=hyalo-angular-refraction.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-refraction.mjs","names":[],"sources":["../../../projects/hyalo/refraction/refraction.ts","../../../projects/hyalo/refraction/refraction.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DOCUMENT,\r\n  DestroyRef,\r\n  ElementRef,\r\n  Injectable,\r\n  afterNextRender,\r\n  effect,\r\n  inject,\r\n  input,\r\n  signal,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { HyFidelity, HyMaterialDirective } from '@hyalo/angular/core';\r\nimport type { RefractionRenderer, RefractionTarget } from './renderer';\r\n\r\n@Injectable({ providedIn: 'root' })\r\nexport class HyRefractionRenderer {\r\n  private readonly document = inject(DOCUMENT);\r\n  private renderer: Promise<RefractionRenderer | null> | undefined;\r\n  constructor() {\r\n    inject(DestroyRef).onDestroy(() => {\r\n      void this.renderer?.then((renderer) => renderer?.destroy());\r\n    });\r\n  }\r\n  async register(target: RefractionTarget): Promise<() => void> {\r\n    this.renderer ??= import('./renderer')\r\n      .then(({ RefractionRenderer }) => {\r\n        try {\r\n          return new RefractionRenderer(this.document);\r\n        } catch {\r\n          return null;\r\n        }\r\n      })\r\n      .catch(() => null);\r\n    const renderer = await this.renderer;\r\n    if (!renderer)\r\n      return () => {\r\n        /* CSS fallback remains visible. */\r\n      };\r\n    const remove = renderer.register(target);\r\n    const resize =\r\n      typeof ResizeObserver === 'function' ? new ResizeObserver(() => renderer.draw()) : null;\r\n    resize?.observe(target.canvas);\r\n    return () => {\r\n      resize?.disconnect();\r\n      remove();\r\n    };\r\n  }\r\n}\r\n/** Supply the scene image explicitly. WebGL cannot sample arbitrary DOM backdrops. */\r\n@Component({\r\n  selector: 'hy-refraction',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  hostDirectives: [{ directive: HyMaterialDirective, inputs: ['hyMaterial: material'] }],\r\n  templateUrl: './refraction.html',\r\n  styleUrl: './refraction.css',\r\n})\r\nexport class HyRefraction {\r\n  private readonly fidelity = inject(HyFidelity);\r\n  private readonly renderer = inject(HyRefractionRenderer);\r\n  private readonly ready = signal(false);\r\n  private readonly canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');\r\n  readonly src = input('');\r\n  readonly strength = input(0.12);\r\n  constructor() {\r\n    afterNextRender(() => this.ready.set(true));\r\n    effect((onCleanup) => {\r\n      const src = this.src();\r\n      this.strength();\r\n      if (!this.ready() || this.fidelity.tier() !== 'high' || !src) return;\r\n      let cancelled = false;\r\n      let unregister: (() => void) | undefined;\r\n      void this.renderer\r\n        .register({ canvas: this.canvas().nativeElement, src, strength: () => this.strength() })\r\n        .then((remove) => {\r\n          if (cancelled) remove();\r\n          else unregister = remove;\r\n        });\r\n      onCleanup(() => {\r\n        cancelled = true;\r\n        unregister?.();\r\n      });\r\n    });\r\n  }\r\n}\r\n","@if (src()) {\r\n  <img class=\"fallback\" [src]=\"src()\" alt=\"\" aria-hidden=\"true\" />\r\n}\r\n<canvas #canvas aria-hidden=\"true\"></canvas>\r\n<div class=\"content\"><ng-content /></div>\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-scroll-area.mjs

@@ -0,0 +1,93 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+var HyScrollArea = class HyScrollArea {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	maxHeight = input("20rem", ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyScrollArea,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyScrollArea,
+		isStandalone: true,
+		selector: "hy-scroll-area",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			maxHeight: {
+				classPropertyName: "maxHeight",
+				publicName: "maxHeight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"role": "region",
+				"tabindex": "0"
+			},
+			properties: {
+				"attr.aria-label": "label()",
+				"style.max-block-size": "maxHeight()"
+			}
+		},
+		ngImport: i0,
+		template: "<ng-content />\r\n",
+		styles: [":host{display:block;min-inline-size:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--hy-line-strong) transparent;scrollbar-gutter:stable}:host(:focus-visible){outline:2px solid var(--hy-primary);outline-offset:3px}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyScrollArea,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-scroll-area",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "region",
+				tabindex: "0",
+				"[attr.aria-label]": "label()",
+				"[style.max-block-size]": "maxHeight()"
+			},
+			template: "<ng-content />\r\n",
+			styles: [":host{display:block;min-inline-size:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--hy-line-strong) transparent;scrollbar-gutter:stable}:host(:focus-visible){outline:2px solid var(--hy-primary);outline-offset:3px}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		maxHeight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxHeight",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyScrollArea };
+
+//# sourceMappingURL=hyalo-angular-scroll-area.mjs.map

package/fesm2022/hyalo-angular-scroll-area.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-scroll-area.mjs","names":[],"sources":["../../../projects/hyalo/scroll-area/scroll-area.ts","../../../projects/hyalo/scroll-area/scroll-area.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\r\n@Component({\r\n  selector: 'hy-scroll-area',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './scroll-area.html',\r\n  styleUrl: './scroll-area.css',\r\n  host: {\r\n    role: 'region',\r\n    tabindex: '0',\r\n    '[attr.aria-label]': 'label()',\r\n    '[style.max-block-size]': 'maxHeight()',\r\n  },\r\n})\r\nexport class HyScrollArea {\r\n  readonly label = input.required<string>();\r\n  readonly maxHeight = input('20rem');\r\n}\r\n","<ng-content />\r\n"],"mappings":";;AAaA,IAAa,eAAb,MAAa,aAAY;CACd,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,YAAY,MAAM,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAFxB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAY,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAZ,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAY,cAAA;EAAA,UAAA;EAAA,QAAA;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;EAAA;EAAA,MAAA;GAAA,YAAA;IAAA,QAAA;IAAA,YAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,wBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UCbzB;EACA,QAAA,CAAA,gQAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADYa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAY,YAAA,CAAA;EAZxB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAgB,iBACT,wBAAwB;GAAM,MAGzC;IACJ,MAAM;IACN,UAAU;IACV,qBAAqB;IACrB,0BAA0B;GAC3B;GAAA,UAAA;GAAA,QAAA,CAAA,gQAAA;EAAA,CAAA"}

package/fesm2022/hyalo-angular-scroll-to-top.mjs

@@ -0,0 +1,127 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DOCUMENT, DestroyRef, afterNextRender, inject, input, signal } from "@angular/core";
+import { ɵinjectIsBrowser } from "@hyalo/angular/core";
+import { HyMotion } from "@hyalo/angular/motion";
+var HyScrollToTop = class HyScrollToTop {
+	document = inject(DOCUMENT);
+	motion = inject(HyMotion);
+	browser = ɵinjectIsBrowser();
+	label = input("Back to top", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	threshold = input(400, ...ngDevMode ? [{ debugName: "threshold" }] : /* istanbul ignore next */ []);
+	targetId = input(null, ...ngDevMode ? [{ debugName: "targetId" }] : /* istanbul ignore next */ []);
+	visible = signal(false, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const destroy = inject(DestroyRef);
+		afterNextRender(() => {
+			const window = this.document.defaultView;
+			const update = () => this.visible.set((window?.scrollY ?? 0) > this.threshold());
+			window?.addEventListener("scroll", update, { passive: true });
+			update();
+			destroy.onDestroy(() => window?.removeEventListener("scroll", update));
+		});
+	}
+	scroll() {
+		if (!this.browser) return;
+		const target = this.document.getElementById(this.targetId() ?? "") ?? this.document.querySelector("h1, main");
+		if (target) {
+			const previous = target.getAttribute("tabindex");
+			target.setAttribute("tabindex", "-1");
+			target.focus({ preventScroll: true });
+			target.addEventListener("blur", () => {
+				if (previous === null) target.removeAttribute("tabindex");
+				else target.setAttribute("tabindex", previous);
+			}, { once: true });
+		}
+		this.document.defaultView?.scrollTo({
+			top: 0,
+			behavior: this.motion.reduced() ? "instant" : "smooth"
+		});
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyScrollToTop,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyScrollToTop,
+		isStandalone: true,
+		selector: "hy-scroll-to-top",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			threshold: {
+				classPropertyName: "threshold",
+				publicName: "threshold",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			targetId: {
+				classPropertyName: "targetId",
+				publicName: "targetId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "@if (visible()) {\r\n  <button type=\"button\" (click)=\"scroll()\">↑ {{ label() }}</button>\r\n}\r\n",
+		styles: [":host{position:fixed;inset-inline-end:var(--hy-space-6);inset-block-end:var(--hy-space-6);z-index:var(--hy-z-sticky)}button{min-block-size:2.75rem;padding-inline:var(--hy-space-4);color:var(--hy-ink);background:var(--hy-surface-1);border:1px solid var(--hy-line-strong);border-radius:var(--hy-radius-pill);box-shadow:var(--hy-glass-shadow);font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:4px}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyScrollToTop,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-scroll-to-top",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (visible()) {\r\n  <button type=\"button\" (click)=\"scroll()\">↑ {{ label() }}</button>\r\n}\r\n",
+			styles: [":host{position:fixed;inset-inline-end:var(--hy-space-6);inset-block-end:var(--hy-space-6);z-index:var(--hy-z-sticky)}button{min-block-size:2.75rem;padding-inline:var(--hy-space-4);color:var(--hy-ink);background:var(--hy-surface-1);border:1px solid var(--hy-line-strong);border-radius:var(--hy-radius-pill);box-shadow:var(--hy-glass-shadow);font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:4px}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		threshold: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "threshold",
+				required: false
+			}]
+		}],
+		targetId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "targetId",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyScrollToTop };
+
+//# sourceMappingURL=hyalo-angular-scroll-to-top.mjs.map

package/fesm2022/hyalo-angular-scroll-to-top.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-scroll-to-top.mjs","names":[],"sources":["../../../projects/hyalo/scroll-to-top/scroll-to-top.ts","../../../projects/hyalo/scroll-to-top/scroll-to-top.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DOCUMENT,\r\n  DestroyRef,\r\n  afterNextRender,\r\n  inject,\r\n  input,\r\n  signal,\r\n} from '@angular/core';\r\nimport { ɵinjectIsBrowser } from '@hyalo/angular/core';\r\nimport { HyMotion } from '@hyalo/angular/motion';\r\n@Component({\r\n  selector: 'hy-scroll-to-top',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './scroll-to-top.html',\r\n  styleUrl: './scroll-to-top.css',\r\n})\r\nexport class HyScrollToTop {\r\n  private readonly document = inject(DOCUMENT);\r\n  private readonly motion = inject(HyMotion);\r\n  private readonly browser = ɵinjectIsBrowser();\r\n  readonly label = input('Back to top');\r\n  readonly threshold = input(400);\r\n  /** Focus this heading or landmark after scrolling, so keyboard users return too. */\r\n  readonly targetId = input<string | null>(null);\r\n  protected readonly visible = signal(false);\r\n  constructor() {\r\n    const destroy = inject(DestroyRef);\r\n    afterNextRender(() => {\r\n      const window = this.document.defaultView;\r\n      const update = (): void => this.visible.set((window?.scrollY ?? 0) > this.threshold());\r\n      window?.addEventListener('scroll', update, { passive: true });\r\n      update();\r\n      destroy.onDestroy(() => window?.removeEventListener('scroll', update));\r\n    });\r\n  }\r\n  scroll(): void {\r\n    if (!this.browser) return;\r\n    const target =\r\n      this.document.getElementById(this.targetId() ?? '') ??\r\n      this.document.querySelector<HTMLElement>('h1, main');\r\n    if (target) {\r\n      const previous = target.getAttribute('tabindex');\r\n      target.setAttribute('tabindex', '-1');\r\n      target.focus({ preventScroll: true });\r\n      target.addEventListener(\r\n        'blur',\r\n        () => {\r\n          if (previous === null) target.removeAttribute('tabindex');\r\n          else target.setAttribute('tabindex', previous);\r\n        },\r\n        { once: true },\r\n      );\r\n    }\r\n    this.document.defaultView?.scrollTo({\r\n      top: 0,\r\n      behavior: this.motion.reduced() ? 'instant' : 'smooth',\r\n    });\r\n  }\r\n}\r\n","@if (visible()) {\r\n  <button type=\"button\" (click)=\"scroll()\">↑ {{ label() }}</button>\r\n}\r\n"],"mappings":";;;;AAkBA,IAAa,gBAAb,MAAa,cAAa;CACP,WAAW,OAAO,QAAQ;CAC1B,SAAS,OAAO,QAAQ;CACxB,UAAU,iBAAgB;CAClC,QAAQ,MAAM,eAAc,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAC5B,YAAY,MAAM,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEtB,WAAW,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAC3B,UAAU,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC1C,cAAA;EACE,MAAM,UAAU,OAAO,UAAU;EACjC,sBAAqB;GACnB,MAAM,SAAS,KAAK,SAAS;GAC7B,MAAM,eAAqB,KAAK,QAAQ,KAAK,QAAQ,WAAW,KAAK,KAAK,UAAS,CAAE;GACrF,QAAQ,iBAAiB,UAAU,QAAQ,EAAE,SAAS,KAAI,CAAE;GAC5D,OAAM;GACN,QAAQ,gBAAgB,QAAQ,oBAAoB,UAAU,MAAM,CAAC;EACvE,CAAC;CACH;CACA,SAAM;EACJ,IAAI,CAAC,KAAK,SAAS;EACnB,MAAM,SACJ,KAAK,SAAS,eAAe,KAAK,SAAQ,KAAM,EAAE,KAClD,KAAK,SAAS,cAA2B,UAAU;EACrD,IAAI,QAAQ;GACV,MAAM,WAAW,OAAO,aAAa,UAAU;GAC/C,OAAO,aAAa,YAAY,IAAI;GACpC,OAAO,MAAM,EAAE,eAAe,KAAI,CAAE;GACpC,OAAO,iBACL,cACK;IACH,IAAI,aAAa,MAAM,OAAO,gBAAgB,UAAU;SACnD,OAAO,aAAa,YAAY,QAAQ;GAC/C,GACA,EAAE,MAAM,KAAI,CAAE;EAElB;EACA,KAAK,SAAS,aAAa,SAAS;GAClC,KAAK;GACL,UAAU,KAAK,OAAO,QAAO,IAAK,YAAY;EAC/C,CAAA;CACH;CAzCW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAa,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAb,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAa,cAAA;EAAA,UAAA;EAAA,QAAA;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;EAAA;EAAA,UAAA;EAAA,UClB1B;EAGA,QAAA,CAAA,gcAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADea,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EANzB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAkB,iBACX,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,gcAAA;EAAA,CAAA"}

package/fesm2022/hyalo-angular-segmented.mjs

@@ -0,0 +1,223 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, input, model, output, viewChild, viewChildren } from "@angular/core";
+import { injectId, ɵtrackIndicator } from "@hyalo/angular/core";
+import { HyIcon } from "@hyalo/angular/icon";
+var HySegmented = class HySegmented {
+	groupName = injectId("segmented");
+	row = viewChild("row", ...ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []);
+	items = viewChildren("item", {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	value = model(void 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	touch = output();
+	ready = ɵtrackIndicator(this.row, () => {
+		const index = this.options().findIndex((o) => o.value === this.value());
+		return this.items()[index]?.nativeElement ?? null;
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySegmented,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HySegmented,
+		isStandalone: true,
+		selector: "hy-segmented",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			attributes: { "role": "radiogroup" },
+			properties: {
+				"attr.aria-label": "label() || null",
+				"attr.aria-disabled": "disabled() || null",
+				"attr.data-size": "size()",
+				"attr.data-ready": "ready() || null"
+			},
+			classAttribute: "hy-segmented"
+		},
+		viewQueries: [{
+			propertyName: "row",
+			first: true,
+			predicate: ["row"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "items",
+			predicate: ["item"],
+			descendants: true,
+			read: ElementRef,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div #row class=\"hy-segmented__row\">\r\n  <span class=\"hy-segmented__indicator\" aria-hidden=\"true\"></span>\r\n  @for (option of options(); track option.value) {\r\n    <label\r\n      #item\r\n      class=\"hy-segmented__item\"\r\n      [attr.data-checked]=\"option.value === value() || null\"\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        class=\"hy-segmented__input\"\r\n        [name]=\"name() || groupName\"\r\n        [checked]=\"option.value === value()\"\r\n        [disabled]=\"disabled() || !!option.disabled\"\r\n        (change)=\"value.set(option.value)\"\r\n        (blur)=\"touch.emit()\"\r\n      />\r\n      @if (option.icon; as icon) {\r\n        <hy-icon [name]=\"icon\" />\r\n      }\r\n      <span>{{ option.label }}</span>\r\n    </label>\r\n  }\r\n</div>\r\n",
+		styles: [":host{display:inline-block;max-inline-size:100%}.hy-segmented__row{position:relative;display:flex;gap:var(--hy-space-1);padding:var(--hy-space-1);border-radius:var(--hy-segmented-radius, var(--hy-radius-pill));background:var(--hy-segmented-track, color-mix(in srgb, var(--hy-ink) 6%, transparent));isolation:isolate;overflow-x:auto;scrollbar-width:none}.hy-segmented__indicator{position:absolute;inset-block:var(--hy-space-1);left:0;inline-size:var(--hy-ind-size, 0px);translate:var(--hy-ind-x, 0px) 0;border-radius:var(--hy-segmented-radius, var(--hy-radius-pill));background:var(--hy-glass-reflection),var(--hy-segmented-indicator, var(--hy-surface-1));box-shadow:var(--hy-glass-edge),0 2px 8px -2px #0f1a242e;z-index:-1}:host([data-ready]) .hy-segmented__indicator{transition:translate var(--hy-dur-settle) var(--hy-ease-out),inline-size var(--hy-dur-settle) var(--hy-ease-out)}.hy-segmented__item{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--hy-space-2);flex:1;min-block-size:2.25rem;padding-inline:var(--hy-space-4);border-radius:var(--hy-segmented-radius, var(--hy-radius-pill));color:var(--hy-ink-2);font-weight:540;white-space:nowrap;cursor:pointer;transition:color var(--hy-dur-quick) var(--hy-ease-out)}:host([data-size=\"sm\"]) .hy-segmented__item{min-block-size:1.75rem;padding-inline:var(--hy-space-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}:host([data-size=\"lg\"]) .hy-segmented__item{min-block-size:2.75rem;padding-inline:var(--hy-space-5)}.hy-segmented__item:hover,.hy-segmented__item[data-checked]{color:var(--hy-ink)}.hy-segmented__item:has(:disabled){opacity:.45;cursor:not-allowed}.hy-segmented__item:has(:focus-visible){box-shadow:var(--hy-focus-ring)}.hy-segmented__input{position:absolute;inset:0;margin:0;opacity:0;cursor:inherit}@media(forced-colors:active){.hy-segmented__item[data-checked]{outline:2px solid Highlight}}\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: HySegmented,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-segmented",
+			imports: [HyIcon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "hy-segmented",
+				role: "radiogroup",
+				"[attr.aria-label]": "label() || null",
+				"[attr.aria-disabled]": "disabled() || null",
+				"[attr.data-size]": "size()",
+				"[attr.data-ready]": "ready() || null"
+			},
+			template: "<div #row class=\"hy-segmented__row\">\r\n  <span class=\"hy-segmented__indicator\" aria-hidden=\"true\"></span>\r\n  @for (option of options(); track option.value) {\r\n    <label\r\n      #item\r\n      class=\"hy-segmented__item\"\r\n      [attr.data-checked]=\"option.value === value() || null\"\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        class=\"hy-segmented__input\"\r\n        [name]=\"name() || groupName\"\r\n        [checked]=\"option.value === value()\"\r\n        [disabled]=\"disabled() || !!option.disabled\"\r\n        (change)=\"value.set(option.value)\"\r\n        (blur)=\"touch.emit()\"\r\n      />\r\n      @if (option.icon; as icon) {\r\n        <hy-icon [name]=\"icon\" />\r\n      }\r\n      <span>{{ option.label }}</span>\r\n    </label>\r\n  }\r\n</div>\r\n",
+			styles: [":host{display:inline-block;max-inline-size:100%}.hy-segmented__row{position:relative;display:flex;gap:var(--hy-space-1);padding:var(--hy-space-1);border-radius:var(--hy-segmented-radius, var(--hy-radius-pill));background:var(--hy-segmented-track, color-mix(in srgb, var(--hy-ink) 6%, transparent));isolation:isolate;overflow-x:auto;scrollbar-width:none}.hy-segmented__indicator{position:absolute;inset-block:var(--hy-space-1);left:0;inline-size:var(--hy-ind-size, 0px);translate:var(--hy-ind-x, 0px) 0;border-radius:var(--hy-segmented-radius, var(--hy-radius-pill));background:var(--hy-glass-reflection),var(--hy-segmented-indicator, var(--hy-surface-1));box-shadow:var(--hy-glass-edge),0 2px 8px -2px #0f1a242e;z-index:-1}:host([data-ready]) .hy-segmented__indicator{transition:translate var(--hy-dur-settle) var(--hy-ease-out),inline-size var(--hy-dur-settle) var(--hy-ease-out)}.hy-segmented__item{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--hy-space-2);flex:1;min-block-size:2.25rem;padding-inline:var(--hy-space-4);border-radius:var(--hy-segmented-radius, var(--hy-radius-pill));color:var(--hy-ink-2);font-weight:540;white-space:nowrap;cursor:pointer;transition:color var(--hy-dur-quick) var(--hy-ease-out)}:host([data-size=\"sm\"]) .hy-segmented__item{min-block-size:1.75rem;padding-inline:var(--hy-space-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}:host([data-size=\"lg\"]) .hy-segmented__item{min-block-size:2.75rem;padding-inline:var(--hy-space-5)}.hy-segmented__item:hover,.hy-segmented__item[data-checked]{color:var(--hy-ink)}.hy-segmented__item:has(:disabled){opacity:.45;cursor:not-allowed}.hy-segmented__item:has(:focus-visible){box-shadow:var(--hy-focus-ring)}.hy-segmented__input{position:absolute;inset:0;margin:0;opacity:0;cursor:inherit}@media(forced-colors:active){.hy-segmented__item[data-checked]{outline:2px solid Highlight}}\n"]
+		}]
+	}],
+	propDecorators: {
+		row: [{
+			type: i0.ViewChild,
+			args: ["row", { isSignal: true }]
+		}],
+		items: [{
+			type: i0.ViewChildren,
+			args: ["item", {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}]
+	}
+});
+export { HySegmented };
+
+//# sourceMappingURL=hyalo-angular-segmented.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-segmented.mjs","names":["trackIndicator"],"sources":["../../../projects/hyalo/segmented/segmented.ts","../../../projects/hyalo/segmented/segmented.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  booleanAttribute,\r\n  input,\r\n  model,\r\n  output,\r\n  viewChild,\r\n  viewChildren,\r\n} from '@angular/core';\r\nimport type { FormValueControl } from '@angular/forms/signals';\r\nimport { type HySize, injectId, ɵtrackIndicator as trackIndicator } from '@hyalo/angular/core';\r\n\r\nimport { HyIcon } from '@hyalo/angular/icon';\r\n\r\n/** One choice in a segmented control. */\r\nexport interface HySegmentedOption<T> {\r\n  readonly value: T;\r\n  readonly label: string;\r\n  readonly icon?: string;\r\n  readonly disabled?: boolean;\r\n}\r\n\r\n/**\r\n * A segmented control: a small set of mutually exclusive choices with the\r\n * same sliding indicator as tabs. Use it to pick a value (billing period, a\r\n * view mode). Use tabs when each choice shows a different panel.\r\n *\r\n * It is a group of native radio buttons, so arrow keys, form submission and\r\n * screen readers behave as users expect. Works with Signal Forms through\r\n * `[formField]`, or with `[(value)]`.\r\n *\r\n * ```html\r\n * <hy-segmented label=\"Billing\" [options]=\"periods\" [(value)]=\"period\" />\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'hy-segmented',\r\n  imports: [HyIcon],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-segmented',\r\n    role: 'radiogroup',\r\n    '[attr.aria-label]': 'label() || null',\r\n    '[attr.aria-disabled]': 'disabled() || null',\r\n    '[attr.data-size]': 'size()',\r\n    '[attr.data-ready]': 'ready() || null',\r\n  },\r\n  templateUrl: './segmented.html',\r\n  styleUrl: './segmented.css',\r\n})\r\nexport class HySegmented<T> implements FormValueControl<T | undefined> {\r\n  protected readonly groupName = injectId('segmented');\r\n  private readonly row = viewChild<ElementRef<HTMLElement>>('row');\r\n  private readonly items = viewChildren('item', { read: ElementRef<HTMLElement> });\r\n\r\n  /** The choices. */\r\n  readonly options = input.required<readonly HySegmentedOption<T>[]>();\r\n  /** Selected value. Two-way bindable. */\r\n  readonly value = model<T | undefined>(undefined);\r\n  /** Accessible name of the group. */\r\n  readonly label = input<string>();\r\n  /** Name shared by the radio inputs. Generated when not set. */\r\n  readonly name = input<string>('');\r\n  /** Disables every option. */\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  /** Control size. */\r\n  readonly size = input<HySize>('md');\r\n  /** Emits when focus leaves an option, so forms can mark the field touched. */\r\n  readonly touch = output<void>();\r\n\r\n  protected readonly ready = trackIndicator(this.row, () => {\r\n    const index = this.options().findIndex((o) => o.value === this.value());\r\n    return this.items()[index]?.nativeElement ?? null;\r\n  });\r\n}\r\n","<div #row class=\"hy-segmented__row\">\r\n  <span class=\"hy-segmented__indicator\" aria-hidden=\"true\"></span>\r\n  @for (option of options(); track option.value) {\r\n    <label\r\n      #item\r\n      class=\"hy-segmented__item\"\r\n      [attr.data-checked]=\"option.value === value() || null\"\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        class=\"hy-segmented__input\"\r\n        [name]=\"name() || groupName\"\r\n        [checked]=\"option.value === value()\"\r\n        [disabled]=\"disabled() || !!option.disabled\"\r\n        (change)=\"value.set(option.value)\"\r\n        (blur)=\"touch.emit()\"\r\n      />\r\n      @if (option.icon; as icon) {\r\n        <hy-icon [name]=\"icon\" />\r\n      }\r\n      <span>{{ option.label }}</span>\r\n    </label>\r\n  }\r\n</div>\r\n"],"mappings":"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AA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,GAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,aAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,MAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,UAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,MAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,OAAA;EAAA,CAAA;CAAA;AAAA,CAAA"}