@hyalo/angular 0.1.0 → 0.3.1

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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"}

package/fesm2022/hyalo-angular-table.mjs

@@ -0,0 +1,335 @@
+import { HyLocale } from "@hyalo/angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, inject, input, model } from "@angular/core";
+var HyTable = class HyTable {
+	data = input.required(...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	columns = input.required(...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
+	rowKey = input.required(...ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []);
+	caption = input.required(...ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []);
+	locale = input(...ngDevMode ? [void 0, { debugName: "locale" }] : /* istanbul ignore next */ []);
+	globalLocale = inject(HyLocale);
+	effectiveLocale = computed(() => this.locale() ?? this.globalLocale.locale(), ...ngDevMode ? [{ debugName: "effectiveLocale" }] : /* istanbul ignore next */ []);
+	selectable = input(false, {
+		...ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	stickyHeader = input(false, {
+		...ngDevMode ? { debugName: "stickyHeader" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	emptyLabel = input("No results", ...ngDevMode ? [{ debugName: "emptyLabel" }] : /* istanbul ignore next */ []);
+	selectionLabel = input("Select all visible rows", ...ngDevMode ? [{ debugName: "selectionLabel" }] : /* istanbul ignore next */ []);
+	rowLabel = input(() => "Select row", ...ngDevMode ? [{ debugName: "rowLabel" }] : /* istanbul ignore next */ []);
+	selected = model([], ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	sort = model(null, ...ngDevMode ? [{ debugName: "sort" }] : /* istanbul ignore next */ []);
+	selectedSet = computed(() => new Set(this.selected()), ...ngDevMode ? [{ debugName: "selectedSet" }] : /* istanbul ignore next */ []);
+	sorted = computed(() => {
+		const rows = [...this.data()], sort = this.sort(), col = this.columns().find((c) => c.id === sort?.column);
+		if (!sort || !col?.sortable) return rows;
+		const collator = new Intl.Collator(this.effectiveLocale(), {
+			numeric: true,
+			sensitivity: "base"
+		});
+		return rows.sort((a, b) => {
+			const av = col.cell(a), bv = col.cell(b);
+			const result = col.compare ? col.compare(a, b) : av == null ? bv == null ? 0 : -1 : bv == null ? 1 : typeof av === "number" && typeof bv === "number" ? av - bv : collator.compare(String(av), String(bv));
+			return (Number.isFinite(result) ? result : 0) * (sort.direction === "asc" ? 1 : -1);
+		});
+	}, ...ngDevMode ? [{ debugName: "sorted" }] : /* istanbul ignore next */ []);
+	view = computed(() => this.sorted().map((row) => ({
+		row,
+		key: this.rowKey()(row),
+		label: this.rowLabel()(row),
+		selected: this.selectedSet().has(this.rowKey()(row)),
+		cells: this.columns().map((column) => ({
+			column,
+			value: column.cell(row)
+		}))
+	})), ...ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []);
+	allSelected = computed(() => this.view().length > 0 && this.view().every((row) => row.selected), ...ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []);
+	someSelected = computed(() => this.view().some((row) => row.selected) && !this.allSelected(), ...ngDevMode ? [{ debugName: "someSelected" }] : /* istanbul ignore next */ []);
+	toggleSort(column) {
+		const current = this.sort();
+		this.sort.set(current?.column === column.id ? current.direction === "asc" ? {
+			column: column.id,
+			direction: "desc"
+		} : null : {
+			column: column.id,
+			direction: "asc"
+		});
+	}
+	toggleRow(key) {
+		const selected = new Set(this.selected());
+		if (selected.has(key)) selected.delete(key);
+		else selected.add(key);
+		this.selected.set([...selected]);
+	}
+	toggleAll() {
+		const selected = new Set(this.selected()), all = this.allSelected();
+		for (const row of this.view()) if (all) selected.delete(row.key);
+		else selected.add(row.key);
+		this.selected.set([...selected]);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyTable,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyTable,
+		isStandalone: true,
+		selector: "hy-table",
+		inputs: {
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			columns: {
+				classPropertyName: "columns",
+				publicName: "columns",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			rowKey: {
+				classPropertyName: "rowKey",
+				publicName: "rowKey",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			caption: {
+				classPropertyName: "caption",
+				publicName: "caption",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectable: {
+				classPropertyName: "selectable",
+				publicName: "selectable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stickyHeader: {
+				classPropertyName: "stickyHeader",
+				publicName: "stickyHeader",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyLabel: {
+				classPropertyName: "emptyLabel",
+				publicName: "emptyLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectionLabel: {
+				classPropertyName: "selectionLabel",
+				publicName: "selectionLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rowLabel: {
+				classPropertyName: "rowLabel",
+				publicName: "rowLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selected: {
+				classPropertyName: "selected",
+				publicName: "selected",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sort: {
+				classPropertyName: "sort",
+				publicName: "sort",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			selected: "selectedChange",
+			sort: "sortChange"
+		},
+		ngImport: i0,
+		template: "<div\r\n  class=\"viewport\"\r\n  tabindex=\"0\"\r\n  role=\"region\"\r\n  [attr.aria-label]=\"caption()\"\r\n  [attr.aria-busy]=\"loading()\"\r\n  [class.sticky]=\"stickyHeader()\"\r\n>\r\n  <table>\r\n    <caption>\r\n      {{\r\n        caption()\r\n      }}\r\n    </caption>\r\n    <thead>\r\n      <tr>\r\n        @if (selectable()) {\r\n          <th scope=\"col\" class=\"selection\">\r\n            <label class=\"check\"\r\n              ><input\r\n                type=\"checkbox\"\r\n                [attr.aria-label]=\"selectionLabel()\"\r\n                [checked]=\"allSelected()\"\r\n                [indeterminate]=\"someSelected()\"\r\n                [disabled]=\"!view().length\"\r\n                (change)=\"toggleAll()\"\r\n            /></label>\r\n          </th>\r\n        }\r\n        @for (column of columns(); track column.id) {\r\n          <th\r\n            scope=\"col\"\r\n            [style.text-align]=\"column.align ?? 'start'\"\r\n            [attr.aria-sort]=\"\r\n              column.sortable\r\n                ? sort()?.column === column.id\r\n                  ? sort()?.direction === 'asc'\r\n                    ? 'ascending'\r\n                    : 'descending'\r\n                  : 'none'\r\n                : null\r\n            \"\r\n          >\r\n            @if (column.sortable) {\r\n              <button type=\"button\" (click)=\"toggleSort(column)\">\r\n                {{ column.header\r\n                }}<span aria-hidden=\"true\">{{\r\n                  sort()?.column === column.id ? (sort()?.direction === 'asc' ? '↑' : '↓') : '↑↓'\r\n                }}</span>\r\n              </button>\r\n            } @else {\r\n              {{ column.header }}\r\n            }\r\n          </th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (item of view(); track item.key) {\r\n        <tr [class.selected]=\"item.selected\">\r\n          @if (selectable()) {\r\n            <td class=\"selection\">\r\n              <label class=\"check\"\r\n                ><input\r\n                  type=\"checkbox\"\r\n                  [attr.aria-label]=\"item.label\"\r\n                  [checked]=\"item.selected\"\r\n                  (change)=\"toggleRow(item.key)\"\r\n              /></label>\r\n            </td>\r\n          }\r\n          @for (cell of item.cells; track cell.column.id) {\r\n            <td [style.text-align]=\"cell.column.align ?? 'start'\">\r\n              @if (cell.column.template) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"cell.column.template\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.row, value: cell.value }\"\r\n                />\r\n              } @else {\r\n                {{ cell.value }}\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      } @empty {\r\n        <tr>\r\n          <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\">\r\n            {{ loading() ? 'Loading' : emptyLabel() }}\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n",
+		styles: [":host{display:block;min-inline-size:0}.viewport{overflow:auto;max-block-size:var(--hy-table-max-height, 32rem);border:1px solid var(--hy-line);border-radius:var(--hy-radius-m);background:var(--hy-surface-1);color:var(--hy-ink)}table{inline-size:100%;border-collapse:separate;border-spacing:0;text-align:start;font-size:.875rem}caption{text-align:start;font-weight:600;padding:1rem}th{font-weight:600;background:var(--hy-surface-2);white-space:nowrap}th,td{padding:.75rem 1rem;border-block-end:1px solid var(--hy-line)}.sticky th{position:sticky;inset-block-start:0;z-index:1}th button{display:inline-flex;align-items:center;justify-content:inherit;gap:.5rem;min-block-size:44px;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}.selection{inline-size:44px;padding:.25rem}.check{display:grid;place-items:center;inline-size:44px;block-size:44px;cursor:pointer}.check input{inline-size:18px;block-size:18px;margin:0;accent-color:var(--hy-primary);cursor:pointer}tr.selected{background:var(--hy-primary-wash)}tbody tr:last-child td{border-block-end:0}.viewport:focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}:is(button,a,input):focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyTable,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-table",
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div\r\n  class=\"viewport\"\r\n  tabindex=\"0\"\r\n  role=\"region\"\r\n  [attr.aria-label]=\"caption()\"\r\n  [attr.aria-busy]=\"loading()\"\r\n  [class.sticky]=\"stickyHeader()\"\r\n>\r\n  <table>\r\n    <caption>\r\n      {{\r\n        caption()\r\n      }}\r\n    </caption>\r\n    <thead>\r\n      <tr>\r\n        @if (selectable()) {\r\n          <th scope=\"col\" class=\"selection\">\r\n            <label class=\"check\"\r\n              ><input\r\n                type=\"checkbox\"\r\n                [attr.aria-label]=\"selectionLabel()\"\r\n                [checked]=\"allSelected()\"\r\n                [indeterminate]=\"someSelected()\"\r\n                [disabled]=\"!view().length\"\r\n                (change)=\"toggleAll()\"\r\n            /></label>\r\n          </th>\r\n        }\r\n        @for (column of columns(); track column.id) {\r\n          <th\r\n            scope=\"col\"\r\n            [style.text-align]=\"column.align ?? 'start'\"\r\n            [attr.aria-sort]=\"\r\n              column.sortable\r\n                ? sort()?.column === column.id\r\n                  ? sort()?.direction === 'asc'\r\n                    ? 'ascending'\r\n                    : 'descending'\r\n                  : 'none'\r\n                : null\r\n            \"\r\n          >\r\n            @if (column.sortable) {\r\n              <button type=\"button\" (click)=\"toggleSort(column)\">\r\n                {{ column.header\r\n                }}<span aria-hidden=\"true\">{{\r\n                  sort()?.column === column.id ? (sort()?.direction === 'asc' ? '↑' : '↓') : '↑↓'\r\n                }}</span>\r\n              </button>\r\n            } @else {\r\n              {{ column.header }}\r\n            }\r\n          </th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (item of view(); track item.key) {\r\n        <tr [class.selected]=\"item.selected\">\r\n          @if (selectable()) {\r\n            <td class=\"selection\">\r\n              <label class=\"check\"\r\n                ><input\r\n                  type=\"checkbox\"\r\n                  [attr.aria-label]=\"item.label\"\r\n                  [checked]=\"item.selected\"\r\n                  (change)=\"toggleRow(item.key)\"\r\n              /></label>\r\n            </td>\r\n          }\r\n          @for (cell of item.cells; track cell.column.id) {\r\n            <td [style.text-align]=\"cell.column.align ?? 'start'\">\r\n              @if (cell.column.template) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"cell.column.template\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.row, value: cell.value }\"\r\n                />\r\n              } @else {\r\n                {{ cell.value }}\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      } @empty {\r\n        <tr>\r\n          <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\">\r\n            {{ loading() ? 'Loading' : emptyLabel() }}\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n",
+			styles: [":host{display:block;min-inline-size:0}.viewport{overflow:auto;max-block-size:var(--hy-table-max-height, 32rem);border:1px solid var(--hy-line);border-radius:var(--hy-radius-m);background:var(--hy-surface-1);color:var(--hy-ink)}table{inline-size:100%;border-collapse:separate;border-spacing:0;text-align:start;font-size:.875rem}caption{text-align:start;font-weight:600;padding:1rem}th{font-weight:600;background:var(--hy-surface-2);white-space:nowrap}th,td{padding:.75rem 1rem;border-block-end:1px solid var(--hy-line)}.sticky th{position:sticky;inset-block-start:0;z-index:1}th button{display:inline-flex;align-items:center;justify-content:inherit;gap:.5rem;min-block-size:44px;padding:0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}.selection{inline-size:44px;padding:.25rem}.check{display:grid;place-items:center;inline-size:44px;block-size:44px;cursor:pointer}.check input{inline-size:18px;block-size:18px;margin:0;accent-color:var(--hy-primary);cursor:pointer}tr.selected{background:var(--hy-primary-wash)}tbody tr:last-child td{border-block-end:0}.viewport:focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}:is(button,a,input):focus-visible{outline:2px solid var(--hy-primary);outline-offset:3px}\n"]
+		}]
+	}],
+	propDecorators: {
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: true
+			}]
+		}],
+		columns: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "columns",
+				required: true
+			}]
+		}],
+		rowKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowKey",
+				required: true
+			}]
+		}],
+		caption: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "caption",
+				required: true
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		selectable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectable",
+				required: false
+			}]
+		}],
+		stickyHeader: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stickyHeader",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		emptyLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyLabel",
+				required: false
+			}]
+		}],
+		selectionLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionLabel",
+				required: false
+			}]
+		}],
+		rowLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowLabel",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedChange"]
+		}],
+		sort: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sort",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["sortChange"]
+		}]
+	}
+});
+export { HyTable };
+
+//# sourceMappingURL=hyalo-angular-table.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-table.mjs","names":[],"sources":["../../../projects/hyalo/table/table.ts","../../../projects/hyalo/table/table.html"],"sourcesContent":["import { HyLocale } from '@hyalo/angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  TemplateRef,\r\n  booleanAttribute,\r\n  computed,\r\n  input,\r\n  inject,\r\n  model,\r\n} from '@angular/core';\r\nexport type HyRowKey = string | number;\r\nexport interface HyTableCellContext<T> {\r\n  readonly $implicit: T;\r\n  readonly value: string | number | null;\r\n}\r\nexport interface HyTableColumn<T> {\r\n  readonly id: string;\r\n  readonly header: string;\r\n  readonly cell: (row: T) => string | number | null;\r\n  readonly sortable?: boolean;\r\n  readonly compare?: (a: T, b: T) => number;\r\n  readonly align?: 'start' | 'end' | 'center';\r\n  readonly template?: TemplateRef<HyTableCellContext<T>>;\r\n}\r\nexport interface HyTableSort {\r\n  readonly column: string;\r\n  readonly direction: 'asc' | 'desc';\r\n}\r\n@Component({\r\n  selector: 'hy-table',\r\n  imports: [NgTemplateOutlet],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  templateUrl: './table.html',\r\n  styleUrl: './table.css',\r\n})\r\nexport class HyTable<T> {\r\n  readonly data = input.required<readonly T[]>();\r\n  readonly columns = input.required<readonly HyTableColumn<T>[]>();\r\n  readonly rowKey = input.required<(row: T) => HyRowKey>();\r\n  readonly caption = input.required<string>();\r\n  readonly locale = input<string>();\r\n  private readonly globalLocale = inject(HyLocale);\r\n  private readonly effectiveLocale = computed(() => this.locale() ?? this.globalLocale.locale());\r\n  readonly selectable = input(false, { transform: booleanAttribute });\r\n  readonly stickyHeader = input(false, { transform: booleanAttribute });\r\n  readonly loading = input(false, { transform: booleanAttribute });\r\n  readonly emptyLabel = input('No results');\r\n  readonly selectionLabel = input('Select all visible rows');\r\n  readonly rowLabel = input<(row: T) => string>(() => 'Select row');\r\n  readonly selected = model<readonly HyRowKey[]>([]);\r\n  readonly sort = model<HyTableSort | null>(null);\r\n  private readonly selectedSet = computed(() => new Set(this.selected()));\r\n  private readonly sorted = computed(() => {\r\n    const rows = [...this.data()],\r\n      sort = this.sort(),\r\n      col = this.columns().find((c) => c.id === sort?.column);\r\n    if (!sort || !col?.sortable) return rows;\r\n    const collator = new Intl.Collator(this.effectiveLocale(), {\r\n      numeric: true,\r\n      sensitivity: 'base',\r\n    });\r\n    return rows.sort((a, b) => {\r\n      const av = col.cell(a),\r\n        bv = col.cell(b);\r\n      const result = col.compare\r\n        ? col.compare(a, b)\r\n        : av == null\r\n          ? bv == null\r\n            ? 0\r\n            : -1\r\n          : bv == null\r\n            ? 1\r\n            : typeof av === 'number' && typeof bv === 'number'\r\n              ? av - bv\r\n              : collator.compare(String(av), String(bv));\r\n      return (Number.isFinite(result) ? result : 0) * (sort.direction === 'asc' ? 1 : -1);\r\n    });\r\n  });\r\n  readonly view = computed(() =>\r\n    this.sorted().map((row) => ({\r\n      row,\r\n      key: this.rowKey()(row),\r\n      label: this.rowLabel()(row),\r\n      selected: this.selectedSet().has(this.rowKey()(row)),\r\n      cells: this.columns().map((column) => ({ column, value: column.cell(row) })),\r\n    })),\r\n  );\r\n  readonly allSelected = computed(\r\n    () => this.view().length > 0 && this.view().every((row) => row.selected),\r\n  );\r\n  readonly someSelected = computed(\r\n    () => this.view().some((row) => row.selected) && !this.allSelected(),\r\n  );\r\n  toggleSort(column: HyTableColumn<T>): void {\r\n    const current = this.sort();\r\n    this.sort.set(\r\n      current?.column === column.id\r\n        ? current.direction === 'asc'\r\n          ? { column: column.id, direction: 'desc' }\r\n          : null\r\n        : { column: column.id, direction: 'asc' },\r\n    );\r\n  }\r\n  toggleRow(key: HyRowKey): void {\r\n    const selected = new Set(this.selected());\r\n    if (selected.has(key)) selected.delete(key);\r\n    else selected.add(key);\r\n    this.selected.set([...selected]);\r\n  }\r\n  toggleAll(): void {\r\n    const selected = new Set(this.selected()),\r\n      all = this.allSelected();\r\n    for (const row of this.view()) {\r\n      if (all) selected.delete(row.key);\r\n      else selected.add(row.key);\r\n    }\r\n    this.selected.set([...selected]);\r\n  }\r\n}\r\n","<div\r\n  class=\"viewport\"\r\n  tabindex=\"0\"\r\n  role=\"region\"\r\n  [attr.aria-label]=\"caption()\"\r\n  [attr.aria-busy]=\"loading()\"\r\n  [class.sticky]=\"stickyHeader()\"\r\n>\r\n  <table>\r\n    <caption>\r\n      {{\r\n        caption()\r\n      }}\r\n    </caption>\r\n    <thead>\r\n      <tr>\r\n        @if (selectable()) {\r\n          <th scope=\"col\" class=\"selection\">\r\n            <label class=\"check\"\r\n              ><input\r\n                type=\"checkbox\"\r\n                [attr.aria-label]=\"selectionLabel()\"\r\n                [checked]=\"allSelected()\"\r\n                [indeterminate]=\"someSelected()\"\r\n                [disabled]=\"!view().length\"\r\n                (change)=\"toggleAll()\"\r\n            /></label>\r\n          </th>\r\n        }\r\n        @for (column of columns(); track column.id) {\r\n          <th\r\n            scope=\"col\"\r\n            [style.text-align]=\"column.align ?? 'start'\"\r\n            [attr.aria-sort]=\"\r\n              column.sortable\r\n                ? sort()?.column === column.id\r\n                  ? sort()?.direction === 'asc'\r\n                    ? 'ascending'\r\n                    : 'descending'\r\n                  : 'none'\r\n                : null\r\n            \"\r\n          >\r\n            @if (column.sortable) {\r\n              <button type=\"button\" (click)=\"toggleSort(column)\">\r\n                {{ column.header\r\n                }}<span aria-hidden=\"true\">{{\r\n                  sort()?.column === column.id ? (sort()?.direction === 'asc' ? '↑' : '↓') : '↑↓'\r\n                }}</span>\r\n              </button>\r\n            } @else {\r\n              {{ column.header }}\r\n            }\r\n          </th>\r\n        }\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @for (item of view(); track item.key) {\r\n        <tr [class.selected]=\"item.selected\">\r\n          @if (selectable()) {\r\n            <td class=\"selection\">\r\n              <label class=\"check\"\r\n                ><input\r\n                  type=\"checkbox\"\r\n                  [attr.aria-label]=\"item.label\"\r\n                  [checked]=\"item.selected\"\r\n                  (change)=\"toggleRow(item.key)\"\r\n              /></label>\r\n            </td>\r\n          }\r\n          @for (cell of item.cells; track cell.column.id) {\r\n            <td [style.text-align]=\"cell.column.align ?? 'start'\">\r\n              @if (cell.column.template) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"cell.column.template\"\r\n                  [ngTemplateOutletContext]=\"{ $implicit: item.row, value: cell.value }\"\r\n                />\r\n              } @else {\r\n                {{ cell.value }}\r\n              }\r\n            </td>\r\n          }\r\n        </tr>\r\n      } @empty {\r\n        <tr>\r\n          <td [attr.colspan]=\"columns().length + (selectable() ? 1 : 0)\">\r\n            {{ loading() ? 'Loading' : emptyLabel() }}\r\n          </td>\r\n        </tr>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-tabs.mjs

@@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, compu
 import * as i1 from "@angular/aria/tabs";
 import { Tab, TabList, TabPanel, Tabs } from "@angular/aria/tabs";
 import { HyIcon } from "@hyalo/angular/icon";
-import { ɵtrackIndicator } from "@hyalo/angular";
+import { ɵtrackIndicator } from "@hyalo/angular/core";
 var HyTab = class HyTab {
 	panel = inject(TabPanel);
 	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);