@hyalo/angular 0.0.0-stage → 0.3.1

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