argus-table 0.2.2 → 0.4.0

package/README.md

@@ -51,7 +51,7 @@ npm i argus-table @argus-table/themes
 - **Label:** give it a name with `aria-label` or `aria-labelledby`.
 - **Columns and data** are JavaScript properties, because they hold objects and functions.
 - **Cells:** a column's `cell` function can return a string, a number, a DOM node or a Lit template.
-- **Theme:** `default.css` is neutral and uses the page's font. `material.css` is a Material-inspired alternative (load Roboto yourself). Both are optional, and the table is usable without either.
+- **Theme:** `default.css` is neutral and uses the page's font. `material.css` (load Roboto yourself), `fluent.css` and `bootstrap.css` are Material-, Fluent- and Bootstrap-inspired alternatives, and `minimal.css` (load Instrument Sans yourself) is a quiet, airy one with an amber accent. All are optional, and the table is usable without any.
 
 ## Rows from a server
 

package/dist/argus-column-group.js

@@ -0,0 +1,66 @@
+import { ArgusColumn } from "./argus-column.js";
+import { flagConverter } from "./attributes.js";
+import { notify, unwatchColumns, watchColumns } from "./column-registry.js";
+import __decorate from "./_virtual/_@oxc-project_runtime@0.156.0/helpers/esm/decorate.js";
+import { ReactiveElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// src/argus-column-group.ts
+var _ArgusColumnGroup;
+var ArgusColumnGroup = _ArgusColumnGroup = class ArgusColumnGroup extends ReactiveElement {
+	constructor(..._args) {
+		super(..._args);
+		this.groupId = "";
+		this.#parent = null;
+	}
+	#parent;
+	#group;
+	/** Data only: no shadow root, nothing rendered. */
+	createRenderRoot() {
+		return this;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		watchColumns(this, () => {
+			this.#group = void 0;
+			notify(this.#parent);
+		});
+		this.#parent = this.parentElement;
+		notify(this.#parent);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		unwatchColumns(this);
+		const parent = this.#parent;
+		this.#parent = null;
+		notify(parent);
+	}
+	/**
+	* The group as the table reads it, with its column and group children in document order.
+	* @internal
+	*/
+	toColumnGroup() {
+		return this.#group ??= {
+			id: this.groupId,
+			header: this.header,
+			reorderable: this.reorderable,
+			columns: [...this.children].flatMap((c) => {
+				if (c instanceof ArgusColumn) return [c.columnId];
+				if (c instanceof _ArgusColumnGroup) return [c.toColumnGroup()];
+				return [];
+			})
+		};
+	}
+	willUpdate() {
+		this.#group = void 0;
+	}
+	updated() {
+		notify(this.#parent);
+	}
+};
+__decorate([property({ attribute: "group-id" })], ArgusColumnGroup.prototype, "groupId", void 0);
+__decorate([property()], ArgusColumnGroup.prototype, "header", void 0);
+__decorate([property({ converter: flagConverter })], ArgusColumnGroup.prototype, "reorderable", void 0);
+ArgusColumnGroup = _ArgusColumnGroup = __decorate([customElement("argus-column-group")], ArgusColumnGroup);
+export { ArgusColumnGroup };
+
+//# sourceMappingURL=argus-column-group.js.map

package/dist/argus-column-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"argus-column-group.js","names":["_decorate"],"sources":["../src/argus-column-group.ts"],"sourcesContent":["import { ReactiveElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ArgusColumn } from './argus-column.js';\nimport { flagConverter } from './attributes.js';\nimport { notify, unwatchColumns, watchColumns } from './column-registry.js';\nimport type { CellContent, ColumnGroup } from './types.js';\n\n/**\n * A header over the `<argus-column>` children it wraps, written as markup instead\n * of an entry in the table's `columnGroups` property. Groups nest: a group inside\n * a group adds a header row. It is data only and renders nothing.\n *\n * Only direct children of the table or of another group count. A non-empty\n * `columnGroups` property wins over the children, and a non-empty `columns`\n * property turns all column and group children off.\n *\n * @summary Declarative column group of an `<argus-table>`.\n */\n@customElement('argus-column-group')\nexport class ArgusColumnGroup extends ReactiveElement {\n  /** Stable key. Must be unique among the table's groups; it may equal a column id. */\n  @property({ attribute: 'group-id' })\n  groupId = '';\n\n  /** Header content: text as an attribute; a Lit template, a node or a function as a property. Default: the id. */\n  @property()\n  header?: CellContent | (() => CellContent);\n\n  /** Whether the group can be moved as a whole. Default: `true`; `reorderable=\"false\"` turns it off. */\n  @property({ converter: flagConverter })\n  reorderable?: boolean;\n\n  #parent: Element | null = null;\n  #group: ColumnGroup | undefined;\n\n  /** Data only: no shadow root, nothing rendered. */\n  protected override createRenderRoot(): HTMLElement {\n    return this;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Columns and groups inside tell this group, which tells its own parent.\n    watchColumns(this, () => {\n      this.#group = undefined;\n      notify(this.#parent);\n    });\n    this.#parent = this.parentElement;\n    notify(this.#parent);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    unwatchColumns(this);\n    const parent = this.#parent;\n    this.#parent = null;\n    notify(parent);\n  }\n\n  /**\n   * The group as the table reads it, with its column and group children in document order.\n   * @internal\n   */\n  toColumnGroup(): ColumnGroup {\n    return (this.#group ??= {\n      id: this.groupId,\n      header: this.header,\n      reorderable: this.reorderable,\n      columns: [...this.children].flatMap((c): (string | ColumnGroup)[] => {\n        if (c instanceof ArgusColumn) return [c.columnId];\n        if (c instanceof ArgusColumnGroup) return [c.toColumnGroup()];\n        return [];\n      }),\n    });\n  }\n\n  protected override willUpdate(): void {\n    this.#group = undefined;\n  }\n\n  protected override updated(): void {\n    notify(this.#parent);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'argus-column-group': ArgusColumnGroup;\n  }\n}\n"],"mappings":";;;;;;;;AAmBO,IAAM,mBAAA,oBAAN,MAAM,yBAAyB,gBAAgB;;;EAG1C,KAAA,UAAA;EAUgB,KAAA,UAAA;;CAA1B;CACA;;CAGA,mBAAmD;EACjD,OAAO;CACT;CAEA,oBAAmC;EACjC,MAAM,kBAAkB;EAExB,aAAa,YAAY;GACvB,KAAK,SAAS,KAAA;GACd,OAAO,KAAK,OAAO;EACrB,CAAC;EACD,KAAK,UAAU,KAAK;EACpB,OAAO,KAAK,OAAO;CACrB;CAEA,uBAAsC;EACpC,MAAM,qBAAqB;EAC3B,eAAe,IAAI;EACnB,MAAM,SAAS,KAAK;EACpB,KAAK,UAAU;EACf,OAAO,MAAM;CACf;;;;;CAMA,gBAA6B;EAC3B,OAAQ,KAAK,WAAW;GACtB,IAAI,KAAK;GACT,QAAQ,KAAK;GACb,aAAa,KAAK;GAClB,SAAS,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC,SAAS,MAAgC;IACnE,IAAI,aAAa,aAAa,OAAO,CAAC,EAAE,QAAQ;IAChD,IAAI,aAAA,mBAA+B,OAAO,CAAC,EAAE,cAAc,CAAC;IAC5D,OAAO,CAAC;GACV,CAAC;EACH;CACF;CAEA,aAAsC;EACpC,KAAK,SAAS,KAAA;CAChB;CAEA,UAAmC;EACjC,OAAO,KAAK,OAAO;CACrB;AACF;AA9DGA,WAAA,CAAA,SAAS,EAAE,WAAW,WAAW,CAAC,CAAA,GAAA,iBAAA,WAAA,WAAA,KAAA,CAAA;AAIlCA,WAAA,CAAA,SAAS,CAAA,GAAA,iBAAA,WAAA,UAAA,KAAA,CAAA;AAITA,WAAA,CAAA,SAAS,EAAE,WAAW,cAAc,CAAC,CAAA,GAAA,iBAAA,WAAA,eAAA,KAAA,CAAA;AAXvC,mBAAA,oBAAAA,WAAA,CAAA,cAAc,oBAAoB,CAAA,GAAA,gBAAA"}

package/dist/argus-column.js

@@ -1,25 +1,10 @@
+import { flagConverter } from "./attributes.js";
+import { notify } from "./column-registry.js";
 import __decorate from "./_virtual/_@oxc-project_runtime@0.156.0/helpers/esm/decorate.js";
 import { ReactiveElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { templateContent } from "lit/directives/template-content.js";
 // src/argus-column.ts
-/**
-* Tables watching their `<argus-column>` children, by table element. Columns
-* call their parent's entry when they connect, disconnect or change, so the
-* table needs no MutationObserver on its own children (which would fire on
-* every light-DOM cell render while scrolling).
-*/
-var watchers = /* @__PURE__ */ new WeakMap();
-/** Calls `onChange` whenever an `<argus-column>` child of `host` is added, removed, moved or changed. */
-function watchColumns(host, onChange) {
-	watchers.set(host, onChange);
-}
-function unwatchColumns(host) {
-	watchers.delete(host);
-}
-function notify(parent) {
-	if (parent) watchers.get(parent)?.();
-}
 /** `width` attribute: `"90"` or `"90px"` → 90, `"auto"`, `"2fr"` → `{ flex: 2 }`. */
 var widthConverter = { fromAttribute(value) {
 	if (value === null) return void 0;
@@ -30,13 +15,6 @@ var widthConverter = { fromAttribute(value) {
 	const n = Number(match[1]);
 	return match[2] === "fr" ? { flex: n } : n;
 } };
-/**
-* Boolean attribute with a default that may be `true`: absent → unset (the
-* default applies), `"false"` → `false`, anything else → `true`.
-*/
-var flagConverter = { fromAttribute(value) {
-	return value === null ? void 0 : value.trim().toLowerCase() !== "false";
-} };
 var ArgusColumn = class ArgusColumn extends ReactiveElement {
 	constructor(..._args) {
 		super(..._args);
@@ -50,6 +28,14 @@ var ArgusColumn = class ArgusColumn extends ReactiveElement {
 	#parent;
 	#def;
 	#children;
+	/** `hidden` is the standard attribute: it updates the column like its own properties. */
+	static get observedAttributes() {
+		return [...super.observedAttributes, "hidden"];
+	}
+	attributeChangedCallback(name, old, value) {
+		super.attributeChangedCallback(name, old, value);
+		if (name === "hidden") this.requestUpdate();
+	}
 	/** Data only: no shadow root, nothing rendered. */
 	createRenderRoot() {
 		return this;
@@ -71,6 +57,7 @@ var ArgusColumn = class ArgusColumn extends ReactiveElement {
 	* The column as the table reads it. Unset fields stay `undefined`, which the
 	* table reads as its defaults. An unknown `pin` is ignored and an unknown
 	* `align` falls back to `start`.
+	* @internal
 	*/
 	toColumnDef() {
 		if (this.#def) return this.#def;
@@ -79,15 +66,23 @@ var ArgusColumn = class ArgusColumn extends ReactiveElement {
 			id: this.columnId,
 			header: this.header,
 			accessor: this.accessor,
+			formula: this.formula,
 			cell: this.cell ?? (template && (() => html`${templateContent(template)}`)),
 			width: this.width,
 			minWidth: this.minWidth,
 			maxWidth: this.maxWidth,
 			pin: this.pin,
+			hidden: this.hasAttribute("hidden"),
+			pinnable: this.pinnable,
+			hideable: this.hideable,
 			align: this.align,
+			wrap: this.wrap,
 			sortable: this.sortable,
 			resizable: this.resizable,
-			reorderable: this.reorderable
+			reorderable: this.reorderable,
+			filter: this.filter,
+			filterFn: this.filterFn,
+			filterOptions: this.filterOptions
 		};
 	}
 	willUpdate() {
@@ -100,6 +95,7 @@ var ArgusColumn = class ArgusColumn extends ReactiveElement {
 __decorate([property({ attribute: "column-id" })], ArgusColumn.prototype, "columnId", void 0);
 __decorate([property()], ArgusColumn.prototype, "header", void 0);
 __decorate([property()], ArgusColumn.prototype, "accessor", void 0);
+__decorate([property()], ArgusColumn.prototype, "formula", void 0);
 __decorate([property({ attribute: false })], ArgusColumn.prototype, "cell", void 0);
 __decorate([property({ converter: widthConverter })], ArgusColumn.prototype, "width", void 0);
 __decorate([property({
@@ -111,11 +107,17 @@ __decorate([property({
 	type: Number
 })], ArgusColumn.prototype, "maxWidth", void 0);
 __decorate([property()], ArgusColumn.prototype, "pin", void 0);
+__decorate([property({ converter: flagConverter })], ArgusColumn.prototype, "pinnable", void 0);
+__decorate([property({ converter: flagConverter })], ArgusColumn.prototype, "hideable", void 0);
 __decorate([property()], ArgusColumn.prototype, "align", void 0);
+__decorate([property({ converter: flagConverter })], ArgusColumn.prototype, "wrap", void 0);
 __decorate([property({ converter: flagConverter })], ArgusColumn.prototype, "sortable", void 0);
 __decorate([property({ converter: flagConverter })], ArgusColumn.prototype, "resizable", void 0);
 __decorate([property({ converter: flagConverter })], ArgusColumn.prototype, "reorderable", void 0);
+__decorate([property()], ArgusColumn.prototype, "filter", void 0);
+__decorate([property({ attribute: false })], ArgusColumn.prototype, "filterFn", void 0);
+__decorate([property({ attribute: false })], ArgusColumn.prototype, "filterOptions", void 0);
 ArgusColumn = __decorate([customElement("argus-column")], ArgusColumn);
-export { ArgusColumn, unwatchColumns, watchColumns };
+export { ArgusColumn };
 
 //# sourceMappingURL=argus-column.js.map

package/dist/argus-column.js.map

@@ -1 +1 @@
-{"version":3,"file":"argus-column.js","names":["_decorate"],"sources":["../src/argus-column.ts"],"sourcesContent":["import { html, ReactiveElement, type ComplexAttributeConverter } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { templateContent } from 'lit/directives/template-content.js';\nimport type {\n  CellContent,\n  CellContext,\n  ColumnAlign,\n  ColumnDef,\n  ColumnPin,\n  ColumnWidth,\n} from './types.js';\n\n/**\n * Tables watching their `<argus-column>` children, by table element. Columns\n * call their parent's entry when they connect, disconnect or change, so the\n * table needs no MutationObserver on its own children (which would fire on\n * every light-DOM cell render while scrolling).\n */\nconst watchers = new WeakMap<Element, () => void>();\n\n/** Calls `onChange` whenever an `<argus-column>` child of `host` is added, removed, moved or changed. */\nexport function watchColumns(host: Element, onChange: () => void): void {\n  watchers.set(host, onChange);\n}\n\nexport function unwatchColumns(host: Element): void {\n  watchers.delete(host);\n}\n\nfunction notify(parent: Element | null): void {\n  if (parent) watchers.get(parent)?.();\n}\n\n/** `width` attribute: `\"90\"` or `\"90px\"` → 90, `\"auto\"`, `\"2fr\"` → `{ flex: 2 }`. */\nconst widthConverter: ComplexAttributeConverter<ColumnWidth | undefined> = {\n  fromAttribute(value) {\n    if (value === null) return undefined;\n    const text = value.trim().toLowerCase();\n    if (text === 'auto') return 'auto';\n    const match = /^(\\d*\\.?\\d+)(px|fr)?$/.exec(text);\n    if (!match) return undefined;\n    const n = Number(match[1]);\n    return match[2] === 'fr' ? { flex: n } : n;\n  },\n};\n\n/**\n * Boolean attribute with a default that may be `true`: absent → unset (the\n * default applies), `\"false\"` → `false`, anything else → `true`.\n */\nconst flagConverter: ComplexAttributeConverter<boolean | undefined> = {\n  fromAttribute(value) {\n    return value === null ? undefined : value.trim().toLowerCase() !== 'false';\n  },\n};\n\n/**\n * One column of the parent `<argus-table>`, written as markup instead of an entry in\n * its `columns` property. It is data only and renders nothing.\n *\n * Only direct children of the table count, in document order. A non-empty `columns`\n * property wins over the children. Adding, removing, moving or changing a column\n * updates the table; sizes, order and sorting are kept by `column-id`.\n *\n * A `<template>` child is the content of every cell in the column (static: the same\n * for each row). Set the `cell` property for content that depends on the row.\n *\n * @summary Declarative column of an `<argus-table>`.\n */\n@customElement('argus-column')\nexport class ArgusColumn<T = unknown> extends ReactiveElement {\n  /** Stable key, used in state objects, events and persistence. Must be unique within the table. */\n  @property({ attribute: 'column-id' })\n  columnId = '';\n\n  /** Header content: text as an attribute; a Lit template, a node or a function as a property. */\n  @property()\n  header?: CellContent | (() => CellContent);\n\n  /**\n   * How to read the cell value: a property path such as `customer.name`, or (as a\n   * property) a function of the row and its index.\n   */\n  @property()\n  accessor?: string | ((row: T, index: number) => unknown);\n\n  /** Cell content from the row: `(row, context) => content`. Property only; wins over a `<template>` child. */\n  @property({ attribute: false })\n  cell?: (row: T, context: CellContext<T>) => CellContent;\n\n  /** Width: `90` (px), `auto` to fit the content, or `2fr` for a share of the free space. Default: 150 px. */\n  @property({ converter: widthConverter })\n  width?: ColumnWidth;\n\n  /** Lower bound for resizing and for flex columns, in px. Default: 40. */\n  @property({ attribute: 'min-width', type: Number })\n  minWidth?: number;\n\n  /** Upper bound for resizing, in px. Default: no limit. */\n  @property({ attribute: 'max-width', type: Number })\n  maxWidth?: number;\n\n  /** Pins the column to the `start` or `end` side. */\n  @property()\n  pin?: ColumnPin;\n\n  /** Text alignment: `start`, `center` or `end`. Default: `start`. */\n  @property()\n  align?: ColumnAlign;\n\n  /** Whether the header can be clicked to sort. Default: `false`. */\n  @property({ converter: flagConverter })\n  sortable?: boolean;\n\n  /** Whether the column can be resized. Default: `true`; `resizable=\"false\"` turns it off. */\n  @property({ converter: flagConverter })\n  resizable?: boolean;\n\n  /** Whether the column can be moved. Default: `true`; `reorderable=\"false\"` turns it off. */\n  @property({ converter: flagConverter })\n  reorderable?: boolean;\n\n  #parent: Element | null = null;\n  #def: ColumnDef<T> | undefined;\n  readonly #children = new MutationObserver(() => {\n    this.#def = undefined;\n    this.requestUpdate();\n  });\n\n  /** Data only: no shadow root, nothing rendered. */\n  protected override createRenderRoot(): HTMLElement {\n    return this;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#children.observe(this, { childList: true });\n    this.#parent = this.parentElement;\n    notify(this.#parent);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#children.disconnect();\n    const parent = this.#parent;\n    this.#parent = null;\n    notify(parent);\n  }\n\n  /**\n   * The column as the table reads it. Unset fields stay `undefined`, which the\n   * table reads as its defaults. An unknown `pin` is ignored and an unknown\n   * `align` falls back to `start`.\n   */\n  toColumnDef(): ColumnDef<T> {\n    if (this.#def) return this.#def;\n    const template = [...this.children].find((c) => c instanceof HTMLTemplateElement);\n    return (this.#def = {\n      id: this.columnId,\n      header: this.header,\n      accessor: this.accessor,\n      cell: this.cell ?? (template && (() => html`${templateContent(template)}`)),\n      width: this.width,\n      minWidth: this.minWidth,\n      maxWidth: this.maxWidth,\n      pin: this.pin,\n      align: this.align,\n      sortable: this.sortable,\n      resizable: this.resizable,\n      reorderable: this.reorderable,\n    });\n  }\n\n  protected override willUpdate(): void {\n    this.#def = undefined;\n  }\n\n  protected override updated(): void {\n    notify(this.#parent);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'argus-column': ArgusColumn;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"argus-column.js","names":["_decorate"],"sources":["../src/argus-column.ts"],"sourcesContent":["import { html, ReactiveElement, type ComplexAttributeConverter } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { templateContent } from 'lit/directives/template-content.js';\nimport { flagConverter } from './attributes.js';\nimport { notify } from './column-registry.js';\nimport type {\n  CellContent,\n  CellContext,\n  ColumnAlign,\n  ColumnDef,\n  ColumnPin,\n  ColumnWidth,\n  FilterKind,\n  FilterValue,\n} from './types.js';\n\n/** `width` attribute: `\"90\"` or `\"90px\"` → 90, `\"auto\"`, `\"2fr\"` → `{ flex: 2 }`. */\nconst widthConverter: ComplexAttributeConverter<ColumnWidth | undefined> = {\n  fromAttribute(value) {\n    if (value === null) return undefined;\n    const text = value.trim().toLowerCase();\n    if (text === 'auto') return 'auto';\n    const match = /^(\\d*\\.?\\d+)(px|fr)?$/.exec(text);\n    if (!match) return undefined;\n    const n = Number(match[1]);\n    return match[2] === 'fr' ? { flex: n } : n;\n  },\n};\n\n/**\n * One column of the parent `<argus-table>`, written as markup instead of an entry in\n * its `columns` property. It is data only and renders nothing.\n *\n * Only direct children of the table or of an `<argus-column-group>` count, in\n * document order. A non-empty `columns` property wins over the children. Adding, removing, moving or changing a column\n * updates the table; sizes, order and sorting are kept by `column-id`.\n *\n * A `<template>` child is the content of every cell in the column (static: the same\n * for each row). Set the `cell` property for content that depends on the row.\n *\n * The standard `hidden` attribute (or property) hides the column, like `hidden` in\n * `columns`; the table's `columnVisibility` overrides it.\n *\n * @summary Declarative column of an `<argus-table>`.\n */\n@customElement('argus-column')\nexport class ArgusColumn<T = unknown> extends ReactiveElement {\n  /** Stable key, used in state objects, events and persistence. Must be unique within the table. */\n  @property({ attribute: 'column-id' })\n  columnId = '';\n\n  /** Header content: text as an attribute; a Lit template, a node or a function as a property. */\n  @property()\n  header?: CellContent | (() => CellContent);\n\n  /**\n   * How to read the cell value: a property path such as `customer.name`, or (as a\n   * property) a function of the row and its index.\n   */\n  @property()\n  accessor?: string | ((row: T, index: number) => unknown);\n\n  /**\n   * A spreadsheet formula computed per row from other columns, such as\n   * `[price] * [quantity]`. Needs the `formulas()` plugin from `@argus-table/formulas`.\n   */\n  @property()\n  formula?: string;\n\n  /** Cell content from the row: `(row, context) => content`. Property only; wins over a `<template>` child. */\n  @property({ attribute: false })\n  cell?: (row: T, context: CellContext<T>) => CellContent;\n\n  /** Width: `90` (px), `auto` to fit the content, or `2fr` for a share of the free space. Default: 150 px. */\n  @property({ converter: widthConverter })\n  width?: ColumnWidth;\n\n  /** Lower bound for resizing and for flex columns, in px. Default: 40. */\n  @property({ attribute: 'min-width', type: Number })\n  minWidth?: number;\n\n  /** Upper bound for resizing, in px. Default: no limit. */\n  @property({ attribute: 'max-width', type: Number })\n  maxWidth?: number;\n\n  /** Pins the column to the `start` or `end` side. The table's `columnPinning` overrides it. */\n  @property()\n  pin?: ColumnPin;\n\n  /** Whether the user can pin or unpin the column. Default: `true`; `pinnable=\"false\"` turns it off. */\n  @property({ converter: flagConverter })\n  pinnable?: boolean;\n\n  /** Whether the user can hide the column. Default: `true`; `hideable=\"false\"` turns it off. */\n  @property({ converter: flagConverter })\n  hideable?: boolean;\n\n  /** Text alignment: `start`, `center` or `end`. Default: `start`. */\n  @property()\n  align?: ColumnAlign;\n\n  /**\n   * Wraps the cell text onto more lines instead of cutting it off. Default:\n   * `false`. With a fixed row height, text that doesn't fit is clipped.\n   */\n  @property({ converter: flagConverter })\n  wrap?: boolean;\n\n  /** Whether the header can be clicked to sort. Default: `false`. */\n  @property({ converter: flagConverter })\n  sortable?: boolean;\n\n  /** Whether the column can be resized. Default: `true`; `resizable=\"false\"` turns it off. */\n  @property({ converter: flagConverter })\n  resizable?: boolean;\n\n  /** Whether the column can be moved. Default: `true`; `reorderable=\"false\"` turns it off. */\n  @property({ converter: flagConverter })\n  reorderable?: boolean;\n\n  /**\n   * The kind of filter users can set, e.g. from the column menu: `text`, `number`,\n   * `date` or `set`. Unset: users can't filter the column.\n   */\n  @property()\n  filter?: FilterKind;\n\n  /** Replaces the built-in matching for this column's filter. Property only. */\n  @property({ attribute: false })\n  filterFn?: ColumnDef<T>['filterFn'];\n\n  /** The values a `set` filter offers; needed with a `dataSource`. Property only. */\n  @property({ attribute: false })\n  filterOptions?: readonly FilterValue[];\n\n  #parent: Element | null = null;\n  #def: ColumnDef<T> | undefined;\n  readonly #children = new MutationObserver(() => {\n    this.#def = undefined;\n    this.requestUpdate();\n  });\n\n  /** `hidden` is the standard attribute: it updates the column like its own properties. */\n  static override get observedAttributes(): string[] {\n    return [...super.observedAttributes, 'hidden'];\n  }\n\n  override attributeChangedCallback(name: string, old: string | null, value: string | null): void {\n    super.attributeChangedCallback(name, old, value);\n    if (name === 'hidden') this.requestUpdate();\n  }\n\n  /** Data only: no shadow root, nothing rendered. */\n  protected override createRenderRoot(): HTMLElement {\n    return this;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#children.observe(this, { childList: true });\n    this.#parent = this.parentElement;\n    notify(this.#parent);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.#children.disconnect();\n    const parent = this.#parent;\n    this.#parent = null;\n    notify(parent);\n  }\n\n  /**\n   * The column as the table reads it. Unset fields stay `undefined`, which the\n   * table reads as its defaults. An unknown `pin` is ignored and an unknown\n   * `align` falls back to `start`.\n   * @internal\n   */\n  toColumnDef(): ColumnDef<T> {\n    if (this.#def) return this.#def;\n    const template = [...this.children].find((c) => c instanceof HTMLTemplateElement);\n    return (this.#def = {\n      id: this.columnId,\n      header: this.header,\n      accessor: this.accessor,\n      formula: this.formula,\n      cell: this.cell ?? (template && (() => html`${templateContent(template)}`)),\n      width: this.width,\n      minWidth: this.minWidth,\n      maxWidth: this.maxWidth,\n      pin: this.pin,\n      hidden: this.hasAttribute('hidden'),\n      pinnable: this.pinnable,\n      hideable: this.hideable,\n      align: this.align,\n      wrap: this.wrap,\n      sortable: this.sortable,\n      resizable: this.resizable,\n      reorderable: this.reorderable,\n      filter: this.filter,\n      filterFn: this.filterFn,\n      filterOptions: this.filterOptions,\n    });\n  }\n\n  protected override willUpdate(): void {\n    this.#def = undefined;\n  }\n\n  protected override updated(): void {\n    notify(this.#parent);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'argus-column': ArgusColumn;\n  }\n}\n"],"mappings":"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"}