@livenetworks/ashlar 1.6.0 → 2.0.0

package/components/ln-filter/src/filter-model.js

@@ -0,0 +1,185 @@
+import { matchesFilterValues } from '../../ln-core/matching.js';
+
+/**
+ * Checks whether two arrays of strings differ in length or content.
+ * @param {Array} a
+ * @param {Array} b
+ * @returns {boolean}
+ */
+export function arraysDiffer(a, b) {
+	if (!Array.isArray(a) || !Array.isArray(b)) return a !== b;
+	if (a.length !== b.length) return true;
+	for (let i = 0; i < a.length; i++) {
+		if (a[i] !== b[i]) return true;
+	}
+	return false;
+}
+
+/**
+ * Evaluates a row across multiple active column filters (AND across columns, OR within column).
+ * @param {Record<number, string>} cellValuesByCol Index-to-text mapping of row cells
+ * @param {Record<string, { col: number|null, values: string[], attr?: string }>} filters Active column filter map
+ * @param {Element} [row] Optional row element for data-attribute matching fallback
+ * @returns {boolean}
+ */
+export function evaluateRowFilters(cellValuesByCol, filters, row) {
+	if (!filters || typeof filters !== 'object') return true;
+	const keys = Object.keys(filters);
+	if (keys.length === 0) return true;
+
+	for (let i = 0; i < keys.length; i++) {
+		const filter = filters[keys[i]];
+		let cellText = '';
+		if (filter.col !== null && filter.col !== undefined) {
+			cellText = cellValuesByCol[filter.col] || '';
+		} else if (filter.attr && row && typeof row.getAttribute === 'function') {
+			cellText = row.getAttribute(filter.attr) || '';
+		}
+		if (!matchesFilterValues(cellText, filter.values)) {
+			return false; // AND across columns: fail fast
+		}
+	}
+	return true;
+}
+
+/**
+ * Resolves the 0-based column index of a table associated with a filter.
+ * Inspects explicit index, filterDom placement, popover trigger button in <th>,
+ * and table header cells matching the filter key.
+ *
+ * @param {HTMLTableElement} table Target table
+ * @param {HTMLElement} filterDom Filter root element (<ul data-ln-filter>)
+ * @param {string|null} key Active filter key (e.g. 'category', 'status')
+ * @param {number|null} explicitCol Explicitly provided colIndex, if any
+ * @returns {number|null} 0-based column index, or null if unresolvable
+ */
+export function resolveColumnIndex(table, filterDom, key, explicitCol) {
+	if (explicitCol !== null && explicitCol !== undefined && !isNaN(explicitCol)) {
+		return parseInt(explicitCol, 10);
+	}
+
+	if (filterDom && typeof filterDom.getAttribute === 'function') {
+		const colAttr = filterDom.getAttribute('data-ln-filter-col');
+		if (colAttr !== null && !isNaN(parseInt(colAttr, 10))) {
+			return parseInt(colAttr, 10);
+		}
+
+		if (typeof filterDom.closest === 'function') {
+			const th = filterDom.closest('th');
+			if (th && typeof th.cellIndex === 'number') {
+				return th.cellIndex;
+			}
+
+			const popover = filterDom.closest('[data-ln-popover], [id]');
+			if (popover && popover.id) {
+				const rootDoc = table && table.ownerDocument ? table.ownerDocument : (filterDom.ownerDocument || (typeof document !== 'undefined' ? document : null));
+				if (rootDoc && typeof rootDoc.querySelector === 'function') {
+					const trigger = rootDoc.querySelector('[data-ln-popover-for="' + popover.id + '"]');
+					if (trigger && typeof trigger.closest === 'function') {
+						const triggerTh = trigger.closest('th');
+						if (triggerTh && typeof triggerTh.cellIndex === 'number') {
+							return triggerTh.cellIndex;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	if (table && key && typeof table.querySelectorAll === 'function') {
+		const ths = table.querySelectorAll('thead th, tr:first-child th');
+		const keyLower = String(key).trim().toLowerCase();
+
+		// First pass: match data-ln-* attributes on <th>
+		for (let i = 0; i < ths.length; i++) {
+			const th = ths[i];
+			const attrVal = th.getAttribute('data-ln-table-filter-col') ||
+			                th.getAttribute('data-ln-filter-col') ||
+			                th.getAttribute('data-ln-filter-key') ||
+			                th.getAttribute('data-ln-table-col') ||
+			                th.getAttribute('data-ln-col') ||
+			                th.getAttribute('data-ln-field');
+			if (attrVal && attrVal.trim().toLowerCase() === keyLower) {
+				return typeof th.cellIndex === 'number' ? th.cellIndex : i;
+			}
+		}
+
+		// Second pass: match popover trigger inside <th>
+		if (filterDom) {
+			const popover = filterDom.closest ? filterDom.closest('[data-ln-popover], [id]') : null;
+			const popoverId = (popover && popover.id) || (filterDom.id || null);
+			if (popoverId) {
+				for (let i = 0; i < ths.length; i++) {
+					const th = ths[i];
+					if (typeof th.querySelector === 'function' && th.querySelector('[data-ln-popover-for="' + popoverId + '"]')) {
+						return typeof th.cellIndex === 'number' ? th.cellIndex : i;
+					}
+				}
+			}
+		}
+
+		// Third pass: match header text (direct text content)
+		for (let i = 0; i < ths.length; i++) {
+			const th = ths[i];
+			const childNodes = Array.from(th.childNodes || []);
+			const textNodes = childNodes.filter(n => n.nodeType === 3);
+			const label = (textNodes.length > 0
+				? textNodes.map(n => n.textContent.trim()).join(' ')
+				: (th.textContent || '')
+			).trim().toLowerCase();
+
+			if (label && label === keyLower) {
+				return typeof th.cellIndex === 'number' ? th.cellIndex : i;
+			}
+		}
+	}
+
+	return null;
+}
+
+/**
+ * Derives the active key and values from a list of input descriptors.
+ * @param {Array<{ key: string, value: string, checked: boolean, isReset: boolean }>} descriptors
+ * @returns {{ key: string|null, values: string[] }}
+ */
+export function deriveActiveFilters(descriptors) {
+	if (!Array.isArray(descriptors)) return { key: null, values: [] };
+
+	let key = null;
+	const values = [];
+
+	for (let i = 0; i < descriptors.length; i++) {
+		const item = descriptors[i];
+		if (!key && item.key) key = item.key;
+		if (item.checked && !item.isReset && item.value) {
+			values.push(item.value);
+		}
+	}
+
+	return { key, values };
+}
+
+/**
+ * Encodes an array of active filter values into a comma-joined,
+ * percent-encoded string for persistence in a state attribute.
+ * @param {string[]} values
+ * @returns {string|null}
+ */
+export function encodeFilterValues(values) {
+	if (!Array.isArray(values) || values.length === 0) return null;
+	return values.map(encodeURIComponent).join(',');
+}
+
+/**
+ * Decodes a comma-joined, percent-encoded filter-values string back
+ * into an array.
+ * @param {string|null} raw
+ * @returns {string[]}
+ */
+export function decodeFilterValues(raw) {
+	if (!raw) return [];
+	return raw.split(',').map(function (v) {
+		try { return decodeURIComponent(v); }
+		catch (e) { return v; }
+	}).filter(Boolean);
+}

package/components/ln-filter/src/ln-filter.js

@@ -0,0 +1,435 @@
+import { attrSpec, attrStr, createBatcher, defineAttrs, dispatch, dispatchCancelable, hashFilterDecode, hashFilterEncode, hashGet, hashSet, matchesFilterValues, queueBoot, readValue, registerComponent, resolveHashNamespace } from '../../ln-core';
+import { arraysDiffer, decodeFilterValues, deriveActiveFilters, encodeFilterValues, evaluateRowFilters, resolveColumnIndex } from './filter-model.js';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-filter';
+	const DOM_ATTRIBUTE = 'lnFilter';
+	const KEY_ATTR = 'data-ln-filter-key';
+	const VALUE_ATTR = 'data-ln-filter-value';
+	const HIDE_ATTR = 'data-ln-filter-hide';
+	const RESET_ATTR = 'data-ln-filter-reset';
+	const COL_ATTR = 'data-ln-filter-col';
+	const HASH_ATTR = 'data-ln-hash';
+	const VALUES_ATTR = 'data-ln-filter-values';
+
+	// Shared column filter state per plain table (AND across columns, OR within column)
+	const _tableFilters = new WeakMap();
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	const ATTRIBUTES = {
+		'data-ln-filter':        { prop: 'targetId', type: 'string', read: attrStr, fallback: null, description: 'Target table or list element ID to filter' },
+		'data-ln-hash':          { type: 'string', effect: _syncAttribute, description: 'URL hash routing key for filter state persistence' },
+		'data-ln-filter-values': { type: 'string', effect: _syncAttribute, description: 'Encoded active filter values' },
+		'data-ln-filter-col':    { type: 'string', description: 'Column name or index filter specifier' },
+		'data-ln-filter-key':    { type: 'string', description: 'Field key for filter matching' },
+		'data-ln-filter-reset':  { type: 'trigger', description: 'Filter reset button or option trigger' },
+		'data-ln-filter-value':  { type: 'string', description: 'Value to match for this filter input' },
+		'data-ln-filter-hide':   { type: 'enum', values: ['collapse', 'none'], fallback: 'collapse', description: 'CSS hiding strategy for non-matching rows' }
+	};
+
+	const ATTR_SPEC = attrSpec(ATTRIBUTES);
+
+	function _isReset(input) {
+		return input.hasAttribute(RESET_ATTR) || !input.getAttribute(VALUE_ATTR);
+	}
+
+	function _deriveActive(self) {
+		const inputs = self.dom.querySelectorAll('[' + KEY_ATTR + ']');
+		const descriptors = [];
+		for (let i = 0; i < inputs.length; i++) {
+			const input = inputs[i];
+			descriptors.push({
+				key: input.getAttribute(KEY_ATTR),
+				value: input.getAttribute(VALUE_ATTR) || '',
+				checked: input.checked,
+				isReset: _isReset(input)
+			});
+		}
+		const active = deriveActiveFilters(descriptors);
+		return { key: active.key, values: active.values, targetId: self.targetId };
+	}
+
+	function _applyInputValues(dom, key, values) {
+		const inputs = dom.querySelectorAll('[' + KEY_ATTR + ']');
+		const hasValues = Array.isArray(values) && values.length > 0;
+		for (let i = 0; i < inputs.length; i++) {
+			const input = inputs[i];
+			if (_isReset(input)) {
+				input.checked = !hasValues;
+			} else if (hasValues && input.getAttribute(KEY_ATTR) === key && values.indexOf(input.getAttribute(VALUE_ATTR)) !== -1) {
+				input.checked = true;
+			} else {
+				input.checked = false;
+			}
+		}
+	}
+
+	// ─── Component ─────────────────────────────────────────────
+
+	function _component(dom) {
+		this.dom = dom;
+		defineAttrs(this, dom, ATTR_SPEC);
+
+		// Column index for plain table row filtering (null = standard child attribute filter)
+		const colAttr = dom.getAttribute(COL_ATTR);
+		this.colIndex = colAttr !== null ? parseInt(colAttr, 10) : null;
+
+		// Event-diff cache — null means never dispatched yet
+		this._lastSnapshot = null;
+		this._destroyed = false;
+
+		this.nsKey = resolveHashNamespace(dom, 'filter');
+		this.hashEnabled = !!this.nsKey;
+
+		const self = this;
+
+		const queueRender = createBatcher(function () {
+			self._render();
+		});
+
+		this._queueRender = queueRender;
+		this._attachHandlers();
+
+		// Hash change listener
+		this._onHashChange = function () {
+			if (self._destroyed || !self.hashEnabled) return;
+			const hashVal = hashGet(self.nsKey);
+			const decoded = hashFilterDecode(hashVal);
+			if (decoded && decoded.key && decoded.values.length > 0) {
+				_applyInputValues(self.dom, decoded.key, decoded.values);
+			} else {
+				_applyInputValues(self.dom, null, []);
+			}
+			self._render();
+		};
+
+		if (this.hashEnabled) {
+			window.addEventListener('hashchange', this._onHashChange);
+		}
+
+		// ─── Restore State on Boot ─────────────────────────────────
+		let restored = false;
+
+		if (this.hashEnabled) {
+			const hashVal = hashGet(this.nsKey);
+			const decoded = hashFilterDecode(hashVal);
+			if (decoded && decoded.key && decoded.values.length > 0) {
+				_applyInputValues(dom, decoded.key, decoded.values);
+				queueBoot(function () {
+					if (self._destroyed) return;
+					self._render();
+				});
+				restored = true;
+			}
+		}
+
+		if (!restored) {
+			const values = decodeFilterValues(dom.getAttribute(VALUES_ATTR));
+			if (values.length > 0) {
+				const keyEl = dom.querySelector('[' + KEY_ATTR + ']');
+				const key = keyEl ? keyEl.getAttribute(KEY_ATTR) : null;
+				if (key) {
+					_applyInputValues(dom, key, values);
+					queueBoot(function () {
+						if (self._destroyed) return;
+						self._render();
+					});
+					restored = true;
+				}
+			}
+		}
+
+		if (!restored) {
+			const inputs = dom.querySelectorAll('[' + KEY_ATTR + ']');
+			for (let i = 0; i < inputs.length; i++) {
+				if (inputs[i].checked && !_isReset(inputs[i])) {
+					queueBoot(function () {
+						if (self._destroyed) return;
+						self._render();
+					});
+					break;
+				}
+			}
+		}
+
+		return this;
+	}
+
+	// ─── Handlers (Delegated) ──────────────────────────────────
+
+	_component.prototype._attachHandlers = function () {
+		const self = this;
+
+		this._onDomChange = function (e) {
+			const input = e.target;
+			if (!input || !input.hasAttribute || !input.hasAttribute(KEY_ATTR)) return;
+
+			const allInputs = Array.from(self.dom.querySelectorAll('[' + KEY_ATTR + ']'));
+
+			if (_isReset(input)) {
+				for (let i = 0; i < allInputs.length; i++) {
+					if (!_isReset(allInputs[i])) allInputs[i].checked = false;
+				}
+				input.checked = true;
+				self._queueRender();
+				return;
+			}
+
+			if (input.checked) {
+				for (let i = 0; i < allInputs.length; i++) {
+					if (_isReset(allInputs[i])) allInputs[i].checked = false;
+				}
+				let hasReset = false;
+				for (let ri = 0; ri < allInputs.length; ri++) {
+					if (_isReset(allInputs[ri])) { hasReset = true; break; }
+				}
+				if (hasReset) {
+					let allChecked = true;
+					for (let ci = 0; ci < allInputs.length; ci++) {
+						if (!_isReset(allInputs[ci]) && !allInputs[ci].checked) {
+							allChecked = false;
+							break;
+						}
+					}
+					if (allChecked) {
+						for (let mi = 0; mi < allInputs.length; mi++) {
+							if (_isReset(allInputs[mi])) allInputs[mi].checked = true;
+							else allInputs[mi].checked = false;
+						}
+					}
+				}
+			} else {
+				let anyChecked = false;
+				for (let i = 0; i < allInputs.length; i++) {
+					if (!_isReset(allInputs[i]) && allInputs[i].checked) {
+						anyChecked = true;
+						break;
+					}
+				}
+				if (!anyChecked) {
+					for (let i = 0; i < allInputs.length; i++) {
+						if (_isReset(allInputs[i])) allInputs[i].checked = true;
+					}
+				}
+			}
+
+			self._queueRender();
+		};
+
+		this.dom.addEventListener('change', this._onDomChange);
+	};
+
+	// ─── Render ────────────────────────────────────────────────
+
+	_component.prototype._render = function () {
+		const self = this;
+		const active = _deriveActive(this);
+		const prev = this._lastSnapshot;
+		const changed = !prev
+			|| prev.key !== active.key
+			|| arraysDiffer(prev.values, active.values);
+
+		if (!changed) return;
+
+		const isReset = active.key === null || active.values.length === 0;
+		const target = document.getElementById(self.targetId);
+		const detail = {
+			key: active.key,
+			values: active.values.slice(),
+			targetId: self.targetId
+		};
+
+		// 1. Dispatch on this.dom (Control Host) -> bubbles to ln-table-coordinator
+		dispatch(self.dom, 'ln-filter:change', detail);
+
+		// 2. Dispatch cancelable on target (State/Data Host) -> bubbles to ln-data-store / ln-table
+		let defaultPrevented = false;
+		if (target && target !== self.dom) {
+			const evt = dispatchCancelable(target, 'ln-filter:change', detail);
+			if (evt.defaultPrevented) defaultPrevented = true;
+		}
+
+		// Fire ln-filter:reset on transition into reset state
+		const wasActive = prev && prev.values.length > 0;
+		const nowReset = active.values.length === 0;
+		if (wasActive && nowReset) {
+			const resetDetail = { targetId: self.targetId };
+			dispatch(self.dom, 'ln-filter:reset', resetDetail);
+			if (target && target !== self.dom) {
+				dispatch(target, 'ln-filter:reset', resetDetail);
+			}
+		}
+
+		this._lastSnapshot = { key: active.key, values: active.values.slice() };
+
+		const encoded = encodeFilterValues(active.values);
+		if (encoded) this.dom.setAttribute(VALUES_ATTR, encoded);
+		else this.dom.removeAttribute(VALUES_ATTR);
+
+		if (this.hashEnabled) {
+			const encoded = hashFilterEncode(active.key, active.values);
+			hashSet(this.nsKey, encoded);
+		}
+
+		if (defaultPrevented) return;
+
+		const table = target && (target.tagName === 'TABLE' ? target : (target.querySelector ? target.querySelector('table') : null));
+
+		if (table) {
+			self._filterTableRows(active, table);
+		} else {
+			if (!target) return;
+			const children = target.children;
+			for (let i = 0; i < children.length; i++) {
+				const el = children[i];
+				el.removeAttribute(HIDE_ATTR);
+				if (isReset) continue;
+
+				const attr = el.getAttribute('data-' + active.key);
+				if (attr === null) continue;
+
+				if (!matchesFilterValues(attr, active.values)) {
+					el.setAttribute(HIDE_ATTR, 'true');
+				}
+			}
+		}
+	};
+
+	// ─── Plain Table Row Filtering ─────────────────────────────
+
+	function _readCell(cell) {
+		if (!cell) return '';
+		const childWithValue = cell.querySelector ? cell.querySelector('[data-ln-value]') : null;
+		return childWithValue ? readValue(childWithValue) : readValue(cell);
+	}
+
+	function _isSkipRow(row) {
+		if (!row || typeof row !== 'object') return true;
+		if (row.tagName === 'TEMPLATE') return true;
+		if (typeof row.hasAttribute === 'function' && (row.hasAttribute('data-ln-sort-exclude') || row.hasAttribute('hidden'))) return true;
+		if (row.classList && row.classList.contains('hidden')) return true;
+		if (row.style && row.style.display === 'none') return true;
+		if (typeof row.matches === 'function' && row.matches('.empty-state, .ln-table__empty, .ln-table__empty-state, [data-ln-empty], [data-ln-empty-state], [data-ln-table-empty]')) return true;
+		if (typeof row.querySelector === 'function' && row.querySelector('.empty-state, [data-ln-empty], [data-ln-empty-state]')) return true;
+		return false;
+	}
+
+	_component.prototype._filterTableRows = function (active, table) {
+		if (!table) {
+			const target = document.getElementById(this.targetId);
+			if (!target) return;
+			table = target.tagName === 'TABLE' ? target : (target.querySelector ? target.querySelector('table') : null);
+			if (!table) return;
+		}
+
+		const resolvedCol = resolveColumnIndex(table, this.dom, active.key, this.colIndex);
+		const key = active.key || (this.dom.getAttribute('data-ln-filter-key') || (resolvedCol !== null ? 'col' + resolvedCol : 'attr-filter'));
+		const values = active.values;
+
+		if (!_tableFilters.has(table)) {
+			_tableFilters.set(table, {});
+		}
+		const filters = _tableFilters.get(table);
+
+		if (key && values.length > 0) {
+			filters[key] = {
+				col: resolvedCol,
+				values: values.slice(),
+				attr: 'data-' + key
+			};
+		} else if (key) {
+			delete filters[key];
+		}
+
+		const bodies = table.tBodies;
+		for (let b = 0; b < bodies.length; b++) {
+			const rows = bodies[b].rows;
+			for (let r = 0; r < rows.length; r++) {
+				const row = rows[r];
+				if (_isSkipRow(row)) continue;
+
+				const cellValuesByCol = {};
+				for (let c = 0; c < row.cells.length; c++) {
+					cellValuesByCol[c] = _readCell(row.cells[c]);
+				}
+
+				if (evaluateRowFilters(cellValuesByCol, filters, row)) {
+					row.removeAttribute(HIDE_ATTR);
+				} else {
+					row.setAttribute(HIDE_ATTR, 'true');
+				}
+			}
+		}
+	};
+
+	// ─── Destroy ───────────────────────────────────────────────
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		this._destroyed = true;
+
+		const target = document.getElementById(this.targetId);
+		if (target) {
+			const table = target.tagName === 'TABLE' ? target : (target.querySelector ? target.querySelector('table') : null);
+			if (table && _tableFilters.has(table)) {
+				const filters = _tableFilters.get(table);
+				const resolvedCol = resolveColumnIndex(table, this.dom, this.dom.getAttribute('data-ln-filter-key'), this.colIndex);
+				const key = this.dom.getAttribute('data-ln-filter-key') || (resolvedCol !== null ? 'col' + resolvedCol : (this.colIndex !== null ? 'col' + this.colIndex : null));
+				if (key && filters[key]) {
+					delete filters[key];
+					this._filterTableRows({ key: null, values: [] }, table);
+				}
+				if (Object.keys(filters).length === 0) _tableFilters.delete(table);
+			}
+		}
+
+		if (this._onDomChange) {
+			this.dom.removeEventListener('change', this._onDomChange);
+			delete this._onDomChange;
+		}
+
+		if (this.hashEnabled && this._onHashChange) {
+			window.removeEventListener('hashchange', this._onHashChange);
+		}
+
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	// ─── Attribute Sync ────────────────────────────────────────
+
+	function _syncAttribute(el, attrName) {
+		const instance = el[DOM_ATTRIBUTE];
+		if (!instance || instance._destroyed) return;
+
+		if (attrName === HASH_ATTR) {
+			if (instance.hashEnabled && instance._onHashChange) {
+				window.removeEventListener('hashchange', instance._onHashChange);
+			}
+			instance.nsKey = resolveHashNamespace(el, 'filter');
+			instance.hashEnabled = !!instance.nsKey;
+			if (instance.hashEnabled) {
+				window.addEventListener('hashchange', instance._onHashChange);
+			}
+		} else if (attrName === VALUES_ATTR) {
+			const values = decodeFilterValues(el.getAttribute(VALUES_ATTR));
+			const keyEl = el.querySelector('[' + KEY_ATTR + ']');
+			const key = keyEl ? keyEl.getAttribute(KEY_ATTR) : null;
+			if (key) {
+				_applyInputValues(el, key, values);
+				instance._render();
+			}
+		}
+	}
+
+	// ─── Registration ──────────────────────────────────────────
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-filter', {
+		attributes: ATTRIBUTES,
+		persist: {
+			attr: VALUES_ATTR,
+			hashActive: function (el) { return !!resolveHashNamespace(el, 'filter'); }
+		}
+	});
+})();