@hyalo/angular 0.0.0-stage → 0.3.1

package/fesm2022/hyalo-angular-stat.mjs

@@ -0,0 +1,193 @@
+import { HyNumberTicker } from "@hyalo/angular/number-ticker";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, input } from "@angular/core";
+var HyStat = class HyStat {
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	trend = input("", ...ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []);
+	locale = input(...ngDevMode ? [void 0, { debugName: "locale" }] : /* istanbul ignore next */ []);
+	format = input({ maximumFractionDigits: 0 }, ...ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []);
+	animate = input(false, {
+		...ngDevMode ? { debugName: "animate" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	prefix = input("", ...ngDevMode ? [{ debugName: "prefix" }] : /* istanbul ignore next */ []);
+	suffix = input("", ...ngDevMode ? [{ debugName: "suffix" }] : /* istanbul ignore next */ []);
+	formatted = computed(() => this.prefix() + new Intl.NumberFormat(this.locale(), this.format()).format(Number.isFinite(this.value()) ? this.value() : 0) + this.suffix(), ...ngDevMode ? [{ debugName: "formatted" }] : /* istanbul ignore next */ []);
+	accessible = this.formatted;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyStat,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyStat,
+		isStandalone: true,
+		selector: "hy-stat",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			trend: {
+				classPropertyName: "trend",
+				publicName: "trend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			format: {
+				classPropertyName: "format",
+				publicName: "format",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			animate: {
+				classPropertyName: "animate",
+				publicName: "animate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			prefix: {
+				classPropertyName: "prefix",
+				publicName: "prefix",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			suffix: {
+				classPropertyName: "suffix",
+				publicName: "suffix",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<dl>\r\n  <dt>{{ label() }}</dt>\r\n  <dd>\r\n    <hy-number-ticker\r\n      [value]=\"value()\"\r\n      [locale]=\"locale()\"\r\n      [format]=\"format()\"\r\n      [animate]=\"animate()\"\r\n      [prefix]=\"prefix()\"\r\n      [suffix]=\"suffix()\"\r\n    />\r\n  </dd>\r\n</dl>\r\n@if (trend()) {\r\n  <p>{{ trend() }}</p>\r\n}\r\n<ng-content />\r\n",
+		styles: [":host{display:block;min-inline-size:0;padding:1.5rem;background:var(--hy-surface-1);border:1px solid var(--hy-line);border-radius:var(--hy-radius-l);color:var(--hy-ink)}dl,p{margin:0}dt{color:var(--hy-ink-2);font-size:.875rem}dd{margin:.5rem 0 0;font-weight:600;font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}p{color:var(--hy-ink-2);font-size:.8125rem;margin-block-start:.5rem}.sr{position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden}\n"],
+		dependencies: [{
+			kind: "component",
+			type: HyNumberTicker,
+			selector: "hy-number-ticker",
+			inputs: [
+				"value",
+				"locale",
+				"format",
+				"animate",
+				"prefix",
+				"suffix"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyStat,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-stat",
+			imports: [HyNumberTicker],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<dl>\r\n  <dt>{{ label() }}</dt>\r\n  <dd>\r\n    <hy-number-ticker\r\n      [value]=\"value()\"\r\n      [locale]=\"locale()\"\r\n      [format]=\"format()\"\r\n      [animate]=\"animate()\"\r\n      [prefix]=\"prefix()\"\r\n      [suffix]=\"suffix()\"\r\n    />\r\n  </dd>\r\n</dl>\r\n@if (trend()) {\r\n  <p>{{ trend() }}</p>\r\n}\r\n<ng-content />\r\n",
+			styles: [":host{display:block;min-inline-size:0;padding:1.5rem;background:var(--hy-surface-1);border:1px solid var(--hy-line);border-radius:var(--hy-radius-l);color:var(--hy-ink)}dl,p{margin:0}dt{color:var(--hy-ink-2);font-size:.875rem}dd{margin:.5rem 0 0;font-weight:600;font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}p{color:var(--hy-ink-2);font-size:.8125rem;margin-block-start:.5rem}.sr{position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden}\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		trend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trend",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		format: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "format",
+				required: false
+			}]
+		}],
+		animate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "animate",
+				required: false
+			}]
+		}],
+		prefix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "prefix",
+				required: false
+			}]
+		}],
+		suffix: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "suffix",
+				required: false
+			}]
+		}]
+	}
+});
+export { HyStat };
+
+//# sourceMappingURL=hyalo-angular-stat.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-stat.mjs","names":[],"sources":["../../../projects/hyalo/stat/stat.ts","../../../projects/hyalo/stat/stat.html"],"sourcesContent":["import { HyNumberTicker } from '@hyalo/angular/number-ticker';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  booleanAttribute,\n  computed,\n  input,\n} from '@angular/core';\n@Component({\n  selector: 'hy-stat',\n  imports: [HyNumberTicker],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './stat.html',\n  styleUrl: './stat.css',\n})\nexport class HyStat {\n  readonly value = input.required<number>();\n  readonly label = input.required<string>();\n  readonly trend = input('');\n  readonly locale = input<string>();\n  readonly format = input<Intl.NumberFormatOptions>({ maximumFractionDigits: 0 });\n  readonly animate = input(false, { transform: booleanAttribute });\n  readonly prefix = input('');\n  readonly suffix = input('');\n  readonly formatted = computed(\n    () =>\n      this.prefix() +\n      new Intl.NumberFormat(this.locale(), this.format()).format(\n        Number.isFinite(this.value()) ? this.value() : 0,\n      ) +\n      this.suffix(),\n  );\n  readonly accessible = this.formatted;\n}\n","<dl>\r\n  <dt>{{ label() }}</dt>\r\n  <dd>\r\n    <hy-number-ticker\r\n      [value]=\"value()\"\r\n      [locale]=\"locale()\"\r\n      [format]=\"format()\"\r\n      [animate]=\"animate()\"\r\n      [prefix]=\"prefix()\"\r\n      [suffix]=\"suffix()\"\r\n    />\r\n  </dd>\r\n</dl>\r\n@if (trend()) {\r\n  <p>{{ trend() }}</p>\r\n}\r\n<ng-content />\r\n"],"mappings":";;;AAeA,IAAa,SAAb,MAAa,OAAM;CACR,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,QAAQ,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACjB,SAAS,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACxB,SAAS,MAAgC,EAAE,uBAAuB,EAAC,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACtE,UAAU,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,UAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CACpD,SAAS,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAClB,SAAS,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAClB,YAAY,eAEjB,KAAK,OAAM,IACX,IAAI,KAAK,aAAa,KAAK,OAAM,GAAI,KAAK,OAAM,CAAE,CAAC,CAAC,OAClD,OAAO,SAAS,KAAK,MAAK,CAAE,IAAI,KAAK,MAAK,IAAK,CAAC,IAElD,KAAK,OAAM,GACd,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACQ,aAAa,KAAK;CAjBhB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAM,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAN,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAM,cAAA;EAAA,UAAA;EAAA,QAAA;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;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;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,UAAA;EAAA,UCfnB;EAiBA,QAAA,CAAA,2hBAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDPY;GAAc,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAKb,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAM,YAAA,CAAA;EAPlB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAS,SACV,CAAC,cAAc;GAAC,iBACR,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,2hBAAA;EAAA,CAAA"}

package/fesm2022/hyalo-angular-stepper.mjs

@@ -0,0 +1,254 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, Injector, afterNextRender, booleanAttribute, computed, contentChildren, inject, input, model } from "@angular/core";
+import { injectId } from "@hyalo/angular/core";
+var HyStep = class HyStep {
+	stepper = inject(HyStepper);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	completed = input(false, {
+		...ngDevMode ? { debugName: "completed" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	id = injectId("step");
+	active = computed(() => this.stepper.steps()[this.stepper.activeIndex()] === this, ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyStep,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyStep,
+		isStandalone: true,
+		selector: "hy-step",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			completed: {
+				classPropertyName: "completed",
+				publicName: "completed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "group" },
+			properties: {
+				"id": "id + \"-panel\"",
+				"attr.aria-labelledby": "id",
+				"hidden": "!active()",
+				"attr.inert": "active() ? null : \"\""
+			}
+		},
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyStep,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-step",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ng-content />",
+			host: {
+				role: "group",
+				"[id]": "id + \"-panel\"",
+				"[attr.aria-labelledby]": "id",
+				"[hidden]": "!active()",
+				"[attr.inert]": "active() ? null : \"\""
+			}
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		completed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "completed",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+var HyStepper = class HyStepper {
+	el = inject(ElementRef).nativeElement;
+	injector = inject(Injector);
+	label = input("Steps", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	linear = input(true, {
+		...ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	selected = model(0, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	steps = contentChildren(HyStep, ...ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []);
+	available = computed(() => this.steps().map((step, i, steps) => !step.disabled() && (!this.linear() || steps.slice(0, i).every((previous) => previous.completed()))), ...ngDevMode ? [{ debugName: "available" }] : /* istanbul ignore next */ []);
+	activeIndex = computed(() => {
+		const requested = Math.trunc(this.selected());
+		if (this.available()[requested]) return requested;
+		return this.available().findIndex(Boolean);
+	}, ...ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []);
+	select(index) {
+		if (!this.available()[index]) return;
+		this.selected.set(index);
+		afterNextRender(() => this.el.querySelectorAll("nav button")[this.activeIndex()]?.focus(), { injector: this.injector });
+	}
+	next() {
+		this.select(this.activeIndex() + 1);
+	}
+	previous() {
+		this.select(this.activeIndex() - 1);
+	}
+	onKey(event, index) {
+		const rtl = this.el.ownerDocument.defaultView?.getComputedStyle(this.el).direction === "rtl";
+		let delta = 0;
+		if (event.key === "ArrowRight") delta = rtl ? -1 : 1;
+		else if (event.key === "ArrowLeft") delta = rtl ? 1 : -1;
+		else if (event.key !== "Home" && event.key !== "End") return;
+		event.preventDefault();
+		const indices = this.available().flatMap((enabled, i) => enabled ? [i] : []);
+		const target = event.key === "Home" ? indices[0] : event.key === "End" ? indices.at(-1) : indices[indices.indexOf(index) + delta];
+		if (target !== void 0) this.el.querySelectorAll("nav button")[target]?.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyStepper,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyStepper,
+		isStandalone: true,
+		selector: "hy-stepper",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			linear: {
+				classPropertyName: "linear",
+				publicName: "linear",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selected: {
+				classPropertyName: "selected",
+				publicName: "selected",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { selected: "selectedChange" },
+		queries: [{
+			propertyName: "steps",
+			predicate: HyStep,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<nav [attr.aria-label]=\"label()\">\r\n  <ol>\r\n    @for (step of steps(); track step; let i = $index) {\r\n      <li>\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"step.id\"\r\n          [disabled]=\"!available()[i]\"\r\n          [attr.aria-current]=\"activeIndex() === i ? 'step' : null\"\r\n          [attr.aria-controls]=\"step.id + '-panel'\"\r\n          (click)=\"select(i)\"\r\n          (keydown)=\"onKey($event, i)\"\r\n        >\r\n          <span aria-hidden=\"true\">{{ step.completed() ? '✓' : i + 1 }}</span\r\n          >{{ step.label() }}\r\n        </button>\r\n      </li>\r\n    }\r\n  </ol>\r\n</nav>\r\n<ng-content />\r\n",
+		styles: [":host{display:block;color:var(--hy-ink)}ol{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin-block:0 var(--hy-space-6);gap:var(--hy-space-2)}li{flex:1}button{display:flex;align-items:center;gap:var(--hy-space-2);inline-size:100%;padding:var(--hy-space-3);background:var(--hy-surface-2);color:var(--hy-ink-2);border:1px solid var(--hy-line);border-radius:var(--hy-radius-m);font:inherit;cursor:pointer;text-align:start}button[aria-current]{color:var(--hy-primary);border-color:currentColor;background:var(--hy-primary-wash)}button:disabled{opacity:.6;cursor:default}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}button span{display:grid;place-items:center;inline-size:2rem;block-size:2rem;flex-shrink:0;border:1px solid currentColor;border-radius:50%}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyStepper,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-stepper",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<nav [attr.aria-label]=\"label()\">\r\n  <ol>\r\n    @for (step of steps(); track step; let i = $index) {\r\n      <li>\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"step.id\"\r\n          [disabled]=\"!available()[i]\"\r\n          [attr.aria-current]=\"activeIndex() === i ? 'step' : null\"\r\n          [attr.aria-controls]=\"step.id + '-panel'\"\r\n          (click)=\"select(i)\"\r\n          (keydown)=\"onKey($event, i)\"\r\n        >\r\n          <span aria-hidden=\"true\">{{ step.completed() ? '✓' : i + 1 }}</span\r\n          >{{ step.label() }}\r\n        </button>\r\n      </li>\r\n    }\r\n  </ol>\r\n</nav>\r\n<ng-content />\r\n",
+			styles: [":host{display:block;color:var(--hy-ink)}ol{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin-block:0 var(--hy-space-6);gap:var(--hy-space-2)}li{flex:1}button{display:flex;align-items:center;gap:var(--hy-space-2);inline-size:100%;padding:var(--hy-space-3);background:var(--hy-surface-2);color:var(--hy-ink-2);border:1px solid var(--hy-line);border-radius:var(--hy-radius-m);font:inherit;cursor:pointer;text-align:start}button[aria-current]{color:var(--hy-primary);border-color:currentColor;background:var(--hy-primary-wash)}button:disabled{opacity:.6;cursor:default}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}button span{display:grid;place-items:center;inline-size:2rem;block-size:2rem;flex-shrink:0;border:1px solid currentColor;border-radius:50%}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		linear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linear",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedChange"]
+		}],
+		steps: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HyStep), { isSignal: true }]
+		}]
+	}
+});
+const HY_STEPPER = [HyStepper, HyStep];
+export { HY_STEPPER, HyStep, HyStepper };
+
+//# sourceMappingURL=hyalo-angular-stepper.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-stepper.mjs","names":[],"sources":["../../../projects/hyalo/stepper/stepper.ts","../../../projects/hyalo/stepper/stepper.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  Injector,\r\n  afterNextRender,\r\n  booleanAttribute,\r\n  computed,\r\n  contentChildren,\r\n  inject,\r\n  input,\r\n  model,\r\n} from '@angular/core';\r\nimport { injectId } from '@hyalo/angular/core';\r\n\r\n@Component({\r\n  selector: 'hy-step',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  template: '<ng-content />',\r\n  host: {\r\n    role: 'group',\r\n    '[id]': 'id + \"-panel\"',\r\n    '[attr.aria-labelledby]': 'id',\r\n    '[hidden]': '!active()',\r\n    '[attr.inert]': 'active() ? null : \"\"',\r\n  },\r\n})\r\nexport class HyStep {\r\n  private readonly stepper = inject(HyStepper);\r\n  readonly label = input.required<string>();\r\n  readonly completed = input(false, { transform: booleanAttribute });\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly id = injectId('step');\r\n  protected readonly active = computed(\r\n    () => this.stepper.steps()[this.stepper.activeIndex()] === this,\r\n  );\r\n}\r\n\r\n/** Linear steps require each preceding step to be completed before advancing. */\r\n@Component({\r\n  selector: 'hy-stepper',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './stepper.html',\r\n  styleUrl: './stepper.css',\r\n})\r\nexport class HyStepper {\r\n  private readonly el = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n  private readonly injector = inject(Injector);\r\n  readonly label = input('Steps');\r\n  readonly linear = input(true, { transform: booleanAttribute });\r\n  readonly selected = model(0);\r\n  readonly steps = contentChildren(HyStep);\r\n  protected readonly available = computed(() =>\r\n    this.steps().map(\r\n      (step, i, steps) =>\r\n        !step.disabled() &&\r\n        (!this.linear() || steps.slice(0, i).every((previous) => previous.completed())),\r\n    ),\r\n  );\r\n  readonly activeIndex = computed(() => {\r\n    const requested = Math.trunc(this.selected());\r\n    if (this.available()[requested]) return requested;\r\n    return this.available().findIndex(Boolean);\r\n  });\r\n\r\n  select(index: number): void {\r\n    if (!this.available()[index]) return;\r\n    this.selected.set(index);\r\n    afterNextRender(\r\n      () => this.el.querySelectorAll<HTMLButtonElement>('nav button')[this.activeIndex()]?.focus(),\r\n      { injector: this.injector },\r\n    );\r\n  }\r\n  next(): void {\r\n    this.select(this.activeIndex() + 1);\r\n  }\r\n  previous(): void {\r\n    this.select(this.activeIndex() - 1);\r\n  }\r\n\r\n  protected onKey(event: KeyboardEvent, index: number): void {\r\n    const rtl = this.el.ownerDocument.defaultView?.getComputedStyle(this.el).direction === 'rtl';\r\n    let delta = 0;\r\n    if (event.key === 'ArrowRight') delta = rtl ? -1 : 1;\r\n    else if (event.key === 'ArrowLeft') delta = rtl ? 1 : -1;\r\n    else if (event.key !== 'Home' && event.key !== 'End') return;\r\n    event.preventDefault();\r\n    const indices = this.available().flatMap((enabled, i) => (enabled ? [i] : []));\r\n    const target =\r\n      event.key === 'Home'\r\n        ? indices[0]\r\n        : event.key === 'End'\r\n          ? indices.at(-1)\r\n          : indices[indices.indexOf(index) + delta];\r\n    if (target !== undefined)\r\n      this.el.querySelectorAll<HTMLButtonElement>('nav button')[target]?.focus();\r\n  }\r\n}\r\nexport const HY_STEPPER = [HyStepper, HyStep] as const;\r\n","<nav [attr.aria-label]=\"label()\">\r\n  <ol>\r\n    @for (step of steps(); track step; let i = $index) {\r\n      <li>\r\n        <button\r\n          type=\"button\"\r\n          [id]=\"step.id\"\r\n          [disabled]=\"!available()[i]\"\r\n          [attr.aria-current]=\"activeIndex() === i ? 'step' : null\"\r\n          [attr.aria-controls]=\"step.id + '-panel'\"\r\n          (click)=\"select(i)\"\r\n          (keydown)=\"onKey($event, i)\"\r\n        >\r\n          <span aria-hidden=\"true\">{{ step.completed() ? '✓' : i + 1 }}</span\r\n          >{{ step.label() }}\r\n        </button>\r\n      </li>\r\n    }\r\n  </ol>\r\n</nav>\r\n<ng-content />\r\n"],"mappings":"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"}